Mobile first responsive web design

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• 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 Web An Approach to Rethinking Mobile Web

http://webwatching.eustema.it	87
http://a0.twimg.com	13
http://staging1.risymposium.com	11
http://paper.li	8
http://www.onlydoo.com	4
https://si0.twimg.com	3
http://us-w1.rockmelt.com	3
http://zootool.com	1

Mobile first responsive web design

by Mark Riggan on Dec 05, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 130

Statistics

Mobile first responsive web design — Presentation Transcript