responsive web design
DESCRIPTION
Planning your responsive web design project to mobilize your website.TRANSCRIPT
Responsive Design
John NollinDaniel Honrade
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
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
-Custom Drupal Development
Promet Support
-Drupal Support
Promet Mobile
- Mobile Business Solutions
Promet Marketing
-Internet Marketing
Founded in 2003
35+ employees worldwide
Based in Chicago
Open Source
NEW OFFICE IN CEBU!!!!
Specialties
Migration
Custom Ecommerce
Member Management (civi)
Integration
Drupal SupportSecurityUpdatesMaintenancePerformance
Happy Clients
Responsive Design
What is Responsive Design?
Responsive DesignResponsive Design is is the concept of the concept of developing a website developing a website in a way that in a way that allows allows the layout to adjustthe layout to adjust according to the according to the useruser’’s screen s screen resolutionresolution
Name Candidates
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 deviceWhen 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!
Responsive Design Examples
Responsive Design Examples
Responsive Design Examples
Responsive Design Examples
Live Example
How to Plan for Responsive Design?
BIG to small OR small to BIGName Candidates
How to Plan for Responsive Design?
small to BIG Content Enhancement
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?
Name Candidates
How to Plan for Responsive Design?
small to BIG Content Enhancement
What additional content do my users need?
What additional functionality can I add now that I have screen size?
How can I enhance this while also considering it is TOUCH screen
Name Candidates
How to Plan for Responsive Design?
small to BIG Content Enhancement
How can I optimize my content?
What supplemental information do my users need?
What do I provide now that LOCATION and TOUCH is no longer needed?
Name Candidates
How to Plan for Responsive Design?
Most Common Sizes:320 x 480 px: 320 x 480 px:
SmartphoneSmartphone
480 x 320 px: 480 x 320 px: Smartphone in Smartphone in
landscapelandscape
768 x 1024 px: 768 x 1024 px: iPad / tabletiPad / tablet
1024 x 768 px: 1024 x 768 px: monitor or laptopmonitor or laptop
Larger....Larger....
Name Candidates
Technical Explanation of Responsive Design
Name Candidates
Responsive Design Tools
Responsive web design sketch sheets: http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheetsResizeMyBrowser.com
Responsive design testing: http://mattkersley.com/responsive/OM Tools – jquery mediaqueries integration
Name Candidates
Questions
