Fifty-six percent of consumer traffic to leading U.S. consumer websites now comes from mobile devices, according to the SimilarWeb State of Mobile Web in the U.S. 2015 Report. While this illustrates the importance of mobile, it also demonstrates that mobile is not the whole story, since it leaves 44 percent of traffic coming from non-mobile sources.
With that in mind, ‘corePHP’ designs each and every one of our websites to be responsive in nature. This ensures your site will be viewed by your audience, no matter the device they will be utilizing.
Desktops have higher engagement than mobile, measured in time on site, pages per visit and bounce rate. A winning web design strategy needs to embrace both mobile and desktop users, not just mobile users.
Here are some ways a few leading websites make sure they accommodate all consumers:
Approaches to Mobile Web Design
Mobile-oriented websites come in a number of varieties, explains Torspark. Mobile-friendly sites were originally designed for the desktop and have made minimal adjustments to achieve legibility and functionality for mobile users, but they remain shrunken-down versions of desktop-friendly sites. Mobile-optimized sites, on the other hand, specifically target mobile users, but can be hard to read or lack optimal functionality for desktop users.
Mobile-optimized sites typically use a single-column layout, featuring uncluttered design with large graphics and fonts, while employing thumb-friendly navigation that requires minimal typing. Responsive sites adjust to any device and screen size, with one look for mobile users and another look for desktop users. Responsive sites are typically designed with a mobile-first strategy, since it is easier to start with a simple, mobile-oriented design and add elements for desktop users than vice versa.
Adapting Column Layout: Amazon
Amazon’s homepage illustrates how a responsive website can be designed to adjust to both mobile and desktop screen displays by adjusting the number of columns displayed to fit device screen width. When viewed on a mobile site, as can be viewed with Google’s Mobile-Friendly Test tool, Amazon’s homepage adopts a single-column layout view.
Viewed this way, the page displays a simplified design divided into four major areas. A header area features key navigational tools such as a search bar, sign-in link, shopping cart and navigational menu links, displayed primarily through icons to minimize text. Beneath this is a banner area with a highlighted offer, a large sign-in button and an offer for the Deal of the Day.
When the page is viewed on a desktop with a wide-screen display, the header area widens and adds more text navigation options, and the area below the banner area splits into four columns, the first displaying the large sign-in button, the second showing department navigation links, the third displaying a highlight offer and the last displaying another highlight offer above the Deal of the Day offer.
Making the Most of Responsive Graphics: Walmart
The size of mobile screens makes it imperative for responsive sites to rely on large graphics to do the heavy lifting, a feature which carries over well onto desktop display. Walmart’s homepage exemplifies how to get the most out of graphics. On mobile displays, beneath banner and search bar rows, Walmart’s page features two rows that serve to deliver 15 offers. The first row uses a rotating offer display to serve five offers, each dominated by a large image with a large-text headline communicating the essence of the offer. The second row uses three columns with rotating buttons to enable visitors to cycle through 10 different offers. On desktop layouts, the second rotating row widens to display six to seven offers per screen, with three rotating options for a total of 20 offers available.
Using a Clean Layout: Amway
Responsive design also relies on a simplified, clean layout that displays well in both mobile and desktop format. Amway’s blog illustrates a well-designed, clean layout format. The header row features a handful of navigational icons in mobile format, which expands into some additional options including text links in desktop format. The banner area of the site displays the blog’s logo in clear, vivid blue and red letters against a white background surrounded by lots of white space. Textual elements are kept to a minimum in both mobile and desktop layouts. Large images enable links to featured posts.
To get started on building the responsive website of your dreams, contact ‘corePHP’ today.
