Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

2 Responsive in the real world…

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 The Responsive Advantage

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 Responsive Building Blocks 1) Fluid layouts 2) Fluid images/media 3) Media queries 4) Breakpoints

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

12 Viewports ! ! ! ! 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

Slide 13

Slide 13 text

13 #2 Fluid Images/Media

Slide 14

Slide 14 text

14 #3 Media Queries ! @media [not|only]? [and (: value)]* {! rules! }! ! http://www.w3.org/TR/css3-mediaqueries/ ! ! @media (min-width: 640px) {! html {! font: normal 100% Tablet-Font;! }! }! CSS Rule Breakpoint Media Query

Slide 15

Slide 15 text

15 Embedded ! 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;! }! }! ! TIP: With embedded stylesheets all conditional media queries are downloaded but you gain the advantage of only one HTTP request.

Slide 16

Slide 16 text

16 External ! 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.

Slide 17

Slide 17 text

17 eCSSential ! eCSSential({! "(min-width: 600px)": "//fonts.googleapis.com/css?family=Special+Elite",! "(min-width: 860px)": "//fonts.googleapis.com/css?family=Condiment"! });! TIP: eCSSential, by Scott Jehl (https:/ /github.com/scottjehl/eCSSential), will only download the stylesheet if the media query could evaluate to true

Slide 18

Slide 18 text

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/

Slide 19

Slide 19 text

19 Mostly Fluid Layout Shifter Basic Gallery Mondrian Column Drop http://bradfrost.github.io/this-is-responsive/patterns.html Layout Patterns

Slide 20

Slide 20 text

20 Mostly Fluid

Slide 21

Slide 21 text

21 Column Drop

Slide 22

Slide 22 text

22 Layout Shifter

Slide 23

Slide 23 text

23 Mondrian

Slide 24

Slide 24 text

24 Basic Gallery

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 Scott Jehl: https://github.com/scottjehl/picturefill ! TIP: Picturefill is a responsive image polyfill for , srcset, sizes, and more that you may begin using today! !

Slide 27

Slide 27 text

27 Use Case: device-pixel-ratio ! ! 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/

Slide 28

Slide 28 text

28 “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/

Slide 29

Slide 29 text

29 pic Use Case: variable-sized image ! sizes=“[media query] [length], [media query] [length], ! [length]! ! If no media query it is the default size

Slide 30

Slide 30 text

30 Art direction This technique allows us to use smaller images that appear larger on smaller viewports by cropping the subject of the photo.

Slide 31

Slide 31 text

31 ! ! ! ! ! ! pic! ! ! ! TIP: Prefer picture element for art-directed and type- switching use cases. Use Case: art direction Load art-directed (cropped) images when below 36ems

Slide 32

Slide 32 text

32 ! ! ! ! ! ! ! ! “logo" ! ! ! If the browser doesn’t find a compatible source type it will fallback to the img Use Case: type-switching

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

35 Responsive Videos http://alistapart.com/article/creating-intrinsic-ratios-for-video

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

42 Responsive Workflow Patterns Nested doll Bento Box Append around

Slide 43

Slide 43 text

43 Nested doll

Slide 44

Slide 44 text

44 Bento Box

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

46 http://jquerymobile.com/

Slide 47

Slide 47 text

47 http://getbootstrap.com/

Slide 48

Slide 48 text

48 http://foundation.zurb.com

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 Third-party Services Responsive Testing Tools Actual Devices Emulators

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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!

Slide 56

Slide 56 text

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!

Slide 57

Slide 57 text

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.

Slide 58

Slide 58 text

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…

Slide 59

Slide 59 text

59 Securing Responsive Sites Request Forwarding WIFI Networks SSL Stripping MiTM SSL Certificates HTTP Strict Transport Security

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

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).

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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.”

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

67 bradfrost.github.io/this-is-responsive/resources.html http://responsivedesignweekly.com/

Slide 68

Slide 68 text

68 Inspiration

Slide 69

Slide 69 text

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