Training Express Slides: bit.ly/rwd-training Responsive Web Development @BradBroulik | [email protected] BradBroulik.blogspot.com 

2 •Name •Company •Background •Why are you learning RWD? Introductions 

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 Responsive in the real world… 

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

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 Responsive Sites 

8 What % of websites are responsive? http://www.guypo.com/rwd-2014/ 40% 

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

10 The Responsive Advantage 

11 No device customer left behind https://codeboxr.com/blogs/top-5-advantages-of-responsive-web-page-design/ 

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

15 #1 Fluid Layouts Static Fluid 

16 Fluid vs Static Fluid CSS Static CSS Fluid formula: target / context = result 

17 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 

18 #2 Fluid Images/Media 

19 #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 

20 Media Query Types default 

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

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

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 HTML5 Cheat Sheet 

27 http://www.w3schools.com/cssref/ CSS3: Basics Core CSS: Part 1 Core CSS: Part II 

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 Mostly Fluid Real-world examples: http://www.antarcticstation.org/ http://www.aids.gov/ https://www.airbnb.com/ 

30 Column Drop Real-world examples: http://modernizr.com/ http://www.bostonglobe.com/ http://weenudge.com/ 

31 Layout Shifter Real-world examples: http://foodsense.is/ 

32 Mondrian Real-world examples: http://www.anderssonwise.com/ 

33 Basic Gallery Real-world examples: http://www.bradsawicki.com/ http://www.nasa.gov 

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 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 Responsive Images http://responsiveimages.org 

37 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! https://caniuse.com/picture 

38 Use Case: device-pixel-ratio 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 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 Use Case: variable-sized image sizes=“[media query] [length], [media query] [length], [length] If no media query it is the default size 

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

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

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

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 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 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 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 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 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 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 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 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 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 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 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 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 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 Responsive with Server Side Support (RESS) Responsive Web Design Server-side Components RESS 

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 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 Responsive Workflow Patterns Master/Detail Bento Box Append around 

66 Master/Detail 

67 Bento Box 

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 Responsive + Adaptive = Awesomeness 

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 Third-party Services Responsive Testing Tools Actual Devices Emulators 

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 Emulators http://www.mobilexweb.com/emulators Chrome Canary’s new Mobile Emulation Firefox's Responsive Design View Media query indicator https://browsersync.io/ 

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

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 Responsible Performance http://www.filamentgroup.com/lab/performance-rwd.html 

77 HTML CSS CSS JS JS Blocking CAUTION: CSS and JavaScript assets loaded in the head via and tags are blocking requests - they block the document from appearing until all assets are loaded. HTML Traditional Request Loading Cell tower DNS Server 

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 Traditional vs Enhanced 

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 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 Asynchronous JavaScript https://developers.google.com/speed/docs/insights/BlockingJS#deferJS http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html <script async> <script defer> 

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 Browser Caching https://developers.google.com/speed/docs/insights/LeverageBrowserCaching Define Optimal Cache-Control Policy 

85 Compress Images http://imageoptim.com/ Simply drag-n-drop images and they’ll be automatically optimized in-place. 

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 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 Application Cache 88 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 HTTP/2 SPDY & HTTP2 Overview Header Compression Server Push Multiplexing http://caniuse.com/http2 

90 PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ TIP: Analyze your site and get recommendations for performance improvements. 

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 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 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 Chrome developer tools Safari Web Inspector Browser Testing Tools http://devtoolsecrets.com/ http://webperformance.io/devtools-filmstrip 

95 Chrome Remote Debugging Safari Remote Web Inspector Remote Debugging 

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

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 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 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 Responsive Project Strategies http://bradfrostweb.com/blog/post/responsive-strategy/ Responsive Retrofitting Responsive Mobile Sites Mobile-First Responsive 

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 http://bradfrostweb.com/blog/post/responsive-strategy/ “Taking a separate m-dot site that employs responsive design techniques.” Responsive Mobile Sites 

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 Mobile First Advantages 

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 Mobile First Features #2 Mobile Desktop Shared •Helps identify shared services, images, etc •Desktop and mobile teams working together on shared stories 

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 #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 #5 Mobile First Scales Better 

110 Responsive Carousel https://owlcarousel2.github.io/OwlCarousel2/ 

111 Responsive Emails TIP: Use email frameworks like Ink or Campaign Monitor or apply the responsive web techniques you’ve just learned! 

112 Analytics server-side? client-side? both? 

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 Creating layouts in Flexbox is quick and educational Quick Links: • Getting Started • Browser Support • Playground Responsive Layouts with Flexbox 

115 

116 

117 

118 

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 http://jquerymobile.com/ 

121 Panels (sliding drawer) jQ uery M obile 1.3 Example: bonus/1.3/panel.html 

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 Responsive tables jQ uery M obile 1.3 Examples: bonus/1.3/responsive-column-custom.html bonus/1.3/responsive-column-default.html 

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 http://getbootstrap.com/ 

126 http://foundation.zurb.com 

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

129 Inspiration 

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