fbpx

When Responsive Design goes wrong

Don’t get me wrong – I’m a huge fan of responsive design. Most of the time, it makes my life easier. I’m visually impaired, and I rely on my mobile and computer to do my shopping, magnify things, and generally stay up-to-date on news. Responsive design enables me to do all of this with relative ease. When the font is made bigger and the images are enlarged, I can almost forget that I have a visual impairment.
 
The issue arises when the interface is designed poorly. Responsive design should make the elements of the page flow so that it makes the experience of reading a webpage a pleasure rather than a struggle. But when the screen is small, but elements are enlarged, in some cases, vital elements disappear altogether.
 

Responsive Design Fail 1:

This was the case with a book sales report page I use. When I tried to access the download report button, it wasn’t appearing on my mobile. On the old website design, I could switch to desktop mode, and I could see the button at the very bottom of the page with the help of my phone’s magnifying lens. However, with the new responsive design on the website, this option is not available, the download button disappears altogether.  I am forced to use a computer. I feel like website design is going backwards in usability.
 

Responsive Design Fail 2:

Another example of where responsive design goes wrong is an image website I use regularly. It has great quality images and is pretty reasonably priced. I had no trouble using it until recently when I needed something from it…

To prove you’ve bought an image legally, you have to locate the image on the downloads page and click on the contract link. With average settings on a computer, one can view this by looking to the right of the table, which should show the contract column. My settings are, unsurprisingly, set for my low-vision needs. With their implementation of responsive design, the contract column doesn’t exist. It disappears without any indication it was ever there. Because of this, I didn’t even know I could download the contract!

The only way to view the contract link is to change the view to gallery view, where you can mouse over the picture you downloaded and the contract download button appears. Unfortunately, I didn’t know to do this, and it took the help of a friendly chat team member to send me a screenshot of the page. I could see from this that the column and all the columns to the right of it weren’t there!

Photo by Clay Banks on Unsplash
I defeated Responsive Design! Photo by Clay Banks on Unsplash

Panic!

What was a girl to do? If it’s not there I can’t download it. Then I spotted the gallery view button. The moment I laid eyes on it, I felt a sense of relief that was like escaping a lift after someone has let one go. I was able to click on it and download the contract easily. If I hadn’t managed to find it, my publishing account would have been closed – removing my only income source. Account closure averted yet again!
 
These are the issues I have experienced time and time again with responsive design. Visual impairment can be mitigated by good design. If you reach old age one day, you’ll probably need to make the text bigger to accommodate poor vision. I have had terrible eye-sight since birth, so it can be a problem in any age group, but with an aging population, excluding a whole swathe of people is short-sighted, pardon the pun.
 
In the end, it comes down to the implementation of design methods. It’s a great concept, and for the most part, it works – but there is still room for improvement. Responsive design should make my life easier, but if it is done incorrectly, it could add to my troubles and sometimes makes website browsing much more difficult than it needs to be. My plea to website developers around the world. Please do not make important website elements disappear because they don’t fit your idea of design.
Scroll to Top