SlideShare uma empresa Scribd logo
1 de 55
Baixar para ler offline
Designing for Mobility
Who Are We?
Brian Young           Scotty Logan


Interface Designer    IT Architect
& Web Developer

First web page: 1998 First web page: 1993

First web server: 1998 First web server: 1994
Previously...




search for #bdconf on twitter & slideshare
Twitter


We’ll make references to twitter
Everyone at #bdconf uses twitter
 Scotty @scottylogan
 Brian @auracreations
We’re tweeting now
 Search for #suitoh11
Warning




Mobile developers sometimes use naughty words
Quick Survey

Do you have...
 iPhone (iPod Touch?)
 iPad
 Android (tablet?)
 Blackberry
 Palm Pre / Win Phone 7 / smartphone
 “dumb” / “feature” phone
Quick Survey


How many of you are
 web developers or designers?
 mobile web developers or designers?
 native mobile app developers?
 managers of any of the above
Why Mobile Matters

Mobile web access > non-mobile by 2015
Average iPhone user only spends 45% of his on-
device time making voice calls
Why Mobile Matters

25% in US only use mobile web; 70% in Egypt


59% of people have viewed website on phone,
then followed up on desktop


34% have done the reverse


@stephanierieger #bdconf
NetDB by OS


iPhone
Android
Windows Mobile
iPad
Symbian
iPod
WebOS
Blackberry
Windows Phone 7
NetDB Active by OS


iPhone              5000

Android
Windows Mobile      3750

iPad
                    2500
Symbian
iPod
                    1250
WebOS
Blackberry
                       0
Windows Phone 7            April 2011   July 2011
www.stanford.edu

March - April 2011
  iPhone             20000

  Android
  Win Mobile / WP7   15000

  iPad
                     10000
  Symbian
  iPod
                      5000
  WebOS
  Blackberry
                         0
  Other                      April 2011   July 2011
US Mobile Market
                           Oct ‘10                         Jan ‘11                        May ‘11

      30%



   22.5%



      15%



     7.5%



       0%
                 Samsung              LG           Motorola            RIM             Apple            Other

http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
US Smartphone Market
                           Oct ‘10                         Jan ‘11                        May ‘11

      40%



      30%



      20%



      10%



       0%
                  Google              RIM            Apple          Microsoft           Palm            Other

http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
Global Mobile Market
                       2009                 2010           2011


40%



30%



20%



10%



0%
      Nokia Samsung   LG   RIM   Apple Sony E.Motorola ZTE    HTC Huawei Others
                                  Gartner, February 2011
Global Smartphone Market
                  2009                 2010                 2011

 50%



37.5%



 25%



12.5%



  0%
        Symbian     Google      RIM             Apple   Microsoft   Other

                             Gartner, February 2011
Speed Matters




17% of people will not wait more than
5 seconds for a mobile web site to load
    Gomez “When Seconds Count”
Speed Matters
Google breaks down
mobile users
into
3 behavior groups

Repetitive now
Bored now
Urgent now
Where is mobile used?

82% of mobile web use at home
Waiting in line
Most tablet use 6pm - 10pm
 (in bed?)


