I have basic knowledge in html,css and good knowledge in JS. But I have problems with putting all this together. I mostly develop for Android, I mean native apps. I have good understanding of Android layout. Concept of dynamic layout is great in android, when I develop apps I try to use relative positions and dynamic sizes whenever it is possible, like match_parent,wrap_content. They are really powerful, apps looks great on any screen. Also there is such measure in android called dp density independent pixels. This is also great concept.
So I want to dive into web page development, but I don't know common patterns, techniques for building responsive and flexible pages.
I know a little bit about #media and viewport directives for CSS but I again I cannot put together all my knowledge to start building responsive web pages.
For instance is it better to use percantage instead of px, as I can see mostly px are used , I cannot understand this concept why not to use percantage everywhere to make page responsive ?
Maybe I am missing something important in web page development, so why I am asking about advice.
Please suggest maybe some good articles about current best practices for building responsive web pages(based on most popular engines Wordpress,Drupal,Joomla) or from the scratch for better understanding.
Also one important question is how to build web page mobile friendly and so on.
Thank you so much
If you are wanting to get going quickly with responsive web design, consider starting with one of the many established frameworks like Bootstrap or Foundation or Skeleton. There are plenty of others as well.
They will save you heaps of time at the start, and you'll get good cross-browser results. Pick one you like, jump in and then learn more as you go!
Good luck!
To design a responsive web page there are two option :
1) design to website one for computers and another one for mobile like facebook
2) same design
there are many techniques to responsive design :
1) you can use percentage for all your content but you must use many calculations to it
2) you can use grid system from bootstrap
3) you can use media and smallest your content and test it by your browser like firefox for responsive design view
4) you can mix between percentage and media .
in this techniques you must to know postion and display and how its works
main divs must be in percentage like body or main wrapper width 100% and inside divs must depends on thier width
Related
I am starting to build my angularjs material mobile site. I am taking an existing desktop site already built and making it responsize for mobile.
I added the following tag in my header HTML code:
<meta name="viewport" content="width=device-width, initial-scale=1">
Upon refreshing im noticing that everything now appears to be zoomed in and font size had increased. Ive been adding style tags to reduce the font size manually but its getting really teidous and this site needs to adjust to tablets as well.
Cant seem to find any documentation that shows best practices on how to handle this. Am I suppose to play with the intial-scale value in my meta tag and lower it until I find a sweet spot that would work ith all my devices? Or am I suppose to play with the CSS and lower the font size of all components manually?
I am a bit confused on what best practices are for this. The AngularJS Material website has no mention of viewport issues. Would anyone be able to assist or provide some insight?
AngularJS Material works with breakpoints, as most style frameworks do.
You can find a reference for the breakpoints here: https://material.angularjs.org/1.1.5/layout/introduction
If you are new to responsive design, then you should start by some basics, as in what actually is a viewport, what does it mean?
The browser's viewport is the area of the window in which web content
can be seen. This is often not the same size as the rendered page, in
which case the browser provides scrollbars for the user to scroll
around and access all the content.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
In your meta tag, you define the viewport behavior, and what you defined is pretty much the standard to go by.
The reason why your font-sizes are changing is most likely because the app had initially styled them one way without a defined viewport, and now that your viewport has been defined, you're seeing a different scaling.
Now, another very important point I noted in the beginning is breakpoints, what are breakpoints and how do we use them? And to address a part of your own question, what's the best practice?
If you are familiar with classic CSS, then breakpoints can be referred to as media queries.
Media queries are useful when you want to modify your site or app
depending on a device's general type (such as print vs. screen) or
specific characteristics and parameters (such as screen resolution or
browser viewport width).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Media queries are used to define style changes, based on a given device width (and/or height). In most cases, you go by the width definition alone (it's also what you'll see as referred units in various style library docs, such as AngularJS Material).
The exception to only defining media queries by width, is when you want to be very specific towards tablets. This is because bigger tablet sizes collide with desktop breakpoints, which is usually standardized to begin at 960px (sometimes you'll see 958px or 959.8px).
Now, what is considered best practice?
The best practice for responsive design is commonly referred to as the "mobile first" approach/design. You start by designing for the lowest screen resolution you want to support (280px for very outdated devices, 320px by today's standards) and work your way up.
Mobile-first design is a key ingredient to successful product design.
Designing for the smallest screens first, and then working your way up
empowers designers to focus on the core functions of their product.
When you focus on the core of your product and strip away the rest,
you are able to pinpoint the most important UX components of the
product.
Source: https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
Extra: https://anglestudios.co.uk/blog/why-mobile-first-web-design-is-becoming-more-important/
You can find various articles on the mobile approach very quickly by doing a very simple Google search query if you want more references etc.
My advice, would be to familiarize yourself by using the defined breakpoints in AngularJS Material, and use the same breakpoints in your own custom CSS if you want to apply more custom styling that's not easily achievable by native uses of AngularJS Material.
This way, you'll learn the basics, get familiar with the concept, and then, in the future, you can start thinking about incorporating things like NativeScript with Angular, which is what you'd ideally be using in a mobile app development environment.
Today we’re happy to announce an exciting new way to build web and
mobile apps with Angular and NativeScript.
First, some background: since the beginning of Angular, you could use
NativeScript with Angular to build mobile apps.
NativeScript is an open source framework for building truly native
mobile apps with JavaScript. It lets you use your existing Angular
skills, and as a result you get a native UI & performance on iOS and
Android.
Source: https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
Link to NativeScript, here.
Happy Learning & Coding!
I am jumping from Core Java/OSGi into the mobile space, for my initial project I am putting together a little Cordova / Famous / Angular app. I would like to display an image that fills the top half of the screen (100% width x 50% height) and then use a lightbox that transitions between images.
I am having a hard time finding resources that describe best practices for managing image resources. Some of my questions include:
My assumption is you want to standardize your images to a certain size and target density. What are the size x density combinations I should be targeting?
Since this will be a background image, is it better to use a <span> and set the background-image attribute or use an <img>?
How does the above choice of tag change if I wanted to have a mirrored effect? Should I stick to the <img> and set webkit-box-reflect or use another <span> combined with some rotation?
The idea is to fill the space, which will mean that on some devices either the horizontal or vertical edges may not be visible. Ultimately, I know the best answer will be finding something that works and just sticking with that.
What are some reliable resources that describe best practices for image management, specifically related to managing images for mobile devices?
Thanks,
JD
There are many resources out there. You can easily find many Videos, tutorials, articles etc.
I suggest to start with following. They cover almost all aspects including graphics, performance, quality of an intuitive app.
Apple iOS
Learn how to build the polished, engaging, and intuitive apps that Apple customers expect
https://developer.apple.com/design/
https://developer.apple.com/accessibility/
Android
Design and build apps the right way. Learn how to create apps that look great and perform well on as many devices as possible, from phones to tablets and more.
http://developer.android.com/design/index.html
http://developer.android.com/guide/practices/index.html
IBM Mobile Solutions Best Practices
Starting a new mobile development project? These best practices are general in scope and can help you plan your app's architecture and progress through front-end development. (These practices are not specific to any particular Worklight release.)
http://www.ibm.com/developerworks/mobile/worklight/best-practices.html
See Images related Tips.
Blackberry
When you follow best practices, you can improve the performance of your app and make it easier to debug and maintain.
http://developer.blackberry.com/html5/documentation/v2_2/best_practices_for_web_development.html
Windows Mobile Apps
http://msdn.microsoft.com/en-us/library/windows/apps/hh994633.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/hh202944(v=vs.105).aspx
http://msdn.microsoft.com/en-us/library/bb677125.aspx
Update:
Image optimization
There is another great source on Google Developers site and is specific to Image Optimization.
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
Eliminating and replacing images
Vector vs. Raster images
Implications of high-resolution screens
Optimizing vector images
Optimizing raster images
Lossless vs lossy image compression
Selecting the right image format
Tools and parameter tuning
Delivering scaled image assets
Image optimization checklist
Hope this should help.
Anyone out there done reserch or have real good experience with 3rd party scroller's for apps running in a webview? Especially with more than one divide that scrolls?? i.e. A webview with a navigation panel and a details panel.
When there is only one divide requiring a scroller, it works smoothly but in the situation above, its very choppy. I'm sure a lot of developers have encountered this issue.
I have tried iScroll (and is best so far) along with other plugins but the quality of the scroll is less than desirable. I can't use iFrames because I need to tweak the style of some HTML docs that are pulled from our server. I've searched online for a way to invoke the native scroller in HTML divides and haven't found a way to. Is there a way and how could I do this?
I've been playing around using API's 9 thru 15 on various devices and I'm not seeing any difference when it comes to the performance of a non-native scroller. I'm currently developing the app on 15 if this is a help to your answer. Also, I have hardware acceleration off and this works best.
I've played with jqm, Sencha, and alike and they seen to have satisfactory scroller's. Does anyone know what they use? The issue why I'm not primarily using any of these platforms is the bulk and other performance issues.
Currently I'm building an app using raw javascript and this is proving to have a significant improvement in performance over all in animations within the webview layouts - Significantly better over any of the big name cross platform solutions. Unfortunately I am not experienced enough to build my own scroller so I need to find an out of the box solution.
Any ideas, leads or solutions so others that are better at writing apps with javascript can have a fighting chance building quality apps would be very appreciated.
With you experiences and experties, please include what API level you were using.
Thnx
I did many tests about this. I won't recommend a third party scrolling based only on HTML because on my experience the problem is not the javascript, but the webview itself:
1) Iframes performance on WebView is weak weak weak. I got a nearly 40% decrease on performance for any (complicated) app just for placing it inside an iframe. Besides, they cause much more problems if you use hardware acceleration.
2) Scrolling of DIVS is acceptable if stuff in divs is simple and SHORT, but the performance decreases as you add more elaborate stuff to scroll. For example, in my case it made a difference to enclose everything in ul/li's (slower) or not (noticeabily faster). However, the feeling is not perfect, ie., if you are used to native scroll, you realise this is not native scroll.
3) Raw scrolling of the body is very good. Besides, you get native-like feedback, such as the glowing effect on overscroll, etc. But mind that this scroll is NOT using javascript, it's just a page bigger than the webview that you let the user to scroll and WebView takes care of it. In my case, this was the only acceptable scroll experience I wanted for my users.
So I came with a mixed solution: I did a JavaScript-callable Java function that would open another webview with requested size like if it was an iframe, so I could open it from HTML and fill with stuff, it was not very difficult to do, and the improvement was awesome.
More things:
4) Scrolling a WebView from Java (scrollTo) was very useful in my case, where I had a huge HTML page loaded (kind of a magazine) to be swipped. Performance if I asked the webview to scroll from Java was much, much, much better than relying on JavaScript to do the scroll.
5) Hardware-Acceleration improves the scroll speed a 100% -setLayerType(HARDWARE)- but to be able to use it you have to keep you html very very simple. stuff like Display:none/block, etc completely break the application (see WebView fails to render until touched Android 4.2.2 for more info)
6) HTML5 animations on big images completely kill the scrolling experience.
7) All this is not valid in a couple months, goole is replacing the rendering engine to "Blink", so who knows what's gonna happen. I am restless.
Let me start by giving a bit of background on me so you know what my status is, I'm a experienced web developer, have knowledge of design patterns, and come from a background of performance and optimizations.
However, most of my background is server-side down to the server OS and it's config. I code mainly in PHP and Python. I do know HTML, JS and CSS to a certain level - far from calling myself a front-end developer.
My question is this; I'm currently working on a small personal project in which i have a single web page (the main part of it anyway) which has basically a map (Google map), a side bar (show relevant data on the map) and a top bar with controls (to effect what's visible on the map+side bar).
This page is highly "interactive" and every action, whether on the map, the sidebar or the controls effects any number of other elements. for example, clicking somewhere on a map, might highlight a sidebar item, and vise versa. (it could be that for every action there is a opposite action, or not... 1 way actions/2 way actions)
What are the "best practices" or best design patterns to build the JS library to power these interactions? I'm trying to avoid repeating myself in the code and also making it easy to maintain and add "actions/interaction" in the future.
I was thinking of building a PageManager object (of sorts) which has all these "events" then use JQuery to add these custom events thus enabling the correlation of 2 way actions...
I would like to know how you would go about designing the main JS and any other tips you client-side guru's might have :)
Good day and thanks for all the fish .. i mean tips..
Ken.
Microsoft recently created a patterns & practices project called Project Silk: Client-Side Web Development for Modern Browsers. Its targeted at javascript and jQuery developers.
I have been asked to create a website where the homepage consists of a fading image slideshow and a navigation bar at the bottom of the page. The client wants the image to cover the entire screen with the exception of this nav bar with a pause/play button at the top right of the screen.
I have built this using the supersized jquery function and made a few tweaks, but there seems to be performance issues with the fading effect (its very static and transitions dont appear to flow very smoothly).
Before I get stuck into the remainder of the site, I want some advice from the seasoned experts out there on using this function, or the jbgallery jquery function I have recently come across. Alternatively what is the general consensus on building the whole site in flash.
I haved used flash sparingly before due to CMS issues (which I have now worked around) and ipad display problems etc so would need to do a bit of learning to go down this route but am more than happy to adopt the approach if people really think it is worthwhile. My experience to date has consisted of including swf animations and components within php pages populated via mysql using xml files.
Looking forward to any and all advice (not simply for this project but future ones aswell!).
Thanks
JD
I'm actually trying to work out the exact same problem right now. I don't have a perfect/easy solution yet, but here's something that might work:
http://playground.benbarnett.net/jquery-animate-enhanced/
It's a jQuery plugin that takes your standard animate() calls (and a few others) and uses CSS3 transforms when possible. This will theoretically improve the frame rate of transitions since CSS3 effects perform better in modern browsers. I have smaller demos working, but am having trouble getting a lower frame rate for full-browser images.