John Nollin and Daniel Honrade presented on responsive design. They discussed who they are, who they work for, and what responsive design is. Responsive design allows a website layout to adjust based on a user's screen resolution. They provided examples of responsive design and explained how to plan for it by starting with mobile and enhancing content for different screen sizes. Technical explanations and tools for responsive design were also covered.

1. Responsive Design
John Nollin
Daniel Honrade

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

6. Specialties
Migration
Custom Ecommerce
Member Management (civi)
Integration

7. Happy Clients

8. Responsive Design

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!

11. Responsive Design Examples

12. Responsive Design Examples

13. Responsive Design Examples

14. Responsive Design Examples
Live Example

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....

20. Technical Explanation of Responsive Design
Name Candidates

21. Responsive Design Tools
Responsive web design sketch sheets:
http://jeremypalford.com/arch-journal/responsive-web-design-sket
sheets Name Candidates
ResizeMyBrowser.com
Responsive design testing:
http://mattkersley.com/responsive/
OM Tools – jquery mediaqueries integration

22. Questions

23. Thank You!
John Nollin
John@promethost.com
Daniel Honrade
Daniel@promethost.com