In October of 2016 something notable happened. For the first time in the history of the internet, more people viewed websites on mobile devices than on desktops. Today, more than half of all users are on mobile devices. Because of the rise of mobile interaction, web design has had to evolve.
Mobile-friendly web design was the first wave of design specific to the non-desktop viewer. At first, web design was more of an afterthought for the user experience. Design was still done primarily with the desktop environment in mind. It was a good solution at the time, but the mobile UX site was often lacking the functionality of the desktop version.
The next evolution was responsive web design. Responsive design allowed web pages to render well on a variety of devices and window/screen sizes. But the desktop viewing experience was still considered the more important UX.
Today’s designers face a shift in a priorities. They are tasked with creating an initial layout for the more popular mobile view. Mobile-first design is the new frontier. The objective is to design with the smallest screen in mind yet still retain the content, features and optimal viewing experience the site visitor wants. To do that, designers must follow a mobile-first process that can be summarized in a few key steps.
Designers begin by taking an inventory of all the site’s content, features and objectives. These are then prioritized to create a hierarchy of primary and secondary content. The most important information, primary content, takes priority on the mobile site, even more so than in a desktop environment where there is more visual space.
When creating for mobile first, it’s important to think about the handheld experience and how the user will be interacting with your site. Test your images and graphics to see how they look and function on an actual device. Several items to avoid include landscape images, complicated graphics, tiny buttons and rollover features.
Reduce User Fiddling
The less the user has to mess with their phone, the better the experience. Consider using shorter URLs, minimizing inputs in forms, allowing permanent sign-in and keeping scrolling to a minimum and in one direction only. If your mobile site has app-like functionality, it will improve the experience and will keep users on the site longer.
Only after you’ve created the ideal mobile site should you move to designing the desktop version. That doesn’t mean the desktop version is no longer important—43% of viewing is still done from a computer. In fact, many users move between mobile and desktop and are going to expect similar experiences. It is important to maintain your brand so the look and feel of each version is consistent with the other. Continuity is the key to providing an enjoyable user experience and maintaining your brand’s identity.
The takeaway is simple — mobile environment is different from the traditional desktop environment. Standard UX and usability considerations are needed in a mobile context and this brings new design considerations. It’s important for mobile designers to pay attention to the details in order to deliver the best possible user experiences.
Katie Gilthorpe, Art Director