The problem with Responsive

Responsive websites adapt their layout according to the screen size viewing the website. In basic terms, if you want a website that looks good on mobile and desktop devices you have two choices; choose a responsive website or build separate websites for various screen sizes. Building multiple websites quickly becomes very expensive and a nightmare to maintain (they are generally the domain of organizations with very large budgets).

To tell if a website is responsive then view the website in your favorite Internet Browser (e.g. Firefox or Chrome) and slowly minimise the screen size. If elements such as text blocks or images reorder or fold below one another then the website is a responsive website. This reordering of items is a great way to get a well laid out website on all screen sizes without the viewer having to scroll to see the content or the content becoming very small (you may have noticed if viewing a website of fixed width that the size of text gets very small when viewed on a small screen).

Responsive website disadvantages

The biggest issue with responsive design is that it isn’t easily possible for the web designer to manage exactly how the items will lay out and look on the multitude of screen sizes available. This is particularly true if using generic themes such as those purchased from WordPress or Joomla theme sellers (if however a theme has been custom coded it’s simpler for the theme developer to manage the responsive layout; but custom themes get expensive).

The other problem is that it isn’t possible to accurately create an image, prior to development, of exactly how the finished website will look on multiple smaller screen devices; there are quite simply thousands of available screen size and pixel densities (e.g. Apple retina) and it isn’t cost effective to create images for the client to show how the responsive site will look on all these items. The client may have a rough idea of how the site will look but there may well be differences in expectations in the final finished website.

Ultimately, responsive website design is a cost effective means of creating a website that will look good on multiple hardware and screen sizes. Responsive design, especially when creating themes or templates for Content Management Systems (CMS), isn’t an exact science and layout issues may well arise. Ultimately compromises on the layout will be needed.

Examples of Responsive Content Management System websites (with problems)

Under the headings below there are examples of responsive websites where the problems with responsive design can clearly be seen. These examples have been hand selected so do communicate an exaggerated illustration of the problems with responsive web design. Some of the websites have been developed by organizations with multi-million dollar annual website budgets so it’s a good example of how compromises have to be made by even large organizations.

Examples of Responsive WordPress websites

Snoop Dogg WordPress website

Calvin Cordozar Broadus, Jr. (a.k.a. Snoop Doggy Dogg, Snoop Dogg, and Snoop Lion), a massively popular musician, has a responsive WordPress powered website. If you shrink the width of your Internet Browser you’ll notice the Twitter widget overlapping with other visual elements in addition to the ‘Subscribe’ and social media icons going a little crazy.

IBM Jobs

Yes, even the world’s largest tech services companies have issues with web design. You’ll notice in the image of the IBM Jobs website how some of the slider text is no longer visible at certain widths.

Examples of Responsive Joomla websites

Peugeot cars Website

The Peugeot website is beautiful to look at with great images and text. The wording does tend to overlap and become unreadable at some widths.

Examples of Responsive Magento websites

The Easton website is powered by Magento. When the width is resized it’s noticeable at some widths that the text in the image below the main navigation is cropped.

Nike Store

Another massive brand with small website problems. The Magento powered ecommerce store of Nike illustrates window resizing problems by the menu covering part of one of the images.

Maui Jim

The website of Maui Jim is powered by Magento. What’s interesting about this site is that some elements are responsive and others aren’t. As can be seen below, this leads to non proportional resizing of images.

Other examples responsive website problems

Pepsi Website

I was fascinated to see that Pepsi.com, a massively valuable brand, is a responsive website and doesn’t align content boxes correctly at certain screen widths. If you look at the content boxes in the image below you’ll notice the overlapping.

Is Responsive web design bad?

Getting a responsive website is the best way to go for most organizations. Responsive websites are very cost effective in satisfying the need to have a good looking site on both desktop and small screen devices. Yes, there are some disadvantages to responsive web design and compromises will be needed but the positive outcomes far outweigh the negative.