Accelerate Mobile Development with Cross-Platform Tools

Kelowna

Cross-platform tools allow developers to repurpose existing skills to accelerate native, multi-platform mobile development.

While many of your mobile, cross-platform goals can be accomplished with HTML5, you might be wondering if there’s a solution for pure native code. There are a growing number of options out there using popular programming languages and even no code at all.

Appcelerator provides an IDE and the Titanium SDK allowing developers to create cross-platform apps using JavaScript. Unlike Hybrid apps, the JavaScript is compiled to native code for better performance. APIs are included to ensure apps can take advantage of all platform features as well as native UI elements.

If you’re a .NET shop with developers comfortable with Visual Studio and skilled in the C# programming language, Xamarin is right for you. This development tool runs on its own or plugs into Visual Studio allowing you to build native iOS, Android and OSX apps. It also implements the native UI of each platform so users will never know the apps weren’t built in Objective-C, Swift or Java. Xamarin is a great way to leverage .NET investments across devices.

Zero-code or low-code solutions like AppArchitect, Alpha Anywhere, SkyGiraffe, Force.com, PowWow, WorkSimple, PowerApps, Reddo, MobileSmith, StarMobile and others are worth your due diligence to speed up development efforts as long as they don’t create a risk to your business platforms.

Reduce expenses by building apps for all mobile platforms with a single codebase and a smaller development team to get your product to market more quickly and pervasively. Has your company pivoted to cross-platform development tools?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click to purchase a copy of my book today and start transforming your business!

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

Mobile WebViews Close the Performance Gap with Native Apps

Chattanooga Skyline

New WebViews with the same performance as mobile browsers mean web skills are finally viable for building fast, cross-platform hybrid apps.

Back in 2012, Mark Zuckerberg admitted Facebook’s mobile strategy relied too much on HTML5 rather than native apps. While it was a great way to target multiple platforms from a single codebase, Facebook’s hybrid app suffered from poor performance. They used a WebView which is a web browser encapsulated in a software component that can be added to a native app. This allows HTML, JavaScript and CSS to run inside a native app container with access to platform APIs that browser-based apps don’t get, like the camera or push notifications. The problem was these WebViews didn’t share all the features or performance of the full web browsers.

Today, iOS 8+ includes a WKWebView API with access to the Nitro JavaScript JIT compiler and rendering performance equivalent to the Apple Safari browser. The Chromium WebView introduced in Android 4.4 KitKat takes advantage of the Google Chrome V8 JavaScript engine for dramatic gains. On Windows 10, the WebView based on the Edge browser is the ticket. All these WebView controls offer enhanced HTML5 and CSS3 feature support and significantly better performance to close the gap with native apps. If your corporate designers and developers have web skills, consider using Apache Cordova/PhoneGap or Kaonsoft to rapidly target multiple mobile platforms with a single codebase.

Reduce development expenses by building apps for all mobile platforms with a single codebase by a smaller development team using widely-available web skills that gets your apps to market more quickly and pervasively. Does your company have a hybrid web app strategy to reach more customers faster?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click to purchase a copy of my book today and start transforming your business!

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

Web 1.0 Server Round-Trips are Like Watching Paint Dry

Milwaukee

Replace wasteful, server round-trip Web 1.0 sites built with Cold Fusion, CGI, ASP, Servlets, Perl and Livewire with AJAX empowered web apps.

The 90s web moved from online brochures to a technology that could be used for actual apps through the clever use of the HTTP verb called POST. A web page with text boxes, radio buttons, lists and check boxes full of data could POST information to a special web server directory containing something called a Common Gateway Interface (CGI) script. This would insert data into a database and build dynamic web pages. The notion of POSTing data and having servers do all the heavy lifting of executing code, connecting to databases and building new web pages made a lot of sense in a world of browsers with minimal capabilities. That said, users didn’t like the way their web pages disappeared and new pages were loaded and sent to their browser.

