What is responsive - and do I need it?
•
1 recomendación•710 vistas
My slides of my IPC 2015 Talk.
Recomendados
Recomendados
Más contenido relacionado
Similar a What is responsive - and do I need it?
Similar a What is responsive - and do I need it? (20)
Más de Carsten Sandtner
Más de Carsten Sandtner (14)
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