What is responsive - and do I need it?
•
1 like•710 views
Responsive design allows webpages to adapt to different screen sizes and devices by using fluid widths, images, and CSS media queries. It began in 2010 with a combination of flexible layouts, media queries, and using the viewport to optimize content for varied screens. While responsive design improves the user experience across devices, developers must address challenges like conditionally loading appropriate images, scripts, and styles to avoid delivering unnecessary content.
Report
Share
What is responsive - and do I need it?
- 1. What is responsive? And do I need it? Carsten Sandtner IPC 2015 @casarock
- 2. Carsten Sandtner Head of Development @mediaman GmbH Web Developer since 1998 @casarock
- 4. First responsive Webpage! The first website!
- 6. Design for one resolution Bring print to the web (1:1) Pixelperfect
- 8. dummy.gif
- 13. 1997 Media Queries: HTML4 considers to include them
- 17. Combination of: media queries flexible widths flexible images RWD 2010
- 20. „The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.“ MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
- 21. display: box; ~2009 Flexbox (first version)
- 22. display: flexbox; ~2011 Flexbox (second version)
- 23. display: flex; > 2011 Flexbox (specification!)
- 24. RWD - in a nutshell https://flic.kr/p/bYxKaN
- 25. Liquid: fluid layout Adaptive: pre-defined layout widths media queries Definitions liquid vs. adaptive
- 27. „Optimal rendering across devices“Goal
- 30. What could possibly go wrong?
- 31. Image Sizes too Big Megabytes of data! Even for mobile.
- 32. Images look a little fuzzy in high resolutions. Image Sizes too small
- 33. Solution?
- 34. <img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…"> HTML/CSS srcset
- 35. <picture alt="description"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 40em)"> <source src="large.jpg" media="(min-width: 80em)"> </picture> HTML/CSS picture
- 36. Support…
- 37. Browser Support srcset vs. picture http://caniuse.com
- 40. Mobile users want compact content Why should I deliver hidden content then? Content same same but different
- 41. Rearrange Content on different View Ports? Content structure
- 42. .some-element { display: flex; flex-direction: row; order: 1; } Flexbox FTW!
- 44. Why load and parse unused Javascripts and CSS? Content Javascripts/CSS
- 45. <!DOCTYPE HTML> <html lang="en-US"> <head> … <link rel=“stylesheet" media=“screen and (min-width: 600px)" href=“small.css"> <link rel=“stylesheet" media=“screen and (min-width: 2048px)“ href=“biggest.css"> … </head> <body> … </body> </html> Conditional loading? CSS
- 48. Don’t even think about parallax… Don’t even think about parallax on mobile! Effects
- 50. <script> if (document.documentElement.clientWidth > 640) { document.write('<script src="//ads.com/banner.js"></script>'); document.write('<script src="livechat.js"></script>'); } </script> Conditional loading?
- 51. <script data-mq="(min-width: 640px)" data-src="//ads.com/banner.js"></script> <script data-mq="(min-width: 640px)" data-src="livechat.js" ></script> <script> var scripts = document.getElementsByTagName("script"); for(var i=0;i<scripts.length; i++) { // Test if the Media Query matches var mq = scripts[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (async) element. var s = document.createElement("script"); s.type = 'text/javascript'; s.src = scripts[i].getAttribute("data-src"); document.body.appendChild(s); } } </script> Better Conditional loading? https://www.safaribooksonline.com/library/view/responsive-fast/9781491912935/ch04.html
- 53. Mobile first?
- 54. Use Case!
- 55. Consider Same content across devices? Page with a lot of visuals? Target group? Target screen size? Content rich sites
- 56. m.domains?
- 57. Pro lightweight mobile optimized Con SEO „One URL per Page“ redirects m.domain
- 58. Should I….
- 60. Feature detection Conditional loading helpers Modernizr features
- 61. <script> if (Modernizr.webgl){ doFancyStuff(); } else { doSlowFancyStuff(); } </script> Feature detection
- 62. <script> Modernizr.load({ test: Modernizr.geolocation, yep : ['geo.js', 'superfancy.css'] nope: 'geo-polyfill.js' }); </script> Conditional loading
- 63. It helps a lot, but you still detect everything at your clients browser! Modernizr Swiss army knife?
- 64. RWD starts at your Server https://flic.kr/p/ac3oaX
- 66. Viewport Interaction model (touch?) Hardware (Sensors) Device-Description- Repository more than screen sizes…
- 67. Some Images are scaleable some not Don’t load more than you’re going to show! Image optimization Why?
- 68. „optimized“ HTML across Screens Less logic, less Javascript! Hidden content not necessary Preprocessing HTML
- 70. Pro less bloated HTML only needed scripts will get loaded Contra higher server load device detection is not reliable! Server-Site Rendering
- 72. Responsive Design + Server Side Components
- 73. 1. Get a DDR 2. Write Server-Side Code using DDR (e.g. conditional loading etc.) 3. Enhance rendered HTML on Client-Side RESS In a nutshell
- 74. 1. Get a DDR 2. Detect features on Client- Side 3. Write Server-Side Code using DDR (e.g. conditional loading etc.) 4. Set Cookies, reload. RESS In a nutshell
- 75. Websites should be loaded FAST Websites should have a nice UX Content should be optimized! Content should be meaningful! Why such a hassle?
- 77. Know your use case Involve your server RWD is NOT the holy grail! sometimes a mobile site makes sense Don’t forget the user! Conclusion