Home » Internet » Web Designing » How to make your website mobile friendly

How to make your website mobile friendly

Making your website mobile friendly

If you haven’t already made your website mobile friendly then you might be losing more than half of your customers and clients, or your blog traffic. You need to make your website mobile friendly because more and more people these days are accessing the Internet and websites through their mobile phones and other smart phones and if you have a conventional layout that is based on PCs and laptops, it becomes very difficult to view your website through a mobile device.

A mobile device generally has a very small screen as you have to be very selective about what information you want to display and what information you want to leave. When you are making your website mobile friendly the screen real estate becomes very crucial.

Making a WordPress website mobile friendly

Many of the websites these days I come across use WordPress as a backend CMS and if you’re not doing so, I will personally recommend you shift your website on to WordPress. It is not only an excellent blogging platform it is also very good content management system and when you start using it to manage your generic website it becomes very easy to manage your content.

There are many plug-ins available for WordPress that can help you make your website mobile friendly. Some of them are:

  • WordPress Mobile Pack: Once installed, this plug-in automatically detects what device is being used to access your website and then displays it accordingly. You can decide theme, layout and other adaptations using its administrative control panel.
  • MobilePress: This is a free WordPress plug-in that can immediately turn your WordPress blog into a mobile friendly blog that can be viewed on a cellphone or a smart phone. It allows you to create custom mobile phone themes for different devices, especially now when people might be accessing your website through not only mobile phones but also tablet PCs.
  • WPtap: This service can easily help you create mobile friendly websites for devices like Android smart phones, touch-based BlackBerry, iPod Touch, iPhones and Windows mobile phones. Just like other WordPress plug-ins for making your website mobile friendly, this too gives you options to create your own themes and select pre-existing themes for different devices.

There are many other good WordPress plug-ins available, many of them free, that can help you instantly make your website or blog mobile friendly.

Making a regular website mobile friendly

Not running your website through WordPress doesn’t mean it is extremely difficult to make your website mobile friendly. Just follow good design conventions and more than 80% of your problem is already solved. While designing your website even for computers and laptops keep the following things in mind:

  • Create a simple navigation: Avoid using JavaScript or Flash to create your navigation. You can create excellent navigation schemes using just HTML and CSS.
  • Keep your main content column linear and narrow.
  • Keep the text in the hyperlinks shorter.
  • Avoid using big images and even if you cannot avoid using them, use their smaller versions on the main website and then link to the bigger version.
  • Keep your layout flexible: This way your layout can contract and expand according to the screen size.
  • Keep font size flexible: Use percentage or em to decide the size of your font so that it can easily scale according to the screen size and resolution.

Aside from these points, you can also create a separate version of your website for mobile devices. For this you simply have to create a subdirectory that looks like a subdomain, something like http://mobile.your-website.com. Most of the mobile browsers look for this link as soon as you visit a particular website. This is the place where you can create a mobile friendly website.

In this version of your website you can take into aspect all the factors that would make your website mobile friendly such as a single column, a very simple navigation, smaller images and shorter hyperlinks.

Got some more ideas on how to make your website mobile friendly? Please share them in the comments section.