Responsive Web Development Training

Slide deck for my Responsive Web Development training course

1. Training Express Slides: bit.ly/rwd-training Responsive Web Development @BradBroulik | BradBroulik@gmail.com BradBroulik.blogspot.com
2. 2 •Name •Company •Background •Why are you learning RWD? Introductions
3. 3 Agenda Day 1 Day 2 Day 3 •Responsive Advantages •Grab the code •Responsive Building Blocks •Fluid Layouts •Fluid Images/Media •Media Queries •Breakpoints •HTML5 & CSS3 Fundamentals •Layout Patterns •Mostly Fluid Pattern •Column Drop Pattern •Layout Shifter Pattern •Mondrian Pattern •Basic Gallery Pattern •Exercise #1: Building a Fluid Layout •Exercise #2: Building a Responsive Layout •Responsive Images •Picturefill •Use Cases •Responsible Icons •Responsive Videos •Responsive Maps •Exercise #3: Responsive Media •Responsive Content •Flexible Fonts •Elastic Layouts •Responsive Fonts •Responsible Fonts •Lazy Loading •Content Ordering •Exercise #4: Responsive Typography •Responsive Navigation •Toggle Navigation •Off -Canvas Flyout Navigation •Exercise #5: Responsive Navigation •Responsive with Server-side Support (RESS) •User Agent Detection •Feature Detection •Responsive Workflow Patterns •Adaptive Design •Responsive + Adaptive = Awesomeness •Responsive Style Guides •Responsive Testing Tools •Actual Devices •Emulators •Simulators •Responsive Performance •Securing Responsive Sites •Responsive Project Strategies •Responsive Emails •Mobile First •Responsive Carousels •Responsive Wireframing Tools •Responsive Layouts with Flexbox •Responsive Frameworks •jQuery Mobile •Bootstrap •Foundation •Exercise #6: RWD with Bootstrap •Resources •Inspiration •Workshop: •Let’s plan your RWD strategy •Let’s implement your RWD strategy: •Make your site responsive •Let’s tackle your specific RWD challenges •Deep dive into specific RWD features
4. 4 Responsive in the real world…
5. 5 http://i.imgur.com/dbHxR5I.gif Responsive Table
6. 6 https://winnebagoind.com/ Responsive Vehicle Responsive features: Triple Slideouts Extendable Sectional Sofa Extendable Dinette Extendable Sectional Dinette Flex Bed System Comfort Sofa Sleeper
7. 7 Responsive Sites
8. 8 What % of websites are responsive? http://www.guypo.com/rwd-2014/ 40%
9. 9 “Responsive web design,” as coined by Ethan Marcotte, means “fluid grids, fluid images/media & media queries.”
10. 10 The Responsive Advantage
11. 11 No device customer left behind https://codeboxr.com/blogs/top-5-advantages-of-responsive-web-page-design/
12. 12 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
13. 13 Download code: https://github.com/BradBroulik/RWD Grab the code Download and run local Run anywhere: http://bradbroulik.github.io/RWD/home.html Run anywhere
14. 14 Responsive Building Blocks 1) Fluid layouts 2) Fluid images/media 3) Media queries 4) Breakpoints
15. 15 #1 Fluid Layouts Static Fluid
16. 16 Fluid vs Static Fluid CSS Static CSS Fluid formula: target / context = result
17. 17 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
18. 18 #2 Fluid Images/Media
19. 19 #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
20. 20 Media Query Types default
21. 21 Media Query Features NOTE: Most media features can be prefixed with “min-” or “max-” to express “greater than or equal to” or “less than or equal to” constraints.
22. 22 Embedded <style> html { font: normal 100% Helvetica; } @media (min-width: 600px) { html { font: normal 100% Special Elite, Helvetica; } } @media (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.
23. 23 External <link href="//fonts.googleapis.com/css?family=Special+Elite" media=“(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. NOTE: Modern browsers will download the CSS that currently applies first (this is a blocking request). Then after the initial page load, the browser will download the non-essential CSS.
24. 24 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
25. 25 #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 • Effective Media Queries • How to choose breakpoints
26. 26 HTML5 Cheat Sheet
27. 27 http://www.w3schools.com/cssref/ CSS3: Basics Core CSS: Part 1 Core CSS: Part II
28. 28 Mostly Fluid Layout Shifter Basic Gallery Mondrian Column Drop http://bradfrost.github.io/this-is-responsive/patterns.html Layout Patterns https://developers.google.com/web/fundamentals/layouts/rwd-patterns
29. 29 Mostly Fluid Real-world examples: http://www.antarcticstation.org/ http://www.aids.gov/ https://www.airbnb.com/
30. 30 Column Drop Real-world examples: http://modernizr.com/ http://www.bostonglobe.com/ http://weenudge.com/
31. 31 Layout Shifter Real-world examples: http://foodsense.is/
32. 32 Mondrian Real-world examples: http://www.anderssonwise.com/
33. 33 Basic Gallery Real-world examples: http://www.bradsawicki.com/ http://www.nasa.gov
34. 34 1) Let’s convert a static layout found at RWD/exercises/ex1/static.html into a fluid layout. 2) The solution for this “Mostly Fluid” layout can be found at RWD/exercises/ex1/fluid.html. Exercise #1: Building a fluid Layout Static Fluid Fluid formula: target / context = result
35. 35 Exercise #2: Building a responsive Layout 1) Update your fluid layout that you created in the prior example so it is responsive. 2) Choose a breakpoint that is most applicable for your content. 3) The solution for the exercise can be found at RWD/exercises/ex2/index.html. Is your media query mobile first?
36. 36 Responsive Images http://responsiveimages.org
37. 37 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! https://caniuse.com/picture
38. 38 Use Case: device-pixel-ratio <img srcset=“circle@1x.png 1x, circle@2x.png 2x" src=“circle@1x.png” alt="pic" /> srcset: set of sources with w (width) or x (resolution) descriptors. 1x (150 x 150 px) 2x (300 x 300 px) 3x (450 x 450 px) CAUTION: srcset can be defined with w (width) or x (resolution) descriptors but not both. They do not mix. src: fallback ing if srcset is not supported. http://www.smashingmagazine.com/2014/05/14/responsive-images-done-right-guide-picture-srcset/
39. 39 <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/
40. 40 <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
41. 41 Art direction This technique allows us to use smaller images that appear larger on smaller viewports by cropping the subject of the photo.
42. 42 <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 http://scottjehl.github.io/picturefill/#ie9
43. 43 <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 http://blog.cloudfour.com/responsive-images-101-part-7-type/
44. 44 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. SVG has reliable browser support too: http:/ /caniuse.com/svg 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.
45. TIP: Inline the SVG for better load-time performance, simpler DOM manipulation, and linkability. 45 Dynamically show, hide, and bind data. Sharp at any resolution or size. SVG = Awesome Dynamically simulate a loading indicator.
46. 46 Responsive Videos http://alistapart.com/article/creating-intrinsic-ratios-for-video
47. 47 Responsive Maps NOTE: Does this technique look familiar? It uses the same “intrinsic ratio” strategy we used for responsive videos.
48. 48 1) Update your responsive layout that you created in the prior example and add a responsive image with the Picturefill library. You may use any image you prefer. However, if you need different sized images you can use the images found at /RWD/exercises/images. 2) Add a map of your favorite city in Block C with an intrinsic ratio. 3) The solution for the exercise can be found at RWD/exercises/ex3/index.html. Exercise #3: Responsive Media large image small image map with intrinsic ratio
49. 49 Responsive Content Responsive Fonts Flexible Fonts Content Ordering Elastic Layouts Lazy Loading TIP: The mobile experience deserves just as much content as the desktop experience. On mobile, use teaser and collapsible techniques to avoid downloading the full content on initial page load. TIP: Prefer to use actual content instead of Lorem ipsum in wire frames to get a more accurate breakpoint indicator early in the design process. Responsible Fonts
50. 50 pixels percentages ems rems Flexible Fonts NOTE: Many of these new devices have a high pixel density, so a 16px font would look quite small. Most browsers get around this by reporting a different resolution to browsers. TIP: Prefer em or rem-based breakpoints. These flexible units will automatically update your media queries based on font-size adjustments.
51. 51 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.
52. 52 https://github.com/scottjehl/eCSSential Responsive Fonts TIP: Increase the font size on large layouts. TIP: For performance, we do not download the custom font on small layouts.
53. 53 Responsible Fonts TIP: Load fonts asynchronously and progressively with Google’s Web Font Loader! https://github.com/typekit/webfontloader 1. Show a fallback font while the custom fonts asynchronously load. Use a fallback font that appears similar to the custom font to avoid a Flash Of Unstyled Text (FOUT). 2. The layout will progressively enhance to the custom fonts after they are loaded. Console logs show font loading events
54. 54 http://filamentgroup.com/lab/ajax_includes_modular_content/ NOTE: Entertainment articles are lazy loaded after page load NOTE: Technology articles are only loaded when min-width: 30em Lazy Loading
55. 55 Content Ordering TIP: You may also use the AppendAround JavaScript library as a non- Flexbox solution for dynamically moving content based on media queries. https:/ /github.com/filamentgroup/AppendAround
56. 56 1) Add an article of content to Block B. If you don’t want to use real content Lorem ipsum will suffice. Update your fonts so they are flexible (accessible) with either an em-based or rem- based solution. 2) Import a custom font for Block B on larger displays using eCSSential. 3) Lazy load the map in Block C using Ajax-include. 4) The solution for the exercise can be found at RWD/exercises/ex4/index.html. Exercise #4: Responsive Typography custom font regular font lazy load map What happens to your breakpoint as you zoom in?
57. 57 Responsive Navigation http://bradfrost.github.io/this-is-responsive/patterns.html#navigation http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/ The Footer Anchor Top Nav or Do Nothing The Select Menu The Toggle Tab + Overflow Off- Canvas Flyout
58. 58 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 FlexNav
59. 59 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 https://redbooth.com/blog/hamburger-menu-iphone-app
60. 60 Code: http://codepen.io/Dreamdealer/pen/waVzmK http://www.theguardian.com/us Tab + Overflow Overflow menu TIP: Tab menu navigation has the benefit of continuous visibility. And when the nav bar is collapsed it’s still visible with hidden items available in the overflow menu.
61. 61 1) Add a responsive navigation to your existing responsive layout. Choose either the toggle or off-canvas flyout navigation from Filament Group’s Responsive Navigation Pattern Repository. 2) The solution for the toggle navigation can be found at RWD/exercises/ex5/toggle.html and the off-canvas solution can be found at RWD/exercises/ex5/off-canvas.html Exercise #5: Responsive navigation
62. 62 Responsive with Server Side Support (RESS) Responsive Web Design Server-side Components RESS
63. 63 User Agent Detection http://wurfl.sourceforge.net/ https://deviceatlas.com/ Pros: •Provides detailed information about the browser, device, OS and what is supported. •If the detection is server-side, you can eliminate unnecessary resources from being loaded in the browser. TIP: WURFL also has a client-side alternative (WURFL.js) Example: http:/ /mobilehtml5.org/chevron/view.php?id=CippOm5rTbffT7cCehPQ Cons: •User agents can be spoofed. •Getting detailed information requires third-party service.
64. 64 Feature Detection - Server http://modernizr.com/ https://github.com/jamesgpearce/modernizr-server Pros: •Enables progressive enhancement based on supported features. •It does not rely of the user agent string. Cons: •Feature detection is not 100% accurate. TIP: Device databases also provide feature support. WURLFs supported features: http:/ /wurfl.sourceforge.net/help_doc.php
65. 65 Responsive Workflow Patterns Master/Detail Bento Box Append around
66. 66 Master/Detail
67. 67 Bento Box
68. 68 “Adapt experiences based on the capabilities of the device or browser.” RESS Responsive Fonts Content Ordering Responsible Icons Feature Detection User Agent Detection Adaptive Design http://blog.catchpoint.com/2014/07/16/adaptive-vs-responsive-web-design-quantifying-difference/
69. 69 Responsive + Adaptive = Awesomeness
70. 70 Responsive Style guides Style guides promote consistency and provide everyone with a set of reusable components. http://bradfrost.com/blog/post/style-guides/
71. 71 Third-party Services Responsive Testing Tools Actual Devices Emulators
72. 72 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.
73. 73 Emulators http://www.mobilexweb.com/emulators Chrome Canary’s new Mobile Emulation Firefox's Responsive Design View Media query indicator https://browsersync.io/
74. 74 Third-party Services http://deviceanywhere.com/ http://www.perfectomobile.com/
75. 75 Responsive Performance http://www.guypo.com/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
76. 76 Responsible Performance http://www.filamentgroup.com/lab/performance-rwd.html
77. 77 HTML CSS CSS JS JS Blocking CAUTION: CSS and JavaScript assets loaded in the head via <link> and <script> tags are blocking requests - they block the document from appearing until all assets are loaded. HTML Traditional Request Loading Cell tower DNS Server
78. 78 Full CSS Lazy load non- critical assets HTML Responsible Performance Critical CSS Async JS Loader HTML Critical CSS Async JS Loader TIP: Deliver the critical CSS and JavaScript inline on initial page request and lazy load non-critical assets for optimal page load performance! • Enhance.JS • Critical CSS Bookmarklet • Grunt-CriticalCSS Critical CSS - The minimal CSS necessary to render a particular page. It’s a subset of the full CSS. HTML contains all the assets to render the initial page in a single request. Asynchronously load the non- critical assets after initial page load via enhance.js Cell tower DNS Server Full JS Full Fonts Goal: one-second perceived load time
79. 79 Traditional vs Enhanced
80. 80 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!
81. 81 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!
82. 82 Asynchronous JavaScript https://developers.google.com/speed/docs/insights/BlockingJS#deferJS http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html <script> <script async> <script defer>
83. 83 Browser Caching https://developers.google.com/speed/docs/insights/LeverageBrowserCaching Cache response for 120 seconds ETag token uniquely identifies the response (data) Request #1 Request #2 The response hasn’t change and as a result the ETags match. Response is 304 (no data)
84. 84 Browser Caching https://developers.google.com/speed/docs/insights/LeverageBrowserCaching Define Optimal Cache-Control Policy
85. 85 Compress Images http://imageoptim.com/ Simply drag-n-drop images and they’ll be automatically optimized in-place.
86. 86 Chrome developer tools Compress with GZip TIP: Verify you’re using gzip in Chrome developer tools. Click “Network” tab and do a refresh on the page. Click on the top document entry in the list and select “Headers” on the right side. If you find “Content-Encoding: gzip” in the list, then the page is gzip-compressed.
87. 87 Web Storage Examples: •bonus/html5/webstorage.html localStorage // Store localStorage.setItem("lastName", "Peterson"); // Retrieve $("#lastName").html(localStorage.getItem("lastName")); // Remove localStorage.removeItem("lastName"); 87 http://en.wikipedia.org/wiki/Web_storage sessionStorage
88. 88 Application Cache 88 <!DOCTYPE html> <html manifest="cache.appcache"> CACHE MANIFEST # v1.0.0 CACHE: cache.css http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css http://code.jquery.com/jquery-1.11.1.min.js http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js http://code.jquery.com/mobile/1.4.3/images/ajax-loader.gif # The NETWORK section below specifies that the file "cache-no.png" should never be cached, and will not be available offline NETWORK: cache-no.png http://caniuse.com/appcache Examples: •bonus/html5/cache.html http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5
89. 89 HTTP/2 SPDY & HTTP2 Overview Header Compression Server Push Multiplexing http://caniuse.com/http2
90. 90 PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ TIP: Analyze your site and get recommendations for performance improvements.
91. 91 Perceived Performance http://www.webpagetest.org/ TIP: A one-second page load is the ultimate goal. Or verify your site is 20% faster than the competition. Speed Index is the ideal measurement for perceived performance. Shoot for a Speed Index of 1000. The average is 4493.
92. 92 Perceived Performance https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting logger off logger on TIP: A one-second page load is the standard goal. Verify your site is 20% faster than the competition.
93. 93 Performance Budget http://timkadlec.com/2014/05/performance-budgeting-with-grunt/ TIP: Setup an automated performance budget test to validate your build is within a certain SpeedIndex or render time. Verify the SpeedIndex (perceived performance) is within our goal of 1.2 seconds Verify the site starts rendering with the goal of one-second
94. 94 Chrome developer tools Safari Web Inspector Browser Testing Tools http://devtoolsecrets.com/ http://webperformance.io/devtools-filmstrip
95. 95 Chrome Remote Debugging Safari Remote Web Inspector Remote Debugging
96. 96 Securing Responsive Sites Request Forwarding WIFI Networks SSL Stripping MiTM SSL Certificates HTTP Strict Transport Security
97. 97 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.
98. 98 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.
99. 99 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). TIP: Google SEO ranks SSL sites with a higher ranking!
100. 100 Responsive Project Strategies http://bradfrostweb.com/blog/post/responsive-strategy/ Responsive Retrofitting Responsive Mobile Sites Mobile-First Responsive
101. 101 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.”
102. 102 http://bradfrostweb.com/blog/post/responsive-strategy/ “Taking a separate m-dot site that employs responsive design techniques.” Responsive Mobile Sites
103. 103 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
104. 104 Mobile First Advantages
105. 105 Mobile First Wireframes #1 •Leaner designs (images, content) •Scales up (larger) easier •Helps identify primary features •Mobile and desktop teams working from the same wireframes
106. 106 Mobile First Features #2 Mobile Desktop Shared •Helps identify shared services, images, etc •Desktop and mobile teams working together on shared stories
107. 107 #3 Mobile Desktop Shared There is only “One Web” •Are there really mobile and desktop specific features? •Users expect the same features to be available on mobile and desktop
108. 108 #4 Mobile First = Better Performance https://developers.google.com/speed/pagespeed/insights/ •Mobile first designs will scale and perform better than desktop first designs
109. 109 #5 Mobile First Scales Better
110. 110 Responsive Carousel https://owlcarousel2.github.io/OwlCarousel2/
111. 111 Responsive Emails TIP: Use email frameworks like Ink or Campaign Monitor or apply the responsive web techniques you’ve just learned!
112. 112 Analytics server-side? client-side? both?
113. 113 Responsive Wireframing Tools http://econsultancy.com/blog/62700-18-practical-responsive-design-tools-and-resources-for-wireframing Wireframing in Flexbox is quick and interactive Simple sketching is also effective to get a conversation started TIP: Prefer low-fidelity wireframing tools that work well on agile teams where rapid changes may occur.
114. 114 Creating layouts in Flexbox is quick and educational Quick Links: • Getting Started • Browser Support • Playground Responsive Layouts with Flexbox
119. 119 Responsive Frameworks Foundation vs Bootstrap: https://www.smashingmagazine.com/2017/03/which-responsive-design-framework-is-best/ http://bradfrost.github.io/this-is-responsive/resources.html#frameworks
120. 120 http://jquerymobile.com/
121. 121 Panels (sliding drawer) jQ uery M obile 1.3 Example: bonus/1.3/panel.html
122. 122 Responsive tables jQ uery M obile 1.3 Examples: bonus/1.3/responsive-reflow-custom.html bonus/1.3/responsive-reflow-default.html http://www.filamentgroup.com/lab/tablesaw.html
123. 123 Responsive tables jQ uery M obile 1.3 Examples: bonus/1.3/responsive-column-custom.html bonus/1.3/responsive-column-default.html
124. 124 Responsive grids jQ uery M obile 1.3 Examples: bonus/1.3/responsive-grid-custom.html bonus/1.3/responsive-grid-default.html
125. 125 http://getbootstrap.com/
126. 126 http://foundation.zurb.com
127. 127 Create a responsive layout and navigation with Bootstrap: 1. Download the Bootstrap starter template 2. Review the Bootstrap responsive breakpoints 3. Add a Bootstrap responsive grid. If you’re not sure what pattern to build try recreating the mostly fluid pattern. 4. Add a Bootstrap responsive navigation bar Exercise #6: RWD with Bootstrap
128. 128 bradfrost.github.io/this-is-responsive/resources.html
129. 129 Inspiration
130. 130 Thank You! @BradBroulik BradBroulik.blogspot.com BradBroulik@gmail.com Slides: bit.ly/rwd-training