Embed Size (px)
DESCRIPTION
Citation preview
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
