Please won't somebody think of the internet connected fridge

A talk on various topics of the web. From the reality of the different devices connecting to your sites, the theory of Responsive Design, the awesomeness and failings of media queries ... and the fabled internet connected fridge.

Transcript

1. RESPONSIVE DESIGN
2. CONSIDERING MOBILE ... and other devices
3. PLEASE won’t SOMEBODY think INTERNET CONNECTED FRIDGE of the
4. 1024 x 768
5. “MOBILE” IT’S KIND OF A BIG DEAL
6. = 2.25 BILLION = 4.6 BILLION (“subscriptions”)
7. = 2.25 BILLION = 4.6 BILLION (“subscriptions”)
8. 200,435 7.62% “Mobile” visits of total 2,629,095 Data from cheshirewestandchester.gov.uk from Nov 16 2010 to Nov 14 2011
9. Data from cheshirewestandchester.gov.uk from Nov 16 2010 to Nov 14 2011 MOBILE USAGE MONTH BY MONTH 30,000 30,000 15,000 15,000 7,023 in Dec 2010 25,953 in Oct 2011 Snow! Elections ‘ asco’
10. Data from cheshirewestandchester.gov.uk from Nov 16 2010 to Nov 14 2011 HOW MANY “MOBILE” DEVICES? 144
11. Data from cheshirewestandchester.gov.uk from Nov 16 2010 to Nov 14 2011 Apple iPhone 51,814 Apple iPad 24,063 (not set) 14,094 Apple iPod Touch 6,716 Samsung Galaxy S 3,257 HTC Desire 3,148 HTC Wild re 2,045 BlackBerry Curve 1,953 HTC Desire HD 1,947 Samsung Galaxy S II 1,505 Apple iOS 150,904 Android 33,337 BlackBerry 9,246 Symbian 5,072 Sony 676 Samsung 477 Nokia 468 Windows 206 LG 44 Vodafone 3
12. Data from cheshirewestandchester.gov.uk from Nov 16 2010 to Nov 14 2011 K660i 240x320 Access NetFront 5 Visits 7230 240x320 Opera Mini 17 Visits C3-01 240x320 HTML & XHTML! 45 Visits E72 320x240 HTML & XHTML! 172 Visits
13. SCREEN SIZE BROWSER ABILITY INTERFACE INPUT METHOD CONNECTION SPEED CONTEXT L  
14. RESPONSIVE DESIGN Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can … embed standards-based technologies into our designs to make them not only more exible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. Ethan Marcotte, May 25 2010 (http://www.alistapart.com/articles/responsive-web-design/) “ ”
15. <link rel="stylesheet" media="(max-device-width: 480px)" href="style_480.css" />
16. Part of the CSS3 spec Safari 3+, Chrome, Firefox 3.5+, Opera 7+, IE 9+ You can emulate support with JavaScript It can fall back naturally anyway … … as long as your markup and content are sound
17. Slide nicked from Pragmatic Responsive Design by Yiibu http://slidesha.re/oaKrXO
18. MEDIA QUERIES ARE NOT THE MESSIAH …
19. … THEY’RE JUST A VERY NATTY TOOL ey are reliant, mainly, on browser size ey only control CSS elements Limited ability to tailor interfaces fully Getting them right is a long process Responsive Design is a concept, not a tool.
20. Data from cheshirewestandchester.gov.uk from Nov 16 2010 to Nov 14 2011 HOW MANY UNIQUE SCREEN RESOLUTIONS? 3,816 BROWSER
21. 218 x 194 2560 x 1440
22. HOW MANY BROWSERS? 145
23. SCREEN SIZE BROWSER ABILITY INTERFACE INPUT METHOD CONNECTION SPEED CONTEXT
24. INPUTS & INTERFACE
25. INPUTS & INTERFACE
26. INPUTS & INTERFACE
27. INPUTS & INTERFACE
28. INPUTS & INTERFACE
29. INPUTS & INTERFACE
30. INPUTS & INTERFACE
31. INPUTS & INTERFACE
32. INPUTS & INTERFACE
33. CONTEXT
34. “MOBILE” IS NOT EVERYTHING RESPONSIVE DESIGN IS A CONCEPT NO SILVER BULLET DIFFERENT WAY OF THINKING CONTEXT IS BASICALLY MIND READING THINK OF THE FUTURE
35. FURTHER READING ETHAN MARCOTTE (@beep) Responsive Web Design: e Article (http://bit.ly/tgYY2x) Responsive Web Design: e Book (http://bit.ly/tSnQz0) AARON GUSTAFSON (@AaronGustafson) Adaptive Web Design (http://bit.ly/vkX84w) Yiibu slides (http://slidesha.re/s9ZOsA) 320 and up framework (http://bit.ly/sFOEVu) OTHER BITS