We’ve previously talked about why your website should be mobile friendly, but we never touched on what makes a design “mobile friendly” or the differences between an interesting desktop design vs. an engaging phone or tablet design. Let’s take a deeper look at “Mobile Friendly” and see what it means.
To designers and developers, mobile friendly means utilizing to the utmost all the capabilities of the mobile devices to deliver an efficient and intuitive user experience. Put more simply, mobile design means that your website’s text, videos, links, and images are easily accessible across all platforms, and more particularly, on the much smaller screens of smartphones and tablets.
Phone/Tablet vs. Desktop
When designing for the much smaller screens of phones and tablets you should keep in mind these essential differences between desktops and phones/tablets:
- Space is limited on phones/tablets.
- Users often have a shorter attention span when on their phones.
- Mobile users typically have a goal in mind and are looking for a piece of information quickly.
The primary focus of mobile design is “simplicity” with a touch of specialization. Mobile optimized websites tend to provide a limited subset of information, with fewer functions compared to their desktop counterparts. Navigation through pages should be kept to a minimum, focusing on what’s most relevant to users on a mobile device. Texts, pictures, links, and videos need to be resized and optimized for phones and tablets. In most cases, designers will need to export images and other assets at specific mobile friendly sizes, optimized for each adaptive breakpoint.
Poor User Experience
Recently Google has been penalizing companies whose websites aren’t pleasant for their mobile users. A few particulars that can make the mobile user’s experience unpleasant are:
- Content that is not playable.
- Pictures and text that are unreadable without the need for zooming or scrolling.
- Inadequately spaced tap-targets.
Avoiding these mistakes will give your user a much better experience on your mobile site. To give them the best experience possible you need responsive web design with content that appropriately resizes itself for the device your users are viewing it on.
Responsive Web Design
Responsive web design (RWD) is a technique in which you use a single HTML code and a single URL across all platforms. The page views will change depending on the display size whether it be a laptop, desktop or mobile device. RWD employs a fluid grid, adaptable image sizes, and typography that is the “magic” behind its success. When viewed on a mobile device with a smaller screen, the site shifts to a more vertically stacked and simplified presentation. Images adjust resolution and change proportions to ensure that they fit the screen perfectly. Visitors are now able to scroll down and have just as pleasant experience as they have on their desktop.
Visitors to your site simply want a good experience and to find information easily and quickly. Often people find their phones to be the easiest and quickest way to retrieve information. As a business, it’s essential to provide your website across all platforms while providing attention to your mobile visitors. The more traffic to your website potentially means more business for your company. Need help designing or developing your mobile site? Contact Seamgen!