Mobile first responsive web design

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