Tag: IE

Posted on

Mobile Web Facts and Best Practices

HTML5

<what is the mobile web? />


  • It’s growing faster than the desktop web
  • Faster growth than desktop web during 1990’s
  • There’s been a 2000% increase in mobile websites since 2008
  • The mobile web is:

New York Times

  • The mobile web is not:

New York Times

  • The mobile web is glanceable info for people on the go
  • The desktop web is for people who aren’t going anywhere
  • The mobile web can reach half the planet
  • The desktop web reaches ~1 billion users
  • The mobile web browser is the #1 app used on most phones
  • The mobile web browser consumes 13% of user face time
  • The mobile web browser accounts for 50% of all phone data traffic
  • There are around 326,000 touchable mobile web sites
  • Most of the top mobile web sites focus on shopping, services, social and news
  • Retailers can increase consumer engagement by 85% by having mobile-specific website
  • But only 4.8% of U.S. retailers have a mobile website
  • 9 out of 10 mobile shoppers use the mobile web while in-store
  • 50% of users in-store mobile web activity is shopping related
  • 51% of in-store mobile research has led to a purchase
  • Amazon took in > $1 billion via its mobile commerce site
  • Google says mobile shopping searches are up 3,000% over last 3 years
  • Most native device attributes will reach HTML5 by 2013, enabling UX that rivals native apps
    • Geo-location 2010
    • Camera 2011
    • Motion detection 2011
    • Calendar 2012
    • Contacts 2012
    • SMS2012
    • Files 2013

<markup differences />


  • Today’s mobile web is XHTML Basic 1.1Second Edition
    • W3C recommendation in November 2010
    • http://www.w3.org/TR/2010/REC-xhtml-basic-20101123/
    • Supersedes XHTML-MP 1.2 from Open Mobile Alliance (OMA)
    • Similar to HTML 4.01
    • Not WAP
  • Yes, it’s XML
    • XML parsing rules enforced
    • <?xml version = ‘1.0’ encoding = ‘UTF-8’?>
    • Every tag name and attribute must be in lowercase
    • All attributes must have a value
    • Every tag must be closed
  • You must have a document type definition (DTD)
    • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>
    • Your markup must stick to the definition
  • You need an XML namespace for your document
    • <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
  • You need a mime type
    • @Response.AddHeader(“Content-Type”, “application/xhtml+xml”);
  • There are no frames, no framesets and no iframes
  • No Java applets
  • No Flash
  • No image maps
  • Simple tables
    • Not for layout (Use CSS)
    • No table nesting (Tables within tables)
    • No thead
    • No tbody
    • No tfoot

<user experience />


  • CSS Mobile Profile
    • Subset of CSS2
    • Must specify units
  • Keep your <title></title> short, description and < 20 characters
  • Stack everything in a single column
    • No left/right horizontal scrolling
    • Minimize up/down vertical scrolling
  • Include just the top 20% most important content from the desktop web
  • Use minimal, lightweight advertisements
  • Link to the desktop website
  • Use short URLs that fit on a single line and don’t disappear off the side of your phone
  • Accommodate different device dimensions
    • Width = 100%
    • Height = Auto
  • No hovering or mouse-overs needed for touch
  • Limit the need for text entry
    • Use checkboxes
    • Use drop-down combo boxes
    • Use lists
    • Use radio buttons
    • Use pre-filled text
    • Maintain reusable session data in a cookie
  • Each page must only provide a single function or idea
  • Use larger fonts because people can’t read small screens with high resolution
  • Use large touchable UI elements
    • Fingertips are up to 80 pixels wide
    • Touchable elements must be 40+ high/wide
    • Touchable elements must be 20+ pixels apart
  • Navigation should be at the top of each page (Also use breadcrumbs for one-click access)
  • Just say no to background images
    • Makes pages harder to read
    • Increases page size
  • No pop-up windows
  • Don’t use absolute values for measurements
    • You’ll get unexpected results on different mobile browsers
    • Use ems
    • Use percentages
  • Do not use images for:
    • Icons for links or menus
    • Buttons
    • Visual separators
  • Do use small images:
    • For maps
    • For an article
    • As a product logo
    • If they are smaller than device screen
    • As long as they are lightweight thumbnails
    • Only when absolutely necessary
  • Click to call  <a href=”tel:+12065551212″>Call Rob</a>
  • Click to email  <a href=”mailto:+rtif@ms.com?subject=Hi&body=Rob>email rob</a>
  • Access keys for fast access to list items
    • For phones with keyboards
    • <a href=”Products.cshtml“ accesskey=”1″>Products</a>

