AgendaWho we areWho do we work for?What is Responsive Design?How to plan for responsive designTechnical explanationResponsive Design ToolsQuestions
Who we are Name: John Nollin Lives In: Chicago, IL. Likes: Travel Basketball Organization Process
About Daniel Honrade • Co-Presenter • @danielhonrade • JQuery mobile drupal • created a mobile jquery custom subtheme • project: www.mcmcauto.com • Promet Source • Lead Drupal Themer
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
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
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!
How to Plan for Responsive Design?BIG to small OR small to BIG Name Candidates
How to Plan for Responsive Design?small to BIGContent Enhancement Name CandidatesWhat 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?
How to Plan for Responsive Design?small to BIGContent Enhancement Name CandidatesWhat 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
How to Plan for Responsive Design?small to BIGContent Enhancement Name CandidatesHow can I optimize my content?What supplemental informationdo my users need?What do I provide now thatLOCATION and TOUCH is nolonger needed?
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....
Technical Explanation of Responsive Design Name Candidates
Responsive Design ToolsResponsive web design sketch sheets:http://jeremypalford.com/arch-journal/responsive-web-design-sketsheets Name CandidatesResizeMyBrowser.comResponsive design testing:http://mattkersley.com/responsive/OM Tools – jquery mediaqueries integration