SlideShare a Scribd company logo
1 of 75
BEYOND BEING
  RESPONSIVE
A MOBILE FIRST STRATEGY
Mobile first strategies build to the
constraints of mobile devices, and the
needs of mobile users first.
LUKE WROBLEWSKI
 "Losing 80% of your screen space
 forces you to focus. You need to make
 sure that what stays on the screen is
 the most important set of features for
 your customers and your business."




http://www.lukew.com/ff/entry.asp?1117
JEREMY KEITH
"Mobile web design has already
established a number of excellent best
practices whereas traditional “desktop”
web design has become the domain of
laziness and complacency. "




http://adactio.com/journal/4523
JEREMY KEITH
  "How can we design for our content
  in such a way that the reader won’t
  need or want to reach for Readability
  or Instapaper?"




http://adactio.com/journal/4523
DESIGN WEB SOLUTIONS
 GIVE USERS WHAT THEY WANT
MOBILE FIRST
MOBILE FIRST
Don't fix the container, use %.
MOBILE FIRST
Don't fix the container, use %.

HTML and CSS have universal support.
MOBILE FIRST
Don't fix the container, use %.

HTML and CSS have universal support.

JavaScript is optional or unavailable!
kB loaded ~ Alexa top 1m
                           HTML
                   other    45
                    27
            flash
             80

      css
      36




 scripts
  189
                                      images
                                        641




April 2012 - average page size = 1018kB

www.httparchive.org/interesting.php
MOBILE FIRST
Don't fix the container, use %.

HTML and CSS have universal support.

JavaScript is optional or unavailable!

Progressive enhancement?
THE BAD NEWS
THE BAD NEWS
RWD was the easy part!
THE BAD NEWS
RWD was the easy part!

Content/mobile first requires process
change.
THE BAD NEWS
RWD was the easy part!

Content/mobile first requires process
change.

Many things appear counter-intuitive.
THE BAD NEWS
RWD was the easy part!

Content/mobile first requires process
change.

Many things appear counter-intuitive.

Fundamental issues remain.
BARRIERS TO ADOPTION
"IT'S A FLAWED APPROACH BECAUSE…"
NO. 1
"Mobile users want different things to
desktop users."
MYTH: CONTEXT = INTENT
MYTH: CONTEXT = INTENT
 All we know is that the screen is small.
MYTH: CONTEXT = INTENT
 All we know is that the screen is small.

 Small screen != <time, bandwidth, sales.
MYTH: CONTEXT = INTENT
 All we know is that the screen is small.

 Small screen != <time, bandwidth, sales.

 Assumption = …
MYTH: CONTEXT = INTENT
 All we know is that the screen is small.

 Small screen != <time, bandwidth, sales.

 Assumption = …

 'Mobile' users have time, money and
 choice.
NO. 2
"Mobile users are not my core
audience, I want to focus on revenue
generators."
MYTH: MOBILE IS NICHE




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE
• 378k   iPhones sold per day (562k iOS)




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE
• 378k   iPhones sold per day (562k iOS)

• 700k Android   devices activated




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE
• 378k   iPhones sold per day (562k iOS)

• 700k Android   devices activated

• 200k   Nokia smartphones




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE
• 378k   iPhones sold per day (562k iOS)

• 700k Android   devices activated

• 200k   Nokia smartphones

• 143k   Blackberry




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE
• 378k   iPhones sold per day (562k iOS)

• 700k Android   devices activated

• 200k   Nokia smartphones

• 143k   Blackberry

• 371k   babies born



http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE

                2009        2010         2011


   PayPal      $141m


   eBay        $600m




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE

                2009        2010         2011


   PayPal      $141m       $750m


   eBay        $600m         $2b




http://www.lukew.com/ff/entry.asp?1506
MYTH: MOBILE IS NICHE

                2009        2010         2011


   PayPal      $141m       $750m         $4b


   eBay        $600m         $2b         $5b




http://www.lukew.com/ff/entry.asp?1506
NO. 3
"Developing mobile-friendly sites costs
more."
MYTH: RWD IS EXPENSIVE
MYTH: RWD IS EXPENSIVE
 • Ignoring   potential customers is more so.
