Designing for Mobile-Friendly Responsive Websites

With 134 million mobile users last year in the US, and mobile search results now equalling half of Google’s queries, this spring the tech giant announced it would be reworking its search algorithm to favor sites with “mobile friendliness.” In late April, the change was implemented, causing businesses worldwide to see a dip in their search rankings.

So what does responsive design mean? Generally speaking, the term refers to websites that work equally well on mobile phones and desktop computers. Websites with responsive design expand fluidly no matter the size of your browser window, whereas websites with more traditional adaptive design hitch when the browser window is expanded. Websites without responsive design can look strange or disjointed when viewed on a mobile phone. Google’s aim in focusing on mobile-friendly, responsive design is to provide an optimal browsing experience for all users, whether they’re checking out content on the screen of their new iPhone 6, a work laptop, or home TV.

When designing a responsive website, a new set of variables need to be taken into consideration when compared to traditional website design. In general, sites need to be much more modular so that imagery and text can scale up and down seamlessly. In addition, mobile browsing has made websites much more vertical in format, as scrolling up and down is much easier and faster as compared to pressing buttons. But even with the most fluid design, some artwork must be swapped out altogether when scaling down to mobile.

We have recently completed the process of integrating responsive design into our own new website. Check out the before and after illustration below that illustrates the differences. We’re also currently working with our clients to revamp their sites.

Still confused? The GIF below from Froont illustrates the difference between responsive and adaptive designs. For a more in-depth explanation, check out eight more GIFs from Froont compiled by Fast Co. Design.

A site with traditional adaptive design hitches before expanding to fit your screen. A site with responsive design seamlessly expands.

If you’d like to know if your site is currently mobile-friendly, you can visit Google’s Mobile-Friendly Test page here.

Story via New York Times.