great responsive-ability web design
TRANSCRIPT
![Page 1: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/1.jpg)
by Mike Wilcox, May 2016
Great Responsive-ability
Web Design
With great power, comes…
CLUB AJAX
![Page 2: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/2.jpg)
The key to RWD…
![Page 3: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/3.jpg)
Use Bootstrap
THE END
![Page 4: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/4.jpg)
What is RWD?• Ethan Marcotte coined the term responsive web design (RWD)—and defined it
to mean fluid grid/ flexible images/ media queries—in a May 2010 article in A List Apart
• WikiPedia: • Crafting sites to provide an optimal viewing and interaction experience — easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)
• Adapts the layout using fluid, proportion-based grids, flexible images, and CSS3 media queries
![Page 5: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/5.jpg)
What is RWD?• Usually refers to a page displaying on a mobile device
• More specially refers to a page displaying at any size
• Technically means any size and any device
![Page 6: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/6.jpg)
Why RWD?• The client wants the website to work on the iPhone.
• And the iPad • And the iPad Pro • And the iPad Mini • And the Galaxy Note 3 • And the Nexus 7 • And myriad other Android devices • And watches • And TV…
The days of “what is the minimum screen size we are
targeting?” are over.
![Page 7: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/7.jpg)
Browser Stats
Don’t worry about IE8. The world is IE11+ now
![Page 8: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/8.jpg)
Mobile Browser Stats
More of a concern is the various Android browsers, using 40% of the market
![Page 9: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/9.jpg)
Media Queries• Are just a small part of RWD!
• RWD is primarily about fluid designs, with resizable containers
• Media Queries come into play when the design needs to be restructured
More on Media Queries later…
![Page 10: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/10.jpg)
Unobtrusive JavaScriptA consideration for web apps
• Separation of functionality (behavior) from the presentation
• Best practices such as scalability
• Progressive enhancement for user agents that may not support advanced functionality
https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
![Page 11: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/11.jpg)
Progressive EnhancementA consideration for web sites
• Basic content should be accessible to all web browsers
• Basic functionality should be accessible to all web browsers
• Sparse, semantic markup contains all content
• Enhanced layout is provided by externally linked CSS
• Enhanced behavior is provided by unobtrusive, externally linked JavaScript
• End-user web browser preferences are respected
https://en.wikipedia.org/wiki/Progressive_enhancement
![Page 12: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/12.jpg)
Feature Detection• An important aspect of Unobtrusive JavaScript
• Detecting browsers is bad:
• Best practice is to test for the feature:
if ( document.designMode ){document.designMode = 'on';
}else{document.body.contentEditable = 'true';
}
if ( navigator.userAgent.indexOf(‘MSIE’) > -1 ) { … }
Sniffing to determine if a mobile device is
acceptable is some circumstances
![Page 13: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/13.jpg)
Server Considerations• Display device-dependent content
• Render different HTML and CSS
• Minimize network requests
![Page 14: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/14.jpg)
JS Frameworks• Some more mobile friendly than others
• Jeff Atwood complains about poor Ember perf for Discourse
• Isomorphic/Universal Apps using server side rendering
• Virtual DOM can sometimes be effective • But is by no means a silver bullet
• On demand loading
![Page 15: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/15.jpg)
Mobile First• Consider the design of mobile and desktop at the same time
• Don’t retrofit mobile • In-betweens (tablets, small browser windows) can be done as you go
• UI elements (drop downs, modals) will need to work in both
• JavaScript architecture should be lean
• Start with minimal code, and on demand, add features
• Load a second style sheet only if desktop
• Test: browser resizing, emulator, then actual device
![Page 16: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/16.jpg)
Meta Tags• At the minimum, the following tags should be used in the HTML page:
• width=device-width • to match the screen's width in device-independent pixels.
• initial-scale=1 • to establish a 1:1 relationship between CSS pixels and device-independent
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes">
![Page 17: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/17.jpg)
Images• Images
• Seriously, NO IMAGES!
• Images don’t scale • Say goodbye to your image sprites
• Instead, use font icons or SVG
• SVG can be styled
![Page 18: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/18.jpg)
Images• Obviously websites use images… as in pictures… and web apps may use
them for a splash screen
• Use the <picture> element
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
![Page 19: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/19.jpg)
REM & EM• px is a fixed width
• em is relative to its container size • body{ font:10px} / body div{ font:0.5em} [5px] / body div div{ font:0.5em} [2.5px]
• rem is relative to root size • body{ font:10px} / body div{ font:0.5em} [5px] / body div div{ font:0.5em} [5px]
• Use px for dimensions and borders
• Use a combination of em and rem for text, borders, and margins
• em works best for media queries • Test all browsers - Safari is buggy
http://zellwk.com/blog/media-query-units/
![Page 20: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/20.jpg)
block vs inline vs inline-block• inline has no dimensions. It takes the size of its contained text
• width, height, margin has no affect • padding works since it is part of the contained text
• inline-block allows for dimensions • By default, is the size of contained text
• block allows for dimensions • Creates a new line (don’t use <br>!!) • Cannot be a child of a <p> • By default, width is “auto”, sized to its container • “auto” !== 100%
![Page 21: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/21.jpg)
float vs inline-block• inline-block
• supports vertical-align • Suffers from white space issues
• float • Designed to support magazine style layouts where text floats around the image • clear-fix is unintuitive (tip: use overflow:auto) • Causes unwanted bugs or unpredictable side effects
https://www.w3.org/wiki/Floats_and_clearing
Floats
![Page 22: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/22.jpg)
flex-box• The flexbox layout is direction-agnostic as opposed to the regular layouts: block
which is vertically-based and inline which is horizontally-based.
• Provides flexibility when it comes to orientation changing, resizing, stretching, shrinking, etc.
• Not intuitive, and difficult to learn (but is worth the effort)
.container{display: flex;flex-flow: row wrap;
}.item {
flex: 1 1 auto;}
![Page 23: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/23.jpg)
CSS Grid Layout (NA)• The solution to layouts
• Works well with flex box
• The spec is still be worked on
.container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto;}
https://css-tricks.com/snippets/css/complete-guide-grid/
![Page 24: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/24.jpg)
Media Queries
![Page 25: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/25.jpg)
Media Queries• The first public working draft published in 2001
• Became a W3C Recommendation in 2012 after browsers added support
• Essentially true/false expressions
• Simply defined: DEVICE : EXPRESSION
• min-width:500px will apply to >=500px
• Typically, use min-width for mobile-first, max-width for desktop-first
@media screen and (min-width:500px) { background: red; }@media screen and (max-width:500px) { background: blue; }
![Page 26: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/26.jpg)
Media Queries
@media screen and (min-width:500px) { background: red; }@media print and (max-width:500px) { background: transparent; }
<link rel="stylesheet" media="print" /><link rel="stylesheet" media="screen" />// roughly targets mobile:<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
Usage• They can be used to target styles or stylesheets
![Page 27: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/27.jpg)
Media Queries
And@media (min-width: 600px) and (max-width: 800px) { body { background: red; } }
Or@media (max-width: 600px), (min-width: 800px) { body { background: red; } }
Not@media not all and (max-width: 600px) { body { background: red; } }
Operators
![Page 28: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/28.jpg)
Media Queries
@media screen and (min-width:500px) { background: red; }
Devices• braille
• embossed
• handheld
• projection
• screen
• speech
• tty
• tv
You’ll pretty much only ever use screen.
handheld isn’t what you think it is. There is no device type for mobile.
![Page 29: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/29.jpg)
Media Queries/* Smartphones (portrait and landscape) -- -- -- -- -- - */@media only screenand (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) -- -- -- -- -- - */@media only screenand (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) -- -- -- -- -- - */@media only screenand (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) -- -- -- -- -- - */@media only screenand (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
Targeting Mobile/* iPads (landscape) -- -- -- -- -- - */@media only screenand (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }
/* iPads (portrait) -- -- -- -- -- - */@media only screenand (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }
/* Desktops and laptops -- -- -- -- -- - */@media only screenand (min-width : 1224px) { /* Styles */ } /* Large screens -- -- -- -- -- - */@media only screenand (min-width : 1824px) { /* Styles */ }
Don’t do this nonsense!!
![Page 30: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/30.jpg)
Media QueriesTargeting Mobile
@media screen and (max-device-width: 773px) and (max-device-height: 435px) { body { background: red; }}
• The design should be responsive, not specific
• Don’t rely on min-resolution: 2dppx - this targets Macs with Retina Display
• Don’t rely on @media handheld, this is for older, flip-style (etc) phones
These dimensions target the largest Android device
![Page 31: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/31.jpg)
Media QueriesTargeting Mobile and Tablets, and desktop
// mobile@mediascreen and (max-device-width: 773px) and (max-device-height: 435px),screen and (max-device-width: 435px) and (max-device-height: 773px),screen and (max-width: 773px) { body { background: red; }}
//tablet@mediascreen and (max-device-width: 768px) and (max-device-height: 1024px),screen and (max-device-width: 1024px) and (max-device-height: 768px),screen and (max-width: 768px) { body { background: red; }}
These dimensions target the largest devices and desktop
![Page 32: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/32.jpg)
Media QueriesJavaScript
function onMediaChange(e){ var mq = e.srcElement; if(mq.matches){ node.innerHTML = 'Matches: ' + mq.media; }else{ node.innerHTML = 'Matches no media queries'; }}var mq = window.matchMedia('(min-width: 600px)');mq.addListener(onMediaChange);
• Much better than listening to window.onresize
• Use for conditionally launching desktop-only widgets or ads
![Page 33: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/33.jpg)
DEMOS
![Page 34: Great Responsive-ability Web Design](https://reader034.vdocuments.us/reader034/viewer/2022051708/58864c771a28ab32768b661f/html5/thumbnails/34.jpg)
CLUB AJAX