Post on 28-Jan-2015
description
transcript
Responsive web designDesign once and done
Matt HerzbergerFIU Web Communications
In the long long ago... 1990s
Best viewed in Internet Explorer
800 X 600
This used to be the web
Now we have to deal with this
http://bradfrostweb.com
The post PC era
http://www.flickr.com/photos/adactio/6152947625/
Here’s what we want
http://jboye.com/blogpost/how-jyske-bank-pulled-off-responsive-web-design/
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
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
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
Quickstarts aka frameworks
Twitter bootstrap
Zurb Foundation
Skeleton, Less, 320 and up, Frameless, Gridless, and many more
Content is no longer king, it’s King, Queen and Prince
Content for RWDRethink (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
Gotchas / issuesImages
Videos
Typography
Content
Menus / navigation
RESS / server = performance
3rd party content / widgets
Higher ed examples
Higher ED RWD Directoryhttp://go.fiu.edu/eb2
Mobile in Higher Edhttp://go.fiu.edu/eb3