Things got a more interesting when asynchronous JavaScript and XML (AJAX) came along allowing a page to send and receive data from a server without refreshing. They just updated the page’s document object model (DOM) ushering in Web 2.0. Modern web apps use this technology to call web APIs using JSON instead of XML for data. Powerful HTML5 browsers with fast rendering plus just in time (JIT) compiled JavaScript facilitate advanced UI and JavaScript frameworks as well as the notion of single page apps. This is the web your employees want.

Deliver web apps that respond quickly to user commands and behave like a native mobile apps to improve the productivity of your employees. What steps has your organization taken to boost the responsiveness of its mobile web apps?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click to purchase a copy of my book today and start transforming your business!

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

Get with the Program and Migrate those Web 1.0 Intranet Apps to HTML5

toronto

Migrate Web 1.0 Intranet apps built for Netscape + Internet Explorer 3 to HTML5, CSS3 & ECMAScript5 for modern browsers.

The web really exploded in the commercial space during the second half of the 90s. Tim Berners-Lee’s HTML 3.2 specification received W3C recommendation in 1997. Netscape submitted its JavaScript language to ECMA and got its specification published in 1998. Cascading style sheets (CSS) received their first W3C recommendation in 1996. The problem with all of this was that Netscape and Microsoft were in a browser war where both pushed their own standards on web designers and developers to try and gain an edge in the market. In an attempt to avoid incompatibilities between browsers, most websites built in the 90s targeted the lowest common denominator.

Modern mobile browsers can now render the app-like web provided by HTML5, CSS3 and ECMAScript5 (JavaScript). You get all the cross-platform development benefits plus a deployment model that bypasses app stores. This new breed of web app supports offline operation, multithreading, the ability to call web APIs and take data offline via local data stores. Most enterprise solutions require these features and Web 1.0 apps can be migrated to get this functionality.

Since existing HTML 3.2/4.0 still renders properly, just enable the new features of existing HTML tags and add new tags where appropriate. Add new JavaScript functions to empower your web app with modern capabilities. Update and add new CSS to give your web app the look and feel of a native mobile app.

Improve user productivity by delivering the feature-rich HTML5 web apps that modern, mobile browsers are designed to work with. Has your company updated all it’s Intranet web apps from the 1990s yet?

Learn how to digitally transform your company in my newest book, “Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform your Business.”

Book Cover

Click to purchase a copy of my book today and start transforming your business!

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

HTML5 Mobile Web Moment: Viewport Tag

HTML5

When building HTML5 mobile web sites that target multiple devices, one of the first elements you should include is the viewport meta tag.

Most mobile web browsers render incoming HTML in a virtual window that is typically wider than the screen of the mobile device. This is done so you can view non-mobile websites via panning, pinching and zooming.  The negative side effect of this behavior is you often see tiny text, pictures and UI elements that are unusable.  As you might imagine, this poor user experience contributes to the notion that mobile apps are superior to the mobile web.  You can help correct this misconception by adding the viewport meta tag below inside the head tags of your web page:

<meta name="viewport" content="width=device-width, initial-scale=1">

This tag instructs your mobile browser to adapt the HTML content to the size of your mobile device instead of the width of a desktop browser.  In our mobile-first world, one of the keys to success is to start small and target mobile browsers first instead of the other way around.

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

Where are we now with HTML5?

HTML5

HTML5 has made a lot of progress in the mobile space over the last few years.

Take a look at the latest report from the French analyst house faberNovel, on HTML5 and how to rethink web strategy:

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

Bring your own Device (BYOD) Baby Steps

The Matrix

As someone who spends a lot of time talking to CIOs about the Consumerization of IT (CoIT) and mobile, I get asked a lot about BYOD strategies.

I also recognize that you’re likely to get a different strategy from every person you ask.  To quickly recap how we got here over the last several years, the rise of BYOD is a result of more compelling devices in the marketplace combined with the move from Corporate-Liable (CL) to Individual-Liable (IL) device ownership policies.  Typically, I like to take baby steps on this one because you don’t have to boil the ocean in order to respond to this mega-trend all at once:

