DESIGNDEVELOPMENT
If you are learning web design or are merely looking to get a new website, you may often come across the term “responsive web design”. It is coupled with the fact that it is essential and a key requirement in good website design. For starters, here is the definition: “Responsive web design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes.” Now, in layman terms, what does that mean? Let’s go over it together.
Mobile Friendly
You’ll see in the definition that it mentions “rendering well in a variety of devices”. That is precisely the primary purpose of responsive web design. The reality is that nearly everyone has a smartphone, and the bulk of a person’s browsing happens on the go. It is crucial to have a website that performs well on mobile devices.
The trend has been that mobile was winning. It’s now won.– Eric Schmidt
How many times have you navigated to a website on your phone, and you couldn’t get rid of that stupid popup? Or you can’t see the input field to fill out and submit a form. Or maybe you can’t event click the submit button because it’s too small! These are all examples of poor responsive design and create an extremely frustrating experience for the user. In an age where your website is your first impression with a potential client, this could be disastrous. With that said, let’s take a look at a few examples of BAD responsive design, and I’ll rank from what I’ve seen the severity of the issue. The list below starts with what I believe is most severe.
Top Responsive Design Issues
- The website has no responsiveness whatsoever, essentially displaying the same desktop website on the phone.
- The website has a dialog/popup that is blocking the entire screen and unable to dismiss.
- The contact form or another fundamental form is not displayed correctly, and the user is unable to proceed with submission.
- The text is tiny and difficult to read, not scaling the font size to the device.
- The navigation menu is not shown on a mobile device or is unresponsive to touch.
- The layout of the rows and columns fit correctly on the mobile device but laid out incorrectly.
- Certain elements bleed past the screen, and you must scroll (slide finger) to view additional text/elements.
- Finally, here are some examples of good responsive design, in no particular order:
Examples of Good Design
- The website loads quickly, and the elements fit the width of the device.
- The text is easily readable and noticeably scaled to the device’s screen.
- The layout of rows and columns is responsive and wraps when necessary. For example, a row with six columns on desktop is scaled to two columns and multiple rows on mobile.
- Form input elements are adjusted accordingly and presented nicely on mobile devices.
- Website scrolls via touch smoothly without hiccups or getting “stuck”.
I hope this article helped explain the importance of responsive design and how it can affect your business!
