Responsive Website Design
Responsive web design term refers to the concept of developing a website design so that the layout fluidly changes according to a user’s screen resolution (through the range of large monitors, laptop monitors, tablets and smartphones).
In general, there are three possible configurations for serving mobile content:
- Responsive design: this uses fluid, proportion-based grids, scalable images and various CSS styles to deliver different experiences to desktops, tablets and mobile phones – using the same HTML and URL structure. Simply, responsive sites shrink or grow depending on the device accessing the data.
- Adaptive design: this serves different devices using the same URL structure, but modified HTML output appropriate for a particular size of device. Essentially, adaptive sites serve different website versions, using the same URLs.
- Separate mobile site: both the URL structures and HTML output are unique, depending on the device that is detected. Typically, sites like Facebook serve desktop sites via the www subdomain, while mobile sites are tucked within an m.facebook.com domain. Roughly 54% of top-ranking Internet retailers are estimated to use this configuration.
Benefits of using Responsive Design
In November 2016, Google started rolling out a mobile-first index. This means that they will start ranking search listings based on the mobile versions of content. With that in mind, here are some key reasons why responsive design is the right choice for many business websites:
- Google loves responsive design: they recommend responsive design as the best way to target mobile users. They also tend to favor mobile-optimised sites when presenting mobile search results, particularly in the case of local services.
- Single urls best for SEO: while standalone mobile sites offer a richer user experience, a site using a single set of URLs is preferable for SEO purposes. While separate mobile sites use their own URL and different HTML output, responsive sites (with one set of URLs and site pages) are easier for Google to index and crawl.
- Responsive design reduces bounce rates: sites that work poorly on mobile tend to have high bounce rates, which negatively impact overall rankings. Google interprets high bounce rates as a sign that a site offers a poor user experience, which generally leads to a drop in rankings.
- Better user experience: user-friendly responsive sites make it easier to users to find and share content. When visitors browse a site using a mobile device, it is effective for them to be able to access all content that desktop users can. This is very appealing to modern users, who tend to flow between accessing data from their PCs and mobile devices.
Take advantage of a growing responsive market
It is estimated that in 2016, around 20% of Google searches were conducted on mobile devices. When planning an optimisation strategy, it’s important to factor on this number rising in the coming years.
It is also estimated that there is a 61% chance of mobile users leaving a site if it isn’t optimised for mobile.
Also take note that at present, Google owns around 95% of the world’s mobile search engine market share. This means that designing in compliance with Google standards is the best way to ensure a solid return on your responsive design investment.