Earlier it was optional for website owners to optimize their sites for handheld devices. But the number of Smartphone and Tablet users has steeply increased of late and websites that are not mobile friendly have been causing mobile users to wrinkle their brows.

What should you do if you realize your site is not optimized for mobile devices? Well, that’s what we are going to discuss in this article. We’ll aim to sort ways for website owners so they could offer visitors who’d access their sites through handheld devices, the best browsing experience.

We are assuming you don’t have much time and you are somewhat bootstrapped in budgetary problems. Such is the case with most entrepreneurs. Hence, hiring an experienced designer and have your site optimized for mobile devices is not open for you as an option.

Assuming all these, here are the tips for you;

Set a Mobile Friendly Width

Common sense is enough to grasp why it is important. The screen of a mobile device is much smaller than a desktop screen. So your website must be resized. To get the measurement, you need to open your site on a desktop computer and then resize it to a narrow width. Once you get the ideal size, set it as the preferred viewport of your site. You can do that in a simple way; just add a code to the header of the page. The code could be;

<meta name=viewport content=’width=768p’>

Once the width is set, the site will show up with a mobile friendly width to anyone who’d log on to it from a Smartphone.

Use Responsive Design for Mobile Compatibility

This should have been mentioned in the beginning. A responsive design template is must for making your website compatible to handheld devices. There are two benefits; first, it renders a website differently on different devices and the secondly, Google wants responsive design to be employed for developing websites that are optimized for Smartphones and Tablets.

Responsive design takes the whole design of the site and then modifies it so it appears normally on all devices ranging from desktop to iPad, laptop to Smartphones. Another highly beneficial feature of responsive design is it utilizes the offline browsing functionality of HTML5. This allows users to access the site while they are on the go.

Understand Media Query Syntax in CSS3

It’s essential for you understand CSS3 because it is the technology behind responsive web design. CSS3 consists of several modules. Media Query is one among many CSS3 modules. It is used so different CSS codes for different media types could be written. It not only allows different media types to have different layouts but also different layouts for different devices.

The media query syntax in CSS3 has two components; type of media and features/expressions. The structure of a media query code is following;

@media mediatype and|not|only (media feature) {

CSS-Code;

}

In the above code, mediatype will be replaced by a specific type of media and media feature will be replaced by a certain expression. The media types are all, aural        , braille, embossed, handheld, print    , projection, screen, speech, tty and tv. The expressions are color, aspect ratio, device height, device width, grid, monochrome, resolution, scan, orientation, width, etc.

So if you write the following code

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

/* applies only if the screen is narrower than 480px */

.tabs {

padding: 3px 1em

the site would adjust itself when accessed through devices that have screen resolution narrower than 480p.

Make Sure the Site Loads Fast

The mobile web is not like the desktop web. When you are sitting in front of your PC, you have more tolerance for slow-loading sites. But when you are browsing the web with a Smartphone, you are probably on the go and have zero tolerance for sites that take years to load.

One way to unburden the site is by replacing JavaScript libraries with jQuery Mobile libraries. The CSS3 media query, as discussed above could also come to your rescue. Bear in mind many network operators provide 4G speed to Smartphone/Tablet users. So if your site loads slowly because it has bulky codes, you are sure to lose even loyal visitors.

The tips discussed above could help you make your site more mobile friendly. You can also gain more insights over design and apply them so your site stands out in the mobile web crowd.

Image Courtesy: www.entrepreneur.com