Responsive Web Design - Lightening Talk

Transcript

1. Responsive
   Web Design
   Feb 2012
   

   View Slide

2. All the web enabled devices, put your hands up!
   

   View Slide

3. Device!
   Location! Context!
   Screen size! Processor
   speed! JavaScript!
   Flash! Media Queries!
   Drink! Girls!
   Feck!
   

   View Slide

4. Highest common denominator
   Universal access?
   

   View Slide

5. A different website for each device
   Optimum experience?
   

   View Slide

6. Responsive Web Design
   The Hannah Montana Solution
   

   View Slide

7. “Mobile first”
   What is your key content?
   What are your key features?
   

   View Slide

8. Adaptive content
   Progressive enhancement
   

   View Slide

9. Fluid grids
   Multiple break points
   

   View Slide

10. Emerging technical solutions
    A clear trajectory
    

    View Slide

11. the web
    print
    desktop
    apps
    Ugh! God!
    I HATE you! You’re so
    embarrassing!!!
    

    View Slide

12. New ways of working
    

    View Slide

13. Designers Developers
    

    View Slide

14. It could always have been this way
    

    View Slide

15. View Slide

16. Ceci n'est pas une photographie
    

    View Slide

17. What it was all along
    

    View Slide

18. “ The primary design principle underlying the Web’s
    usefulness and growth is universality. When you make a
    link, you can link to anything. [...] The Web should be
    usable by people with disabilities. It must work with any
    form of information, be it a document or a point of data,
    and information of any quality — from a silly tweet to a
    scholarly paper. And it should be accessible from any kind
    of hardware that can connect to the Internet: stationary or
    mobile, small screen or large. ”
    Tim Berners-Lee
    http://www.scientificamerican.com/article.cfm?id=long-live-the-web
    

    View Slide

19. View Slide

20. t
    Luke Wroblewski
    Ethan Marcotte
    Simon Collison
    Jeremy Keith
    Bryan Rieger
    I stole it all from
    these guys!
    Google these names for
    more information on
    Responsive Web Design!
    @morganesque
    

    View Slide