Responsive Web Development Patterns

1. 1 Patterns Slides: bit.ly/rwd-patterns Responsive Web Development @BradBroulik | BradBroulik@gmail.com BradBroulik.blogspot.com
2. 2 Responsive in the real world…
3. 3 http://i.imgur.com/dbHxR5I.gif Responsive Table
4. 4 http://www.masstechnology.com/blog/2013/december/responsive-websites-for-healthcare/ http://imaginativehealthcare.com/2013/12-hospital-responsive-websites Responsive Health Sites
5. 5 What % of websites are responsive? http://www.sitepoint.com/why-the-web-is-ready-for-responsive-web-design/ 15%
6. 6 “Responsive web design,” as coined by Ethan Marcotte, means “fluid grids, fluid images/media & media queries.”
7. 7 The Responsive Advantage
8. 8 No device customer left behind http://www.onbile.com/info/responsive-web-design-advantages/
9. 9 Content Code Assets •Accessibility •Readability •Less code and content to maintain •All links work as expected •Recommended for Google SEO •Less resources necessary •Lean = improved velocity •No more device detection redirects User Experience
10. 10 Responsive Building Blocks 1) Fluid layouts 2) Fluid images/media 3) Media queries 4) Breakpoints
11. 11 #1 Fluid Layouts Static Fluid Fluid Formula: result = target / context
12. 12 Viewports <head>! ! <meta charset="utf-8">! <meta name="viewport" content="initial-scale=1 width=device-width" />! </head> Visual viewport (device width) Layout viewport NOTE: The viewport meta tag lets us control the layout viewport and scaling of many devices. with viewport without viewport
13. 13 #2 Fluid Images/Media
14. 14 #3 Media Queries ! @media [not|only]? <media_type> [and (<media_feature>: value)]* {! rules! }! ! http://www.w3.org/TR/css3-mediaqueries/ ! ! @media (min-width: 640px) {! html {! font: normal 100% Tablet-Font;! }! }! CSS Rule Breakpoint Media Query
15. 15 Embedded <style>! html {! font: normal 100% Helvetica;! }! ! @media screen and (min-width: 600px) {! html {! font: normal 100% Special Elite, Helvetica;! }! }! ! @media screen and (min-width: 860px) {! html {! font: normal 100% Condiment, Helvetica;! }! }! </style>! TIP: With embedded stylesheets all conditional media queries are downloaded but you gain the advantage of only one HTTP request.
16. 16 External <link href="//fonts.googleapis.com/css?family=Special+Elite" media="only screen and (min-width: 600px)" />! CAUTION: External media queries get downloaded even if the media query is not applied. The rationale for this is that if the browser window size is changed, those styles are ready. However, there is a solution to this problem as shown in the next example.
17. 17 eCSSential <script>! eCSSential({! "(min-width: 600px)": "//fonts.googleapis.com/css?family=Special+Elite",! "(min-width: 860px)": "//fonts.googleapis.com/css?family=Condiment"! });! </script> TIP: eCSSential, by Scott Jehl (https:/ /github.com/scottjehl/eCSSential), will only download the stylesheet if the media query could evaluate to true
18. 18 #4 Breakpoints TIP: Prefer content-driven breakpoints instead of device- driven breakpoints for a more future-friendly design. TIP: You can also set breakpoints with JavaScript with matchmedia.js https://github.com/paulirish/matchMedia.js/
19. 19 Mostly Fluid Layout Shifter Basic Gallery Mondrian Column Drop http://bradfrost.github.io/this-is-responsive/patterns.html Layout Patterns
20. 20 Mostly Fluid
21. 21 Column Drop
22. 22 Layout Shifter
23. 23 Mondrian
24. 24 Basic Gallery
25. 25 Responsive Images http://picture.responsiveimages.org/
26. 26 Scott Jehl: https://github.com/scottjehl/picturefill ! TIP: Picturefill is a responsive image polyfill for <picture>, srcset, sizes, and more that you may begin using today! !
27. 27 Use Case: device-pixel-ratio ! ! <img ! ! ! srcset="small.jpg 1x, medium.jpg 2x"! ! ! src="small.jpg"! ! ! alt="pic" />! ! ! ! ! ! srcset: set of sources with w (width) or x (resolution) descriptors. small.jpg (320 x 240 px) medium.jpg (640 x 480 px) CAUTION: srcset can be defined with w (width) or x (resolution) descriptors but not both. They do not mix. src: fallback img if srcset is not supported. http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
28. 28 <img! ! ! srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"! ! ! sizes=“100vw"! ! ! src="small.jpg"! ! ! alt=“pic" />! ! Use Case: fluid image Variable Known by browser when it’s loading the page? viewport dimensions yes image size relative to viewport yes via sizes screen density yes source files’ dimensions yes via srcset NOTE: We tell the browser the rendered size of our images and the browser picks the preferred image for it’s container. Very Cool! sizes: can be absolute (px or em), relative to the viewport (vw), or dynamic calc(.333 * 100vw -12em) http://ericportis.com/posts/2014/srcset-sizes/
29. 29 <img! ! srcset="large.jpg 1024w,! medium.jpg 640w,! small.jpg 320w"! sizes="(min-width: 36em) 33.3vw,! 100vw”! src="small.jpg"! alt="pic" /> Use Case: variable-sized image ! sizes=“[media query] [length], [media query] [length], ! [length]! ! If no media query it is the default size
30. 30 Art direction This technique allows us to use smaller images that appear larger on smaller viewports by cropping the subject of the photo.
31. 31 <picture>! ! <source ! ! ! media="(min-width: 36em)"! ! !srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"! ! ! sizes="33.3vw" />! ! <source ! ! ! srcset="cropped-large.jpg 2x, cropped-small.jpg 1x" />! ! <img src="images/small.jpg" alt="pic" />! </picture>! ! ! TIP: Prefer picture element for art-directed and type- switching use cases. Use Case: art direction Load art-directed (cropped) images when below 36ems
32. 32 <picture>! ! ! <source type="image/svg+xml" srcset="logo.svg">! ! ! <source type="image/png" srcset="logo.png">! ! <img src="logo.gif" alt=“logo" /> ! </picture>! ! If the browser doesn’t find a compatible source type it will fallback to the img Use Case: type-switching
33. 33 Responsible Icons Grumpicon http://filamentgroup.com/lab/grunticon/ Icon Fonts TIP: SVG is also a great solution for both high-resolution displays and images that scale across screen sizes. However, their only problem is lack of tools and browser support (Android 2-, IE8-): http:/ /caniuse.com/ TIP: SVG offers all the advantages of icon-based vectors and also have the added benefit of supporting multiple colors, gradients, opacity and all kinds of other visual goodness that icon fonts can’t match.
34. TIP: Inline the SVG for better load-time performance, simpler DOM manipulation, and linkability. 34 Dynamically show, hide, and bind data. Sharp at any resolution or size. SVG = Awesome Dynamically simulate a loading indicator.
35. 35 Responsive Videos http://alistapart.com/article/creating-intrinsic-ratios-for-video
36. 36 Responsive Maps NOTE: Does this technique look familiar? It uses the same “intrinsic ratio” strategy we used for responsive videos.
37. 37 100% 140% Elastic Layouts TIP: The preferred line length is between 45 and 70 characters for ideal readability. Elastic layouts as shown above help ensure the ideal line length regardless of the font size or zoom. Elastic layouts adjust based on the size of the browser’s font size.
38. 38 http://filamentgroup.com/lab/ajax_includes_modular_content/ Ajax- include Pattern NOTE: Entertainment articles are lazy loaded after page load NOTE: Technology articles are only loaded when min-width: 30em
39. 39 Responsive Navigation http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/ The Footer Anchor Top Nav or Do Nothing The Select Menu The Toggle Hybrid Solutions Off- Canvas Flyout
40. 40 http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle The Toggle Bootstrap’s site uses toggle navigation The Filament Group’s site uses toggle navigation Foundation’s toggle example
41. 41 http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/#off-canvas Off- Canvas Flyout jQuery Mobile off canvas example Foundation’s site uses off- canvas flyout navigation Bootstrap off-canvas flyout example (beta) The Filament Group’s off- canvas flyout navigation
42. 42 Responsive Workflow Patterns Nested doll Bento Box Append around
43. 43 Nested doll
44. 44 Bento Box
45. 45 Responsive Frameworks Foundation vs Bootstrap: https://medium.com/frontend-and-beyond/8b3812c7007c
46. 46 http://jquerymobile.com/
47. 47 http://getbootstrap.com/
48. 48 http://foundation.zurb.com
49. 49 Responsive Style guides Style guides promote consistency and provide everyone with a set of reusable components.
50. 50 Third-party Services Responsive Testing Tools Actual Devices Emulators
51. 51 Actual Devices http://www.flickr.com/photos/lukew/10412439655/ TIP: Prefer to test on the actual devices that are most popular according to your analytics.
52. 52 Emulators http://www.mobilexweb.com/emulators Chrome Canary’s new Mobile Emulation Firefox's Responsive Design View
53. 53 Third-party Services http://deviceanywhere.com/ http://www.perfectomobile.com/
54. 54 Responsive Performance http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/ http://blog.kissmetrics.com/loading-time/?wide=1 •Fewer HTTP requests. •Compress images (ImageOptim, PNG Crush). •Load visible content first or defer everything else. •Minify and merge JavaScript assets. •Prefer sprites or use Data URI for images. •Use CDNs when available. •Avoid geolocation on initial home screen. •Dedicate time for performance testing. •Web storage. •Networks and devices will eventually get faster. Performance tips “86% of sites listed on mediaqueri.es weighed roughly the same when loaded in the smallest window, compared to the largest one. In other words, the m-dot site is still downloading the full website content.” -- Guy Podjarny
55. 55 Download and Hide #1 reason for bloat Desktop Article hidden in DOM TIP: Instead of hiding unnecessary markup in the DOM with display:none don’t even download it!
56. 56 Download and Shrink #2 reason for bloat Large desktop image scaled down TIP: Instead of shrinking large image assets within small viewports, download the optimized smaller images!
57. 57 Automated Testing Tools https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting http://www.webpagetest.org/ logger off logger on TIP: Verify your site is 20% faster than the competition.
58. 58 Tasks for performance optimization http://yeoman.io/blog/performance-optimization.html • Remove unused CSS • Minify CSS • Inline CSS • Minify HTML • Combine media queries • Compress & optimize images • Minify SVG images • Minify, compress JS • And many more…
59. 59 Securing Responsive Sites Request Forwarding WIFI Networks SSL Stripping MiTM SSL Certificates HTTP Strict Transport Security
60. 60 Security Threats MiTM SSL Stripping Request Forwarding WIFI Networks Are you connected to a trusted WIFI network? Or are you connected to a malicious StarBuks_FREE_WIFI network? Even if you connect to a site that uses SSL a MiTM may strip the SSL from every request exposing your credentials. The MiTM can forward your HTTP request to their malicious site and capture your credentials.
61. 61 Original connection Victim Attacker Server Man-in-the-middle connection MiTM A single HTTP request can compromise your entire SSL site. The attacker now communicates to the victim via HTTP and hijacks your data (SSL stripping). The attacker communicates to the server via HTTPS and strips the SSL before sending the response back to the victim.
62. 62 Security Solutions SSL HTTP Strict Transport Security HSTS is a newer security solution that forces the browser to send its initial request to your site as HTTPS. This is the primary defense against SSL Stripping and other MiTM attacks. We can see if your site is using this solution by inspecting HTTP headers (DEMO). Site-wide SSL enforces confidentiality (encryption) and integrity (trusted certificates). The browser will warn you if you are communicating with an untrusted party (DEMO).
63. 63 Responsive Project Strategies http://bradfrostweb.com/blog/post/responsive-strategy/ Responsive Retrofitting Responsive Mobile Sites Mobile-First Responsive
64. 64 http://bradfrostweb.com/blog/post/responsive-strategy/ Responsive Retrofitting “Responsive retrofitting is the process of taking an existing desktop-only website, and ‘making it responsive’ after the fact.”
65. 65 http://bradfrostweb.com/blog/post/responsive-strategy/ “Taking a separate m-dot site that employs responsive design techniques.” Responsive Mobile Sites
66. 66 http://bradfrostweb.com/blog/post/responsive-strategy/ “Creating an interface that addresses the constraints of mobile (small screen, low bandwidth, etc), then progressively enhances the experience to take advantage of available screen space, features, and more.” Mobile-First Responsive
67. 67 bradfrost.github.io/this-is-responsive/resources.html http://responsivedesignweekly.com/
68. 68 Inspiration
69. 69 Thank You! @BradBroulik BradBroulik.blogspot.com BradBroulik@gmail.com ! ! Slides: bit.ly/rwd-patterns