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
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/
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
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
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>
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
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/