A talk I gave at the annual EVRY Summer Symposium, aiming to inspire developers to develop responsibly and responsively.

1. responsible web design
JONAS PÄCKOS
EVRY SENSOMMARSYMPOSIUM 2012

2. web and mobile
ux developer
WEB DESIGNER ++

3. changes in personal computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

4. changes in personal computing
http://www.asymco.com/2012/01/17/the-rise-and-fall-of-personal-computing/

5. http://thenextweb.com/apple/2012/01/25/there-are-now-more-iphones-sold-than-babies-born-in-the-world-every-day/

6. responsive web design

7. responsive web design
Fluid grids
Flexible Media
Media Queries

8. fluid grids
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

9. 640 x 480
800 x 600
1024 x 768

11. http://www.floridadisaster.org/SiteView.htm

13. flexible media
Images
Video

15. flexible media

16. flexible media
1024px
683px

18. flexible media
img, video {
max-width: 100%;
}

20. media queries
@media screen and (min-width:
320px) and (max-width: 768px)
{
...
}

21. common breakpoints
320px mobile portrait
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape / netbook
1280px desktop

22. ”
Responsive design is not about
“designing for mobile.” But it’s not
about “designing for the desktop,”
either.
- Ethan Marcotte
http://unstoppablerobotninja.com/entry/toffee-nosed/

23. ”
Rather, it’s about adopting a more
flexible, device-agnostic approach
to designing for the web.
- Ethan Marcotte
http://unstoppablerobotninja.com/entry/toffee-nosed/

24. ”
Fluid grids, flexible images, and
media queries are the tools we use
to get a bit closer to that somewhat
abstract-sounding philosophy.
- Ethan Marcotte
http://unstoppablerobotninja.com/entry/toffee-nosed/

25. common breakpoints
320px mobile portrait
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape / netbook
1280px desktop

26. Today’s common breakpoints aren’t
tomorrow’s. Create a device-agnostic
flexible platform.
- Brad Frost
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

27. android fragmentation
The Study. Over the past 6 months we've been logging the new devices that download OpenSignalMaps, we've based this study on 681,900 of these devices. We've l
at model, brand, API level (i.e. the version of Android) and screen size and we've tried to present this in the clearest form we can.
http://opensignalmaps.com/reports/fragmentation.php

28. Over the past 6 months we've been
logging the new devices that download
OpenSignalMaps, we've based this study
on 681,900 of these devices.
http://opensignalmaps.com/reports/fragmentation.php

29. We've looked at model, brand, API level
(i.e. the version of Android) and screen
size and we've tried to present this in
the clearest form we can.
http://opensignalmaps.com/reports/fragmentation.php

30. android fragmentation
http://opensignalmaps.com/reports/fragmentation.php

31. android versions
http://opensignalmaps.com/reports/fragmentation.php

32. screen resolution
http://opensignalmaps.com/reports/fragmentation.php

33. screen resolution
Android

34. screen resolution
Android, most common screen sizes

35. screen resolution
iPhone and iPad

36. http://designmind.frogdesign.com/blog/the-coming-zombie-apocalypse-small-cheap-devices-
will-disrupt-our-old-school-ux-assumptions.htm

37. responsive web design
content
performance strategy
feature touch
detection
conditional
rwd with server-side loading
components
Photo Credit: http://howthehellshouldiknow-wallyworld.blogspot.se/2011/08/this-is-just-tip-of-iceberg.html

38. performance

39. 71%
Mobile web users expect websites to load
as fast if not faster than desktop sites
http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers

40. 74%
Mobile users will abandon a site if it takes
more than 5 seconds to load
http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/

41. 1 MB
Average page size
http://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/

42. Average Page, 2012
JS IMG CSS FLASH HTML OTHER
196kb
31kb
46kb
82kb 674kb
37kb

43. http://mobitest.akamai.com/m/index.cgi

44. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

45. structure content first

46. work with real content

47. start with mobile

48. WYSIWYG

49. Do websites need to look exactly
the same in every browser?

51. screen resolution
http://opensignalmaps.com/reports/fragmentation.php

52. WYSIWTF

53. http://styletil.es

54. http://styletil.es

55. http://foundation.zurb.com

56. http://twitter.github.com/bootstrap/

57. http://twitter.github.com/bootstrap/examples/fluid.html

58. twitter bootstrap mediaqueries
@media (min-width: 1200px) {...}
@media (max-width: 980px) {...}
@media (max-width: 768px) {...}
@media (max-width: 480px) {...}
@media (max-width: 320px) {...}
http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

59. a more mobile-first approach
@media (min-width: 320px) {...}
@media (min-width: 480px) {...}
@media (min-width: 768px) {...}
@media (min-width: 980px) {...}
@media (min-width: 1200px) {...}
http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

60. common breakpoints
320px mobile portrait
480px mobile landscape
600px small tablet
768px tablet portrait
1024px tablet landscape / netbook
1280px desktop

