How to Respond: Making Responsive Web Design Work For You
In recent years, smartphones and tablet computers have been taking off. Many users use such devices for accessing websites from them, which leads to a problem for web developers. Namely, one screen size does not fit all. It doesn’t make any sense for a mobile device user to have to use a website designed for a large screen. It also doesn’t work to make several completely different websites for each kind of device. So how do we get around this problem?
As it turns out, the answer is pretty simple. Our problem is easily solved with a technique known as responsive web design. The secret of responsive web design is to create a design that is fluid and responds to various screen sizes. This flexible architecture can reshape itself to fit any screen size, so it looks great everywhere.
How to Make A Grid Fluid
Typically, a lot of website code is written in specific values. That means that a certain element is a set number of pixels in height and width. To create a flexible grid, we have to change our approach. The secret lies in using percentages instead of set sizes.
Overall, you can find your target size with some simple division. For example, to find the size of the h1 element, you would divide the h1 size by the regular body font size. An h1 size of 21 pixels and a body size of 14 pixels would equal 21/14, or 1.5.
To set the relative size of the h1 elements you can use a unit called em. One em is just the height of a normal body paragraph character. So, setting the h1 element to a font-size of 1.5em would make the header 1.5 times bigger than any of the other letters, as we intended. To size different sections, you can use a simple percentage. An element that is 80% of the screen height will always take up 80% of the screen, no matter how many pixels that is.
It is good to know how to manually code a flexible grid and know what it is doing behind the scenes, but if you get tired of doing it over and over again, then there are several toolkits online that you can download to do the work for you.
Sizing Images
Resizing an image for any device is actually easier than you may think. Setting the max-width attribute of the image to 100% will tell the image to fill its CSS “container” but not to go beyond that. This means that any images on your site will be nicely resized along with everything else on your page. You can use this to keep great photos on your mobile site.
Media Queries
A media query is something that the code “asks” a user’s browser about. In this case, you need the code to “ask” the browser how wide it is. The command is @media screen and (max-width:numpx), where “num” is the number of pixels of the screen’s width. For example, you could plug in 320px (an iPhone) and then underneath it have a separate list of CSS rules. This code would only apply to iPhones or other devices with the small screens. You can have any amount of media queries you to specify for any screen size.
The most common screen sizes for mobile devices are 320px, 480px, 600px. 768Px, 900px, and 1024px. These are the sizes of Apple phones and tablets in both portrait and landscape modes. By incorporating all of these sizes your site can cover most mobile devices.
Will this work for everyone?
Unfortunately, the entire fix isn’t quite as simple as that. Some users will have older web browsers such as Internet Explorer 6 or 7. These browsers won’t recognize any of the commands above, and won’t be able to adapt to mobile devices. To get around this, you should use a CSS pre-processor. Sass is one that works very well. A quick web search for Sass should bring you right to it. Sass and other programs like it, works with older browsers to help them adapt to mobile devices. This ensures that your site will work well everywhere.
Now what?
Go out and try it for yourself! As you can see, the entire process is fairly easy compared to other coding techniques. Simply code in some media queries and specify what your site should look like for each device. Responsive web design is as easy as that.
ABOUT THE AUTHOR
