I really love responsive web design, I think it's great and I think you should love it too, but it isn't the simplest thing to achieve. I took inspiration from the Golden Grid System. I was amazed by it's simplicity and ingenuity, but it did some things I didn't quite agree with, so I set about making my own, then designed some tools to help speed up the process. The result is RubberBand.
So, what is RubberBand? Well, it's a light-weight, versatile and simple to use tool to help you develop responsive websites. Below are a few features:
Depending on your browser or device, you'll be shown a group of columns consisting of four (mobile), eight (tablet) or sixteen (desktop). As the browser resizes so too will the columns, baselines and the amount of them. RubberBand allows you to easily lay out your content across any device.
RubberBand relies heavily on percentages and calculating ems instead of relying on the good 'ol pixels. Because of that you will most likely be doing lots of calculations, new font-sizes, line-heights, margins and padding. RubberBand is there to simplify some of the process and offers a calculator. All you do now is type your desired font-size and have the CSS generated for you, speedy!
There will come a time when you want to see how your page will look in smaller windows, resizing a browser manually is annoying and you may just want to see your design quickly at a certain width without having to upload and view through an actual Mobile device. RubberBand can help with that, meaning making changes is that little bit faster.
I am going to assume you've already downloaded either the normal or minified (recommended) version of RubberBand, you've put it in your website's Javascript directory and referenced it in the footer of your HTML, if not, you should definitely do that now.
<script src="/my-javascript-dir/rubberband.min.js"></script>
<script src="/my-javascript-dir/rubberband.min.js" type="text/javascript"></script>
You should hopefully see a small box in the top right corner of your webpage with a little down arrow icon. Hovering this will show RubberBand. If you can't see RubberBand, double check the path to the Javascript is correct.
Now you have RubberBand showing, it's best to set some defaults.
You want to let your webpage know it should try and look good on a Mobile device, you can do this using the following piece of HTML:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It's as simple as that. With this line of code you tell the site to be as wide as whatever device it is being viewed on and you don't want the content to be zoomed. For more information I suggest reading the following article on the subject An introduction to meta viewport and @viewport
For CSS I highly recommend using a reset stylesheet, like this one for instance, Eric Meyer's. Once you have added your reset stylesheet, in your own stylesheet, make sure to set a default font-size and line-height in px. The way I decide these values is to choose a size for an average piece of text. If I don't want the average paragraph text to ever be bigger than 16px and the line-height to be 1.5em, I will set my body text to include the following:
body { font-size: 14px; line-height: 24px; }
It is important to set these two initial values as all calculations will be driven from the values set in the body. If you are happy with the defaults, be sure to set a line-height regardless to make sure all browsers are using the same line-height as opposed to 'normal'.
RubberBand comes with some options that you can set which can help during your development.
| Attribute | Value | Default | Description |
|---|---|---|---|
| showAlways | boolean | false | If true, the tools will be shown always. |
| showColumns | boolean | true | If false, columns will be hidden when the guide is on. |
| showLines | boolean | true | If false, baselines will be hidden when the guide is on. |
| desktop | number | 992 | Change this value to show a different width for the desktop view. |
| tablet | number | 600 | Change this value to show a different width for the tablet view. |
| mobile | number | 240 | Change this value to show a different width for the mobile view. |
You can set these options by having a script tag in your footer, below the link to RubberBand. Here is an example of a setup which has the tools always showing, the baselines hidden and a Mobile view of 480px.
<script src="/my-javascript-dir/rubberband.min.js"></script>
<script>
rubberband.options({
showAlways: true,
ShowLines: false,
mobile: 480
});
</script>
RubberBand's columns are set as % values and is based on 16 columns overall. The table below shows you how to calculate values between the columns based on which view you're in.
| col-1 | col-2 |
|---|---|
| 50% | 100% |
| col-1 | col-2 | col-3 | col-4 |
|---|---|---|---|
| 25% | 50% | 75% | 100% |
| col-1 | col-2 | col-3 | col-4 | col-5 | col-6 | col-7 | col-8 |
|---|---|---|---|---|---|---|---|
| 12.5% | 25% | 37.5% | 50% | 62.5% | 75% | 87.5% | 100% |
| col-1 | col-2 | col-3 | col-4 | col-5 | col-6 | col-7 | col-8 |
|---|---|---|---|---|---|---|---|
| 6.25% | 12.5% | 18.75% | 25% | 31.25% | 37.5% | 43.75% | 50% |
| col-9 | col-10 | col-11 | col-12 | col-13 | col-14 | col-15 | col-16 |
|---|---|---|---|---|---|---|---|
| 56.25% | 62.5% | 68.75% | 75% | 81.25% | 87.5% | 93.75% | 100% |
The best way to design a responsive site is to start small and build your way up. Start with the smallest Mobile size and then work your way up the Mobile device width chain, then when you hit Tablets do the same until you get to Desktops and repeat. I find setting RubberBand's viewport options to their lowest values first and then when I am happy, increase that value to the next.
Your choice of viewport widths is up to you but I find the following useful:
| Mobile | px | em |
|---|---|---|
| 240 | 15 | |
| 360 | 22.5 | |
| 480 | 30 | |
| 640 | 40 | |
| Tablet | px | em |
| 768 | 48 | |
| 1024 | 64 | |
| Desktop | px | em |
| 1248 | 78 | |
| 1408 | 88 | |
| 1568 | 98 | |
| 1888 | 118 | |
| 2016 | 126 | |
| 2528 | 158 |
Here is a very basic example of using media queries to make changes to different devices:
/* your base device (smallest device) */
@media screen and (min-width: 15em) {
body { background: blue; font-size: 10px; line-height: 1.5em }
}
/* your next device up */
@media screen and (min-width: 22.5em) {
body { font-size: 12px; line-height: 1.5em }
}
/* tablet */
@media screen and (min-width: 48em) {
body { background: green; font-size: 14px }
}
It's a good idea to use a wrapper for your whole site. You may want a 100% width design, but I'd still put in the wrapper, just incase. This is what I do.
<div id="wrapper">
[SITE CONTENT]
</div>
By doing this it makes the process of positioning the content centrely is a whole lot easier. For Mobile and Tablet devices I suggest setting the wrapper margin to the following:
/* Natural wrapper */
#wrapper { margin: 0 }
For Desktop you can use whatever you like, to work out the percentage remember to do the following. 100 % 16 × [number of columns either side] = [wrapper margin]%. So here is a quick example, to have three columns on the left and right, you would do the following. 100 % 16 × 3 = 18.75%. Your CSS would be:
/* 3 column wrapper */
#wrapper { margin: 0 18.75% }
First thing I suggest doing is setting a global P to have the default CSS that the RubberBand calculator gives you if you type in the base font-size. So if the base font-size is 16px, then type 16 into the calculator and copy the output CSS into your stylesheet:
p { margin: 1.5em 0; padding: 0 0.75em; font-size: 1em; line-height: 1.5em; }
This gives you a nice basis to work from when organising other elements around your content. When dealing with padding and a width defined on an element, you may notice that your content does not sit within the columns. if this occurs I suggest that, at the bottom of your stylesheet you have the following:
[a whole bunch of elements] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
-ms-box-sizing: border-box; box-sizing: border-box; }
This will allow the padding to be considered part of the overall width of the element so instead of an element being, for example, 25% + padding, it will be 25% including padding.
So you've set all your responsive styles and you're going through browsers testing to make sure your site looks good and you open IE, specifically IE8 and older and your site doesn't look right at all. The reason being is that IE just doesn't know some of the newer features of CSS which are necessary for doing a responsive site in this way, thankfully the solution is simple.
Using conditional if statements you can create a new stylesheet specifically for IE8 and older, IE9 should be fine. I find tweaking your Desktop design probably the easiest but you may want to design a completely unique look for older IE users.
<!--[if lte IE 8]>
<link rel="stylesheet" href="/stylesheets/ie.css" media="screen" />
<![endif]-->
If you have any difficults using RubberBand, find a bug or have a suggestion on ways to improve the tool please email me here. Adam Johnston
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent