User experience is at the forefront of responsive web design for mobile. Mobile devices themselves are designed for convenience and to put information and functionality at users’ fingertips; it only makes sense that the websites they access from these devices be a continuation of that experience. The shift from fixed-width (desktop) to responsive design has resulted in a changing landscape in user interface functionality and design, here are some general guidelines and considerations for responsive site design.
Smart Phones and Small Screen Devices
When designing for smaller screens, the most important consideration is saving space and utilizing that space wisely, while not sacrificing the user experience. Designing for mobile requires good user experience planning, which includes knowing why people visit the websites they do (what they’re trying to accomplish) and on what devices. For example, desktop users tend to be more interactive with the site and do more extensive searching, while a mobile user is more likely to be looking for content and perform simple actions and quickly. Mobile design has similar touchscreen considerations similar to those of tablets, but should factor in other useful design elements and practices, such as:
- Keep interaction with your website simple by cutting out any extra functions that aren’t primary to the needs of the user, allowing them to focus on what is most important and useful about your site.
- Searching for content on a website from a mobile device is not always desirable, which is why it’s important to make it easy to filter and sort through with navigation that includes categories and/or search filters.
- Be minimal in the visual design of the site. Mobile is not the place to show off your graphic design prowess. Find the balance between branding the site, but not to the point of compromising usability.
- Use better type display and bigger fonts so the users don’t have to zoom in as often.
- Add summaries for larger pieces of content, not only to save space, but so the users can quickly assess whether or not it is content they want.
- Be creative with your use of space, with navigation, tabs, accordions, and other space saving methods.
- Use ads, popups, notifications and such sparingly, and if/when you do use them, make sure they are user-friendly.
Tablets and Medium Screen Devices
The tablet, and most medium-screen size devices use touchscreen navigation and interactivity. Large touch screen areas are essential for accommodating what traditionally a mouse or keyboard would accomplish. And because there is more limited space, the content will need to collapse and expand, so rather than having static text living on the site in a certain area, make it more interactive and user-driven and consider employing these suggestions:
Avoid taking the same or a very similar layout of the desktop site and merely shrinking it to fit to a tablet or mid-size screen. While the site might still look presentable, it’s often at the expense of usability.
Use tabs, accordions, and other creative methods to organize and navigate content, allowing users to move through sections of the site with ease, while saving valuable space.
Make effective use of buttons and icons. Use prominent buttons or button-like graphics for simple actions and main links, and so users can quickly and visually locate information they want. Think of buttons as signposts.
Don’t assume your visitors have a device that has a user-friendly browser, and design navigation that takes this into account.
How Design for Desktop and Large Screen Devices Differs from Responsive
Most user interface principles were created for desktop computers, complete with a mouse, keyboard and touchpad. Here are design practices and opportunities we may have overlooked and taken for granted - or could take better advantage of when designing for desktop. It’s important to keep in mind the responsive scalability that may come later, and it should be a part of the overall design plan.
- Larger screen size means more real estate to play with, allowing for more flexibility with content, design and functionality.
- More pages allow for a more extensive experience and interactivity for the user.
- More options with navigation: horizontal, vertical, dropdown menus, fly outs, etc.
- Extensive grid-like layouts make it easy for users to scan and find content. The static nature of this template type layout also makes locating information predictable for visitors, as users have been trained on these layouts over the years and are still getting used to it on mobile devices.
- More opportunity for page elements like left or right rails, fat footers and large header images.
- Integrate with more and diverse types of technology that could improve design and usability.
- More space means more clickable areas to help guide and inform the users otherwise not practical/feasible on smaller sites, i.e. breadcrumbs that show up as a user drills into a section letting them know where they are within the site and how to back out, following the same trail.
- More space for advertisements, banners, side content, calls to action, polls and forms, pop ups, dialogue boxes, and other content you want to call out/attention to.