Baby Step 1:  Oh, it’s too late.  This step was already taken while you weren’t looking.  Your employees are already bringing their own smartphones and tablets into the enterprise.  In an Individual-Liable scenario, they’re using their own data plans to surf the mobile web and use apps.  Don’t freak out because you haven’t given them access to anything yet.  At worst, you might have employees that are distracted and not giving you their best work since they’re playing Angry Birds.  On the other hand, they may already be more productive because they’re using public information on the mobile web to solve corporate problems.

Baby Step 2:  Your employees want to get their email on their smartphones and tablets.  No surprise here.  Since I’m a person that believes CIOs and IT Directors should get more value for their dollar, I won’t ever recommend one-off, point-solutions to satisfy the need of each different mobile platform, because that’s wasteful.  During the middle of the last decade, I watched in horror as Microsoft began to license the Exchange ActiveSync (EAS) protocol to all its competitors.  At the time, I was worried we were giving away one of Windows Mobile’s competitive advantages.  Fast forward to our consumer-driven world of today, EAS is the one thing that every smartphone and tablet has in common.

Exchange ActiveSync

While not every organization uses Exchange Server, most do.  Some are even sidestepping the management of additional servers buy running this in the cloud via Office 365.  What this means is that you can instantly give push email, calendar, contacts, and tasks to your employee’s iPads, Android devices, Windows Phones, Symbian smartphones, and iPhones via a single technology that you probably already have.  If you’ve ever used Outlook Web Access (OWA), then your organization is already setup to securely deliver this value to most every device over SSL.  Okay, at a basic level, your employees can now get elements of their ‘information work’ done anywhere at any time which makes them more productive.  They should also be more responsive to your customers as well.

Baby Step 3:  Uh oh, someone told you that security could be an issue.  You’re now thinking that there’s no free lunch in mobile.  While you may not be able to beat the security you get on your heavily-managed Windows laptops and tablets with BitLocker, there is some light-management that you get for free and you probably don’t even know it.  Remember the EAS protocol from Baby Step 2?  Well, it gives you some light device management in the form of policy enforcement in addition to the email stuff.  While there are a lot of great device management packages out there that can give you complete control, when dealing with devices owned by your empowered employees, heavy device management may not be appropriate.  The notion of installing a device management agent on each employee-owned device is a huge undertaking.  So how does Exchange ActiveSync sidestep this?  Well, it’s already installed on their smartphones and tablets and it does things like enforce complex PINs, password expiration, and allows you to remotely wipe a device if it gets lost or stolen.  You get this for free and it works the same way across many popular smartphones and tablet.  Whew, you now have a basic line of defense in play.

Baby Step 4:  Supported device matrix.  While EAS provides email, calendar, contacts, tasks, PIN enforcement, and remote wipe to the majority of smartphones and tablets your employees might own, some devices might fall through the cracks.

The Matrix

That’s why it’s important to let your employees know which devices and mobile operating systems meet the minimum EAS standards to create your BYOD baseline.  It’s a list that looks similar like this:

  1. Windows Phone 7 and higher
  2. iOS 5.0 and higher
  3. Android 2.3 and higher
  4. Windows Mobile 6 and higher
  5. Symbian S60

As you can see, this covers the majority of devices that consumers are buying today with the exception of the Blackberry, which has its own device management system.

Baby Step 5: Your employees are now asking for enterprise apps so they can perform other elements of their job remotely from their devices.  It’s too soon.  I know your IT department has been developing desktop apps for decades, but your BYOD baseline isn’t ready for this yet.  The heterogeneous mobile diversity created by BYOD makes cross-platform native development inefficient and costly.  There are too many programming languages, IDEs, MEAP vendors, app security, and deployment issues for you to think about during this early Baby Step phase.  Don’t worry, you’ll get there later.  For now, I want you to keep it simple, and follow my theme of using the same technology over and over for every smartphone and tablet to realize training and cost efficiencies while shortening time to market.  The Mobile Web is your key to cross-platform success.  Today’s devices all have web browsers that support many of the features that comprise HTML5.

HTML5