<adaptability />


  • Server-side device capability databases
    • Wireless universal resource file (WURFL)
    • Device Atlas
    • 51 Degrees (points to WURFL)
  • Client-side device capability detectionbrowser name == navigator.appNamevar screenSize = screen.width + ” x ” + screen.height;cookies == navigator.cookieEnabled

    browser version == navigator.appVersion

    user agent header == navigator.userAgent

  • Detect modern DOM

function hasModernDOM()

{

// Check for support of DOM Level 1 functions

if (document.getElementById && document.getElementsByTagName)

return true;

return false;

}

  • Don’t assume…test for object existence

if (object)

{

// object available

}

  • Determine device orientation

if (window.orientation)

{

if (window.orientation == 90 || window.orientation == -90)

return “landscape”;

else return “portrait”;

}

  • Detect AJAX capabilities

if (window.XMLHttpRequest)

{

return new XMLHttpRequest();

} else try {

return new ActiveXObject(‘Msxml2.XMLHTTP’);

}catch(e) {

try {

return new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (e) {

return null;

}

}

  • Viewport
    • Prevent mobile browsers from displaying desktop-optimized markup
    • <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no” />
  • Internet Explorer Mobile adaptation  <meta name=”MobileOptimized” content=”width” />
  • Blackberry adaptation  <meta name=”HandheldFriendly” content=”true” />

 

<optimizations />


  • Minify XHTML, CSS and JavaScript
    • Remove non-useful tags
    • Remove comments
    • Remove spaces
    • Use YUI compressor to compress HTML
    • Use jsmin to compress JavaScript
  • Use Yahoo YSlow to analyze website performance
  • Validate your site with W3C mobileOK Checker at http://validator.w3.org/mobile/
  • Some DOM thoughts
    • Avoid large DOM frameworks like JQuery
    • Most DOM frameworks lock you into Webkit
    • DOM frameworks use extra system memory and JavaScript libraries and CSS take longer to download
    • Keep small and uncomplex DOM for fast manipulation
  • Enable Web server compression (GZip/Deflate)
  • Cache for performance

//Timed caching for freshness since last request:

Response.AddHeader(“Cache-Control”, “max-age=3600″);

Response.OutputCache(3600);

//Request always goes to origin server for validation:

Response.AddHeader(“Cache-Control”, “no-cache”);

//Instructs caches not to store sensitive data:

Response.AddHeader(“Cache-Control”, “no-store”);

  • Conserve battery life
    • No auto-refreshing
    • Be smart about JavaScript usage
  • The scourge of Transcoders
    • They are proxies that reformat desktop web pages
    • They might add mobile operator navigation bar to each page
    • They might inject advertising from unknown sources
    • They might replace original graphics with smaller/low res images
    • Maintain your page integrity:

Response.AddHeader(“Cache-Control”, “no-transform”)

  • Reduce number of linked resources
    • Use only one JavaScript file
    • Use only one CSS file
    • Use only one Cookie
    • Check for and eliminate duplicate scripts
  • No client-side redirecting
  • Empty strings can cause unnecessary HTTP requests to the server
    • <script src=” ”>
    • <link href=” ”>
    • <img src=” ”>
  • Link to JavaScript at bottom of page so page loads before download/loading JavaScript file
  • Above all, keep pages < 20 k  (Yeah, I said 20 k)

 

<what do I like best about the mobile web />


  • It allows me to bypass App Stores and Marketplaces to reach consumers and the enterprise directly
  • I can reach more users, at a lower cost, with just a single web app
  • It taps into the HTML, CSS, JavaScript and ASP.NET skills that more people have
  • It’s a real W3C Recommendation unlike HTML5 which means it’s supported by more smartphones and feature phones
  • It allows me to reach the billions of people in the developing world that can’t afford an iPhone
  • It brings simple mobile commerce to everyone
  • It allows me to push educational content to any child with a mobile phone (there’s a landfill of feature phones for the kids who don’t already have one)
  • Oh, and this lightweight, simple, and fast content is great for XO Laptops (OLPC) and underpowered Netbooks (that same landfill has old laptops too)

<we’re done />

 

Sharing my knowledge and helping others never stops, so connect with me on my blog at https://robtiffany.com , follow me on Twitter at https://twitter.com/RobTiffany and on LinkedIn at https://www.linkedin.com/in/robtiffany

Sign Up for my Newsletter and get a FREE Chapter of “Mobile Strategies for Business!”

[mc4wp_form id=”5975″]