HTML5 and CSS3 on Windows Phone: Dark and Light Styles

In my last article covering HTML5 and CSS3 on Windows Phone, I got you started with a simple boilerplate.

It just so happened that the style I presented you with was Dark.  Since we know that Windows Phone also has a light theme, I think it’s important that your mobile web site have one as well.  Below is an enhanced version of the boilerplate HTML5 file that displays many commonly used Form elements:

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”utf-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes” />
        <meta name=”MobileOptimized” content=”width” />
        <meta name=”HandheldFriendly” content=”true” />
        <link rel=”stylesheet” href=”MetroDark.css”>
        <title>Web Storage</title>
    </head>
    <body>
        <p>CONTOSO FRUIT COMPANY</p>
        <h4>Enter Products</h4>
        <form>
            <fieldset>
                <legend>Add</legend>
                <label id=”ValueLabel”>Product Name:</label>
                <br />
                <input id=’ValueInput’ type=’text’ />
                <br /><br />
                <label id=”StateLabel”>States:</label>
                <br />
                <select name=”states”>
                   <option value=”Washington”>Washington</option>
                   <option value=”Florida”>Florida</option>
                   <option value=”California”>California</option>
                </select>
                <br /><br />
                <label id=”RefLabel”>Refrigerate:</label>
                <br />
                <input type=”radio” name=”refrigerate” value=”yes” /> Yes
                <input type=”radio” name=”refrigerate” value=”no” /> No
                <br /><br /><br />
                <button id=’insertButton’>  Add Product  </button>
            </fieldset>
        </form>
    </body>
</html>

Here is the Dark CSS file that accompanies the above HTML5 file:

@media screen and (max-width:480px) {
    body {
        font-family: “Segoe WP”, Tahoma, Geneva, Verdana;
        background-color: #000000;
        color: #ffffff;
        padding: 5px;
    }
    h1, h2, h3, h4, h5, h6 {
    font-family:”Segoe WP Semibold”;
    margin-bottom:5px;
    }
    h1 {
    font-size: 48pt;
    }
    h2 {
    font-size: 40pt;
    }
    h3 {
    font-size:32pt;
    }
    h4{
    font-size:24pt;
    }
    h5 {
    font-size:20pt;
    }
    h6 {
    font-size:18pt;
    }
    p {
    font-size: 14pt;
    }
    input, select, button {
        color: #ffffff;
        background-color: #000000;
        border: 2px solid white;
        vertical-align: baseline;
        font-size: 17pt;
        min-width: 40px;
        min-height: 40px;
    }
    label {
    vertical-align:baseline;
    font-size:17pt;
    }
    input.hasfocus {
    background-color:white;
    color:black
    }
    fieldset, legend {
    font-family:”Segoe UI Semibold”;
    font-size:12pt;
    }
    fieldset {
    padding:12pt;
    border: 1px solid white;
    }
    legend {
        color: #ffffff;
    }
}

The combination of a mobile-optimized HTML5 page and a Dark Metro CSS3 stylesheet results in a familiar UX designed for AMOLED displays:

But what if you want to display a light mobile website?  Luckily, you get to use the same HTML5 page and just point to a new, Light Metro CSS stylesheet as shown below:

<link rel=”stylesheet” href=”MetroLight.css”>

So what does this new CSS file look like?  A lot like the dark one with some subtle changes:

@media screen and (max-width:480px) {
    body {
        font-family: “Segoe WP”, Tahoma, Geneva, Verdana;
        background-color: #ffffff;
        color: #000000;
        padding: 5px;
    }
    h1, h2, h3, h4, h5, h6 {
    font-family:”Segoe WP Semibold”;
    margin-bottom:5px;
    }
    h1 {
    font-size: 48pt;
    }
    h2 {
    font-size: 40pt;
    }
    h3 {
    font-size:32pt;
    }
    h4{
    font-size:24pt;
    }
    h5 {
    font-size:20pt;
    }
    h6 {
    font-size:18pt;
    }
    p {
    font-size: 14pt;
    }
    input, select, button {
        color: #000000;
        background-color: #ffffff;
        border: 2px solid black;
        vertical-align: baseline;
        font-size: 17pt;
        min-width: 40px;
        min-height: 40px;
    }
    label {
    vertical-align:baseline;
    font-size:17pt;
    }
    input.hasfocus {
    background-color:white;
    color:black
    }
    fieldset, legend {
    font-family:”Segoe UI Semibold”;
    font-size:12pt;
    }
    fieldset {
    padding:12pt;
    border: 1px solid black;
    }
    legend {
        color: #000000;
    }
}

With the Light Metro stylesheet, you now have a look and feel that’s reminiscent of the Outlook experience on Windows Phone.  With the black and white colors reversed, you get the following:

So there you have it!  You started with a simple HTML5/CSS3 boilerplate and now you’re building mobile web apps with both a Dark and Light Metro UI.  All the touchable elements are large enough for big fingers and the separation between controls ensures that users won’t hit two at the same time.  Consider this your foundation for a new HTML5 journey that you’ll be taking with Me, Internet Explorer, and Windows Phone.

Keep coding!

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

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