Tips to Design a Website for Mobile

Alice — Thu, 09 Jun 2011 07:00:11 +0000

Mobile devices have become a part of our daily life now that we can access the web in the palm of our hands. These days, we no longer depend on a computer to check emails, update our status on Facebook, post a tweet, check flights or shop. We can do this and more just by using a mobile device. And we can do this while we’re on a bus, in a coffee shop or in a store. There’s no space limit when it comes to accessing the information we need.

However, how many of the websites that we’re visiting daily have a version that’s designed for mobile devices? Imagine how frustrating it is to access the desktop version of a website with a mobile device. It’s difficult to get around, find the information we need or worse, we can’t even access the site at all.

Designing for mobile devices is all about simplicity, considering that users need to find information easy and now! You have to make the best of the little space you have available. While having an attractive design is ok, making your site user-friendly should be your main focus. So, test it and test it again on multiple devices to make sure it’s displaying correctly.

Now that you see how important it is to have a version of your site on the go, here are some things you should take into account when designing a website for mobile devices:

Get a separate site for mobile

This is actually the first dilemma that comes up: should you convert your already existing site or create a new one from scratch? It’s actually recommended to use a sub domain of your main site. This way you can see exactly what your visitors see and optimize it specifically for mobile users.

Glucon

McDonald’s

Chevrolet

Get to know your users

Before deciding upon the most important areas that you have to include in the mobile version, conduct a test and gather some information from your visitors. They’re the ones spending time on your site so you need to listen carefully and find out what information they’re looking for. This way you can give them an easy access to the areas they like the most and hide the ones they’re not interested in. You don’t need to waste their time and your space with unnecessary content. Then you can start designing the interface so that your users can navigate easily and quickly through your site.

Keep it simple

This is not the place to overdo it when it comes to design elements. Your mobile design should be as simple as possible as it will make it more efficient. You don’t want your visitors leaving your site after 3 seconds because they find it hard to navigate through the content or can’t find what they’re looking for.
Use a simple page structure that includes the 3 basic elements: header with your logo, body with a summary of a post and footer, with some basic info about your site. Avoid including any graphic elements just to make it look prettier. Having an attractive design is not relevant here, but having one that is easy to navigate through. Focus on its functionality rather than on its looks.

Paradise in Motion

Mr. Biggo

Shop NBC

Optimize the navigation

You’re designing an interface for mobile devices, so keep that in mind at all times. For touchscreen devices, pay greater attention to increasing the clickable areas, such as links, buttons, so users don’t have to zoom in constantly. However, you can go for a navigation design specifically optimized for mobile devices.

Daily Horoscope

Coosh

Republic.co.uk

Remove unnecessary content

Remember the tests at the beginning? Use the results to determine what content is important and what content your visitor can live without. Include as much content as you can, but don’t overdo it, otherwise your visitors will have a hard time finding their way around.

Volkswagen

Food Network

Mungo

Limit the number of images

You can use icons and images that are relevant to the content included on the site. Including images is important, but only if you’re trying to make a point. However, don’t include an image if you can very well do without it, especially since sometimes it might look bad at a certain resolution.

Nike Lab

New York Public Library

Tumblr

Test, test, test

After you finished the design and the implementation, test it on multiple devices to see how it looks and moves. And don’t test it just once, but constantly. This way you can see exactly what your visitors are seeing and make changes when something isn’t displaying correctly. By testing it continuously you’ll be able to make it run efficiently.

What are the mobile web design tips that worked for you? From the mobile sites that you’ve visited, which ones were the best designed?

25 Outstanding Flash Website Templates

flashuser — Mon, 24 Aug 2009 18:59:23 +0000

The choice of a well-designed template for your website can turn out to be a difficult thing today, since the large amount that exists on the Internet. So I thought to make a list of 25 outstanding website templates made exclusively in Flash, that are very easy to use and to understand. The templates are selected from FlashComponents website.

They require a low level of programming knowledge (you don’t even have to know Flash to use them). Everything can be set from a main .xml file. The templates are resizable adjusting after the browser size.

They cover a wide area regarding personal portfolios, photographer sites, video presentation or design company sites. You can find there a helpful point of inspiration to start from. I hope to be useful for you.

1. XML Template Photography

2. Slick Full Website Template with CMS and 2 Skins

3. Flash Side XML Template

4. ikoOte v1.0 – XML/Flash website

5. Power XML Template 2.0

6. XML Web Template – FullScreen

7. Advance XML Website Template

8. XML Website Template v2

9. Full E-commerce Site with Admin Panel

10. Flash Assets Site

11. XML Template – Photographer

12. Photographer XML Template FullScreen – Highly Customizable