Web designers seem to have come to a consensus that building separate sites for the vast amount of devices available is nearly impossible. Responsive sites are the future, unless the mobile site requires some very specific functionality or entirely different context which is worth the extra development.
The buzz words you might already know are responsive design, mobile first approach, and graceful degradation. These are the main tools and techniques to build widely accessible websites and web applications.
In this post I will focus on the mobile first aspect of design and beyond that highlight some techniques that could as well enhance the desktop version of your site.
Mobile first does not necessarily mean that you should start styling from a 320px screen width all the way up. It’s more about considering all the possible use cases right from the start of the work flow.
Simplicity
A simple and clean layout ensures that the user gets the best experience, even on a smaller screen. But should you only treat handheld visitors in such a kind way? Once you created a mobile site with great accessibility and a good flow, take a look back at your desktop version and compare. Less might be more.
Don’t forget however that touch and mouse are very different in nature. Don’t make your desktop users get a sprained wrist just because they need to travel 200 pixels between two menu items. Media queries are your friends.
Drop it, hide it
So you decide to build a mobile site or layout and see that some of the features are less important than others. The best thing to do is get rid of them, just to save some pixels and provide a better user experience. Good job so far.
Now ask yourself: Is it necessary to have it on the desktop version at all? Maybe it just gets visitors confused or distracted? Maybe these items should be hidden for advanced users under a sub-menu? Maybe users will appreciate to have just 4 main menu items instead of 6?
Responsiveness for desktop browsers
I for one, like to re-size my desktop browser window quite often, particularly when multitasking. Sometimes you just can’t afford wasting all the screen real estate on a single site. When creating responsive web design using media queries, take in consideration the desktop users too.
I guess I’m not the only one who goes mad if I have to rescale the site to fit a video or image. So please, fix that for me and start using responsive media. And that’s just one of many changes you could make.
Orientation
Orientation is a relatively new specification which is based on whether the device is being viewed in portrait or landscape position. Through media queries you can assign different layouts to your sites based on the orientation.
Some desktop browsers are capable of ‘faking’ the orientation, based on the proportions of the width and height of the window. This enables you to add some nice tweaks to enhance user experience.
Input types
HTML5 has some new features that help mobile users filling in forms. Example: if you add input type=”email” to a field, it will tell mobile browsers to offer a keyboard featuring characters that are relevant to email addresses, like the “@” character or the “.com” extension.
Remember that it also helps desktop users. They will get their previously used email addresses offered in a dropdown menu or even the whole form filled in automatically, based on their previously used details.
Less Navigation, Better User Predictions
Browsing on a mobile device often gets me annoyed (yeah, I’m grumpy) and feel lost if I have to go down a few links deep from the main page. I ask myself: am I at the right place? Should I just go back and start over? This is not cool, since mobile users are a bit handicapped without proper tabs, full url bar and much space for description.
Scrolling seems more natural for touchscreen users than navigating through menu items. Where possible, avoid creating a complex site structure. Instead try to predict what the users are probably looking for and try to place items in the relevant order (you know, like supermarkets do… Not!).
All of this may be true to your desktop site just as well. Just because to you it’s obvious that a certain item is found under a particular menu item, the user might have a different idea. I think it’s worth considering larger categories with broader content opposed to very specific menu items which force the user into some gamble.
Let’s not forget about the great jQuery auto-scroll features. They’re a great combination of menu and scroll navigation, given that you don’t mind mixing different type of content on a single page.
Embrace New Standards
Without going through the unnecessary “oh Flash, why” debate, I just suggest you to make your sites future-proof by using emerging standards wherever possible. Such as CSS3 for transitions and other fancy visuals, HTML5 for advanced interactions. This seems to be the way to go. Apart from the withdrawal of some rather obsolete specifications, W3C has been quite consistent on legacy support, so I think it’s a good bet, even for the long run.
This way while addressing the no-flash issue for mobiles, you also please modern desktop browsers. It’s a win-win.
Let’s Wrap it up
As you see I didn’t go much into technical details, but I generally think that having these aspects in sight might save you significant amount of time during the development and also in the future.
Remember to think cross-device instead of just mobile. Instead of creating an out of control 2-headed beast (or give a few more to that), getting your handheld and desktop sites closer to each other in behavior will result in a single experience that fits best for any context.
Zsombor MarkusMarkus (yes, call him by his surname) is a web-design and web development enthusiast from Hungary. Currently living in Malta, where first got involved in e-commerce, later specialized in e-payments. Working on web projects combined with online sales shortly led to major interest in cross-device development. He is an experimental person, digging into the latest web standards. Demands his daily portion of tech feeds and doesn't drive a mile without a podcast on.