61. Today’s common breakpoints aren’t
tomorrow’s. Create a device-agnostic
flexible platform.
- Brad Frost
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

62. a mobile-first and content
connected approach
@media (min-width: 44em) {...}
@media (min-width: 56em) {...}
@media (min-width: 72em) {...}
@media (min-width: 100em) {...}
http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

63. ”
The absence of a media query is
in fact, the first media query.
- Bryan Rieger
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

64. begin with a lightweight default
A
fully flexible with default
B styles for navigation,
fonts, content and
C
no media query
http://www.slideshare.net/yiibu/pragmatic-responsive-design

65. each style sheet augments the others
breakpoint breakpoint
style sheet 1
augment original
A A
B style sheet with
B C
(only) the style
C changes that are
needed to enhance
the layout
< xx px wide xx px to xxx px
(or unable to
understand further
http://www.slideshare.net/yiibu/pragmatic-responsive-design
instructions)

66. each style sheet augments the others
breakpoint breakpoint breakpoint
style sheet 1 style sheet 2
A C
A A B
B augment
B C
once
again for
C TVs etc.
< xx px wide xx px to xxx px >xxx px wide
(or unable to
understand further
http://www.slideshare.net/yiibu/pragmatic-responsive-design
instructions)

67. a common approach
One style sheet with media
queries on the inside.
styles.css
@media {
(min-width: 320px)
}
a single css file is network
@media { efficient, but includes
(min-width: 480px) unnecessary style data that
} all devices end up downloading
@media {
(min-width: 640px)
}
@media {
(min-width: 768px)
http://www.slideshare.net/yiibu/pragmatic-responsive-design
}

68. a more robust option
Multiple style sheets with
media queries on the inside.
MAJOR
BREAKPOINTS
IN DOCUMENT
HEAD
basic.css mobile.css desktop.css
MINOR
(typically) @media { @media {
BREAKPOINTS
no media (min-width: 480px) (min-width: 768px)
WITHIN EACH queries } }
STYLE SHEET
@media {
(min-width: 640px)
}
http://www.slideshare.net/yiibu/pragmatic-responsive-design

69. http://scottjehl.github.com/CSS-Download-Tests/

70. http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu

71. http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu

72. To load the Facebook,
Twitter and Google social
media buttons for a total of
19 requests takes 246.7k in
bandwidth.
http://www.zurb.com/article/883/small-painful-buttons-why-social-media-bu

73. https://twitter.com/stephenhay/status/157430546396483587

74. progressively enhanced social icons
<a href="http://www.facebook.com/sharer.php?
u=URL&t=TITLE">link or image</a>
<a href="http://twitter.com/home?status=STATUS" title="Click
to share this post on Twitter">Share on Twitter</a>
<a href="https://m.google.com/app/plus/x/?
v=compose&content=CONTENT">Image or text</a>

75. progressive enhancement
JavaScript
Behaviour
CSS
Presentation
HTML
Stabile foundation

76. aggressive enhancement
Some devices can’t display carousels, so why burden those
devices with content that they don’t need?
Progressive enhancement is where you gradually layer new
functionality into a site according to the capabilities of the
browser or device.
Aggressive enhancement goes further, treating content itself
as an enhancement.
http://globalmoxie.com/blog/making-of-people-mobile.shtml

77. aggressive enhancement
If a browser doesn’t have JavaScript, it doesn’t even
download the secondary carousel content. The result is a light
page that lets the browser start rendering that basic content
right away.
It’s a technique that’s respectful of visitors’ bandwidth,
computing power, and time.
It’s not only responsive, it’s responsible.
http://globalmoxie.com/blog/making-of-people-mobile.shtml

78. south street enhancement tools
Enhance
a tiny JavaScript framework designed to help developers determine if a browser is
capable of handling additional JavaScript and CSS enhancements, and load specific
enhancements for that browser as fast and simply as possible.
eCSSential
an experimental utility for making browsers load responsive CSS in a more responsible
way.
QuickConcat
a simple dynamic concatenator for html, css, and js files, written in PHP
AjaxInclude
a plugin that is designed for modular content construction, that runs on jQuery
AppendAround
A JavaScript pattern for responsive, roving markup. IA L SOUTH
NT DE
EC
S SE
STREET AJ
A XIN
C LU
PictureFill
a simple pattern for overhead-free responsive images today.
https://github.com/filamentgroup/Southstreet

79. http://www.lukew.com/ff/entry.asp?1392

82. the smart tv

88. http://www.alistapart.com/articles/dao/
http://www.alistapart.com/articles/dao/

89. ”
Make pages which are accessible,
regardless of the browser, platform
or screen that your reader chooses
or must use to access your pages.
- John Allsop
http://www.alistapart.com/articles/dao/

90. ”
Designing adaptable pages is
designing accessible pages.
- John Allsop
http://www.alistapart.com/articles/dao/

91. ”
Design responsibly!
- Jonas Päckos

92. thank you.
http://about.me/pekkos
http://www.slideshare.net/pekkos
@pekkos