1. Style for mobile

Congratulations — you’ve decided to embrace mobile, one of the fastest growing segments on the Web. The first thing you’ll notice is how diverse the mobile ecosystem is. Browsers, screen sizes, connection speeds — everything is different. The Web community enjoyed a brief period of iPhone domination, when addressing one browser/screen resolution seemed sufficient. But now that Android devices (which come with a variety of screen sizes) are quickly gaining popularity, it’s important to once again think of the bigger picture.

When styling your mobile site, stick to relative units — percentages, ems and so forth. There is no way to predict what mobile devices your users are using today or might be using tomorrow. Relative units can go a long way when it comes to making a lasting, quality mobile design. It’s also important to maintain visual consistency with the desktop site — this will make your brand stronger and reassure your mobile visitors that they’re in good hands. You’ll also want to minimize scrolling and page transitions in order to reduce time spent looking for content.

2. Resize images

Small screens call for small images. There’s just no reason to push desktop-sized, heavy image assets to mobile users that don’t need them. A good strategy involves resizing the images on the web server — this way they take up to 90% less time to load. CSS-based resizing can also work, although it carries performance and bandwidth penalties.

If you can, make your optimized images link to the full, original image hosted elsewhere. Your mobile visitors will appreciate it in case they want to zoom in to get more detail.

3. Automatically detect mobile devices

Typing is a pain on even the best mobile devices, and many users avoid it when browsing. Combined with the fact that communicating to your users that you actually offer a separate mobile version of your site, and getting mobile users to visit the mobile version of your site is actually quite difficult.

Thankfully, a variety of methods for automatic mobile device detection have become recently available. The most reliable approach, in our experience, is User Agent detection, where a server makes a decision on what to serve based on how an incoming browser describes its capabilities. Other implementations feature real-time JavaScript requests to databases like DeviceAtlas or WURFL that also supply information on what a device can do. A mobile version is not complete until it’s automatically triggered for every mobile user!

4. Rethink navigation

Your website might have a couple of dozen footer, header and sidebar links — but do they matter to your mobile visitors? Mobile web surfing is known for its high bounce rates (users come to look at just one page), so focus on a few key areas of the web site and acknowledge your visitors’ short attention spans. Don’t think twice about eliminating links to destinations that don’t have a high mobile priority.

At the same time, consider adding or prioritizing mobile-specific items. That tiny “Contact” link hidden in the footer of your full site? It could be a great top-line header item for the mobile version, simply because many users will come looking for a phone number or your office address. Another great item to have in the mobile header is Search.

5. Provide a clear path to the full site

As a web designer, you are responsible for making content decisions for the mobile visitor. However, occasionally a piece of information that a user is looking for is not included in the mobile version. One very easy solution is to put a footer link to your “Full Site” on every page. Make sure that this link takes the user to the full version of the exact page that they’re currently browsing.

Once the transition to the full site is complete, it’s considered good practice to disable mobile redirection for that user. Some sites do this permanently (e.g. Digg Mobile) while others (CNN) set a timeout period of 1-2 hours with a special cookie. Your call!

6. Don’t break links

In the early days of the mobile web, it was common to see standalone mobile web sites that were structured completely different from their traditional, desktop counterparts. Today, mobile traffic is driven to a large extent by Google searches, links in Twitter streams and email. Most of those links point to desktop web sites, which is why automatic device detection is so crucial.

However, after the mobile user has been detected and sent to m.yoursite.com, it is important to show them the exact content that they expect. For instance, if a www.yoursite.com/category/article/ was the original link, present the visitor with the mobile-optimized m.yoursite.com/category/article/, not just the m.yoursite.com homepage. This might sound easy, but a significant number of web publishers don’t do this right, and end up surprising and frustrating their audience.

7. Measure the mobile audience

Mobile devices are quickly becoming an integral part of the Web, rather than an isolated market niche. Plenty of mobile analytics and advertising services have come and gone, but Google’s recent AdMob acquisition and a Mobile Analytics API are going to further help consolidate mobile services under one roof.

Measuring the mobile audience is important for several reasons. First, by knowing what devices are popular with your users, it is possible to make informed design decisions. For example, if your mobile audience is 99% iPhone, you shouldn’t worry too much about BlackBerry compatibility. Another aspect is traffic and lead generation. After looking at the mobile stats, you’ll likely see that mobile and desktop users prefer different content. Knowing all this, it is possible to create an outstanding mobile presence and successfully monetize it.

Thanks for reading these mobile tips, and best of luck with your mobile sites!

Source Link: http://www.sitepoint.com/7-tips-to-make-your-web-site-mobile-friendly/