1. Responsive web design
Design once and done
Matt Herzberger
FIU Web Communications

2. In the long long ago... 1990s
Best viewed in Internet
Explorer
800 X 600

3. This used to be the web

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

12. More relevant than ever
http://xkcd.com/773/

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

14. Gotchas / issues
Images
Videos
Typography
Content
Menus / navigation
RESS / server = performance
3rd party content / widgets

15. Higher ed examples
Higher ED RWD
Directory
http://go.fiu.edu/eb2
Mobile in Higher Ed
http://go.fiu.edu/eb3

16. Questions?
mherzber@fiu.edu
7-0094