MYTH: RWD IS EXPENSIVE
 • Ignoring   potential customers is more so.

 • Needn't    cost more than existing techniques.
MYTH: RWD IS EXPENSIVE
 • Ignoring    potential customers is more so.

 • Needn't     cost more than existing techniques.

 • It   is future-friendly, offering better ROI.
MYTH: RWD IS EXPENSIVE
 • Ignoring    potential customers is more so.

 • Needn't     cost more than existing techniques.

 • It   is future-friendly, offering better ROI.

 • Try    costing the alternatives.
NO. 4
"Mobile-friendly sites don't have
enough room for my logo / happy-
salad.png / break-dancing paper clip /
wonder-widget dashboard!"
MYTH: [LOGOS] SELL STUFF
MYTH: [LOGOS] SELL STUFF
  • Users   came for you content, not your logo.
MYTH: [LOGOS] SELL STUFF
  • Users   came for you content, not your logo.

  • Junk   drives users away.
MYTH: [LOGOS] SELL STUFF
  • Users   came for you content, not your logo.

  • Junk   drives users away.

  • Delays   drive users away.
MOBILE FIRST
DOING IT RIGHT!
MOBILE FIRST
 NEAR MISSES…
SUMMARY
SUMMARY
Work backwards.
SUMMARY
Work backwards.
Focus on user needs.
SUMMARY
Work backwards.
Focus on user needs.
Stay focused on user needs!
SUMMARY
Work backwards.
Focus on user needs.
Stay focused on user needs!
Do not exclude users.
SUMMARY
Work backwards.
Focus on user needs.
Stay focused on user needs!
Do not exclude users.
Do not exclude devices.
SUMMARY
Work backwards.
Focus on user needs.
Stay focused on user needs!
Do not exclude users.
Do not exclude devices.
Make it fast!
SUMMARY
Work backwards.
Focus on user needs.
Stay focused on user needs!
Do not exclude users.
Do not exclude devices.
Make it fast! really fast!
THINK MOBILE FIRST
   EVERYONE WINS!
THANKS FOR LISTENING
QUESTIONS?

More Related Content

What's hot

Mobile marketing copy
Mobile marketing copyMobile marketing copy
Mobile marketing copy
Jayne Navarre
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
affilinet
 
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks LikeMOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
Adrian Mendoza
 
Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
PaPer Li
 

What's hot (20)

Mobile marketing copy
Mobile marketing copyMobile marketing copy
Mobile marketing copy
 
Luke Wroblewski: Mobile First
Luke Wroblewski: Mobile FirstLuke Wroblewski: Mobile First
Luke Wroblewski: Mobile First
 
#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam#MobileInAction - iRecruitExpo June 2013, Amsterdam
#MobileInAction - iRecruitExpo June 2013, Amsterdam
 
Mobile Marketing
Mobile MarketingMobile Marketing
Mobile Marketing
 
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
500 Mobile Collective - Mobile Growth Hacking MOAARRR @ MWC 2015 4YFN
 
Mobile seminar-worksheet
Mobile seminar-worksheetMobile seminar-worksheet
Mobile seminar-worksheet
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking Gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
The future of mobile marketing and the benefits of web apps @ Riga Comm 2013
The future of mobile marketing and the benefits of web apps @ Riga Comm 2013The future of mobile marketing and the benefits of web apps @ Riga Comm 2013
The future of mobile marketing and the benefits of web apps @ Riga Comm 2013
 
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | OxiemGet Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
Get Mobile | Mobile & Digital Marketing | Crystal Olig | Upward | Oxiem
 
The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
The Perils of Taking Great UX Commerce Mobile :: MoDevUX - 2014
 
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks LikeMOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
MOBILE RIGHT NOW: What A Real Customer’s Mobile Experience Looks Like
 
Startup Metrics for Mobile Pirates #MOAARRR by Edith Yeung
Startup Metrics for Mobile Pirates #MOAARRR by Edith YeungStartup Metrics for Mobile Pirates #MOAARRR by Edith Yeung
Startup Metrics for Mobile Pirates #MOAARRR by Edith Yeung
 
