Tag: Wireless

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″]

Posted on

Ray Ozzie sees the Dawn of a New Day for Microsoft

Ray Ozzie

Five years after Ray Ozzie penned The Internet Services Disruption, he reflects on Microsoft’s move to the cloud.

While he’s most proud of Windows Azure and SQL Azure, he also gives our competitors their due by mentioning that they have out-executed us when it comes to mobile experiences.  He harps on the subject of how complexity kills and then challenges us to close our eyes and form a realistic picture of what a post-PC world might actually look like.

rayozzie

Ray goes on to state that those who can envision a plausible future that’s brighter than today will earn the opportunity to lead.  His ultimate dream is to move us toward a world of :

  • Cloud-based continuous services that connect us all and do our bidding.  These are websites and cloud-based agents that we can rely on for more and more of what we do.  On the back end, they possess attributes enabled by our newfound world of cloud computing: They’re always-available and are capable of unbounded scale.
  • Appliance-like connected devices enabling us to interact with those cloud-based services.  This goes beyond the PC and will increasingly come in a breathtaking number of shapes and sizes, tuned for a broad variety of communications, creation & consumption tasks.  Each individual will interact with a fairly good number of these connected devices on a daily basis – their phone / internet companion; their car; a shared public display in the conference room, living room, or hallway wall.

As a Mobility Architect at Microsoft, I’m excited that my commitments align with this vision in connecting the Peanut Butter of the Cloud with the Chocolate of devices.  Wireless data networks, bandwidth, latency and signal coverage are the wildcards when it comes to making this vision a reality.  That’s why you’ll always see my concern for this Wireless wildcard reveal itself in all the Cloud-connected mobile architectures I design.

Check out the rest of Ray’s new memo at http://ozzie.net/docs/dawn-of-a-new-day/.

-Rob

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″]