HTML5 and CSS3 on Windows Phone: Dark and Light Styles

by

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

1 thought on “HTML5 and CSS3 on Windows Phone: Dark and Light Styles”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.