Mobile rage
Mobile rageMobile rage
Mobile rage
 
NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...
NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...
NWRA Q2 Program: How Recruiters can Survive the Shift to a Connected Device L...
 
Responsive Email Design
Responsive Email DesignResponsive Email Design
Responsive Email Design
 
Digital and Social Media in Aesthetics Marketing
Digital and Social Media in Aesthetics MarketingDigital and Social Media in Aesthetics Marketing
Digital and Social Media in Aesthetics Marketing
 
Multi screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studiesMulti screen-moblie-whitepaper research-studies
Multi screen-moblie-whitepaper research-studies
 
How to market your app
How to market your appHow to market your app
How to market your app
 
Debunking social media myths
Debunking social media mythsDebunking social media myths
Debunking social media myths
 

Viewers also liked

Giorgio Armani
Giorgio ArmaniGiorgio Armani
Giorgio Armani
raj_qn3
 
Web marketing for luxury brands
Web marketing for luxury brandsWeb marketing for luxury brands
Web marketing for luxury brands
Alexandre Corda
 

Viewers also liked (8)

Developing a Mobile-First Strategy
Developing a Mobile-First StrategyDeveloping a Mobile-First Strategy
Developing a Mobile-First Strategy
 
SOCIAL MEDIA AND THE LUXURY INDUSTRY
SOCIAL MEDIA AND THE LUXURY INDUSTRYSOCIAL MEDIA AND THE LUXURY INDUSTRY
SOCIAL MEDIA AND THE LUXURY INDUSTRY
 
Your Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web StrategyYour Guide to a Modern Mobile-First Web Strategy
Your Guide to a Modern Mobile-First Web Strategy
 
Luxury Brand D & G - Samta Khinda
Luxury Brand D & G - Samta KhindaLuxury Brand D & G - Samta Khinda
Luxury Brand D & G - Samta Khinda
 
Mobile Marketing in the Luxury Industry - Gabriela Marengo - ESCP Europe
Mobile Marketing in the Luxury Industry - Gabriela Marengo - ESCP EuropeMobile Marketing in the Luxury Industry - Gabriela Marengo - ESCP Europe
Mobile Marketing in the Luxury Industry - Gabriela Marengo - ESCP Europe
 
Giorgio Armani
Giorgio ArmaniGiorgio Armani
Giorgio Armani
 
How to build a world-class Digital Agency - Masterclass at Kreative Asia 2012
How to build a world-class Digital Agency - Masterclass at Kreative Asia 2012How to build a world-class Digital Agency - Masterclass at Kreative Asia 2012
How to build a world-class Digital Agency - Masterclass at Kreative Asia 2012
 
Web marketing for luxury brands
Web marketing for luxury brandsWeb marketing for luxury brands
Web marketing for luxury brands
 

Similar to Beyond being responsive, a mobile first strategy

How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experience
Michael Dick
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
 
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
auexpo Conference
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
Acquia
 

Similar to Beyond being responsive, a mobile first strategy (20)

Designing for mobile devices
Designing for mobile devicesDesigning for mobile devices
Designing for mobile devices
 
How to build a kick-ass mobile experience
How to build a kick-ass mobile experienceHow to build a kick-ass mobile experience
How to build a kick-ass mobile experience
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 
The mobile ecosystem & technological strategies
The mobile ecosystem & technological strategiesThe mobile ecosystem & technological strategies
The mobile ecosystem & technological strategies
 
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...The Revolution Will Not Be Televised: Managing Content and Experience in the ...
The Revolution Will Not Be Televised: Managing Content and Experience in the ...
 
Building web apps for a multiscreen world
Building web apps for a multiscreen worldBuilding web apps for a multiscreen world
Building web apps for a multiscreen world
 
Put a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What HappensPut a UI Developer in a Bank; See What Happens
Put a UI Developer in a Bank; See What Happens
 
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
Striking gold! How Mobile Marketing Pioneers are Winning the Hearts & Minds o...
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
 
