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 http://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″]

 

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 http://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″]

The Important User Experience (UX) You Can’t See

Cellular Tower

Whenever I hear the term, “UX,” I immediately think of graphic designers, artists and folks who focus on making the UI of your application beautiful.

Nine times out of ten, this is the appropriate connection to make.  Great UX folks at Microsoft came together to make Windows Phone 7 the most visually-appealing smartphone on the market and that’s a good thing.  Lucky for me, great UX folks come to my rescue all the time because while I can build functional and usable client applications that solve users problems, my stuff isn’t that pretty.  Gotta love Expression Blend and the people who can use it to transform your app!

There’s lots of folks out there that think they don’t have an actual connection to the end user because they develop on-premise and cloud server APIs.  You know who I’m talking about.  Server developers who are building Web Services using WCF to expose functionality to be consumed by clients.  Web developers that are creating dynamic ASP.NET web pages that make AJAX requests.  Well, I’m one of those people too.

Just because you don’t build client UI’s that people can see and touch, doesn’t mean you don’t have an important impact on UX.

Once a user gets past the “skin-deep” beauty of the UI you typically think of, they’re often more concerned about accomplishing the task that the mobile app was designed for.  If a user taps on a button and has to wait over a minute to retrieve and display the data they’re requesting, it’s fair to say that they just had a poor user experience.

Cellular Tower

In our new world where wirelessly-connected smartphones and tablets rule the day, a number of factors that you may not have thought of, come into play that impact user experience.  After the user clicks the button, and before data is retrieved, quite a few steps are taken through a very long path:

  1. Your Request is transmitted from the device to the nearest cell tower while competing for bandwidth with hundreds or thousands of other nearby mobile devices all doing the same thing.  Oh, and those 3G and psuedo-4G speeds you read about are only achieved in perfect conditions with a limited number of wireless devices connected at any given time.
  2. Your Request travels down the tower to the base station.
  3. Your Request travels from base station to the mobile operator’s backhaul network where it competes with millions of other requests for bandwidth across fiber and other types of circuits.  Keep in mind that despite providing fast wireless speeds in perfect conditions, the amount of bandwidth in the various mobile operators backhaul networks varies widely.
  4. Your Request jumps on to the public Internet and starts hopping through routers.
  5. Your Request hits the outer firewall of the Domain you’re trying to reach.
  6. Your Request might hit a reverse proxy.
  7. Your Request might go through a back firewall as it leaves the DMZ to enter a corporate network.
  8. Your Request finally gets to the intended server, and depending on the amount of traffic it’s experiencing, it will wait in an invisible queue created by the server operating system until it gets processed.
  9. Your Response travels back through all those same hoops to get back to your wireless, mobile device.

Wow, I’m already tired just thinking about that!

So it should be clear that despite the great convenience provided by wireless data networks, there are a lot of hoops built into the system that work against you to diminish the user experience.  Doctors take an oath to “do no harm,” and I think server developers should take that oath to heart.  You have a lot of options to consider to make this wireless journey as fast as possible in order to put a smile on the user’s face.  Besides fast servers, lots of processor cores, fast SANs, caching, queuing, scaling out, data sharding, using the best SQL query plan, using faster code algorithms and such, I want you to optimize the stuff that’s actually going over the wireless network.  I want to make sure you “do no harm,” and that means not using fat, slow transports and wire protocols to move your data between devices and servers.

If you’ve been to my Tech Ed sessions or read past blog posts from me, you know that speed and efficiency mean a lot to me.  In the past, I’ve demonstrated 4 different ways to return a list of 8 delivery drivers from SQL Azure.  Depending on the choice the server developer made, the resulting user experience could be bad or good.

  1. Worst:  Using OData with all it’s helpful metadata, the list of drivers used 8.54 kb of data.
  2. Not as bad:  Using SOAP + DataSets, the list of drivers used 3 kb of data.
  3. Much better:  Using REST + XML, the list shrank to 1.24 kb of data.
  4. Best:  Using REST + JSON, the list dropped all the way down to 639 bytes.

Each one of the examples above returned the data my user was asking for, but they diverged in how much bandwidth they ate along the way.  Guess what happens if you take advantage of the built-in gzip + deflate compression capabilities found in IIS 7?  Through the use of the URL Rewrite Module, tweaks to your web.config file, and specifying an Accept-Encoding header like Nick Randolph figured out, you can shrink the 639 bytes to a fraction of that size.  Now we’re talking great user experience here!

Now you’re on the right track with efficient, compressed, REST + JSON Web Services, so let’s move on to the mobile web.

Those giant, flashy websites you’ve been building since the 90’s aren’t going to cut it on mobile devices.  It doesn’t matter that your iPhone or Windows Phone 7 browser can render the Wall Street Journal in all its glory.  It’s not a good user experience.  Have you ever heard the phrase, “just because you can do something, doesn’t mean you should do that thing?”  Just because my mobile browser can flawlessly render the New York Times, doesn’t mean my user is interested in waiting till the next ice age of it to download and fully render.  Oh, and then you have to pinch and zoom to actually find anything that your eyes can read.  Do your users a favor and view my Tech Ed Europe session on the mobile web and download the mobile web best practices cards to build web sites for small screens and slow wireless networks with lots of latency.

Mobile web sites should be displayed in a single column, heavy on text, light on pictures and graphics, and weigh-in at under 20 kb in size.  Yes, I just said under 20 kb.  Just in case you’ve heard otherwise, the secret to a successful mobile web site is not HTML 5.  Remember, the mobile web is all about reaching as many users as possible with your site or web application.  I’ll have more to say about this in my forthcoming book on the subject.

So what’s the big takeaway here?

Cloud and on-premise server developers have a big role to play in UX even if you can’t always see what they’re doing!

Keep coding,

-Rob

Sharing my knowledge and helping others never stops, so connect with me on my blog at http://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″]

Build the Mobile Web with WebMatrix

HTML5

Build mobile web sites that adhere to W3C Mobile Web Best Practices using the new WebMatix web development tool.

This tool introduces simple-to-use ASP.NET Web Pages which don’t follow the MVC pattern nor do they include server controls like WebForms.  It also introduces the “Razor” templating engine and a model where you have HTML and inline code where needed.  This way to building sites is easy and flexible and takes me back to the golden age of Microsoft ASP web development in the late ‘90’s.

Our favorite mobile database, SQL Server Compact 4.0 finds it’s way to the web with this tool providing a simple way to give your mobile web site a database.  It’s been beefed up and tuned for the stress of providing data services to Internet and supports 256 concurrent connections.  Since it’s a file-based database, you just copy it along with your web pages to your on-premise server, web hosting provider or Azure.

Last but not least, you get IIS Express which is a welcome replacement for the Cassini development web server currently used by Visual Studio.  This gives all developers the power of IIS 7.x without needing Administrator access to their box, even if they’re running on Windows XP.

The lightweight, inline-code nature of developing with WebMatrix makes it easy to build low-bandwidth sites that follow XHTML Basic 1.1 recommendations so you can target any mobile web browser.  From there, it’s up to you to determine if you want to support more advanced features found in mobile browsers like IE Mobile, Opera, or Webkit (iPhone, Android, webOS or Blackberry).

– Rob

Sharing my knowledge and helping others never stops, so connect with me on my blog at http://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″]