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.

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: 

mobile responsive content

5) Menu needs to be visible and clickable

Most menus will have too many items to display across a mobile screen. A dropdown menu icon (usually depicted as 3 small horizontal lines) will display that you click to open up a drop down menu. Make sure the font size is large enough and there is enough padding between the menu item links so that you can easily touch each individual link. 

2 ways to build a responsive website:

1) Create 2 versions of a website

Create a website for large screens and create a separate website for smaller or mobile screens. Code will be at the beginning of the website to check the size of the screen and render the proper website code.

There are drawbacks to this method: you basically need to design and maintain 2 separate websites. That adds a lot of work and cost to the overall website project. This is the old way of making a website responsive.

2) Choose a website theme that has been designed to be responsive

When deciding upon a theme or website builder, choose one that says that it is responsive.  It will already be designed to check the size of the screen first and then render the proper code so that it matches the screen size layout of the device you are using. Most themes will have added features/elements that allow you to change the size of the font, and even which content you want to display for different screen sizes. An example of this is using a Photo slider on larger screens but just displaying a single image on a small mobile screen.

If in doubt, hire a professional website designer!

A professional website designer will take responsive website design into consideration during the design process. They will also test your website on different sized screens to ensure your website renders properly on all sizes. 

When your website has been submitted to Google Search Console, you will get a notification if Google finds any problems with how your website works on small screen sizes. This information is very helpful to fix your website and make sure users view your website properly on any screen size. For more information, or to create your responsive website, contact Wanna Web Design 🙂