May 21st, 2017
responsive

What is Responsive Web Design and why do you need to know about it?

According to Statista, 17% of page views on a global scale now come from mobile devices. Let’s face it: as mobile devices get smarter, this percentage is only going to keep getting greater. Luckily, the wonderful word of CSS lets us use a variety of tips and tricks to make sure your website works no matter what device your visitors are using.

I’m talking about Responsive Web Design, and it is the buzz right now. Check out any popular website on your mobile and I will bet you will find the design changes to fit your device. So let’s learn how to do this to your site using a few simple rules.

Max Width

To start with, I’m going to talk about making your images responsive. There is a simple line of code you can use in your CSS for this:

img { max-width: 100%; }

This code changes the width of your image to make sure it scales depending on the screen (or browser) size which is being used. It will automatically apply to all images on your page as long as it is within your CSS stylesheet.

@Media Rule

Another simple way to use CSS to manipulate your site is by using the @media code. The benefit of this technique is that you don’t have to use a brand new stylesheet for mobile devices, as you can include the new code within your exsisting stylesheet. Here is an example of how it is used:

.site-header {
background: #000;
height: 260px;
}
@media only screen and (max-width: 719px) {
.site-header {
background: #fff;
height: 100%;

This is an extremely basic example of how to change the way a site header displays on mobile devices. The first section of CSS, site-header, will be used in all cases where the parameters of the @media CSS are not met. In this example the site-header will show with background colour of #000 (black) and the height of this class will be limited to 260 pixels. However, once the browser size becomes less than 719 pixels, as defined by the max-width option, the background colour will become #fff (white) and the heigh changes from 260 pixels to being 100% of the height of the containing element. You can make the CSS changes as simple of complex as you like.

Separate Stylesheets

Another approach to responsive web design is to have your page load a separate stylesheet for users depending on their screen size. The benefit of this method is it allows you more flexibility to develop a completely separate design for your mobile users, which may be beneficial depending on the needs of your website. This method uses another “media” code, but it is slightly different. This is located using HTML instead of CSS and uses a query to ask a question about your screen size, and will load a different CSS stylesheet depending on your answer. Here is the code:

link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (width:320px)"

This goes in your head tag. In this, it uses a media query to ask if the screen size is less than 320px. If it is, it will load the “phone.css” spreadsheet.

Test your website

There are quite a few websites you can test your design on. I would recommend Screenfly which lets you choose from a variety of preset screensizes, from popular PC and laptop screen resolutions, to those of popular brands of smartphone, tablet and TV screen sizes. In addition, you can also set a custom screen size to test.

If you have any questions, please let me know in the comments and I would love to help you out.

5 Essential Free WordPress Plugins

Investors Dream? Or Destined to fail?

Leave a comment

Your email address will not be published. Required fields are marked *