Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 Responsive in the real world…

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 https://winnebagoind.com/ Responsive Vehicle Responsive features: Triple Slideouts Extendable Sectional Sofa Extendable Dinette Extendable Sectional Dinette Flex Bed System Comfort Sofa Sleeper

Slide 7

Slide 7 text

7 Responsive Sites

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 The Responsive Advantage

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 #1 Fluid Layouts Static Fluid

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 #2 Fluid Images/Media

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

20 Media Query Types default

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

26 HTML5 Cheat Sheet

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 Mostly Fluid Real-world examples: http://www.antarcticstation.org/ http://www.aids.gov/ https://www.airbnb.com/

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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?

Slide 36

Slide 36 text

36 Responsive Images http://responsiveimages.org

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39 “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 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

42 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 http://scottjehl.github.io/picturefill/#ie9

Slide 43

Slide 43 text

43 “logo" 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/

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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?

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

62 Responsive with Server Side Support (RESS) Responsive Web Design Server-side Components RESS

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

65 Responsive Workflow Patterns Master/Detail Bento Box Append around

Slide 66

Slide 66 text

66 Master/Detail

Slide 67

Slide 67 text

67 Bento Box

Slide 68

Slide 68 text

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/

Slide 69

Slide 69 text

69 Responsive + Adaptive = Awesomeness

Slide 70

Slide 70 text

70 Responsive Style guides Style guides promote consistency and provide everyone with a set of reusable components. http://bradfrost.com/blog/post/style-guides/

Slide 71

Slide 71 text

71 Third-party Services Responsive Testing Tools Actual Devices Emulators

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

73 Emulators http://www.mobilexweb.com/emulators Chrome Canary’s new Mobile Emulation Firefox's Responsive Design View Media query indicator https://browsersync.io/

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

76 Responsible Performance http://www.filamentgroup.com/lab/performance-rwd.html

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

79 Traditional vs Enhanced

Slide 80

Slide 80 text

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!

Slide 81

Slide 81 text

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!

Slide 82

Slide 82 text

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>

Slide 83

Slide 83 text

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)

Slide 84

Slide 84 text

84 Browser Caching https://developers.google.com/speed/docs/insights/LeverageBrowserCaching Define Optimal Cache-Control Policy

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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.

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

89 HTTP/2 SPDY & HTTP2 Overview Header Compression Server Push Multiplexing http://caniuse.com/http2

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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.

Slide 92

Slide 92 text

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.

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

94 Chrome developer tools Safari Web Inspector Browser Testing Tools http://devtoolsecrets.com/ http://webperformance.io/devtools-filmstrip

Slide 95

Slide 95 text

95 Chrome Remote Debugging Safari Remote Web Inspector Remote Debugging

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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.

Slide 98

Slide 98 text

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.

Slide 99

Slide 99 text

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!

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

104 Mobile First Advantages

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

106 Mobile First Features #2 Mobile Desktop Shared •Helps identify shared services, images, etc •Desktop and mobile teams working together on shared stories

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

109 #5 Mobile First Scales Better

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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.

Slide 114

Slide 114 text

114 Creating layouts in Flexbox is quick and educational Quick Links: • Getting Started • Browser Support • Playground Responsive Layouts with Flexbox

Slide 115

Slide 115 text

115

Slide 116

Slide 116 text

116

Slide 117

Slide 117 text

117

Slide 118

Slide 118 text

118

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

120 http://jquerymobile.com/

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

123 Responsive tables jQ uery M obile 1.3 Examples: bonus/1.3/responsive-column-custom.html bonus/1.3/responsive-column-default.html

Slide 124

Slide 124 text

124 Responsive grids jQ uery M obile 1.3 Examples: bonus/1.3/responsive-grid-custom.html bonus/1.3/responsive-grid-default.html

Slide 125

Slide 125 text

125 http://getbootstrap.com/

Slide 126

Slide 126 text

126 http://foundation.zurb.com

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

128 bradfrost.github.io/this-is-responsive/resources.html

Slide 129

Slide 129 text

129 Inspiration

Slide 130

Slide 130 text

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