responsive web design: clever tips and techniques
TRANSCRIPT
![Page 1: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/1.jpg)
Responsive Design: Clever Tips and Tricks
Vitaly Friedman
28/11/2012 @ FOWD, Prague
![Page 2: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/2.jpg)
Vitaly Friedman, editor-in-chiefand co-founder of SmashingMag
![Page 3: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/3.jpg)
![Page 4: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/4.jpg)
This talk is about RWD techniques.
![Page 5: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/5.jpg)
And simple, clever tricks and ideas.This talk is about RWD techniques.
![Page 6: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/6.jpg)
And simple, clever tricks and ideas.This talk is about RWD techniques.
And (a bit) about our 2012 redesign.
![Page 7: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/7.jpg)
Responsive Web Design (Extended)
![Page 8: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/8.jpg)
The dangerous thing is not that machines might start thinking like humans, but that humans might start thinking like machines.
— Sydney J. Harris
“
When Sydney J. Harris said that, he meant human society and our understanding of computers. But it can relate to what we do as we'll. When we think about the Web, what do
![Page 9: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/9.jpg)
We are blinded by chrome. When it comes to RWD, we think about layouts, and often we should, but we have to keep in mind that we are not rectangle artists. we explore solutions to problems. Browsers think in boxes, but humans shouldn't.
![Page 10: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/10.jpg)
Wir denken dass das Web so aussieht.
Als Designer sehen wir uns oft als Pixel-Pusher oder Rectangle Zeichner. So sieht das Web aber nicht aus
When it comes to responsive design, we think about layouts, and sometimes we should, but we have to keep in mind that we aren’t rectangle artists. We explore solutions to problems.
![Page 11: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/11.jpg)
A fluid, unpredictable, chaotic, interconnected environment with plenty of right and wrong solutions. I always feel weird about blog posts on why RWD is a wrong technique, or HTML5/native is a wrong solution. The Web isn’t black and white, it’s rich, extremely diverse and it requires pragmatic thinking.
![Page 12: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/12.jpg)
Responsive Web Design is an appropriate tool for this “fluid” Web.
![Page 13: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/13.jpg)
It’s a new mindset that requires us to rethink and extend our practices.
![Page 14: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/14.jpg)
Content Choreography
![Page 15: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/15.jpg)
“ Media queries can be used to domore than patch broken layouts:with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.
— Trent Walton
![Page 16: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/16.jpg)
![Page 17: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/17.jpg)
![Page 18: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/18.jpg)
Content Choreography
• From the technical standpoint, arrangement of boxes is often implemented using Flexbox.
@media screen and (max-width: 33.236em) {
#main { display: flex; }
#main > nav,#main > aside { flex: 1; }#main > article { flex: 2; }
#main > nav { order: 0; }#main > article { order: 1; }#main > aside { order: 2; }
![Page 19: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/20.jpg)
We can manipulate experiences to make them genuine across different viewports — be it desktop, mobile or anything else.
![Page 21: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/21.jpg)
![Page 22: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/23.jpg)
![Page 24: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/24.jpg)
![Page 25: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/25.jpg)
![Page 26: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/26.jpg)
![Page 27: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/27.jpg)
![Page 28: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/28.jpg)
ResolutionIndependence
![Page 29: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/29.jpg)
Resolution Independence
• High pixel density displays prompt us to create future-proof solutions for graphics.
• Creating multiple assets for the same graphics (not photos) isn’t future-proof.
• Two options: SVG and Icon Fonts.
![Page 30: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/30.jpg)
• HTML:<ul class="actions"><li><a class="a-share" href="#">Share</a></li><li><a class="a-print" href="#">Print</a></li></ul>
• CSS: .actions a { font-size: 1em; /* Sprite: 30x160px */ background-image: url('sprite.png'); }.actions .a-share { background-position: 10px 0; }.actions .a-print { background-position: 10px -40px; }
PNG sprites
![Page 31: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/31.jpg)
• HTML:<ul class="actions"><li><a class="a-share" href="#">Share</a></li></ul>
• CSS:body { font-size: 100%; } /* = 16px by default */.actions a { font-size: 1em; background-image: url('sprite.svg'); background-size: 1.875em 10em; }.actions .a-share { background-position: 0.625em 0; }
SVG sprites
![Page 32: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/32.jpg)
Resolution Independence (SVG)
• SVG files are usually larger and browsers need more time to rasterize and display them.
• Good SVG support: Chrome 4+, Safari 4+, FF4+, Opera 9.5+, IE9+, mobile browsers.
• For legacy browsers (and Android 2.3)we need PNG-fallback with Conditional Comments (IE<9) or Modernizr.
![Page 33: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/33.jpg)
• HTML:<a class="icon share" href="#">Share</a>
• CSS:@font-face { font-family: 'Icon Font'; src: url('icon-font.eot'); src: local('☺'); url('icon-font.woff') format('woff'), url('icon-font.ttf') format('truetype'), url('icon-font.svg') format('svg'); }.icon { font-family: 'Icon Font'; font-size: 20px; }.share:before { content: "s"; }
Icon Fonts
![Page 34: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/34.jpg)
• HTML:<a class="icon" data-icon="s" href="#">Share</a><a class="icon" data-icon="h" href="#">History</a>
• CSS:.icon:before { content: attr(data-icon); /* Optional color definition */ }
Icon Fonts
![Page 35: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/35.jpg)
Resolution Independence(Web Fonts)
• There are many comprehensive Web fonts: Entypo and FontAwesome are free.
• Excellent support: everywhere but Opera Mini and Android 2.1.
• Build custom, small “bundles” with Fontello (combines popular open-source fonts).
![Page 36: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/36.jpg)
![Page 37: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/37.jpg)
CompressiveImages
![Page 38: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/38.jpg)
Compressive Images
• To display photos properly on high pixel density displays, we don’t need hi-res images.
• If a JPG image has relatively small dimensions, we can use a workaround to keep its size small.
• Solution: given a “normal” image resolution, double it and use minimal JPEG compression.
![Page 39: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/39.jpg)
“ ...Given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it’s highly compressed and dramatically larger in dimensions than it is displayed.
— Daan Jobsis
![Page 40: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/40.jpg)
600×400px file, 0% JPEG compression, displayed in 600×400 (file size 7 Kb)
![Page 41: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/41.jpg)
600×400px file, 0% JPEG compression, displayed in 300×200 (file size 7 Kb)
![Page 42: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/42.jpg)
600×400px file (7 Kb)________________________________0% JPEG compressiondisplayed in 300×200
300×200px file (21 Kb)_________________________________80% JPEG compressiondisplayed in 300×200
![Page 43: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/44.jpg)
![Page 45: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/45.jpg)
ConditionalLoading
![Page 46: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/46.jpg)
“ If you [...] had to choose between employing media queries to make the design look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.
— Jason Grigsby
![Page 47: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/47.jpg)
Conditional CSS
• We ask browsers to load assets progressively — and only when they can be displayed.
• Idea: if a CSS media query was fired, catch it with JavaScript and load additional assets.
• CSS:@media all and (min-width: 45em) {
body:after { content: 'desktop'; display: none; } }
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 48: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/48.jpg)
Conditional CSS
• JS:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');if (size == 'desktop') { // Load some more content.}
• CSS:@media all and (min-width: 45em) {
body:after { content: 'desktop'; display: none; } }
![Page 49: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/49.jpg)
Conditional CSS (Example)
• CSS:@media all and (min-width: 45em) {
body:after { content: 'desktop'; display: none; } }
• HTML:<a href="desktop-friendly-version.jpg"><img src="mobile-version.jpg" data-medium="tablet-friendly-version.jpg" data-large="desktop-friendly-version.jpg" /></a>
![Page 50: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/50.jpg)
Conditional CSS (Example)
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { $('img').each(function(index) { var large = $(this).data('large'); $(this).attr('src',large); } }
if (size == 'tablet') {...
![Page 51: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/51.jpg)
![Page 52: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/52.jpg)
![Page 53: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/53.jpg)
![Page 54: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/54.jpg)
Lazy LoadingJS, Social Buttons
![Page 55: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/55.jpg)
Gmail’s Lazy Loading
• Latency is the time between when a browser requests a resource from a server and when it starts to receive the server’s response.
• On mobile, latency is a major UX killer. For a 1Mb page with 85 requests per page, it is 4.5s!
• JavaScript is expensive; parsing takes time and blocks the rendering of the page. Usually you don’t need all JavaScript right away.
![Page 56: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/56.jpg)
Gmail’s Lazy Loading
• Idea: let browsers download all of the JS right away, but evaluate it “on demand”, i.e. when users need a particular feature.
• Much of the downloaded JS is commented out, and when needed uncommented and eval-ed.
• Gmail’s case:200 Kb of JS -> 2600 ms page load200 Kb of JS (lazy loaded) -> 240 ms page load
![Page 57: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/57.jpg)
Gmail’s Lazy Loading• <script id="lazy">
// Make sure you strip out (or replace) comment blocks in your JavaScript first./* JavaScript of lazy module */</script>
<script>function lazyLoad() {var lazyElement = document.getElementById('lazy'); var lazyElementBody = lazyElement.innerHTML;var jsCode = stripOutCommentBlock(lazyElementBody); eval(jsCode); }</script>
<div onclick=lazyLoad()>Lazy Load</div>
![Page 58: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/58.jpg)
![Page 59: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/59.jpg)
The Two-Click Social Widget
• Load social widgets only when user explicitly chooses to take that action to share content.
• Idea: load small social icons by default, and load the FB, Twitter and G+ widgets on click.
• Cuts down on bandwidth and on latency.(FB button alone weighs 120 Kb + 4 requests).
![Page 60: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/60.jpg)
![Page 61: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/61.jpg)
![Page 62: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/62.jpg)
Protecting image/video aspect ratios
![Page 63: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/63.jpg)
Protecting Image Aspect Ratios
• When max-width: 100%; is applied to an image with width and height attributes defined in HTML, image rescales incorrectly.
• Solution: add height: auto; for images to which max-width: 100% is applied.
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• CSS:img, video { max-width: 100%; height: auto; }
![Page 64: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/64.jpg)
Intrinsic Ratio For Videos
• To ensure the intrinsic 4:3 or 16:9 ratios for videos, we create a box with the proper ratio, then stretch the video inside to fit the dimensions of the box.
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• HTML:<div class="wrapper-with-intrinsic-ratio"> <div class="element-to-stretch"></div></div>
![Page 65: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/65.jpg)
Intrinsic Ratio For Videos
• CSS:.wrapper-with-intrinsic-ratio { position: relative; padding-top: 25px; /* player chrome */ padding-bottom: 56.25%; /* 9:16 = 0.5625 */ height: 0; }
.element-to-stretch { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: teal;}
![Page 66: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/66.jpg)
![Page 67: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/67.jpg)
![Page 68: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/68.jpg)
![Page 69: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/69.jpg)
Responsive Videos
• We can serve different video files to different devices by using media attribute on thevideo <source> attribute.
• Supported in the latest versions of Chrome, Opera, Safari, FF 15+, IE9+, mobile browsers.
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 70: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/70.jpg)
Responsive Videos
• HTML:
<video controls preload="none">
<source type="video/mp4" src="video_small.mp4" media="all and (max-width: 480px), all and (max-device-width: 480px)">
<source type="video/webm" src="video_small.webm" media="all and (max-width: 480px), all and (max-device-width: 480px)">
<source type="video/mp4" src="video.mp4">
<source type="video/webm" src="video.webm">
<!-- proper fallback content goes here -->
</video>
![Page 71: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/71.jpg)
Vertical mediaqueries & splitting
![Page 72: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/72.jpg)
Vertical Media Queries
• min-height and max-height are useful for adjusting the font-size, padding, margin and cropping images.
• Beware of h/v-media queries collisions when resizing the browser. Things might easilyget out of control. • JavaScript:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 73: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/73.jpg)
![Page 74: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/74.jpg)
![Page 75: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/75.jpg)
Media Queries Splitting
• In development, we can use a breakpoint-based organization for CSS (“min-width”):0-up.css, 450-up.css, 720-up.css etc.
• We can also set breakpoints 1px apart and split styles instead of overriding from one media query to the next (“min/max-width”):base.css, 0-449.css, 450-719.css etc.
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 76: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/76.jpg)
Media Queries Splitting
• In practice, it’s often a good starting point to work with em media queries right away.0-up.css, 25em-up.css, 35em-up.css etc.
• If it’s not an option, it’s a good idea to convert px to em for production code to improve maintenance and avoid zooming issues. • JavaScript:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 77: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/77.jpg)
![Page 78: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/78.jpg)
![Page 79: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/79.jpg)
DebuggingMedia Queries
![Page 80: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/80.jpg)
“ Designing for the Web is like visualizing a tesseract. We build experiences by manipulating their shadows.
— Tim Brown
![Page 81: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/81.jpg)
Debugging Media Queries
• Due to lack of convenient tools, debugging RWD often feels like groping in the dark. There are some popular techniques though.
• Setting the body bg color to different colors for each breakpoint. Also box-sizing: border-box.
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• The * technique for testing for optimal measure in the browser.
![Page 82: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/82.jpg)
![Page 83: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/83.jpg)
![Page 84: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/84.jpg)
![Page 85: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/85.jpg)
People like to test a number of metrics to see why people are not * staying on a site. I think sometimes we spend so much time focusin* g on analytics that we have no...
*
*
![Page 86: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/86.jpg)
People like to test a number of metrics to see why people are not * staying on a site. I think sometimes we spend so much time focusin* g on analytics that we have no...
*
*
![Page 87: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/87.jpg)
![Page 88: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/88.jpg)
![Page 89: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/89.jpg)
Typography-Out Approach is an optionfor building responsive websites.
![Page 90: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/90.jpg)
Typography-OutApproach
![Page 91: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/91.jpg)
![Page 92: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/92.jpg)
We prepared a series of moodboards to further explore the idea we had, especially to find elements that a new, content-heavy layout could use.
![Page 93: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/93.jpg)
We focused specifically on macro- and microtypography as
![Page 94: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/94.jpg)
![Page 95: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/95.jpg)
![Page 96: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/96.jpg)
![Page 97: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/97.jpg)
![Page 98: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/98.jpg)
![Page 99: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/99.jpg)
Our design process was defined by one major constraint: perfect measure.
![Page 100: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/100.jpg)
If we could adequately typeset an article and thus establish the general context of the design, everything else would follow. [...]The key attribute for achieving perfect typesetting was perfect measure: a good average between 45 and 90 characters per line—on all screen resolutions.
— Elliot Jay Stocks, “Smashing Book 3”
“
![Page 101: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/101.jpg)
So we started looking for typefaces that would best express our new vision, values and our deisgn persona...and oh boy were we excited. We felt like a kid in a candy store... until we had to be thrown into cold shower.
With the abundance of rich typefaces on the Web, we excitedly jumped into the myriad of possibilities. We experimented with literally dozens of typefaces from several type foundries in various pairings: we considered Centro Sans and Centro Serif, Meta and Meta Serif, Adelle, Ronnia, LFT Etica, FF Tisa, just to name a few. We observed how they looked at different font sizes and how well they worked together. We examined how well they appeared in bold and italic and in headings and body copy, as well as how they worked in less obvious contexts such as image captions.
![Page 102: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/102.jpg)
![Page 103: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/103.jpg)
Typefaces should be optimized for long reading on (many) screens and fit various contexts.
![Page 104: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/104.jpg)
![Page 105: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/105.jpg)
![Page 106: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/106.jpg)
![Page 107: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/107.jpg)
We started out with setting up a couple of demo pages for typography, including links, italics, bold.
With all design distractions removed, we could pay a great deal of technical attention to the type once we set up our basic styles. How legible is this typeface at a particular size? How well does it perform on Windows? Is there a superior version from an alternative font delivery network that perhaps uses PostScript outlines for display sizes? Focusing on these fine details is much easier when you’re looking purely at the type and nothing else.
Because there’s a lot going on visually on Smashing Magazine—screenshots, buttons and noisy ads—a sans-serif felt like a more sensible, uncluttered route for body copy. In fact, it was difficult to imagine a serif typeface being used for code-heavy articles in the coding section.
![Page 108: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/108.jpg)
Sorry, Proxima Nova rendering is incorrect on this screenshot, but we lost the original files. :-)
![Page 109: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/109.jpg)
![Page 110: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/110.jpg)
![Page 111: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/111.jpg)
![Page 112: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/112.jpg)
![Page 113: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/113.jpg)
![Page 114: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/114.jpg)
![Page 115: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/115.jpg)
![Page 116: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/116.jpg)
![Page 117: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/117.jpg)
We started from mobile, and worked our way upwards to desktop views.
![Page 118: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/118.jpg)
![Page 119: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/119.jpg)
![Page 120: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/120.jpg)
Navigation changes: we used two markups: one with select, another with a nested unordered list. and switches them on and off with CSS.
The keywords were carefully chosen and tested. We kned that it would take too much space, but we decided to test it and it performed fairly well.
We’ve developed a toggle menu here as well, it is currently in the queue for testing. We had drop-down... initially here...
![Page 121: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/121.jpg)
![Page 122: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/122.jpg)
![Page 123: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/123.jpg)
![Page 124: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/124.jpg)
![Page 125: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/125.jpg)
We never targeted specific devices—and introduced media queries whenever it felt natural to do so.
![Page 126: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/126.jpg)
Responsive design affects viewports and media, including print.
![Page 127: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/127.jpg)
![Page 128: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/128.jpg)
![Page 129: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/129.jpg)
![Page 130: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/130.jpg)
ResponsiveDesign Patterns
![Page 131: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/131.jpg)
Responsive Design Patterns
• Responsive design affects all design assets: layout, images, type, navigation, tables, calendars, galleries, forms, maps, ads...
• Offline access and mobile UX enhancements complement RWD very well (e.g. HTML5 localStorage, GeoLocation, Telephone links). • JavaScript:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 132: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/132.jpg)
![Page 133: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/133.jpg)
![Page 134: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/134.jpg)
![Page 135: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/135.jpg)
![Page 136: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/136.jpg)
![Page 137: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/137.jpg)
![Page 138: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/138.jpg)
![Page 139: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/139.jpg)
![Page 140: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/140.jpg)
![Page 141: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/141.jpg)
![Page 142: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/142.jpg)
![Page 143: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/143.jpg)
Responsive Design Patterns
• Media queries aren’t supported in Android 2.1 native client, Gmail app on all platforms, Win Mobile 6.1 & Phone 7, BlackBerry OS 5.
• Also, Webmail services tend to ignore media queries and overwrite them with their custom CSS code. • JavaScript:
var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
![Page 144: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/144.jpg)
![Page 145: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/145.jpg)
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
![Page 146: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/146.jpg)
![Page 147: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/147.jpg)
There are still many unsolved problems.
![Page 148: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/148.jpg)
There are still many unsolved problems.
Web formsImagesPerformance
Consistency
MaintenanceDebugging
![Page 149: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/149.jpg)
The Very FinalConclusion
![Page 150: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/150.jpg)
![Page 151: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/151.jpg)
![Page 152: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/152.jpg)
![Page 155: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/155.jpg)
![Page 156: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/156.jpg)
Thank YouFor Your Attention!@smashingmag
![Page 157: Responsive Web Design: Clever Tips and Techniques](https://reader033.vdocument.in/reader033/viewer/2022051706/58f9aa34760da3da068b768c/html5/thumbnails/157.jpg)
Image credits
• Front cover: Geometric Wallpapersby Simon C Page (http://simoncpage.co.uk/blog/2012/03/ipad-hd-retina-wallpaper/)
• JavaScript:var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'desktop') { // Load some more content.}
• Homer Simpsons: http://smashed.by/homer, http://smashed.by/crazy-homer