Ravi Saive: A Technology Blog For Newbies

Building a mobile-friendly website requires a certain degree of knowledge. The mobile application development process involves thinking through an array of usability concerns that many users choose not to acknowledge. There are some people who believe that a mobile-ready website is not necessary to be successful on the web. Most people, however, would agree that you probably do. There are many ways to improve the mobile-friendliness of your website.
Here are the top five tips that will get your mobile site up and running the right way.


You might also be interested in reading following articles:

1. Create a Free Android Application For Your Website
2. Create A Free Nokia Application For Your Website
3. How To Design a SEO-friendly Website?

1. Use Fluid Widths and Responsive Design

Fixed widths may work across a wide range of desktop computers but when it comes to mobile websites, there are simply far too many devices for a developer to use one fixed width. Think about it, there are dozens of Android models available on the market. Apple iOS boasts both the iPhone and iPad while competitor companies are rolling out various tablet devices. It is simply unrealistic to assume that one fixed with will work across all of these devices. There is a solution to this problem; fluid widths and responsive design.

Fluid widths ensure that the website will look good regardless of the user's smartphone or mobile device. Fluid widths automatically adapt to the width of the web browser within the mobile device. One of the easiest ways to take advantage of fluid widths is with WordPress. Just start with a mobile responsive theme such as TwentyEleven (the default theme that comes with WordPress sites) or Genesis, which is one of the top two WordPress framework themes currently on the market.

2. Compress Your Images

Images need to be adequately compressed for web use otherwise they will hog bandwidth. The key here is to reduce the file size that has to be downloaded. If you simply make the width and height of the image smaller, you won't reap the benefits of this mobile-friendly technique. As a rule of thumb, you should never make users download a lot of data content on their mobile devices, especially when you can easily avoid it. In the end, users will appreciate the faster loading speeds that come with compressed file sizes, as will the search engines.

3. Make Buttons Larger than 44 Pixels

Mobile devices today are developed to accommodate finger tap technology, which simulates a mouse click. Although finger tap technology is convenient at times, it does make it difficult for smartphone users to click on website buttons. As a mobile designer, your goal is to make sure that buttons are large enough for users to press without needing to zoom in. Zooming in and out of a mobile website is a tedious process that should be avoided to provide the best overall user experience. The mobile application development community has formed a general consensus to make smartphone buttons at least 44 pixels wide and 44 pixels tall. Adopt this size as it is easy for users to click on across a wide variety of smartphones and mobile devices.

4. Keep Choices to a Minimum

Mobile websites work best when developers narrow down the choices. Aim to have no more than five different choices for the navigation. You also want to make the main parts of your site easily accessible. Keep in mind that building a mobile-friendly website is much different than building a site for a desktop viewer. For a desktop viewer, it would make more sense to have a dozen links in the navigation bar and about ten pages of content on the home page. Mobile devices simply don't have the space. You also want to include a link to your full version site on the footer of your mobile-friendly website.

5. Test, Then Test Again

Your mobile application may look great on an iPhone, but that doesn't necessarily mean it will look the same on an Android. It is important to test your mobile website on as many different devices as you can get your hands on. Chances are you will find that your site displays properly on some operating system but not on others. Your mission is to actively seek out these types of errors and fix them.

The goal of any mobile application development project is to create an app that looks great and functions properly regardless of the smartphone or tablet it operates on. With these five helpful tips, it should be much easier for you to achieve this goal.