How HTML5 & CSS3 Can Be Used For Creating Pages For Mobile Sites

The importance of both online presence and mobile presence is no more hidden from anyone.

With the flourishing mobile and Internet technology, an apparent change in user’s behavior is observed. The number of mobile users is rapidly increasing and thus, if your organization still doesn’t possess a mobile site, you are seriously missing a gigantic audience base

There are innumerable mobile devices available out there, and these diverse devices exhibit different screen sizes and operating systems that are different than desktops. Therefore, to target a wider group of mobile audience, you need to create different pages for mobile devices.

There are a few methods of providing pages for mobile devices. Let’s have a look at them.

Using a style sheet for the handheld media type.

Using browsers like Safari, Opera’s mobile, etc., that support media queries. With this approach, you can conditional expression to recognize a mobile device; and if the site has been accessed from a mobile gadget, it redirects the user to an appropriate style sheet (compatible with the devices).

Using a completely different website to target mobile devices. Here, you may introduce a link mobile site on the home page of the ordinary site.

In the aforementioned methods, the website is required to detect whenever the access has been made via a mobile device, and then automatically redirect the user to the mobile site. This approach is implemented commonly by most of the commercial websites.

How to detect a mobile device

To recognize whether the website has been accessed from a mobile device or not, you may deploy –

A scripting language on the server side

JavaScript on the client side

WURFL on the server.

How to develop web pages for mobile site

For developing a page for a mobile website, you will first need to configure the viewport properties. For this, you can implement a special meta element. The viewport of the mobile devices is different from that of a computer screen.

The viewport basically defines the visible area and determines in what fashion the page content will appear on the screen. You can customize the width of the screen as desired. It is advisable to keep the content easily readable and accessible, thus, users can navigate through the mobile site with ease.

For setting the viewport, you will need to implement a meta element along with the name attribute, which is provided value as “viewport”. While working with the content attribute, you can configure the dimensions and perform the web page scaling via the mobile device.

The meta element can be created and set as mentioned in the below lines of  code.

Code Snippet 1:

<meta name=”viewport” content=”width=device-width, user-scalable=no”>

Here, you can assign a desirable width of the viewport. Since, in the above example the “user-scalable” property has been assigned a value as “no”, the user won’t be able to zoom in or out of the page.

Code Snippet 2:

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

With the aforementioned line of code, the viewport width has been set as the width of the mobile device. The “initial-scale” property that also defines the zoom factor has been assigned a value as “1”, which sets the default width of the viewport. (Note: For iPhone, the viewport width with scale defined as 1 is set to 320 pixels).

You may adjust the viewport as per your requirement. It can be increased or decreased by setting the initial scale value greater or lower than 1 respectively.

Here are certain tips that can help you design a web page with greater efficiency.

Ensure a minimal UI design and keep the layout as simple as possible. Make sure that the website content is easily readable and the page can be navigated with ease. For this reason, the one-column layout is the most viable option.

Since, most of the mobile devices don’t support flash, try to avoid its usage in your web page.

Add precise content on the web page.

Don’t make the page appear clumsy with larger images, use small or minimum images with crystal clear quality.

The header of the web page must be designed with utmost precision, ensure convenient navigation by simple adding only essential eye-catchy CTA (call to action) button and page links in the header.

Irrespective of the scale used, keep the visual appearance of your web page captivating and appealing.

Ensure a user-friendly and mobile optimized web page, so that users can easily access the desired content.

With HTML 5 and CSS 3, you can conveniently design and configure an appropriate web page for your mobile website. Follow the above mentioned guidelines and accomplish your task efficiently. However, it is advisable to test your mobile web page prior to releasing it publicly.

Author Signature: Lucie Kruger is an eminent Senior Content Editor and IT consultant for Mobiers Ltd, which offers mobile application development services. You can also contact her, if you are looking forward to Hire Mobile Application Developer.

Joe Granados the author

Joe Granados is the owner of WebDevTuts. He is also a web designer & developer who loves to design and develop websites. If you're looking for him you can find him via @webdevtuts

Leave a Reply