Think Mobile First, Then Enhance

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

ThinkMobileFirstThenEnhance

Karl DubostOpera SoftwareDeveloper Relations

@karlpro

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Toys?

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Mobile?

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Mobile?

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

How far is the screen?

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Screens…

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

WAP, C-HTML, …

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Do Nothing

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Liquid or Semi-LiquidLayout

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

www. m.

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

User Agent Sniffing?

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

User Agent Sniffing!

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

User Agents…

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Cookies… if not then

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

HTML

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

viewport

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

viewport

<meta name="viewport" content="width=device-width">

See @goetter http://slidesha.re/ew4LVM

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

mediaqueries

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

mediaqueries

body {// basic styles}

@media all and (max-width: 600px) {body {// extra styles for mobile}}

See @ppk http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

user experience

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Mobile strategy… mess.

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Logs & Market Share

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Ouch!

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

User agent… again

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Meh…

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Time To Think

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Simplicity, Basics, Users

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

mediaqueries

body {// basic styles}

@media all and (max-width: 600px) {body {// extra styles for mobile}}

@media all and (min-width: 600px) {body {// extra styles for desktop}}

See @ppk http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Tools & Techniques

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Co-hosted files

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Sprites

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

gzip

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

remote debugging

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Opera Dragonfly

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

love hate

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Understand Users

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Think mobile first

how come this �more usable on desktop too

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow

Karl [email protected]/karlcow

questions?

Think Mobile First, Then Enhance - Karl Dubost - http://my.opera.com/karlcow