mobile web design, web design, mobile friendly, seo, index

28 Sep What You Need to Know About Mobile-First Web Design

in Internet Marketing, Web Design
Sharing is caring

Much has been written and said since Google began its roll out of mobile-first indexing on March 26 of this year. While most of that initial attention was paid to indexing and page ranking (as Google now punishes websites that aren’t optimized for smartphones and tablets), the effects of mobile-first are now being considered from the layout and graphic aspects of web design – that is, what the website looks like on a mobile device, and its user interface and effect on the user experience (UX).

As reported in our blog post of April 12, 2018, “Is Your Business Website Ready for Mobile-First Indexing,” mobile-responsive web design is essential to staying competitive, no matter what your industry. Our April 23, 2018 blog post, “Using Smart Web Design to Boost Your Conversion Rates” followed up on this new reality, reporting that the majority of people who use Google search are now more likely to access your site from a mobile device than a laptop or desktop computer – which means that every element on every page needs to work smarter and harder.

And as revealed in our March 7, 2018 blog post, “How to Tell If Your Website Needs a Redesign,” consumers expect a seamless UX on all mobile devices – otherwise, you’ll lose out on leads and customers. According to Google, 61% of users are highly unlikely to return to a website that doesn’t work well on mobile, with 40% moving on to visit a competitor’s site.

Websites that aren’t mobile responsive not only frustrate visitors and drive them away, they also reflect badly on your organization. One of our team members recently visited the mobile website of a respected, well-established professional firm. Only it couldn’t accurately be called “mobile,” as it displayed the same as the site displays on desktop. This visually translated as the desktop version in miniature, with impossible-to-read text, tiny photos and icons, and – of course – poor navigation. While there’s nothing wrong with your brand image being old-school, your web presence needs to keep up with the times.

So now that this has been established, here is what your organization needs to know

about best mobile-responsive web design practices.

Designing for mobile devices shouldn’t be an afterthought

 

Every step of the process should be viewed both on desktop and mobile. This brings the mobile responsive conception front and center as a well-designed experience that suffers no deficiencies when compared with the desktop version.

Forget about popups

 

While popups have a certain place and purpose on desktop website displays, they’re toxic to the UX on the mobile environment. Main offences: they’re typically difficult to close manually and are otherwise intrusive and obnoxious. Rather than deal with a popup, visitors to your site may just chose to leave. Also, Google targets mobile popups and penalizes websites that use them. Reason enough not to go there, as no one who values their ranking wants to anger Google.

Writing for Forbes, Thomas Griffin – co-founder and CTO of OptinMonster – offers his recommendations for designing a mobile-first website. The basic breakdown is as follows:

 

  • Use a responsive framework – “Designing responsive websites is now easier than ever thanks to HTML frameworks,” Griffin says. “Popular mobile-first frameworks such as Bootstrap and Foundation are now being used to design both front-end and back-end user interfaces while easily optimizing the designs for mobile screens.”

 

  • Prioritize the user experience – For example, the text that you see on a desktop website doesn’t look the same on a mobile device. Users often have to zoom-in to view websites that use smaller fonts.

 

  • Optimize for speed – There are many techniques to achieve faster page load times, such as compressing images and installing a CDN to deliver website content according to the geolocation of the visitors.

 

  • Simplify navigation and interactions (and serve hamburgers) – Some aspects of web design need to be specially formatted when creating a mobile-first site. For example, if your desktop website has a large navigation menu, displaying it as it is will take up half the space on a mobile screen. The elegant – and popular – solution is to hide the navigation links behind a hamburger menu button.

 

  • Test and improve – Make sure that your website displays well on different types of devices, platforms and browsers. Hard as it may be to believe, 3% of people still use Internet Explorer. Your mobile-responsive site has to give them a good UX, as well.

 

Of course, the best way to ensure your website provides top mobile-responsive performance in form and function is to work with a web design company that keeps up-to-date with industry changes. Virtual Stacks Systems is a full-service digital marketing company with 25 years of experience that includes developing websites for a wide range of businesses and organizations. Contact us today, so you can be ready for high rankings tomorrow!



Call Us