Snappy, The HostGator Mascot

Gator Crossing

The Official HostGator Company Blog!

Dragonfly
AirPlane

Mobile Websites: What Are Your Options?

Written by Taylor Hawes

Monday, November 25th, 2013

Homme d'affaires composant un texto

Mobile Internet has desktop usage in its crosshairs. According to Smart Insights, mobile Internet will surpass desktop usage in 2014. This is good news for Apple and Android, but bad news for all those hard-working web developers who painstakingly created a desktop website worth its salt. But let’s be honest, in an age when innovation moves at light-speed, no one expects a silver bullet solution to last very long.

The unique characteristics of mobile devices require special considerations all their own. Smaller screen resolutions and unique interfaces present challenges to the typical 1280 by 720 click-and-type model. Because of smaller resolutions and tactile, gesture-based controls, navigations, layouts, and content need to be simplified for proper viewing. To further complicate matters, the diversity of mobile devices means that a single resolution or interface solution may not display correctly on other devices or platforms. Fortunately, there are options, each one with its own challenges and assets, to help solve this truly complicated puzzle.

 

Mobile Specific Websites

The first potential solution is a bit of an antique at this point, but has its benefits. The mobile specific website builds a dedicated set of code and assets around the unique context of mobile web. This option can allow for coding of mobile specific capabilities and features, but ultimately the cons largely outweigh the pros.

The first issue is load times. The mobile Internet is fast and responsive. The mobile only website is not. Because the mobile specific code is necessarily housed under a separate URL, a series of redirects based on the detected platform are needed to point phone browsers in the right direction. This dramatically increases load times and, should any of the redirects fail, unnecessary and unappreciated pain in access.

The next problem is consistency. Updating code on one version of the site requires updating of code on the other site, and failure to do so can lead to embarrassing and glaring issues in format and content. In addition, successful execution of two separate code bases complicates the already arduous design process in the case of implementation of additional features. This is without mentioning the manpower needed to police both versions and maintain a coherent web experience.

The final problem is search engine optimization. Because of the separate URLs of the two sites, the indexing and search rank of one does not benefit the other. For this reason, mobile users may not even be able to find your mobile site should they look for it.

The short story is: don’t use a separate mobile site. At one time, Google actually recommended them before responsive web design practices became prevalent. Save yourself the headache and consider more flexible, intuitive, and convenient options.

 

Device Specific HTML

Device specific HTML represents one of these intuitive solutions. The backbone of this approach is the Vary HTTP header. In its implementation, the Vary command signals to Internet Service Providers to consider the encoding preferences of the user when determining which format to serve. In doing so, two sets of HTML code can be utilized with some common assets and displayed based on the needs of the user.

In addition, the shared URL of the two versions has positive search implications. Common indexation and search rank of both versions means that the appropriate format will be readily accessible through regular search channels, thus alleviating the confusion presented by a stand-alone solution. Furthermore, the Vary header helps Google more easily crawl both formats by indicating which Googlebot to use. The end result is faster crawl and site discovery.

 

Responsive Web Design

With myriad platforms and devices, even device specific HTML is no guarantee that site presentation will be consistent. For that reason, web designers have adopted a solution entitled “responsive web design“. The method adopts a doctrine referred to as “device agnosticism”, which aspires to create a homogeneous experience regardless of the specific viewing context.

On a coding level, a series of queries enable websites to actively adapt to different device circumstances. Javascript media checks apply assets and layouts on the basis of screen resolution and can therefore be used to simply rearrange page content and navigation without the hassle of separate HTML. By relying on viewing characteristics instead of operating systems or devices, HTML can be rendered accurately in spite of changes in software or hardware.

On a practical level, this means a more coherent experience for viewers and less frustration for web developers. By utilizing common assets, fonts, and layouts, platform agnosticism permits cross-platform branding and design that plays a strong part in developing brand association. By applying catchall code, updating one asset updates the asset across all contexts, thus saving manpower and embarrassing inconsistencies.

Between these options, you should have be able to make an informed decision regarding what is best for your businesses specific needs. Consider your available manpower and aspirin when accepting the headaches of each method and employ the best advantages of each when constructing your web experience. In time, your users will appreciate your mobile accommodations and your mobile site will become as much a part of your identity as your sterling reputation and charming demeanor.

Posted in

Web and Hosting Tips
Comments

qwaszxerdfcv3.14 | 1776zxasqw!!