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. Who we are
Name:
John Nollin
Lives In:
Chicago, IL.
Likes:
Travel
Basketball
Organization
Process
4. About Daniel Honrade
• Co-Presenter
• @danielhonrade
• JQuery mobile drupal
• created a mobile jquery
custom subtheme
• project:
www.mcmcauto.com
• Promet Source
• Lead Drupal Themer
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
9. What is Responsive Design?
Responsive Design is the
concept of developing a
website in a way that Name Candidates
allows the layout to
adjust according to the
user’s screen resolution
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!
15. How to Plan for Responsive Design?
BIG to small OR small to BIG
Name Candidates
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. How to Plan for Responsive Design?
small to BIG
Content Enhancement
Name Candidates
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
18. How to Plan for Responsive Design?
small to BIG
Content Enhancement
Name Candidates
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?
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....