SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
4.
Now we have to deal with
this
http://bradfrostweb.com
5.
The post PC era
http://www.flickr.com/photos/adactio/6152947625/
6.
Here’s what we want
http://jboye.com/blogpost/how-jyske-bank-pulled-off-responsive-web-design/
7.
How?
Not an app, not a mobile site
RESPONSIVE
WEB DESIGN
(RWD)
AKA somewhat interchangeable (NOT REALLY) = Adaptive, Future Friendly,
Responsible, Progressive enhancement, Mobile First
8.
What is RWD?
Websites and apps that are sustainable and future
friendly
We can’t design a new site for each new device,
we should build a flexible adaptive site that can
work on each new device
1.Flexible grid layout
2.Flexible images and media
3.Media Queries
9.
How do we do RWD?
Start with the main layouts (Desktop, tablet, mobile -
breakpoints)
Be more flexible about your design, it’s about
proportions not pixels
Design, code, repeat... your plans may not work out in
the browser
10.
Quickstarts aka frameworks
Twitter bootstrap
Zurb Foundation
Skeleton, Less, 320 and up, Frameless, Gridless, and
many more
11.
Content is no longer king,
it’s King, Queen and Prince
13.
Content for RWD
Rethink (headers, navigation, search bar, call to action)
Eliminate unnecessary things
Make structured content, not a big dumb WYSIWYG
think XML
Content should be fluid
Content should be consistent across all devices
Create once, publish everywhere