Responsive Web Development Patterns

1 Patterns Slides: bit.ly/rwd-patterns Responsive Web Development @BradBroulik | [email protected]
BradBroulik.blogspot.com

2 Responsive in the real world…

3 http://i.imgur.com/dbHxR5I.gif Responsive Table

4 http://www.masstechnology.com/blog/2013/december/responsive-websites-for-healthcare/ http://imaginativehealthcare.com/2013/12-hospital-responsive-websites Responsive Health Sites

5 What % of websites are responsive? http://www.sitepoint.com/why-the-web-is-ready-for-responsive-web-design/ 15%

6 “Responsive web design,” as coined by Ethan Marcotte, means
“ﬂuid grids, ﬂuid images/media & media queries.”

7 The Responsive Advantage

8 No device customer left behind http://www.onbile.com/info/responsive-web-design-advantages/

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 Responsive Building Blocks 1) Fluid layouts 2) Fluid images/media
3) Media queries 4) Breakpoints

11 #1 Fluid Layouts Static Fluid Fluid Formula: result =
target / context

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 #2 Fluid Images/Media

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 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 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 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 #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 Mostly Fluid Layout Shifter Basic Gallery Mondrian Column Drop
http://bradfrost.github.io/this-is-responsive/patterns.html Layout Patterns

20 Mostly Fluid

21 Column Drop

22 Layout Shifter

23 Mondrian

24 Basic Gallery

25 Responsive Images http://picture.responsiveimages.org/

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 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 deﬁned 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 <img! ! ! srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"!
! ! sizes=“100vw"! ! ! src="small.jpg"! ! ! alt=“pic" />! ! Use Case: ﬂuid 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 ﬁles’ 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 <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 Art direction This technique allows us to use smaller
images that appear larger on smaller viewports by cropping the subject of the photo.

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 <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 Responsible Icons Grumpicon http://ﬁlamentgroup.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 beneﬁt of supporting multiple colors, gradients, opacity and all kinds of other visual goodness that icon fonts can’t match.

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 Responsive Videos http://alistapart.com/article/creating-intrinsic-ratios-for-video

36 Responsive Maps NOTE: Does this technique look familiar? It
uses the same “intrinsic ratio” strategy we used for responsive videos.

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 http://ﬁlamentgroup.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 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 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 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 Responsive Workﬂow Patterns Nested doll Bento Box Append around

43 Nested doll

44 Bento Box

45 Responsive Frameworks Foundation vs Bootstrap: https://medium.com/frontend-and-beyond/8b3812c7007c

46 http://jquerymobile.com/

47 http://getbootstrap.com/

48 http://foundation.zurb.com

49 Responsive Style guides Style guides promote consistency and provide
everyone with a set of reusable components.

50 Third-party Services Responsive Testing Tools Actual Devices Emulators

51 Actual Devices http://www.ﬂickr.com/photos/lukew/10412439655/ TIP: Prefer to test on the
actual devices that are most popular according to your analytics.

52 Emulators http://www.mobilexweb.com/emulators Chrome Canary’s new Mobile Emulation Firefox's Responsive
Design View

53 Third-party Services http://deviceanywhere.com/ http://www.perfectomobile.com/

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 ﬁrst 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 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 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 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 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 Securing Responsive Sites Request Forwarding WIFI Networks SSL Stripping
MiTM SSL Certiﬁcates HTTP Strict Transport Security

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 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 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 conﬁdentiality (encryption) and integrity (trusted certiﬁcates). The browser will warn you if you are communicating with an untrusted party (DEMO).

63 Responsive Project Strategies http://bradfrostweb.com/blog/post/responsive-strategy/ Responsive Retroﬁtting Responsive Mobile Sites
Mobile-First Responsive

64 http://bradfrostweb.com/blog/post/responsive-strategy/ Responsive Retroﬁtting “Responsive retroﬁtting is the process of
taking an existing desktop-only website, and ‘making it responsive’ after the fact.”

65 http://bradfrostweb.com/blog/post/responsive-strategy/ “Taking a separate m-dot site that employs responsive
design techniques.” Responsive Mobile Sites

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 bradfrost.github.io/this-is-responsive/resources.html http://responsivedesignweekly.com/

68 Inspiration

69 Thank You! @BradBroulik BradBroulik.blogspot.com [email protected] ! ! Slides: bit.ly/rwd-patterns

Responsive Web Development Patterns

Responsive Web Development Patterns

More Decks by Brad Broulik

Other Decks in Technology

Featured

Transcript