Responsive Design

Overview / Introduction

1. RESPONSIVE DESIGN
2. How I stopped worrying and learned to love the bomb Responsive design is not just set of techniques or design rules, it’s more of a new mindset. If put into action properly, designing responsive sites will provide an entirely new perspective. Let me show you what I mean…
3. How did we get here? “The web is an ever changing place” — we have heard this many times, but what does this actually mean?
4. A party for two In many ways, Apple is the direct opposite of the web. Uses mostly closed and proprietary technology and doesn’t deal with vendors which is in part reason for it’s unprecedented success [EXPLAIN].
5. A party for everyone The web however is by nature build on mostly open technology and knows no vendor restrictions.
6. This much openness comes with pain for everyone, but mostly the responsible (as in being *) developers. We have to deal with X different vendors and then different versions of everything: OS, Browser, plugins, mark–up/CSS specs, …
7. Oh, and then there’s this…
8. “The Best Browser is the One You Have with You“ — Stephanie Rieger, ALA The web has become ubiquitous, it’s everywhere and on every device. And each of these devices comes with it’s own set of “rules”.
9. “Mobile internet use nearing 50%” — BBC Technology, August 2011 The mobile web is exploding and will still continue to grow rapidly …
10. How are we approaching this situation? The mobile web is exploding and will still continue to grow rapidly …
11. The way we have always done and not very well. We have come to like our sites and their designs (as owners at least) and don’t want to say good bye just yet. So we wrap them into a new layer.
12. Which leads to weird side effects. Believe it or not, not every mobile browser runs on iOS. Also, sharing a link to such a site will in many cases render the page in the mobile version no matter what device requests the page.
13. Where’s my jetpack anyways? Why does this not work as good as hoped? —The web does not leap in big jumps forward. It gradually evolves: Despite what we have been told: * Not all publishing moved to digital. * We’re not browsing the web only on mobile devices. / [EXPLAIN theory of niches, using physical books]
14. Let’s take a step back and do something that happens way to little in our field. Let’s take a deep breath and think for a second what it is that we’re trying to do.
15. CONTENT FIRST We’re trying to communicate something to our users/visitors. Always! That’s the essence of the web, the essence of media.
16. The success of apps like Readability or Instapaper are clear indicators for the necessity to focus stronger on the content. Where did this essential piece get lost?
17. Why isn’t that happening yet? In the beginning there were no pure web designers. Most people designing for the web came from a print background and tried to apply what they knew to the web.
18. Getting the message across So, having established that we’ve come a little off the road, what are we going to do about it?
19. Here’s a great idea! — Responsive design. Content aware. Browse/device concious.
20. With “crotch–grabbing–face– slapping new great”–effect Having said that the web evolves steadily, rapid change is rarely seen and real innovation is rare. Even rarer is innovation based on existing tools so clever and so painfully obvious… [EXPLAIN further]
21. A few examples in the wild… http://hicksdesign.co.uk/ http://cognition.happycog.com/ http://www.ampersandconf.com/ http://www.bostonglobe.com/
22. SO, HOW DOES IT WORK?
23. Foundation mark–up Semantically meaningful mark–up, serving content only — not appearance — makes the base. As accessibility nut this is a late but well deserved victory.
24. <!DOCTYPE html> HTML5
25. Setup Semantically meaningful mark–up, serving content only — not appearance — makes the base. As accessibility nut this is a late but well deserved victory.
26. <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> Get mobile viewport under control and disable zooming.
27. Media Queries
28. <link rel="stylesheet" href="global.css" media="all" /> <link rel="stylesheet" href="main.css" media="screen" /> <link rel="stylesheet" href="paper.css" media="print" /> Media types
29. @media screen { #selector {…} } @media print { #selector {…} } Media types in stylesheets
30. @media screen and (min-width: 720px) { #selector {…} } Media query in stylesheets
31. <link rel="stylesheet" href="foo.css" media="screen and (min-width: 720px)" /> Media types in stylesheets
32. @import url("foo.css") screen and (min-width: 720px); Media types in stylesheets
33. width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index … not only width and height, in theory a lot more (browser–depending…)
34. Breakpoints * “Traditional” way: pick most common devices and use screen sizes as break points * Works, but seems feels off — haven’t we done this before? (Remember the 960 grid?) * Let the content decide over break points, not hypothetical screen sizes * Start from smallest screen size
35. Layout / Grids Define font sizes in em and grid columns in percentage. Fluid layouts.
36. Responsive images (and media)
37. img, embed, object, video { max-width: 100%; }
38. Related
39. Progressive Enhancement EXAMPLES: Image listing to slide show with support for touch events, custom input elements
40. enhance.js modernizr.js yepnope.js
41. Why bother?
42. Focus SEO aspects aside, your content is the single most valuable asset on your site. And while the definition of quality might depend on your user base, quality is what they will seek and find elsewhere if you don’t provide it.
43. Maintainability Initially slightly higher costs due to longer design processes are soon balanced by the benefits of having to maintain a single code base for *all* clients.
44. Challenges
45. Responsive images (media) Responsive images are (still) a problematic topic. Difficult, no real solution yet. Every existing solution depends either on JS and or cookies. New problem: image prefetching implemented by newer browsers. Flash and overhead.
46. <img src="mobile.jpg" data-full="full.jpg" /> <img src="mobile.jpg" data-medium="medium.jpg" data-full="full.jpg" /> The currently widespread approach.
47. <picture> <source src="full.jpg" media="min-width: 720px" /> <source src="mobile.jpg" /> <img src="mobile.jpg" /> </picture> Proposed and fictional solution.
48. Temptations to fall back in to old habits User agent and/or Browser detection e.g.
49. Browser limitations Media queries aren’t fully supported everywhere. Javascript support across devices is very different [EXAMPLE: DOM manipulation]
50. Shims, shivs and polyfills Overcome browser limitations with Javscript
51. The future
52. Responsive (web) applications
53. Even stronger focus on content à la Readability More than 10GB worth of ad impressions per day / US citizen.
54. No more ”hacks“ Every "hack" equals technical dept and needs to "grow up" eventually ** It's okay to abuse stuff to get results when in an early stage ** But in the long run a solution adhering to the provided circumstances needs to be found, especially in an open environment such as the web
55. Jetpacks
56. Thanks!