Do you have your own website? If so, you have probably come across many articles mentioning responsive web design. Responsive web design is a MUST for any business in today’s era of a digital marketing. And you might be asking what responsive web design is.
According to Wikipedia: “Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with.”
Does this definition sound too complicated? Let me break it down for you.
a) Web design
Your website is a final product of a thorough planning. When a website is build, web designer must decide on website's layout, colors, and type of a font. All these visible aspects that we see when we come to a website belong to web design.
b) Responsive
According to a dictionary, being responsive means to react in a desired or positive way. So, what do we get, when we put these two definitions together?
"All visible aspects of a website reacting in a desired way."
Ups… Still might be a little bit confusing. Let’s try to use my own words.
Responsive web design
makes any website look great. Every time the size a desktop’s window changes, the layout, text and images react in a positive way and adjust to the window size.
This applies to every device, including smartphone and tablet. When you visit a website that is responsive to mobile devices and tablets, the text is always readable. Every picture is displayed in its full size, and there is no content cut in the middle of its sentence.
Are you ready to find out, whether your website is responsive?
Follow these 3 steps:
A) Is your website responsive to a DESKTOP?
STEP 1: Go to your website (I found a random website to showcase).
STEP 2: Click the button RESTORE DOWN in the right top corner of your website.
STEP 3: Grab a window in the right side and start resizing the window. Notice, whether the content is changing accordingly to the size of the window or not.
If the website is responsive, the text and pictures will resize with the window and will look good. The website that I'm using for a showcase is responsive – all the content, including text, pictures, banners and logo, adjusted to the size of the window.
What’s more, the website, I am working with right now, shows one more sign of a responsive web design. When the window is too narrow, the menu bar changes into a button and moves from the center to the top left corner of the screen.
B) Is your website responsive to a MOBILE DEVICE?
Now, you have checked, if your website is responsive to desktops. Even though your website was responsive, don’t get too excited. I might have bad news for you.
Since October 2016, mobile devices and tablets have changed the game. These 2 devices are used more than desktops for searching online. What does this mean for you?
You’d better be sure that your website is responsive to mobile devices and tablets as well! When you’re checking responsiveness to mobile devices and tablets, focus on:
1. TEXT:
Is the text readable from the very beginning? If the letters are too small, your website is NOT responsive to a mobile phone.
2. MENU BAR:
How does your menu bar look like? If you can click a button “menu” and then a menu bar appears, it is a sign of a responsive web design.
If the menu bar is in 1 line (the same appearance as on a desktop), it’s a sign of a NON responsive web design.
RESPONSIVE vs NON-RESPONSIVE
Partly responsive website
To make things even more complicated, you can have a partly responsive website:
As you can see, the website in the picture above has a readable text. The button “menu” is used for displaying the menu bar. Both signs of a responsive design are fulfilled.
However, take a closer look at the text next to pictures. The text is not aligned with the pictures and that makes the website look messy. This is called a partly responsive web design.
Now, visit these 4 websites and try out your skills. Are these websites responsive? (You can find the right answers in the end of this article)
Responsive web design examples:
SUMMARY
If you came into conclusion that your website is NOT responsive, make sure, you don’t leave your website suffer like this! You might be losing potential clients every single time they visit your website.
If you have a bunch of nerves and a stock of patience, you can try to fix your website on your own.
If you don’t want to waste your time and mess up your website, reach out to a professional web design agency. We make sure that your website is 100% to every single device.
If you have decided to fix your website on your own, follow this useful tutorial.
https://www.youtube.com/watch?v=9fHSbiCISOA
I hope I managed to clarify, what responsive web design is well enough. If you find our article interesting and helpful, don’t hesitate to share with others! :) May you have a great day.
(Note that the websites might have been optimized since this article was written)