Responsive Website Design
Responsive Website Design
Do you know that most people search the internet using their phones or tablets? According to statista.com in 2020 over 51% of people searched the internet using their phones. If you compare that to a survey done at the end of 2015, only 38% of users were browsing the internet using their phones. This shows that websites need to be designed to not only look good but function well on many different sized devices. This is called Responsive Website Design.
What makes a website responsive:
A website is responsive when the content fits the viewing screen properly. Do you know what happens when you type in a domain name or click a link through a search? There is script that runs in the background to determine what size screen you are using, then it uses code in the style sheet (CSS) to determine how to render it on your screen. If code has been added to ensure the page is responsive, the information will be shown differently for each screen. You can’t see the difference. Take this page, there are 2 versions of the page title, one that is used for larger screens, and one that is used for small phone screens. The same applies for the banner image at the top, there are 2 versions of the same image. (If you would like more information on this go to w3schools.com HTML responsive web design).
Below is a list of things Search Engines test to make sure your website is responsive:
1. Is the font size too small to read?
The font size needs to be large enough to read it on your phone. Plus heading sizes shouldn’t be so large that titles wrap around to the next line or stretch off the screen.
2. Make sure your links/buttons are not too close together
On a small touch screen it might be difficult to separate links in a list or in a menu if the font is too small or the links are too close together. Google Search Console will penalize you if it finds your links are too close together (an email is sent out with a warning from Google Search Console so you can correct the issue).
3. Images /Videos need to fit the screen properly
Images and videos need to be resized to fit the screen size. One way to do this is to use the width property to 100% of the view size in the CSS code or by using elements within your theme. Again Google will warn you that an image is too large for the screen if you can only see part of it. For an example, imagine a Sailboat Sales company using an image of an ocean with a sailboat off in the distance, and the sailboat getting cut off from the image on a phone? The user will only see the ocean. That tells a totally different story than the company would like to show.
4. Content needs to be readable
Old versions of websites used to be a mini version of the website, so small it was difficult to read. One would have to try and enlarge the page and then scroll back and forth in order to read the content. Responsive design makes the content on the screen readable on all screen sizes, on a large screen content might be displayed in columns across the page to display different ideas, but how those columns break down for mobile needs to be determined and included during the design process. Having columns side by side on a screen is not possible on a mobile device, the columns will then follow one below the other instead. Below is how 3 columns will be displayed on a large screen layout:
On larger screens the columns are displayed as columns:
On smaller screens the columns are displayed as rows: