An Introduction to Responsive Design Principles and Best Practices
•
5 gostaram•996 visualizações
This document introduces responsive design and discusses how to build websites flexibly for different screen sizes and devices. It answers common questions about responsive design, advocates flexibility over adapting to specific devices, and provides tips on content optimization, legacy browser support, responsive tools, and following a responsive design process.
Recomendados
Recomendados
Mais conteúdo relacionado
Semelhante a An Introduction to Responsive Design Principles and Best Practices
Semelhante a An Introduction to Responsive Design Principles and Best Practices (20)
Mais de Valtech UK
Mais de Valtech UK (20)
Último
Último (20)
An Introduction to Responsive Design Principles and Best Practices
- 2. Henrik Ekelöf Robert Piirainen @henrikekelof @robertpiira
- 3. ‣ Introduction to Responsive Design ‣ Answering common questions ‣ The way forward is flexibility, not adapting to popular devices
- 5. What it is: - A new cool way to build mobile web
- 6. In fact:
- 7. is no
- 8. There is not a specific Web for mobile devices. It’s the same web.
- 10. 640 x 480 800 x 600 1024 x 768
- 12. 1024 x 768 320 x 480
- 14. 768 x 1024 1024 x 768 320 x 480
- 16. The web has moved beyond the desktop, and it’s not turning back.
- 18. whatever device or screen size
- 19. Responsive Design Flexible Media Flexible grids media queries
- 20. Grid Layout
- 25. Flexible Media
- 27. Media CSS3 Queries
- 31. Flexible Media Flexible grids media queries
- 32. Problems and Solutions
- 33. Wallpapers
- 38. Optimisation of background images in CSS ‣ Use Data URIs for images to be displayed in all sizes
- 40. Optimization of background images in CSS ‣ Use Data URIs for images to be displayed in all sizes ‣ Use sprites
- 41. Sprites
- 42. Optimisation of background images in CSS ‣ Use Data URIs for images to be displayed in all sizes ‣ Use sprites ‣ Do not mix images for different screen widths in the same sprite
- 43. Inline Pictures
- 48. Content Optimisation images ‣ Use “Lazy Load” if you have many (or large) images that only appear on certain screen widths.
- 49. <img src="pixel.gif" data-original="example.jpg"> <img src="example.jpg">
- 50. Content Optimisation images ‣ Use “Lazy Load” if you have many (or large) images that only appear on certain screen widths. ‣ Resize images on the server
- 51. <!DOCTYPE html> <html> <head> <script> document.cookie = 'resolution=' + Math.max(screen.width, screen.height) + '; path=/'; </script> </head> <body> <img src="example.jpg" alt="">
- 52. Pictures ‣ The background images downloaded ‣ All inline images downloaded regardless of whether they are shown or not
- 53. Legacy versions of Internet Explorer (IE8 and older)
- 54. /* Style for small screens and basic style for all */.example { ... }@media all and (min-width: 321px) { /* Style for a slightly wider device (like the iPhone portrait) */ .example { ... } } @media all and (min-width: 481px) { /* Style for a even wider device (like the iPhone landscape) */ .example { ... } } @media all and (min-width: 769px) { /* Style for wide screens */ .example { ... } }
- 55. <!DOCTYPE html> <html> <head> <!--[if (gte IE 9)|!(IE)]><!--> <link rel="stylesheet" href="rwd.css"> <!--<![endif]--> <!--[if (lte IE 8)]> <link rel="stylesheet" href="rwd-ie.css"> <![endif]--> ...
- 61. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.
- 62. The journey begins by letting go of control, and becoming flexible.
- 63. A flexible web!
- 64. A flexible web ‣ Large variations in screen resolutions
- 65. Top 10 screen resolutions in Sweden during the last year
- 66. A flexible web ‣ Large variations in screen resolutionsVarious devices with different characteristics
- 68. Priority: 1 As an increasing variety of screen and window sizes among users is the best solution to create a layout that is flexible and can adapt to user's needs and wishes. Avoid making a site with fixed layout. — 24-hour WebCreate a design that works regardless of window and screen size
- 71. Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business.
- 72. Responsive design Semantically, meaningful markup Separate design and layout Introduce layout styles with media queries "Mobile" CSSs + media queries = Desktop site
- 74. Responsive Tools
- 76. ‣ Rendering of font differs depending on browsers and operating systems ‣ Different browsers ‣ Impossible to visualize a responsive layout
- 88. Summary ‣ Introduction to Responsive DesignAnswering common questions ‣ The way forward is flexibility, not adapting to popular devices
- 89. Henrik Ekelöf Robert Piirainen @henrikekelof @robertpiira