Responsive Web Design


Published on

Planning your responsive web design project to mobilize your website.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Fly through
  • Responsive Web Design

    1. 1. Responsive Design John Nollin Daniel Honrade
    2. 2. AgendaWho we areWho do we work for?What is Responsive Design?How to plan for responsive designTechnical explanationResponsive Design ToolsQuestions
    3. 3. Who we are Name:  John Nollin Lives In:  Chicago, IL. Likes:  Travel  Basketball  Organization  Process
    4. 4. About Daniel Honrade • Co-Presenter • @danielhonrade • JQuery mobile drupal • created a mobile jquery custom subtheme • project: • Promet Source • Lead Drupal Themer
    5. 5. Who do I work for? Promet Source  Founded in 2003 -Custom Drupal Development Promet Support  35+ employees worldwide -Drupal Support Promet Mobile - Mobile Business Solutions  Based in Chicago Promet Marketing -Internet Marketing  Open Source
    6. 6. Specialties Migration Custom Ecommerce Member Management (civi) Integration
    7. 7. Happy Clients
    8. 8. Responsive Design
    9. 9. What is Responsive Design?Responsive Design is theconcept of developing awebsite in a way that Name Candidatesallows the layout toadjust according to theuser’s screen resolution
    10. 10. Why choose Responsive Design?YOU WANT IT TO WORK EVEN WHEN NEW DEVICES ARE RELEASED A mobile site needs to be able to recognize the user’s device When new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable. Planning for the FUTURE and MOBILE GROWTH!
    11. 11. Responsive Design Examples
    12. 12. Responsive Design Examples
    13. 13. Responsive Design Examples
    14. 14. Responsive Design Examples Live Example
    15. 15. How to Plan for Responsive Design?BIG to small OR small to BIG Name Candidates
    16. 16. How to Plan for Responsive Design?small to BIGContent Enhancement Name CandidatesWhat is your most important content?What content is desired when mobile?How can I make this SIMPLE?How can I make this easy to read?
    17. 17. How to Plan for Responsive Design?small to BIGContent Enhancement Name CandidatesWhat additional content do my usersneed?What additional functionality can I addnow that I have screen size?How can I enhance this while alsoconsidering it is TOUCH screen
    18. 18. How to Plan for Responsive Design?small to BIGContent Enhancement Name CandidatesHow can I optimize my content?What supplemental informationdo my users need?What do I provide now thatLOCATION and TOUCH is nolonger needed?
    19. 19. How to Plan for Responsive Design? Most Common Sizes:  320 x 480 px: Smartphone  480 x 320 px: Name Candidates Smartphone in landscape  768 x 1024 px: iPad / tablet  1024 x 768 px: monitor or laptop  Larger....
    20. 20. Technical Explanation of Responsive Design Name Candidates
    21. 21. Responsive Design ToolsResponsive web design sketch sheets: Name CandidatesResponsive design testing:OM Tools – jquery mediaqueries integration
    22. 22. Questions
    23. 23. Thank You! John Nollin Daniel