Mobile First Responsive WebAn 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
• Tends to get bloated
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 and faster
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 devices’ screen size
• Flexible Images & Media
• Media Queries
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
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 Enhancement”
• Opportunity for new technologies
• Supplements “Responsive Web Design”
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
• Use HTML5 Semantic Markup
Everyone Benefits
• Proactive for future devices
• Caters to a broader audience
• More meaningful content
• Centralized management
• Reduced long-term costs
Mobile First Responsive WebAn Approach to Rethinking Mobile Web