Mobile Website 101 | 5 Elements You Would Change in a Mobile Version of Your Website

While responsive design is all the rage these days, there are still some clear benefits to using mobile specific websites. The right strategy will ultimately depend on the nature of your website and your industry and will vary from case to case.

But if you do decide to go the mobile site route, then you need to ensure you get it right. A bad mobile site is worse than no site at all, so if you’re currently looking at it as an afterthought, then you may be losing business and damaging your reputation. Here are five elements that you should approach differently on a mobile site versus a desktop site:

Menu

The first and most important thing you need to change when creating a mobile site is your menus. This is particularly important if you’re currently using drop-down menus that rely on mouse-overs to work. You need your menus to be big and touch friendly and to provide some kind of response to indicate a successful ‘click’ (because we tend to be less accurate with – and thus confident in – our ability to navigate through touch).

Don’t just make your menus bigger though, or they’ll look ugly. Having a mobile-only site liberates you to take real advantage of touch and to create some intuitive and beautiful menus. Use some imagination!

Touch Based Navigation

Navigation goes beyond your menus though and should impact the entire organization of your content and your controls. Today, the best mobile sites take their cues from app layouts and this can help to make browsing your site on mobile a more cohesive experience for visitors.

Larger Fonts

As well as their touch screens, the other thing that sets mobile devices apart in terms of your web design is their smaller size. This means you need to cram more information into a smaller space and that can make it tempting to use small fonts.

In fact though, you should be using larger text – as you want the reading experience to remain comfortable on a small screen held at arm’s length. Thus, you should actually grow your fonts in order to ensure they stand out and remain highly legible. Choosing the right typography is also important as different typefaces look better at different sizes. Again, apps can provide some inspiration.

Single Message Per Scroll

Using larger fonts on a smaller screen and bigger, more colorful navigation elements means you’re going to have much less space to play around with in your site design. This means you can fit less content to a page, so it’s important that you make peace with that rather than trying to stuff more in than can comfortably fit.

Aim to have ‘one message’ per scroll, so that each page communicates a clear point in a concise manner.

Different Images

Using different images is also advisable for a mobile site. This way you can avoid unnecessarily large file sizes and slower loading times, as well as any scaling issues. Yes, you can have your images resize to fit the dimensions of the screen, but when you do this you either end up with large images that look grainy, or small images that are too detailed to make everything out. As you have the opportunity, choose images that specifically suit the situation they’re intended for.