Summer is almost here and everyone has vacation on the brain! How do you like to pack for your getaway? Are you the type to throw a toothbrush, a few t-shirts and some changes of underwear in a pack and hop on a plane? Or do you like to plan for every kind of weather and event scenario and pack accordingly?
Mobile first design forces you to prioritize your content. You simply can’t cram everything onto a small screen.
Packing for vacation is similar to two major approaches to web design: responsive design and mobile first design. Responsive design creates a site that responds to the device on which the user is viewing the site. In this process, designers begin with the desktop and then pare down the site to suit smaller devices like tablets and smartphones. Mobile first, as the name suggests, begins with designing for mobile devices, and progresses to desktops.
Thinking Mobile First Design
With a significant percentage of users viewing your site on a mobile device, your mobile site must not just be a pared-down version of your desktop site. It must present your content in a concise and fast way which is best suited to the mobile experience.
This is not an easy task. Most web designers have been trained in desktop design, a platform in which they have a huge toolkit at their disposal. As one designer explained on the Code My Views blog, “With mobile first design though, I’m hit over the head with constraints on step one. That’s no fun at all! Right away I’m faced with a smaller screen, fewer resources, and a bunch more headaches. Further, it’s just not comfortable territory. I’ve spent most of my web design career in the desktop space, building experiences around mouse hovers and clicks, not finger taps.”
Focus on User Experience
But with constraints come opportunities for creativity and for coming up with new ways to make content stand out. The user experience becomes the central core from which to begin planning.
- What information do most users want from your site? Make sure they can see this right away.
- What tasks are most commonly performed by mobile users on your site? Make navigation to these tasks easy and straightforward.
- How image-rich is your site? Do the images slow the loading of the mobile page?
Paring down a site to its bare essentials will make it easier for a user to get the information they need or perform a task without the headache of extra screens or multiple menus. Using this streamlined mobile site as a building block creates a clear platform on which to add “extras” that are best suited to larger screens.
Beginning with a clean, streamlined mobile page allows for adding greater complexity when designing for larger screens.
Your mobile site cannot be an afterthought–it must be at the center of any design process. According to Smart Insights, “Mobile digital media time in the US is now significantly higher at 51% compared to desktop (42%).” Using mobile first design can insure that visitors to your site, regardless of which device they are using, will have a positive experience.