11+ tips to optimize your app for multiple devices (smaller screens)
If your app is going to be accessed via multiple devices, here’s what you can do to make sure you target even the smallest screens properly:
0. Mobile first design & implementation
0b. Switch mobile vs desktop etc on the *server-side* (this saves client bandwidth and can be more reliable than client-side device detection)
0c. Server-side rendering of HTML: content first, JavaScript later
0d. Client-side caching: service workers, conventional HTTP caching
1. Render larger clickable areas: Design your touch areas to be 40 pixels or wider with at least 10 pixels between targets
2. Don’t hide content behind “hover” interactions: Touch-enabled devices cannot detect and relay to the browser when a finger is not touching the screen
3. Use modern HTML5 input types in your forms: This will enable the browser to make an appropriate keyboard available with accelerator keys suitable for your field (for example“tel” telephone number input will force the browser to display a phone keypad)
4. Lazy-load secondary content on small screens: Never hide content; instead give users the ability to load additional/secondary content as they need it
5. Minify and bundle: Use minification tools to shrink scripts and style sheets, then bundle them together to reduce the number of requests
6. Be adaptive: Combine media queries and JavaScript to adapt complex UIs
7. Replace UI icon images with fonts: Use font icons to reduce page size and increase the quality of UI iconography
8. Scale fonts appropriately: Be sure to scale fonts up/down as needed for optimal readability
9. Enable compression: Use GZIP to reduce the number of bytes a page is sending across the network
10. Use a Content Delivery Network (CDN): CDNs offer high availability, lower network latency and lower packet loss
If your app is going to be accessed via multiple devices, here’s what you can do to make sure you target even the smallest screens properly:
0. Mobile first design & implementation
0b. Switch mobile vs desktop etc on the *server-side* (this saves client bandwidth and can be more reliable than client-side device detection)
0c. Server-side rendering of HTML: content first, JavaScript later
0d. Client-side caching: service workers, conventional HTTP caching
1. Render larger clickable areas: Design your touch areas to be 40 pixels or wider with at least 10 pixels between targets
2. Don’t hide content behind “hover” interactions: Touch-enabled devices cannot detect and relay to the browser when a finger is not touching the screen
3. Use modern HTML5 input types in your forms: This will enable the browser to make an appropriate keyboard available with accelerator keys suitable for your field (for example“tel” telephone number input will force the browser to display a phone keypad)
4. Lazy-load secondary content on small screens: Never hide content; instead give users the ability to load additional/secondary content as they need it
5. Minify and bundle: Use minification tools to shrink scripts and style sheets, then bundle them together to reduce the number of requests
6. Be adaptive: Combine media queries and JavaScript to adapt complex UIs
7. Replace UI icon images with fonts: Use font icons to reduce page size and increase the quality of UI iconography
8. Scale fonts appropriately: Be sure to scale fonts up/down as needed for optimal readability
9. Enable compression: Use GZIP to reduce the number of bytes a page is sending across the network
10. Use a Content Delivery Network (CDN): CDNs offer high availability, lower network latency and lower packet loss
___________________
credit:this post is based on a mail I got from Telerik about designing for small screens
Comments
Post a Comment