8 Ways to Make Your Website Mobile Friendly

August 4, 2010 • By

Now that mobile browsing is ever increasing in popularity, it is in your best interest to start optimizing your websites to better fit the mobile platform and its limitations. There are many easy ways to enhance you website for mobile browsing without hindering much of your website; we discuss eight popular ones that can make a huge impact on usability.

Fluid Width Layouts

Giving your site a fluid width layout is a major step towards making your website mobile friendly. It not only gets rid of the extra dead space surrounding your website, but it additionally enables viewing across many different resolutions or platforms. So what exactly does it mean to make your site have a fluid width?

Fluid width, as its name describes, makes the width of your website stretch or squish depending on the browser size. Its ease to implement depends on your current setup or layout. If you have a simple easy to work with layout, changing your width property to a percentage is all you need to modify of your css style sheet to get it working.

No Ad Clutter

Advertisement clutter is a major issue for mobile platforms, the user ends up viewing more of the advertisements than content, if the layout has not been destroyed already. There is an easy fix to hide this clutter without creating a mobile specific version of your website. You can either use the css’ handheld stylesheet type or simply detect resolution size.

Either one you use, using a simple display:none on the obtrusive advertisements will eliminate them from view and clear things up. You should always remember that most handheld mobile devices have limited real estate, meaning the screen size can only fit a few things, and those few things should be the content the user visits your site for.

Centered Content

Centralizing your content is key on mobile devices as that is what users see immediately. A lot of mobile websites tend to stick in a lot of unneeded clutter in this spot such as images or advertisements, however the webmasters need to understand that displaying the content users came for is exactly what they need to focus on.

If a user is accessing your website from a mobile phone and is not connected to a land based network connection, bandwidth will definitely be a limitation, which means the user will select through the sites he or she wants to visit rather than visit the sites they would on a desktop.

What this means is that you need to make sure your website utilizes a small amount of bandwidth during mobile browsing, which means images should be limited, and text content should be focused. What if your site is based on imagery content?

If your website is mainly based on imagery, it is in your best interest to create a separate mobile website, one that is optimized for that platform which can size down the imagery and highly compress them. An alternate way is to create mobile applications for applicable mobile devices that allow third party applications, as this could be a helpful tool for your users.

Cross Platform Friendly Links and Effects

As new web tools and effects continue to expand, it is hard not to include a nifty hover tooltip or a drop down navigation or even links that open up a small new window using javascript to display some information. However, to a user on a mobile device, these effects and tools may not work on their platform, leaving many unusable links and tools. An easy solution to this is to always provide an alternative for users who cannot view or use them.

Some mobile devices allow Javascript but it will not be able to utilize the effects you have on your website anyway, so the best thing to do is to detect the type of platform that is connected to your website and disabling or changing some tools and effects to suit it better.

Keep Your Pages Short and Compact

Long pages for mobile devices are definitely a huge draw back because of the longer load time it takes to download the webpage. Therefore, keeping your web pages short and compact makes your website accessible across all platforms even on a device that has a very limited download speed, thus, the last thing users want to be doing is waiting for pages to load rather than spend the time browsing through it.

Thorough Navigation

As you know, typing on most mobile devices is a real a pain as the keypad or virtual qwerty keyboard is not going to be easy to work with at all. Therefore, creating a thorough navigation for your website is a key aspect to making your website mobile friendly. If you offer a genre of content, you need to assure users can get to them via browsing and not through using a search engine. If you cannot get to certain parts of your website without searching, chances are, they will not either.

Large and Clear Content

Today, many new mobile devices are touch screen, which means users will be using their fingers to navigate about their device and your website. If your website’s content and links are not large or clear enough, navigating through your website will be a pain.

To easily prevent this, try to eliminate links that are scattered within articles or paragraphs, as they are difficult to press or click on since they are surrounded by plain text. Instead, place these links above or below the bodies of text while keeping them fairly large, this allows users to easily click them with their finger without hassle.

Short and Sensible Links

This is another typing related issue; when users have to type in a long URL to get to your site, chances are, they will not. As mentioned earlier, using a keypad or virtual qwerty keyboard is not ideal for typing long text blocks, so make sure your website has a short and easy to remember domain. Additionally, eliminating typing work as much as possible to get around while they are on your website is also ideal, as usually they are accessing your site to quickly pull or reference information.