The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!The Browser is Dead, Long Live the Web!
The Browser is Dead, Long Live the Web!
 
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 The Browser is Dead, Long Live the Web! (Jonathan Stark) The Browser is Dead, Long Live the Web! (Jonathan Stark)
The Browser is Dead, Long Live the Web! (Jonathan Stark)
 
Innovating the other web - #wrocsharp keynote
Innovating the other web - #wrocsharp keynote Innovating the other web - #wrocsharp keynote
Innovating the other web - #wrocsharp keynote
 
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!AppsFuel, il nuovo marketplace per mobile web app e mobile site!
AppsFuel, il nuovo marketplace per mobile web app e mobile site!
 
Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)Goto Berlin - Migrating to Microservices (Fast Delivery)
Goto Berlin - Migrating to Microservices (Fast Delivery)
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Performance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled SoilPerformance Optimization for Mobile Web | Fresh Tilled Soil
Performance Optimization for Mobile Web | Fresh Tilled Soil
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
 

Recently uploaded

Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
amitlee9823
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
mark11275
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
amitlee9823
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
eeanqy
 

Recently uploaded (20)

Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentationQ4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...Booking open Available Pune Call Girls Nanded City  6297143586 Call Hot India...
Booking open Available Pune Call Girls Nanded City 6297143586 Call Hot India...
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men  🔝jhansi🔝   Escorts S...
➥🔝 7737669865 🔝▻ jhansi Call-girls in Women Seeking Men 🔝jhansi🔝 Escorts S...
 
How to Build a Simple Shopify Website
How to Build a Simple Shopify WebsiteHow to Build a Simple Shopify Website
How to Build a Simple Shopify Website
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night StandCall Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
Call Girls In Jp Nagar ☎ 7737669865 🥵 Book Your One night Stand
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 

