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

More relevant than ever

http://xkcd.com/773/

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

Questions?

mherzber@fiu.edu7-0094