By continuing to build web applications like you’ve been doing for your company Intranet since the 90’s, you can target every device via a single code base, through a single engineering effort on the part of your internal or outsourced developers.  Since your employees will be accessing your web servers via their device browsers, you’ve effectively sidestepped software deployment and patching issues, blacklisting/whitelisting users and groups, as well as data-at-rest concerns.  WebKit, Opera, and Internet Explorer all provide the same SSL-encrypted experience you get on the desktop when you’re doing online banking.  Oh, and make sure to use Basic Authentication on your web servers since it’s the only auth method guaranteed to predictably prompt users for credentials and work across all device browsers.  To make things more competitive with native apps, the faster JavaScript engines of today’s mobile browsers make business logic and Ajax calls to your backend web services infinitely faster.  While your employees will securely get the data they need in the palm of their hand, it doesn’t mean I want them to access internal web servers via the corporate Wi-Fi network.  The BYOD baseline I’m creating for you doesn’t include secure CorpNet access because the necessary level of device trust hasn’t been established.  Publish your internal web servers out to the Internet using reverse proxy servers or through a public cloud where your employees can access them via their mobile operator’s data network.   The HTML5 mobile web is your no-brainer strategy for cross-platform mobile development until further notice.

Bonus Baby Step:  Speaking of Wi-Fi, the tidal wave of folks bringing in their consumer-focused, individual-liable devices are facing new caps on their previously-unlimited data plans and they’d like you to help.  While I remain firm that you haven’t done enough in your BYOD baseline to trust devices on CorpNet, you can throw your employees a lifeline by giving their devices access to a ‘Guest’ Wi-Fi network that only allows them to go out to the Internet.  Many companies have a segmented ‘Guest’ Wi-Fi network for visitors.  If you already have something like this in place, consider allowing your BYOD legions to ride on this network using Wi-Fi Protected Access (WPA2) for security.  Think of this as a ‘Give-Get’ since you’re publishing corporate HTML5 apps out to the public Internet without accommodating the data usage fees for employees to use them.  Now employees can use your mobile web apps from the office without eating into their mobile operator’s monthly data allotment.

Is this everything you need to know?  No.  But it quickly gets you out of the paralysis of not knowing what to do about this tidal wave of devices flowing into your enterprise.  Once you have this BYOD baseline in place, you begin to thoughtfully look at topics like encryption, containerization, wireless security, enforcing a larger list of policies, software distribution, inventory, corporate network access, enterprise apps, data, MEAP, and many more.

Right now, I want you to feel a sense of accomplishment by taking the first Baby Steps towards creating a mobile strategy for your organization.

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

HTML5 and CSS3 on Windows Phone: Simple Geolocation

Geolocation Page

Now that I’ve spent the last two articles helping you to get your Metro user experience foundation created with CSS3 and Media Queries, it’s time to jump into one of the features of HTML5Geolocation is perfectly suited for smartphones because location awareness is something they all have in common.  Most people are under the impression that only native mobile apps have the power to reach into the platform APIs and retrieve a device’s current location.  Luckily, with modern HTML5 browsers like Internet Explorer 9, web pages can use JavaScript to gather this same information.  This API finds your location via the following methods:

  • GPS:  This is the most accurate method but it requires you to be outdoors and has a reputation for draining batteries.
  • IP Address:  There’s a location database that maps IP addresses to locations which may or may not be accurate depending on how far away your DHCP server is from your current location.
  • Wi-Fi:  This also maps IP addresses to locations but also triangulates between Access Points.  It works indoors and may be relatively accurate.
  • Cell Tower Triangulation: This also works indoors and can be fairly accurate depending on how far apart the closest cellular towers are.

Let’s take a look at a simple page containing HTML and JavaScript:

<!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=”MetroLight.css”>
    <title>Geolocation</title>
    </head>
<body>
<p>CONTOSO TRACKER</p>
<h4>Simple Geolocation</h4>
<form>
<fieldset>
<legend>Track</legend>
<button type=”button” id=”locationButton” onclick=”getPosition()”>Get Location</button>
</fieldset>
</form>
<script>
function getPosition() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayLocation);
}
else {
alert(“No Geolocation Support”);
}
}
function displayLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert(“You’re at Latitude: ” + latitude + “, Longitude: ” + longitude);
}
</script>
</body>
</html>