Beyond being responsive, a mobile first strategy

  • 1. BEYOND BEING RESPONSIVE A MOBILE FIRST STRATEGY
  • 2. Mobile first strategies build to the constraints of mobile devices, and the needs of mobile users first.
  • 3.
  • 4. LUKE WROBLEWSKI "Losing 80% of your screen space forces you to focus. You need to make sure that what stays on the screen is the most important set of features for your customers and your business." http://www.lukew.com/ff/entry.asp?1117
  • 5. JEREMY KEITH "Mobile web design has already established a number of excellent best practices whereas traditional “desktop” web design has become the domain of laziness and complacency. " http://adactio.com/journal/4523
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. JEREMY KEITH "How can we design for our content in such a way that the reader won’t need or want to reach for Readability or Instapaper?" http://adactio.com/journal/4523
  • 11. DESIGN WEB SOLUTIONS GIVE USERS WHAT THEY WANT
  • 13. MOBILE FIRST Don't fix the container, use %.
  • 14. MOBILE FIRST Don't fix the container, use %. HTML and CSS have universal support.
  • 15. MOBILE FIRST Don't fix the container, use %. HTML and CSS have universal support. JavaScript is optional or unavailable!
  • 16. kB loaded ~ Alexa top 1m HTML other 45 27 flash 80 css 36 scripts 189 images 641 April 2012 - average page size = 1018kB www.httparchive.org/interesting.php
  • 17. MOBILE FIRST Don't fix the container, use %. HTML and CSS have universal support. JavaScript is optional or unavailable! Progressive enhancement?
  • 18.
  • 20. THE BAD NEWS RWD was the easy part!
  • 21. THE BAD NEWS RWD was the easy part! Content/mobile first requires process change.
  • 22. THE BAD NEWS RWD was the easy part! Content/mobile first requires process change. Many things appear counter-intuitive.
  • 23. THE BAD NEWS RWD was the easy part! Content/mobile first requires process change. Many things appear counter-intuitive. Fundamental issues remain.
  • 24. BARRIERS TO ADOPTION "IT'S A FLAWED APPROACH BECAUSE…"
  • 25. NO. 1 "Mobile users want different things to desktop users."
  • 26.
  • 27. MYTH: CONTEXT = INTENT
  • 28. MYTH: CONTEXT = INTENT All we know is that the screen is small.
  • 29. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales.
  • 30. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = …
  • 31. MYTH: CONTEXT = INTENT All we know is that the screen is small. Small screen != <time, bandwidth, sales. Assumption = … 'Mobile' users have time, money and choice.
  • 32.
  • 33. NO. 2 "Mobile users are not my core audience, I want to focus on revenue generators."
  • 34. MYTH: MOBILE IS NICHE http://www.lukew.com/ff/entry.asp?1506
  • 35. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) http://www.lukew.com/ff/entry.asp?1506
  • 36. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated http://www.lukew.com/ff/entry.asp?1506
  • 37. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated • 200k Nokia smartphones http://www.lukew.com/ff/entry.asp?1506
  • 38. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated • 200k Nokia smartphones • 143k Blackberry http://www.lukew.com/ff/entry.asp?1506
  • 39. MYTH: MOBILE IS NICHE • 378k iPhones sold per day (562k iOS) • 700k Android devices activated • 200k Nokia smartphones • 143k Blackberry • 371k babies born http://www.lukew.com/ff/entry.asp?1506
  • 40. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m eBay $600m http://www.lukew.com/ff/entry.asp?1506
  • 41. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m eBay $600m $2b http://www.lukew.com/ff/entry.asp?1506
  • 42. MYTH: MOBILE IS NICHE 2009 2010 2011 PayPal $141m $750m $4b eBay $600m $2b $5b http://www.lukew.com/ff/entry.asp?1506
  • 43.
  • 44. NO. 3 "Developing mobile-friendly sites costs more."
  • 45. MYTH: RWD IS EXPENSIVE
  • 46. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so.
  • 47. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Needn't cost more than existing techniques.
  • 48. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Needn't cost more than existing techniques. • It is future-friendly, offering better ROI.
  • 49. MYTH: RWD IS EXPENSIVE • Ignoring potential customers is more so. • Needn't cost more than existing techniques. • It is future-friendly, offering better ROI. • Try costing the alternatives.
  • 50. NO. 4 "Mobile-friendly sites don't have enough room for my logo / happy- salad.png / break-dancing paper clip / wonder-widget dashboard!"
  • 52. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo.
  • 53.
  • 54. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo. • Junk drives users away.
  • 55. MYTH: [LOGOS] SELL STUFF • Users came for you content, not your logo. • Junk drives users away. • Delays drive users away.
  • 56.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62. MOBILE FIRST NEAR MISSES…
  • 63.
  • 64.
  • 68. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs!
  • 69. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users.
  • 70. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users. Do not exclude devices.
  • 71. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users. Do not exclude devices. Make it fast!
  • 72. SUMMARY Work backwards. Focus on user needs. Stay focused on user needs! Do not exclude users. Do not exclude devices. Make it fast! really fast!
  • 73. THINK MOBILE FIRST EVERYONE WINS!

