Mobile Web Development Primer


New mobile reports surface each day showing the exponential use of mobile devices for accessing the Web. As site owners and developers, you shouldn’t ponder on why or when to develop a mobile strategy, but rather how. This primer will share some handy guidelines to get you started.

Understanding Constraints of the Mobile Web

It is important to understand the mobile web’s limitations before you dive into developing for it. Even though the underlying technologies that you’ll use for mobile web development are similar to those for desktop web development, mobile web development introduces a few other complexities:

Speed

Mobile devices suffer from several connectivity issues including slow speed and high latency. Even with the availability of mobile broadband access or fast Wi-Fi connections, mobile devices do not have the appropriate hardware to render web pages as quickly as traditional desktop computers.

Mobile browsers also have limited support for caching external resources like CSS and JavaScript files. Compressing these files can help you achieve a better speed.

Additionally, Google’s Page Speed Online is a great tool to use for testing page speed on mobile browsers. It will also provide you with suggestions on how to optimize the performance of your page.

Screen size and resolution

There are over 5,000 mobile devices that can access the Internet. Each of these devices have varying screen sizes, low resolution and limited aspect ratios.

When designing your web page, you should pay close attention to the viewport and ensure that your content will fit on a smaller screen– for example, an adaptive and responsive design that responds to different screens sizes is recommended.

For more practical tips, refer to our article 6 Best Practices When Designing For The Mobile Web.

Technologies & Browser Standards

In mobile development, there are many browser layout engines running on different mobile OS platforms. Not all of these mobile browsers are standards compliant, and some have partial or no support for new technologies like HTML5 and CSS3.  When developing for the web, always strive to understand the different mobile browsers compatibility and avoid using technologies that are not supported (e.g Flash on iOS devices).  Additionally, seek to develop pages with graceful degradation in mind.

Peter-Paul Koch at Quirks Mode has compiled a mobile compatibility table that can prove to be useful to understand mobile browser capabilities.

6 Ways to make your site Mobile Friendly

There are several ways you can prepare your web site for the mobile web. Here are 6 of the most popular methods:

1) Mobile Browser Detection & Redirection Scripts

If you’re comfortable in design and launching your own mobile version of your site, then you can simply use a mobile detection and redirection script to forward mobile visitors to a mobile friendly part of your site.  Redirection scripts work by detecting the user-agent string of the browser.

You can find several mobile detection scripts in the HotScripts directory.

2) Using CSS3 media queries

You’re probably already familiar with media types that allow you to specify a custom CSS print stylesheet to target print devices. CSS3 extended the concept of media queries by providing capability to check for a device specification like browser height and width, device dimension, orientation and resolution.

You can use media queries to create a stylesheet for phones whereby you can, for example, strip down your header, re-arrange navigation items, and get rid of extra graphics.

Now, CSS3 is only partially supported in some mobile browsers but Adapt.js is a decent alternative JavaScript solution to the @media approach. In a nutshell, Adapt.js is a lightweight JavaScript field that determines which CSS file to load before the browser renders a page. Whenever the browser tilts or resizes, it will simply check its width, and serve only appropriate CSS.

3) Using mobile skins/themes for CMSs

Most popular content management systems now offer mobile skins and themes for their platforms. By simply installing the theme/skin to your site, it will take care of mobile user-agent string detection and return the mobile skin version of your site on the fly.

4) Mobile Website Builder

Similar to remotely hosted website builders, mobile website builders offer a do-it-yourself approach to designing and maintaining a mobile friendly website. These tools usually require absolutely no technical knowledge, programming skill, or web design experience to use. You will usually start off by selecting design templates, adding pages, including forms, and inserting text and images. After you’re done, your site will be hosted and accessible online. mobiSiteGalor, Winksite and moFuse are some examples of mobile website builders.

5) RSS to Mobile Conversion Service

If your web site has an RSS feed, you can plug it into an RSS to mobile conversion service to ‘mobilize’ your site. These services offer a bridge between web-based and mobile content. They do so by fetching your RSS feed on a regular interval and then adapt its content so as to better suit it for mobile devices.  Feed2Mobile and MobileRSS are two popular examples of such services.

6) Mobile Web Development Frameworks

The easiest, fastest, and proven way to develop an interactive and responsive mobile web application is to start with a mobile web application framework. Similar to programming frameworks like cakePHP, Zend Framework, mobile frameworks provide you with handy tools to automate many of the mundane tasks associated with mobile web development.

Most of the mobile frameworks consist of cross-browser consistent user interface elements and widgets, abstraction of boilerplate coding and wrappers for accessing native mobile OS functionalities. And, the best thing is, these frameworks allow you to use web technologies that you are already familiar with – HTML5, CSS3 and JavaScript.  You can learn more about the different mobile frameworks available in our roundup.

Related Posts:

Leave a Comment