Successfully reported this slideshow.

Responsive web design

2

Share

Loading in …3
×
1 of 16
1 of 16

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Responsive web design

  1. 1. Responsive web design Design once and done Matt Herzberger FIU Web Communications
  2. 2. In the long long ago... 1990s Best viewed in Internet Explorer 800 X 600
  3. 3. This used to be the web
  4. 4. Now we have to deal with this http://bradfrostweb.com
  5. 5. The post PC era http://www.flickr.com/photos/adactio/6152947625/
  6. 6. Here’s what we want http://jboye.com/blogpost/how-jyske-bank-pulled-off-responsive-web-design/
  7. 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. 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. 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. 10. Quickstarts aka frameworks Twitter bootstrap Zurb Foundation Skeleton, Less, 320 and up, Frameless, Gridless, and many more
  11. 11. Content is no longer king, it’s King, Queen and Prince
  12. 12. More relevant than ever http://xkcd.com/773/
  13. 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. 14. Gotchas / issues Images Videos Typography Content Menus / navigation RESS / server = performance 3rd party content / widgets
  15. 15. Higher ed examples Higher ED RWD Directory http://go.fiu.edu/eb2 Mobile in Higher Ed http://go.fiu.edu/eb3
  16. 16. Questions? mherzber@fiu.edu 7-0094

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ×