Mobile First Responsive Web      An Approach to Rethinking Mobile Web
5 billion+People who own a mobile phone in the world.
2015Mobile Web usage will surpass Desktop Web usage.
What’s wrong with the web?
The Web of Today•   Mobile treated as an afterthought•   Reactive thinking•   Business-centric•   Specialized & Optimized•...
Think of it as a bandaid
Ok, so how can we fix it?
The Web of Tomorrow•   Mobile drives everything•   Proactive thinking•   User-centric•   Multi-device support•   Cleaner a...
Think of it as a cure
The Key is to Be Responsive
Responsive Web Design•   Coined by Ethan Marcotte•   Similar to “Adaptive” layouts•   Fluid Grids structured around device...
Adaptive vs Responsive•   Difference is in the measurements•   Adaptive is fixed-width, Responsive is fluid•   Adaptive - ...
Sweet, so scale stuff down?
You thought WRONG!
Focus on Mobile First
Mobile First Web Design•   Coined by Luke Wroblewski•   Focus on core content and functionality•   Encourages “Progressive...
Southwest.com
Too cluttered.Highly focused.
Rule of Thumb:Identify your focus, then scale.
What’s our approach?
Formula for Success•   Structure Content First•   Begin with Mobile•   Support vs. Optimize•   Use CSS3 Media Queries•   U...
Everyone Benefits•   Proactive for future devices•   Caters to a broader audience•   More meaningful content•   Centralize...
Mobile First Responsive Web      An Approach to Rethinking Mobile Web
Upcoming SlideShare
Loading in …5
×

Mobile first responsive web design

8,648 views

Published on

Overview of mobile first, responsive web design philosophy, including examples and benefits that designers, developers and web firms can take advantage of.

Published in: Design, Technology, Business
2 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total views
8,648
On SlideShare
0
From Embeds
0
Number of Embeds
573
Actions
Shares
0
Downloads
138
Comments
2
Likes
17
Embeds 0
No embeds

No notes for slide

Mobile first responsive web design

  1. Mobile First Responsive Web An Approach to Rethinking Mobile Web
  2. 5 billion+People who own a mobile phone in the world.
  3. 2015Mobile Web usage will surpass Desktop Web usage.
  4. What’s wrong with the web?
  5. The Web of Today• Mobile treated as an afterthought• Reactive thinking• Business-centric• Specialized & Optimized• Tends to get bloated
  6. Think of it as a bandaid
  7. Ok, so how can we fix it?
  8. The Web of Tomorrow• Mobile drives everything• Proactive thinking• User-centric• Multi-device support• Cleaner and faster
  9. Think of it as a cure
  10. The Key is to Be Responsive
  11. Responsive Web Design• Coined by Ethan Marcotte• Similar to “Adaptive” layouts• Fluid Grids structured around devices’ screen size• Flexible Images & Media• Media Queries
  12. Adaptive vs Responsive• Difference is in the measurements• Adaptive is fixed-width, Responsive is fluid• Adaptive - (IAWriter) www.iawriter.com• Responsive - (DConstruct 2011) 2011.dconstruct.org
  13. Sweet, so scale stuff down?
  14. You thought WRONG!
  15. Focus on Mobile First
  16. Mobile First Web Design• Coined by Luke Wroblewski• Focus on core content and functionality• Encourages “Progressive Enhancement”• Opportunity for new technologies• Supplements “Responsive Web Design”
  17. Southwest.com
  18. Too cluttered.Highly focused.
  19. Rule of Thumb:Identify your focus, then scale.
  20. What’s our approach?
  21. Formula for Success• Structure Content First• Begin with Mobile• Support vs. Optimize• Use CSS3 Media Queries• Use HTML5 Semantic Markup
  22. Everyone Benefits• Proactive for future devices• Caters to a broader audience• More meaningful content• Centralized management• Reduced long-term costs
  23. Mobile First Responsive Web An Approach to Rethinking Mobile Web

×