Contenu connexe Similaire à Responsive & Responsible: Implementing Responsive Design at Scale (20) Responsive & Responsible: Implementing Responsive Design at Scale1. Responsive
&
Responsible
Scott Jehl filament group
2. We design engaging sites and
filament group applications that are simple to
use and accessible to all.
6. Inclusive Delightful
It works in my It feels intuitive.
browser.
It’s fun to use!
It allows me to
complete my task
It’s damned fast!
7. Make it work
everywhere.
...and work especially well in newer browsers!
10. Should it be responsive?
• Commonality across experiences
• Developer Skillset
• Time up-front vs. maintenance
• Interest in a challenge
26. “Basic” = safe defaults
• Tweaks to browser typography
• Horizontal rules
• Text alignment
• Display: Inline / Block
• No complex layout or positioning
33. All in your <head>
<link rel=...” href=”basic.css” id=”basic”>
<!--[if gte IE 6]><link href="enhanced.css"
rel="stylesheet"><![endif]-->
<!--[if !IE]><!--><link href="enhanced.css"
media="only all"><!--<![endif]-->
<script src=”basic.js”></script>
36. Enhanced CSS
/* styles for everyone go here.. */
@media all and (min-width: 500px){ .. }
@media all and (min-width: 620px){ .. }
@media all and (min-width: 950px){ .. }
40. Ems all the way down.
Ems allow for components to adapt
differently in different containers
41. Basic.js: “just enough”
• ResponsiveImages.js
• Respond.js
• Modernizr / extensions / HTML5 Shim
• The Boston Globe JS Framework
47. Respond.js
Now available as part of
https://github.com/scottjehl/Respond
52. Feature flags from Modernizr
globe.support.touch
globe.support.applicationcache
respond.mediaQueriesSupported
53. Internet Explorer Flags
<!--[if lt IE 7 ]> <html lang="en"
class="ie ie6"> <![endif]-->
globe.browser.ie6 =
document.documentElement
.className.indexOf( “ie6” ) >= 0;
54. Again, with the @media
globe.enhanced =
respond.mediaQueriesSupported
|| globe.browser.ie6
|| globe.browser.ie7
|| globe.browser.ie8;
Conditional-comment driven
55. JS Experience Divide
if( !globe.enhanced ){
//last stop for old browsers!
return;
}
else{
//remove Basic CSS
//bring on the enhancements
}
58. On removing Basic.css...
head.removeChild( basicCSS );
• Convenient when basic.css does
not easily cascade.
• A convenience that can’t be
guaranteed.
62. The assets you receive depend on
width, section, features
~ hand-crafted delivery ~
63. Defining Assets to Load
//Arrays of JS and CSS files
globe.jsToLoad = [ “jquery.js” ];
globe.cssToLoad = [];
jQuery is dynamically-loaded too!
68. Why Screen, not viewport?
• Fixed per device
• Assets delivered to device’s
potential, not just current state.
• Orientation-change makes resize
relevant again.
81. Degrees of #!%$hashbang
Not great: Less... not great:
<a href=”#foo.html”>Foo</a> <a href=”foo.html”>Foo</a>
http://example.com/#!foo.html
87. PE + offline is possible!
Extends the ability for a site to meet you where you are
99. Ads are not awesome.
• Third-party, potential for conflicts
• They block content loading
• Potentially overtake page
• Pixel dimensions, contractually
• Filled with document.write
103. Where to append?
CSS:
@media all and (min-width: 500px){
.a .ad { display: none; }
}
JavaScript:
//on window resize:
if( !$( “.ad” ).is( “:visible” ) ){
$( “.ad” ).appendTo( “.b” );
}