As you can see, I’ve taken our HTML5 + Mobile Web boilerplate and included the Light Metro stylesheet to get started.  Beyond that, it’s just a simple button designed to call a JavaScript function via the onclick event.  For the sake of this example, I’ve done the unthinkable and have included the JavaScript inside the web page.  Please never to this in production.

The onclick event calls the getPosition() function.  The first thing you should notice is a bit of defensive coding where I test to see if the navigator.geolocation capability exists.  If the target browser allows me to pass that test, I then call the getCurrentPosition() method and pass in a single arguement for the successCallback parameter.  Don’t worry, I’ll dive into the other two parameters in the next article.

The displayLocation callback function is called once the device passes the coordinates back to the web page.  After that, it’s a simple matter of retrieving the latitude and longitude values.

This first image below shows you what the mobile web page should look like when you run it on Windows Phone 7.5:

Geolocation Page

You should see the now-familair Light Metro UX.  When you click the Get Location button, IE9 will popup a dialog asking your permission to allow the web page to access your location from Windows Phone as shown below:

Geolocation Allow

This should give you comfort in knowing the Big Brother cannot anonymously track you.  You can say Yes or No for each Geolocation request and you can check the checkbox to remember your choice for this particular web page.  Once you’ve said Yes, the device will give you a lat/long as shown in the image below on the left:

Geolocation Coordinates

In order to more easily test this on my PC with Visual Studio 2010 running, I used the Windows Phone emulator, plus the additional tools you get with the Windows Phone 7.1 SDK.  By clicking on the Location tab, you can then click on the Bing map to get a Pushpin in a particular location.  The coordinates for the pushpin are displayed in the Current Location section which should match what you see in the emulator.  That’s all there is to it!

Congratulations!  You can now get lat/long coordinates without building an app.

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

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

 

HTML5 and CSS3 on Windows Phone: A Simple Boilerplate

Mobile Web on Windows Phone

Internet Explorer 9 running on Windows Phone 7.5 has seriously raised the HTML5 mobile web profile of Microsoft’s latest phone operating system.

Up until recently, it’s been all about the apps written in Silverlight.  With hardware-accelerated video, text rendering, canvas drawing, and the high-speed “Chakra” JavaScript engine, IE9 compiled for ARM processors means business.  But diving into HTML5 without considering the differences in characteristics of mobile web browsers is a mistake.  Therefore, I’m going to show you some HTML5 and CSS3 that you can use as a starting point for your mobile web apps.

Below, you can see the simplified DOCTYPE, html, charset, and stylesheet tags that are the hallmark of HTML5.  In order to be accomodate small screens on Windows Phones, I’ve added the viewport, mobile optimized, and handheld friendly tags to keep the browser from trying to render a desktop web site.

<!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=”wp.css”>

        <title>Mobile Web Title</title>

    </head>

    <body>

           <h3>Mobile Web</h3>

           <script></script>

   </body>

</html>

You probably also noticed that I placed the script tags just before the closing body tag instead of inside the head tags.   This ensures that the mobile page fully renders in the browser before the JavaScript parsing begins.

Along with this simple HTML goes an equally simple stylesheet that provides a basic, Windows Phone Metro look and feel:

@media screen and (max-width:480px) {

body {

    font-family: “Segoe WP”,Tahoma,Geneva,Verdana;

    background-color: #000000;

    color: #ffffff;

    padding: 18px;

}

h1, h2, h3, h4, h5, h6 {

    font-family:“Segoe WP Semibold”;

    margin-bottom:7px;

}

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;

}

}

I’ve included a simple media query in the CSS to only apply the style to devices with a maximum width of 480 pixels.  Additionally, this will definitely give you the Segoe fonts, black background, and white borders that you’re accustomed to in Windows Phone Silverlight apps.  You’ll also notice that I set minimum heights and widths for some of the UI elements to give mobile users a larger hit target.

Mobile Web on Windows Phone

Good luck with your next HTML5 + CSS3 mobile web site!

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