Editor's Notes

  1. Seth Warburton - Internet inspired\n\nI hope to change the way you think about building your next web site / template / extension.\n\nWhat is Mobile first? \n
  2. Reach the biggest audience\n\nDifference with mobile vs desktop users?\n
  3. Examples are not hard to find.\n\nWhy do people design websites like this?\n
  4. Why would this change on larger screens?\n\nI like to call him Luke W! Authored &apos;mobile first&apos;\n\nLuke has done all the stats, so I don&apos;t have to.\n
  5. Excellent blog. Tackling many of the big issues of rwd.\n\nExamples of bloat? Where did we go wrong?\n\nTwitter link from a friend.\n
  6. \n\n
  7. \n\n
  8. Read now - Read later - Send to kindle\n\nMaximum enjoyment. Changed the way I read online.\n\nQuick poll. Who uses these tools?\n
  9. Driving your users away by creating design &apos;barriers&apos; is bad for business.I\n
  10. \n\n
  11. \n\n
  12. \n\n
  13. Web default is &apos;mobile&apos;. No widths, no media queries = mobile friendly\n
  14. If you can do it with HTML and CSS, do so.\n
  15. If you can only do it with JavaScript ask:\n\nDoes this truly benefit the user?\n
  16. State of the web - may 1998 = 61kb\n\nThe world still has 1998 web\nDeveloping countries - Old technology - &apos;feature phones&apos;\n\nPeople pay for mobile data! We build sites as if everyone has fast, cheap broadband. They don&apos;t. \n
  17. Progressive enhancement doesn&apos;t just apply to css3.\n\nAdd features for supported devices, don&apos;t strip them on unsupported \n
  18. \n\n
  19. \n\n
  20. Web content is fluid by default.\n
  21. Reverses the traditional build process. Mobile can&apos;t be an add-on.\n
  22. Mobile layout to all devices? @media query for desktop?\n
  23. Images remain an issue. Essential images the safe default = user first! \n
  24. Some of the many myths you may hear...\n
  25. Who can guess the next slide?\n
  26. \n\n
  27. Mobile users are rushed, distracted and have terrible connectivity\n\nMobile users only want your phone number and a map (they use their phones to find restaurants)\n
  28. \n\n
  29. Who here has their smartphone connected via wifi when at home?\n\nWho has used their smartphone sat in their livingroom? Laid in bed? Waiting for a train/plane?\n
  30. Desktop assumption: indoors, seated, lots of bandwidth, big screen.\n\nProbably true: indoors, seated...\n\nMobile assumption: outdoors, walking, low bandwidth, small screen.\n\nProbably true: small screen. (iPad?).\n
  31. Dont dumb it down for &apos;mobile&apos; users, they won&apos;t thank you.\n
  32. Meet the users needs, whatever their screen size.\n
  33. \n\n
  34. There isn&apos;t many of them.\n\nThey don&apos;t buy things\n
  35. \n\n
  36. \n\n
  37. \n\n
  38. \n\n
  39. 1.45m devices each day vs 371k babies\n\n42% tablet owners have purchased something (Luke W)\n\n29% of smartphone owners\n
  40. \n\n
  41. \n\n
  42. Healthy gains in a stagnating world economy\n\nWhat will happen when the economy picks up?\n\n\n\n
  43. \n\n
  44. \n\n
  45. \n\n
  46. Not meeting user needs and expectations means costs.\n\nRemember mobile spending growth?\n
  47. It requires some new skills and a change of mindset.\n
  48. iPhone apps? Android?\n\nThey weren&apos;t here 5 yrs ago, they may not be in 5 yrs time. I think HTML and CSS will still be here. \n
  49. Apps cost huge amounts to develop (no cross platform solutions)\n\nmiddleman costs\n\n&apos;mobile&apos; sites require constant maintenance (device detection) and provide only limited coverage. (smart tv, console)\n
  50. \n\n
  51. \n\n
  52. Coca-cola logo 272x69\n
  53. \n\n
  54. Readability / Instapaper?\n\nHappy people stay longer / buy more / return / tell friends\n
  55. E-commerce : avg impact of 1 second delay = 7% reduction in conversions\n
  56. Desktop, mobile? Faster sites are always better sites.\n\nBetter rankings, more conversions.\n
  57. \n\n
  58. Content rich\n\nMobile friendly (buttons for key tasks)\n\nContent first (navigation second)\n
  59. You don&apos;t need images or tons of content to make a statement with style.\n
  60. Ampersand 129kb (36.5 k logo)\n\nIf you provide great UX for mobile, why would you change that for bigger screens?\n
  61. A beautiful design, providing everything the user came for: content\n
  62. Well intended.\n\nEasy to get caught on little details.\n
  63. A well thought out design\n\nProminent mobile search\n\nNo mobile menu without js. Don&apos;t use .js to ensure things work!\n\nThe big players stumble here too. Guess what&apos;s next?\n
  64. No menu!\n\nClue in the css3 logo. Progressive enhancement is not only for CSS!\n
  65. \n\n
  66. \n\n
  67. \n\n
  68. \n\n
  69. \n\n
  70. \n\n
  71. \n\n
  72. \n\n
  73. \n\n
  74. \n\n
  75. \n\n