Taking Your Website Mobile

June 16, 2014

Knowing your mobile Web options is key to crafting an online strategy

First, a little history lesson: When the Web got rolling back in the 90s, websites were extremely basic collections of interrelated documents. These documents, or “pages” were text-centric and fairly devoid of design and visual “bells and whistles.” HTML formatting, or markup, was used sparingly in those days, and only in relatively semantic ways. A bullet-point list was a bullet-point list, a table was a table of tabular data, a paragraph was a paragraph, and so on. Though not complex in layout or graphical appeal, these fairly “pure” HTML documents would have looked fine on any device made in the 20 years that followed.

As the Web evolved over time, HTML was pulled, stretched and pounded into all sorts of different layout-based uses. The more we leveraged what was a loosely semantic text-based markup language for graphical layout, the more device-dependent and inflexible these websites became. Mobile devices started hitting the scene in the early 2000s, and what followed were all sorts of ways to deal with the task of providing Web-based content to them.

Why is this important to your business? As you go to market with your own website, you will want to ensure that your Web content can be easily accessed by your clients and prospects, regardless of the devices they are using. Web development companies will be throwing terms at you regarding mobile devices, and you need to understand your options. While in the past we could make specific-use case arguments for mobile versus desktop browsing, the truth is that lines are being blurred by people “couch browsing” on mobile devices and using them instead of desktop computers even when they are not traditionally “on the go.”

Mobile-Specific Websites

One of the first ways we tried to tackle the problem of serving Web content to mobile devices was with mobile websites. A mobile website is a specialized site specifically designed for mobile browsing. We tend to call these “m-dot” sites because they typically have a separate website address with an “m” in it, e.g., m.somethingorother.com. Advantages of mobile websites versus other mobile solutions are simplicity and lower cost of production. Disadvantages include the separate site addresses, separate and potentially competing content wells, separate sites to maintain (forked effort to maintain both sites), and potentially significant feature differences on the mobile site versus the full site.

Apps

It was not long after the introduction of the iPhone in 2007 that the app scene exploded with popularity. If I had a nickel for every time I was asked, “Can we build an app?” since then, I’d own an island in the Caribbean by now. 

Unlike mobile or responsive sites, apps are written for and depend specifically on the device, operating system and app “store”/distribution system of the device’s operating system (such as Apple’s App Store or the Android app marketplace). 

Apps can be costly to produce if they do anything significant, and need to be upgraded as newer devices hit the market and their operating systems evolve. 

Successful app creation requires strategy and research. In the scramble to create apps just for the sake of saying they had an app, many companies have thrown good money away by creating something their user or client base does not need. Heck — auto insurance companies are all touting their apps right now, and unless I got into wrecks on a weekly basis, I still don’t understand how these apps would make my life any easier. All I want my insurance company to do is pay a claim if I ever do get in a crash, app or no app.

There are off-the-shelf app options out there, naturally, but tread carefully with these solutions. Silver bullet-touting app development companies love pitching the creation of an app with the snap of their fingers at a reasonable cost. But does your client base really need that app? Does it do anything particularly useful? If the app does nothing more than regurgitate your website content in some app-packaged way, you are probably using the wrong tool for the job.

Where apps are great is in solving problems by providing a particular tool that your end user needs, specifically while integrating features of the device it is running on. Any application using the camera, accelerometer, GPS, etc., is best served with an app. Again, a successful app should be well thought out and designed to be useful to the intended audience.

Responsive Websites

Unlike a lot of other new tech buzzwords out there, responsive design is a design and development philosophy rather than a specific technology. Responsive design decouples design from content to the point where the design and content “responds” to the device screen or “viewport” size automatically. Ultimately, the reward is one website and one content well that works across all devices. It is something of a full-circle move on the Web, going back to flexible and elegantly simple designs rather than rigid, pixel-perfect ones.

Naturally, responsive design is not a silver bullet for your Web efforts. As the design re-factors for varying screen sizes, great thought has to be applied to which content will go where and why it is doing so. It is easy to make a design that re-factors on a small screen but is still useless in that format, so good responsive design goes best with a solid foundation of content strategy and site organization.

HTML5

I’m giving HTML5 its own subheading here, even though it’s not an “alternative” entirely to apps, responsive design or mobile sites. It can be a part of any website, and, as such, it is important to understand what it is — and what it is not.

HTML is the markup “language” that Web browsers interpret as instructions on how to display the content of a website. Without it, Web pages would just look like solid walls of text. All Web pages today are rendered using HTML. For nearly a decade before HTML5 came out, we used HTML4 (the number just illustrating which version we’re on). HTML4, and the browsers that supported it over the years, did not have native capabilities for semantic tagging, local data storage, graphics rendering or video playing. This caused Web developers to have to bolt on all kinds of layers of technology to compensate for these missing features, such as Adobe Flash and JavaScript. These bolted-on technologies are not consistently supported across devices and browsers, causing major limitations on what a website could be expected to do on all of these devices and browser versions.

HTML5 is a revamp and extension of HTML4. It takes the HTML4 features that we have had for decades and essentially adds more semantic organization of content and more features native to the Web browsers that interpret it when rendering Web pages. Because so many features now are bundled into the browsers that support HTML5, we are able to create extremely rich user experiences consistent across many devices and browsers. Basically, we have created a Rosetta Stone for all browsers on all devices for new features. It allows us to blur lines between apps, mobile sites and responsive sites, and, in many cases, eliminate the need for one over the other.

HTML5 is not, however, magically a mobile site or responsive site. All too often, I hear people asking for an HTML5 site and assuming that means it’s a mobile site. You can do mobile sites or responsive sites without HTML5 and you can do HTML5 sites that are not optimized for mobile at all. HTML5 merely gives you a wide array of new, consistently interpreted tools to enrich that Web experience across any platform that speaks HTML5-ese.

Hopefully this overview of mobile and Web technologies helps you determine the course for your own company’s Web strategy. 

Joel Hughes is a founding principal of MediaPress Studios, a subsidiary of Scranton Gillette Communications Inc. Hughes can be reached at jhughes@sgcmail.com or 847.391.1015.

Leave A Comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.