Responsive web design

1,510 views
1,485 views

Published on

This is a presentation about creating sites using responsive web design

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,510
On SlideShare
0
From Embeds
0
Number of Embeds
471
Actions
Shares
0
Downloads
42
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Responsive web design

    1. 1. Responsive web designDesign once and doneMatt HerzbergerFIU 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 withthis 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 futurefriendly 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 pixelsDesign, code, repeat... your plans may not work out inthe browser
    10. 10. Quickstarts aka frameworksTwitter bootstrapZurb FoundationSkeleton, Less, 320 and up, Frameless, Gridless, andmany 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 RWDRethink (headers, navigation, search bar, call to action)Eliminate unnecessary thingsMake structured content, not a big dumb WYSIWYGthink XMLContent should be fluidContent should be consistent across all devices Create once, publish everywhere
    14. 14. Gotchas / issuesImagesVideosTypographyContentMenus / navigationRESS / server = performance3rd 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.edu7-0094

    ×