A responsive website is one that looks acceptable and functions correctly on any browser, screen size and device used to access the web. To accomplish this you need to have:
- Fluid layout.
- Media queries.
- Responsive images and media.
- Included a viewport meta tag.
- Prevented Horizontal Scrolling.
Years ago I longed for the day when everyone viewed websites on big screens and I no longer had to limit my designs to 800 px wide. That day didn’t come! instead screen sizes got smaller and smaller. Now some people only access the web on their smartphones or tablets. So what does this mean for you as you build your website? You have the challenge to make your site look good on a great big screen and a tiny little smartphone and everything in between. This is where Responsive web design comes in to play.
Bank web site with mobile version opening on large screen
Some designers serve up different websites for different devices but this method is fraught with problems as there is no way of predicting every device that will come on to the market and sometimes the designers get it wrong; for example recently I opened a bank log-in site on my large screen home computer in safari browser and was served their minimal mobile site.
I am in favour of creating one site and making it responsive with CSS media queries. Too hard? Fortunately, there are some very clever people who have made responsive frameworks for you to work with. A popular one of these is Twitter Bootstrap. This framework is based on a 12 column structure giving you quite a bit of flexibility in designing your site.
Ethan Marcotte first introduced the term Responsive Web Design in an article for A List Apart in 2010. The main principles of Responsive Web Design are:
- Fluid layout
- Media queries
- Responsive images and media
- Include viewport meta tag
Fluid Layout
In a fluid layout, the width of the columns is determined by percentage rather than pixels or other fixed measurements. For example, the main column may be 70% while the side column 30%. This means that as the browser window changes size, the relative width of the columns also changes size, and the dreaded horizontal slide bar is avoided.
A fluid layout on its own does not answer all the requirements for a responsive website. For a small device, the columns may become too small to read and for a very large screen, the line length may be too long for comfortable reading. You can set a max-width property on your containing div to ensure that the line length does not become too long.
Media Queries
You can specify how your site looks at different screen sizes using media queries in your site’s stylesheet. For example, your site heading may look great on a PC but not so good on a tablet or iPad. You can set a media query as follows:
@media screen and (min-width:320px) and (max-width:768px) {
h1{
font-size: 1.2em;
}
}
The media query starts with an @ sign to indicate that this an at-rule, and in the @media rule you can specify different types of conditional statements.
“@media screen” is telling the browser that this rule only applies if the site is viewed on a screen. “@media print” would dictate how the site would print.
The word and indicates that two or more conditions need to apply before the rules inside the curly brackets take effect. In the above example, the media needs to be screen and the width of the screen is greater than 320px and smaller than 768px. All the rules for this query are placed inside the curly brackets.
Media queries are supported by all the popular browsers except IE8 and below. I hazard to guess there are not too many mobile devices using IE8 and the main browser.
You need to position your media queries below your main CSS styles because any rules positioned after the media queries would overrule the styles in the media queries.
Responsive Images
It is quite simple to make images and media respond to different size windows using CSS.
With the following code, images will shrink to the size of the screen when they get too large.
img {
max-width: 100%;
}
Viewport
Including the following meta tag in the head of your website is important if you want to pass the Google Mobile-Friendly Test.
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Do not add maximum-scale=1 to your viewport meta tag. If you do, your visitors will not be able to enlarge the text on the screen in a mobile device. This is likely to make them very angry and leave your site because they are unable to read the text.
Here is an example of results of a website that is not mobile friendly.
Different mobile browser screens have a different number of dpi (dots per inch). The viewport meta tag ensures that your site at 100% fits into the mobile browser window. The initial-scale property controls the zoom of the site. If the screen width is 320 dpi the initial-scale of 1 is equal to 320 ppi (pixels per inch).
If you don’t understand all this then just trust me and include the above meta tag in the head of your website and you will have taken one step towards making your site responsive.
The best way to test your site to see if it is mobile friendly is to take a look at it on a range of mobile devices. Ask your friends to have a look on their phones too, to test it on a range of mobile devices. If you don’t have any friends you can test your site at Quirktools screenfly
Stop your Website Scrolling Horizontally
If you are finding that you have made all the adjustments listed above and your site passes the Google Mobile-Friendly test but it still scrolls horizontally then include the following lines in your stylesheet.
html, body {
width: 100%;
overflow-x: hidden;
}
Often the cause of this problem is a padding value on a container that is set to 100% wide.
The use of mobile devices is growing. People use their phones to check information or just browse the web when they are away from home. People use their tablets and iPads when they are watching TV. Some people cannot afford desktop computers so their phones are the only way they can access the web. Making your site responsive is no longer a luxury but a necessity.
Last updated 4th August 2018