@lukew #bdconf
Mobile Browser Environment
Good Browsers              Not So Good Browsers
 iOS, Android,              Feature phones and
 Opera Mobile,              everything else
 new Blackberry,
                            No support for
 WebOS
                            HTML5, CSS3 or JS
 Support most of
                            WP7 for now :-(
 HTML5, CSS3, JS


 @ppk's mobile browser feature compatibility list
       http://www.quirksmode.org/mobile/  
Mobile is Personal


Anywhere, anytime access
Access to user location, camera, address
book, phone functionality, etc.
Touch and gesture control
Even babies can play games on the iPad
Apps


What is an App?
Everyone wants Apps
 Do you really need one?
Native or Web App?
Native App
Coded in multiple languages, tools:
 Objective C and XCode (iOS)
 Eclipse and Java or C++ (Android)
 ??? and J2ME (Blackberry, older devices)
 Web tool & Javascript, CSS and HTML (WebOS)
 .Net Studio and C# (Windows Phone 7)
Code cannot be reused across platforms :(
In app stores, with 300,000 other apps
Web App

Coded in HTML5, CSS 3, and Javascript
Do it once and available everywhere
Can be installed on phone
Can be cached locally
 even work offline
Access to local storage
No access to camera, contacts, etc (yet)
Hybrid Solutions

Wrap your web app in a native app
Device access (camera, contacts, etc)
Available in app stores
Open source
 PhoneGap
Commercial
 Appcelerator Titanium (fewer devices)
Still need a web site

Visitors and other non local users
Search
 Returns links
 Google does not distinguish between
 desktop or mobile sites
Feature phones
Phones you don't build for
We like the mobile web
So do these people
Next BDConf is coming
Separate Mobile Site

Used to be the way to do it
 When devices had very limited
 browsers
More maintenance
What about new devices?
 Device detection scramble
Usually means a redirect [BAD]
Progressive Enhancement
   Deliver a simple site
   Enhance it based on the
   capabilities of the browser
    Media Queries
    Feature detection
    (Modernizr)
    JavaScript
    CSS3 features
Responsive Design
Website should display content reasonably
regardless of device resolution / orientation
 fluid grids, CSS 3 layouts
 content priority is maintained
 content adjusted to the viewable space
 text scaled to maintain content readability
Ethan Marcotte’s article
http://www.alistapart.com/articles/responsive-web-design/
Ethan was mostly right


He was wrong about images
  Suggested using largest needed image
  Letting the browser resize
  Really bad for performance
Jason Grigsby: resize images on server
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
Mobile First!

Luke (@lukew) Wroblewski's Mobile First Talk
 http://www.lukew.com/ff/entry.asp?1137
Mobile constraints improve design
 Limited screen real estate on mobile
 One distracted eyeball, one fat finger
Cut the crap, present only the most important
content
Better usability = Better experience!
Desktop vs Mobile
or is it Content First?

Site Architecture
 Many people ignore and forget this
Using all your content might not be the
answer
 But mobile users often want it all
What do mobile users need on your site?
Use analytics
Why Analytics?


Mind reading is no way to base
fundamental content decisions
      @stephanierieger
           #bdconf
Accessibility

  If I can't use your awesome website...
     It's not really that awesome, is it?
              @stephanierieger
                  #bdconf


Make content accessible by everyone
Content accessibility > Presentation styles
Viewports


Mobile browsers default to 960px wide
 but scaled down
Fine for desktop sites, not for mobile sites
Set the viewport...
 carefully
Bad Viewports




Pinch and Zoom to
Good Viewports




Pinch and Zoom to
Performance and Optimization

Mobile devices often suffer from
 Low bandwidth
 High latency
 Unreliable connectivity
 Slower processors
Browsers only use 2,4, or 6 connections
to a site
How Pages are Fetched



           iOS 4.3 uses up
          to 4 connections
How Pages are Fetched



            Android 2.2
           uses up to 11
           connections!
Performance Rules




Aggregate and minimize your CSS and Javascript
         But look at all those images!
Images

Resize images on the server
 WURFL has tools for this
 http://tinysrc.net/
For images used in CSS
 Base64 encode images, embed in CSS
 Use CSS sprites
Testing

Emulators / simulators work, up to a point
 May need Mac and Windows hosts
Test with real devices
 On real networks (3g, Starbucks wifi)
In real conditions
 Outside in sunshine
 In classrooms
Managing a Mobile Site

Content Management and Maintenance
 Use database or CMS to manage content
 Reuse and publish content to multiple locations
Web Analytics
 Track usage and behavior
 Justify the need for mobile optimized sites
Continual Improvement
Mobile Aware Web Project
SGG funded project, with participants from
 IT Services
 University Communications
 Student Affairs
Develop guidelines and tools
Develop reference sites, including
 http://www.stanford.edu/m
 http://itopenhouse.stanford.edu
What we're considering

JQuery Mobile for mobile framework
 UI elements
 Base style
Modernizr for feature detection
Media queries for screen size detection
Simple backend device classification
 mod_rewrite regular expressions FTW! 
Mobile Framework Showcase

Examples of mobile aware web developed using a
mobile framework 
 JQuery Mobile
  http://commencement.stanford.edu/m
 JQ Touch
  http://www.stanford.edu/m
 Sencha Touch
  http://www.stanford.edu/group/itopenhouse/m
More Code!




http://tinyurl.com/3oyutom
Resources

http://www.breakingdc.com/speakers
 yiibu.com (@stephanierieger)
 lukew.com (@lukew)
Tools and Frameworks
 jquerymobile.com, sencha.com, etc
@grigs, @snookca, @ppk, etc:
 https://twitter.com/#!/scottylogan/mobile
Image Credits
flickr.com/photos/jschumacher/4273428108/           flickr.com/photos/kenjonbro/3796564454
flickr.com/photos/mattgrimm/2391244100/             flickr.com/photos/daveknapik/402730950/
flickr.com/photos/wessexarchaeology/321370565/      flickr.com/photos/radioflyer007/4117675229
flickr.com/photos/soldiersmediacenter/3729394795/   flickr.com/photos/wscullin/3770015203/
flickr.com/photos/50101005@N03/4607048471/          flickr.com/photos/mountain-top/3144841264
flickr.com/photos/eszter/478947769/                 flickr.com/photos/mniemand/3338678704
flickr.com/photos/cote/67919646                     flickr.com/photos/nodomain1/306390955
flickr.com/photos/benlanc/4786607582/               flickr.com/photos/danielfoster/2206175625
flickr.com/photos/johanl/5619897608/                flickr.com/photos/andersondotcom/482150154
flickr.com/photos/johanl/4424185115/                flickr.com/photos/konch/4974020028
flickr.com/photos/antmcneill/4686147794             flickr.com/photos/jemsweb/4363548805
flickr.com/photos/kaioshin/3085642914/              flickr.com/photos/subtleness/18765167/
flickr.com/photos/23379658@N05/3650125866/          flickr.com/photos/jillclardy/3651849999/
flickr.com/photos/schmish/4090562160/               flickr.com/photos/nocallerid_man/3638360458
flickr.com/photos/kitkaphotogirl/3516722887         flickr.com/photos/bslavin/2260190207
flickr.com/photos/peterblanchard/3387759956         flickr.com/photos/dullhunk/202872717/
Q&A

Mais conteúdo relacionado

Mais procurados

Smart Phones
Smart PhonesSmart Phones
Smart Phonesclonevil
 
打造你的第一個iPhone APP
打造你的第一個iPhone APP打造你的第一個iPhone APP
打造你的第一個iPhone APP彼得潘 Pan
 
iPhone Apps - What, how, why?
iPhone Apps - What, how, why?iPhone Apps - What, how, why?
iPhone Apps - What, how, why?David Carr
 
Programing for the iPhone
Programing for the iPhonePrograming for the iPhone
Programing for the iPhoneMike Qaissaunee
 
Facebbok Spartan
Facebbok SpartanFacebbok Spartan
Facebbok SpartanErol Dizdar
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Aaron Gustafson
 
Content Strategy Across Connected Devices
Content Strategy Across Connected DevicesContent Strategy Across Connected Devices
Content Strategy Across Connected DevicesBrandon Carson
 
Robert Meza - Government on the go
Robert Meza - Government on the goRobert Meza - Government on the go
Robert Meza - Government on the goPlain Talk 2015
 
Mobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and PredictionMobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and PredictionjTribe
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesMatt Machell
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPKeyLimeTie
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Compuware APM
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileJason Grigsby
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009Peter-Paul Koch
 
iPhone transfer software
iPhone transfer softwareiPhone transfer software
iPhone transfer softwarejohnjuly123
 

Mais procurados (20)

Smart Phones
Smart PhonesSmart Phones
Smart Phones
 
Smartphones
SmartphonesSmartphones
Smartphones
 
打造你的第一個iPhone APP
打造你的第一個iPhone APP打造你的第一個iPhone APP
打造你的第一個iPhone APP
 
iPhone Apps - What, how, why?
iPhone Apps - What, how, why?iPhone Apps - What, how, why?
iPhone Apps - What, how, why?
 
Programing for the iPhone
Programing for the iPhonePrograming for the iPhone
Programing for the iPhone
 
POWERPOINT2
POWERPOINT2POWERPOINT2
POWERPOINT2
 
Facebbok Spartan
Facebbok SpartanFacebbok Spartan
Facebbok Spartan
 
Project of mobile apps
Project of mobile appsProject of mobile apps
Project of mobile apps
 
Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 
Android overview
Android overviewAndroid overview
Android overview
 
Content Strategy Across Connected Devices
Content Strategy Across Connected DevicesContent Strategy Across Connected Devices
Content Strategy Across Connected Devices
 
Robert Meza - Government on the go
Robert Meza - Government on the goRobert Meza - Government on the go
Robert Meza - Government on the go
 
Mobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and PredictionMobile OS and Mobile Browser Trends and Prediction
Mobile OS and Mobile Browser Trends and Prediction
 
Web Apps and Responsive Design for Libraries
Web Apps and Responsive Design for LibrariesWeb Apps and Responsive Design for Libraries
Web Apps and Responsive Design for Libraries
 
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOPIntroduction to iPhone App Development - midVentures DESIGN+DEVELOP
Introduction to iPhone App Development - midVentures DESIGN+DEVELOP
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
 
Mobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4MobileMobile Web vs. Native Apps | Design4Mobile
Mobile Web vs. Native Apps | Design4Mobile
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
 
Advancement in mobile apps
Advancement in mobile appsAdvancement in mobile apps
Advancement in mobile apps
 
iPhone transfer software
iPhone transfer softwareiPhone transfer software
iPhone transfer software
 

Semelhante a Developing for Mobility

Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & DevelopmentRonnie Liew
 
Seminar Android - Pengenalan PhoneGap
Seminar Android - Pengenalan PhoneGapSeminar Android - Pengenalan PhoneGap
Seminar Android - Pengenalan PhoneGapNur Hidayat
 
The future is mobile
The future is mobileThe future is mobile
The future is mobileShannon Smith
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Effective
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Shane Church
 
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 | OxiemLessing-Flynn
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile ExperienceDavid Drucker
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application developmentVince Aggrippino
 
Mobile Development Overview
Mobile Development OverviewMobile Development Overview
Mobile Development OverviewShawn Grimes
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .netChris Love
 
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in StockholmEnterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in StockholmJoel Oleson
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalAjax Experience 2009
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissYOGESH TADWALKAR
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWhat lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWooga
 
Mobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyMobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyAndri Yadi
 
Js On Mobile Devices
Js On Mobile DevicesJs On Mobile Devices
Js On Mobile DevicesJens Arps
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)BraveNewCode Inc.
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPRZasadzinski
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsPoluru S
 

Semelhante a Developing for Mobility (20)

Mobile Application Design & Development
Mobile Application Design & DevelopmentMobile Application Design & Development
Mobile Application Design & Development
 
Seminar Android - Pengenalan PhoneGap
Seminar Android - Pengenalan PhoneGapSeminar Android - Pengenalan PhoneGap
Seminar Android - Pengenalan PhoneGap
 
The future is mobile
The future is mobileThe future is mobile
The future is mobile
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
 
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
 
Communication Design for the Mobile Experience
Communication Design for the Mobile ExperienceCommunication Design for the Mobile Experience
Communication Design for the Mobile Experience
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
 
Mobile Development Overview
Mobile Development OverviewMobile Development Overview
Mobile Development Overview
 
I like i phone and android but know .net
I like i phone and android but know .netI like i phone and android but know .net
I like i phone and android but know .net
 
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in StockholmEnterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
 
Jason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.FinalJason.O Keefe.Genuitec.Presentation.Final
Jason.O Keefe.Genuitec.Presentation.Final
 
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott WeissSingapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
Singapore Mobile 2.0 & Ux Trends 2009: Scott Weiss
 
What Lies Ahead for HTML5
What Lies Ahead for HTML5What Lies Ahead for HTML5
What Lies Ahead for HTML5
 
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof SzafranekWhat lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
 
Mobile Apps - The Business & Technology
Mobile Apps - The Business & TechnologyMobile Apps - The Business & Technology
Mobile Apps - The Business & Technology
 
Js On Mobile Devices
Js On Mobile DevicesJs On Mobile Devices
Js On Mobile Devices
 
Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)Go Mobile With WordPress (2012)
Go Mobile With WordPress (2012)
 
Mobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIPMobile is the new Godzilla July 2011 FCIP
Mobile is the new Godzilla July 2011 FCIP
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web Apps
 

Último

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Último (20)

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

Developing for Mobility

  • 2. Who Are We? Brian Young Scotty Logan Interface Designer IT Architect & Web Developer First web page: 1998 First web page: 1993 First web server: 1998 First web server: 1994
  • 3. Previously... search for #bdconf on twitter & slideshare
  • 4. Twitter We’ll make references to twitter Everyone at #bdconf uses twitter Scotty @scottylogan Brian @auracreations We’re tweeting now Search for #suitoh11
  • 6. Quick Survey Do you have... iPhone (iPod Touch?) iPad Android (tablet?) Blackberry Palm Pre / Win Phone 7 / smartphone “dumb” / “feature” phone
  • 7. Quick Survey How many of you are web developers or designers? mobile web developers or designers? native mobile app developers? managers of any of the above
  • 8. Why Mobile Matters Mobile web access > non-mobile by 2015 Average iPhone user only spends 45% of his on- device time making voice calls
  • 9. Why Mobile Matters 25% in US only use mobile web; 70% in Egypt 59% of people have viewed website on phone, then followed up on desktop 34% have done the reverse @stephanierieger #bdconf
  • 10. NetDB by OS iPhone Android Windows Mobile iPad Symbian iPod WebOS Blackberry Windows Phone 7
  • 11. NetDB Active by OS iPhone 5000 Android Windows Mobile 3750 iPad 2500 Symbian iPod 1250 WebOS Blackberry 0 Windows Phone 7 April 2011 July 2011
  • 12. www.stanford.edu March - April 2011 iPhone 20000 Android Win Mobile / WP7 15000 iPad 10000 Symbian iPod 5000 WebOS Blackberry 0 Other April 2011 July 2011
  • 13. US Mobile Market Oct ‘10 Jan ‘11 May ‘11 30% 22.5% 15% 7.5% 0% Samsung LG Motorola RIM Apple Other http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
  • 14. US Smartphone Market Oct ‘10 Jan ‘11 May ‘11 40% 30% 20% 10% 0% Google RIM Apple Microsoft Palm Other http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share
  • 15. Global Mobile Market 2009 2010 2011 40% 30% 20% 10% 0% Nokia Samsung LG RIM Apple Sony E.Motorola ZTE HTC Huawei Others Gartner, February 2011
  • 16. Global Smartphone Market 2009 2010 2011 50% 37.5% 25% 12.5% 0% Symbian Google RIM Apple Microsoft Other Gartner, February 2011
  • 17. Speed Matters 17% of people will not wait more than 5 seconds for a mobile web site to load Gomez “When Seconds Count”
  • 18. Speed Matters Google breaks down mobile users into 3 behavior groups Repetitive now Bored now Urgent now
  • 19. Where is mobile used? 82% of mobile web use at home Waiting in line Most tablet use 6pm - 10pm (in bed?) @lukew #bdconf
  • 20. Mobile Browser Environment Good Browsers Not So Good Browsers iOS, Android, Feature phones and Opera Mobile, everything else new Blackberry, No support for WebOS HTML5, CSS3 or JS Support most of WP7 for now :-( HTML5, CSS3, JS @ppk's mobile browser feature compatibility list http://www.quirksmode.org/mobile/  
  • 21. Mobile is Personal Anywhere, anytime access Access to user location, camera, address book, phone functionality, etc. Touch and gesture control Even babies can play games on the iPad
  • 22. Apps What is an App? Everyone wants Apps Do you really need one? Native or Web App?
  • 23. Native App Coded in multiple languages, tools: Objective C and XCode (iOS) Eclipse and Java or C++ (Android) ??? and J2ME (Blackberry, older devices) Web tool & Javascript, CSS and HTML (WebOS) .Net Studio and C# (Windows Phone 7) Code cannot be reused across platforms :( In app stores, with 300,000 other apps
  • 24. Web App Coded in HTML5, CSS 3, and Javascript Do it once and available everywhere Can be installed on phone Can be cached locally even work offline Access to local storage No access to camera, contacts, etc (yet)
  • 25. Hybrid Solutions Wrap your web app in a native app Device access (camera, contacts, etc) Available in app stores Open source PhoneGap Commercial Appcelerator Titanium (fewer devices)
  • 26. Still need a web site Visitors and other non local users Search Returns links Google does not distinguish between desktop or mobile sites Feature phones Phones you don't build for
  • 27. We like the mobile web
  • 28. So do these people
  • 29. Next BDConf is coming
  • 30. Separate Mobile Site Used to be the way to do it When devices had very limited browsers More maintenance What about new devices? Device detection scramble Usually means a redirect [BAD]
  • 31. Progressive Enhancement Deliver a simple site Enhance it based on the capabilities of the browser Media Queries Feature detection (Modernizr) JavaScript CSS3 features
  • 32. Responsive Design Website should display content reasonably regardless of device resolution / orientation fluid grids, CSS 3 layouts content priority is maintained content adjusted to the viewable space text scaled to maintain content readability Ethan Marcotte’s article http://www.alistapart.com/articles/responsive-web-design/
  • 33. Ethan was mostly right He was wrong about images Suggested using largest needed image Letting the browser resize Really bad for performance Jason Grigsby: resize images on server http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/
  • 34. Mobile First! Luke (@lukew) Wroblewski's Mobile First Talk http://www.lukew.com/ff/entry.asp?1137 Mobile constraints improve design Limited screen real estate on mobile One distracted eyeball, one fat finger Cut the crap, present only the most important content Better usability = Better experience!
  • 36. or is it Content First? Site Architecture Many people ignore and forget this Using all your content might not be the answer But mobile users often want it all What do mobile users need on your site? Use analytics
  • 37. Why Analytics? Mind reading is no way to base fundamental content decisions @stephanierieger #bdconf
  • 38. Accessibility If I can't use your awesome website... It's not really that awesome, is it? @stephanierieger #bdconf Make content accessible by everyone Content accessibility > Presentation styles
  • 39. Viewports Mobile browsers default to 960px wide but scaled down Fine for desktop sites, not for mobile sites Set the viewport... carefully
  • 42. Performance and Optimization Mobile devices often suffer from Low bandwidth High latency Unreliable connectivity Slower processors Browsers only use 2,4, or 6 connections to a site
  • 43. How Pages are Fetched iOS 4.3 uses up to 4 connections
  • 44. How Pages are Fetched Android 2.2 uses up to 11 connections!
  • 45. Performance Rules Aggregate and minimize your CSS and Javascript But look at all those images!
  • 46. Images Resize images on the server WURFL has tools for this http://tinysrc.net/ For images used in CSS Base64 encode images, embed in CSS Use CSS sprites
  • 47. Testing Emulators / simulators work, up to a point May need Mac and Windows hosts Test with real devices On real networks (3g, Starbucks wifi) In real conditions Outside in sunshine In classrooms
  • 48. Managing a Mobile Site Content Management and Maintenance Use database or CMS to manage content Reuse and publish content to multiple locations Web Analytics Track usage and behavior Justify the need for mobile optimized sites Continual Improvement
  • 49. Mobile Aware Web Project SGG funded project, with participants from IT Services University Communications Student Affairs Develop guidelines and tools Develop reference sites, including http://www.stanford.edu/m http://itopenhouse.stanford.edu
  • 50. What we're considering JQuery Mobile for mobile framework UI elements Base style Modernizr for feature detection Media queries for screen size detection Simple backend device classification mod_rewrite regular expressions FTW! 
  • 51. Mobile Framework Showcase Examples of mobile aware web developed using a mobile framework  JQuery Mobile http://commencement.stanford.edu/m JQ Touch http://www.stanford.edu/m Sencha Touch http://www.stanford.edu/group/itopenhouse/m
  • 53. Resources http://www.breakingdc.com/speakers yiibu.com (@stephanierieger) lukew.com (@lukew) Tools and Frameworks jquerymobile.com, sencha.com, etc @grigs, @snookca, @ppk, etc: https://twitter.com/#!/scottylogan/mobile
  • 54. Image Credits flickr.com/photos/jschumacher/4273428108/ flickr.com/photos/kenjonbro/3796564454 flickr.com/photos/mattgrimm/2391244100/ flickr.com/photos/daveknapik/402730950/ flickr.com/photos/wessexarchaeology/321370565/ flickr.com/photos/radioflyer007/4117675229 flickr.com/photos/soldiersmediacenter/3729394795/ flickr.com/photos/wscullin/3770015203/ flickr.com/photos/50101005@N03/4607048471/ flickr.com/photos/mountain-top/3144841264 flickr.com/photos/eszter/478947769/ flickr.com/photos/mniemand/3338678704 flickr.com/photos/cote/67919646 flickr.com/photos/nodomain1/306390955 flickr.com/photos/benlanc/4786607582/ flickr.com/photos/danielfoster/2206175625 flickr.com/photos/johanl/5619897608/ flickr.com/photos/andersondotcom/482150154 flickr.com/photos/johanl/4424185115/ flickr.com/photos/konch/4974020028 flickr.com/photos/antmcneill/4686147794 flickr.com/photos/jemsweb/4363548805 flickr.com/photos/kaioshin/3085642914/ flickr.com/photos/subtleness/18765167/ flickr.com/photos/23379658@N05/3650125866/ flickr.com/photos/jillclardy/3651849999/ flickr.com/photos/schmish/4090562160/ flickr.com/photos/nocallerid_man/3638360458 flickr.com/photos/kitkaphotogirl/3516722887 flickr.com/photos/bslavin/2260190207 flickr.com/photos/peterblanchard/3387759956 flickr.com/photos/dullhunk/202872717/
  • 55. Q&A

Notas do Editor

  1. \n
  2. [twitter]starting the mobile web talk, with co-presenter @auracreations[/twitter]\n\n
  3. [twitter]describing the awesomeness of #bdconf[/twitter]\n\n
  4. \nhttp://www.flickr.com/photos/jschumacher/4273428108/\n\n
  5. [twitter]I used naughty words before doing mobile development; now I use more[/twitter]\n\nhttp://www.flickr.com/photos/mattgrimm/2391244100/\n\n
  6. http://www.flickr.com/photos/wessexarchaeology/321370565/\n\n
  7. did any one web developers / designers drop their hands when asked about mobile? Guess what... you’re mobile developers / designers\n\nhttp://www.flickr.com/photos/wessexarchaeology/321370565/\n\n
  8. Morgan Stanley, via http://mashable.com/2010/04/13/mobile-web-stats/\n\nhttp://www.flickr.com/photos/soldiersmediacenter/3729394795/\n
  9. Morgan Stanley, via http://mashable.com/2010/04/13/mobile-web-stats/\n\nhttp://www.flickr.com/photos/50101005@N03/4607048471/\n
  10. iPhone - >9,300 (~82%)\niPad - 348\nWindows Mobile - 636\nAndroid - 871\n\nIncludes old devices no longer in use\nbased on user selected OS in NetDB\ndoes not include “builtin” OS choice\n\nhttp://www.flickr.com/photos/eszter/478947769/\n\n
  11. No Windows Phone 7 or Blackberry showing up\nAgain - not including “built-in” OS\n\nProblematic time for comparison - lots of users are away from campus\n\nhttp://www.flickr.com/photos/eszter/478947769/\n
  12. Safari (iPhone, iPad, Android/Webkit) is now 3% of total homepage traffic\nGoogle Analytics does not break out Windows Mobile and Windows Phone 7\nOnly includes browers with javascript enabled\n\nhttp://www.flickr.com/photos/eszter/478947769/\n
  13. http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n\n
  14. http://www.comscore.com/Press_Events/Press_Releases/2011/3/comScore_Reports_January_2011_U.S._Mobile_Subscriber_Market_Share\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
  15. http://reviews.cnet.com/8301-19736_7-20031147-251.html\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
  16. http://reviews.cnet.com/8301-19736_7-20031147-251.html\ndoes not include wifi-only iPad and iPod touch\n\nhttp://www.flickr.com/photos/cote/67919646\n
  17. [twitter]Gomez When Seconds Count report http://www.gomez.com/wp-content/downloads/GomezWebSpeedSurvey.pdf[/twitter]\n\nhttp://upload.wikimedia.org/wikipedia/commons/d/d0/FA-18_Hornet_breaking_sound_barrier_%287_July_1999%29.jpg\n\n
  18. Repetitive now - deleting mail in the morning\nBored now - need something to do while in line, waiting for meeting to start, etc.\nUrgent now - I’m running late, which gate is my plane leaving from?\n\nhttp://www.flickr.com/photos/benlanc/4786607582/\n\n
  19. http://www.flickr.com/photos/johanl/5619897608/\n\n\n
  20. [twitter]@ppk’s mobile browser feature compatibility list http://quirksmode.org/mobile/[/twitter]\nPeople don't really surf the web using the bad browsers, unless they have to\n\nhttp://www.flickr.com/photos/johanl/4424185115/\n \n
  21. http://www.flickr.com/photos/antmcneill/4686147794\n\n
  22. Brian Fling @fling #bdconf offers clients a web app for less than full cost, because it’s the right thing to do; client always choose to pay more for a native app\n\nhttp://www.flickr.com/photos/kaioshin/3085642914/\n\n
  23. http://www.flickr.com/photos/23379658@N05/3650125866/\n\n
  24. Well, mostly everywhere... might need some tweaks\nInstalled web pages have icons like regular apps\nW3C and others are working on device APIs; security remains an issue (for regular web pages)\n\nThere’s standardization work on device APIs at http://www.wacapps.net/web/portal too\n\nhttp://www.flickr.com/photos/schmish/4090562160/\n\n
  25. [twitter]native app wrappers for web apps: http://phonegap.com/ and http://appcelerator.com/[/twitter]\nAlso Rhombile, but it uses a custom language\n\nhttp://www.flickr.com/photos/kitkaphotogirl/3516722887\n
  26. SEO is all about links\nWhile you can create links to apps (on most devices), they’ll fail horribly if the user doesn’t have the app installed\n\n
  27. \n
  28. \n
  29. \n
  30. There may be cases where you have to do this\n\nWe’ll talk about redirects shortly\n\nhttp://www.flickr.com/photos/peterblanchard/3387759956\n\n\n\n
  31. [twitter]lynx is the ultimate test of content first / progressive enhancement[/twitter]\n\n\n
  32. [twitter]Original Responsive Web Design article: http://www.alistapart.com/articles/responsive-web-design/[/twitter]\n\nhttp://www.flickr.com/photos/kenjonbro/3796564454\n\n
  33. [twitter]@grigs’ response to responsive design: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/[/twitter]\n\nhttp://www.flickr.com/photos/daveknapik/402730950/\n\n
  34. [twitter]@lukew’s mobile first talk http://www.lukew.com/ff/entry.asp?1137[/twitter]\n\nhttp://www.flickr.com/photos/radioflyer007/4117675229\n\n
  35. \n
  36. http://www.flickr.com/photos/wscullin/3770015203/\n\n
  37. http://www.flickr.com/photos/mountain-top/3144841264\n
  38. While you’re redesigning your site, make sure you keep it accessible\nAvoid fixed viewports\n\nhttp://www.flickr.com/photos/mniemand/3338678704\n
  39. http://www.flickr.com/photos/nodomain1/306390955\n
  40. Some frameworks do this; many tutorials suggest this\nWorks more like a native app!\n
  41. Lets user pinch and zoom to see details, or to make controls more readable and more accessible\n
  42. RFC2616 (HTTP 1/.1 specification), section 8.1.4 "Practical Considerations" states:\nA single-user client SHOULD NOT maintain more than 2 connections with any server or proxy\n\nhttp://www.flickr.com/photos/danielfoster/2206175625\n
  43. [twitter]Use firebug in firefox, or the web console in Safari / Chrome to see requests made by browser[/twitter]\n\nThis is from blaze.io, but Firebug in Firefox and the web console in Safari / Chrome also provide similar tools\n\n
  44. This is from blaze.io, but Firebug in Firefox and the web console in Safari / Chrome also provide similar tools\n\n
  45. [twitter]Aggregate & minimize CSS & Javascript, using tools like http://developer.yahoo.com/yui/compressor/ http://refresh-sf.com/yui/[/twitter]\n\n
  46. tinysrc and wurfl cache images\n[twitter]Base64 encoding images: http://www.websiteoptimization.com/speed/tweak/inline-images/[/twitter]\n[twitter]CSS sprites: http://www.alistapart.com/articles/sprites/[/twitter]\n\nhttp://www.flickr.com/photos/andersondotcom/482150154\n
  47. iOS simulator is part of XCode\nAndroid emulator on Linux, Mac, Windows\nUse desktop browsers with performance tools\nUse YSlow, etc.\n\nhttp://www.flickr.com/photos/konch/4974020028\n\n\n
  48. http://www.flickr.com/photos/jemsweb/4363548805\n
  49. [twitter]Mobile Aware Web Project http://www.stanford.edu/dept/its/projects/mobile/aware/info/ [/twitter]\n\nhttp://commencement.stanford.edu (June 2011)\nhttp://stanfordwho.stanford.edu (Summer 2011)\nhttp://itservices.stanford.edu (Summer 2011)\nhttp://events.stanford.edu (Summer 2011)\nhttp://news.stanford.edu (Summer 2011)\nhttp://explorecourses.stanford.edu (Summer 2011)\nacademic calendar on registrar site (Summer 2011)\n\nhttp://www.flickr.com/photos/subtleness/18765167/\n\n
  50. [twitter]Modernizr - http://www.modernizr.com/ [/twitter]\n[twitter]http://detectmobilebrowser.com/ generate detection scripts for common languages, and mod_rewrite[/twitter]\n\n\nhttp://www.flickr.com/photos/jillclardy/3651849999/\n\n
  51. http://www.flickr.com/photos/nocallerid_man/3638360458\n\n
  52. \n
  53. [twitter]useful mobile sites: http://yiibu.com/ http://lukew.com/ http://quirksmode.com/ [/twitter]\n[twitter]Scotty’s mobile list: https://twitter.com/#!/scottylogan/mobile [/twitter]\n\nhttp://www.flickr.com/photos/bslavin/2260190207\n\n
  54. \n
  55. http://www.flickr.com/photos/dullhunk/202872717/\n\n