How to Make A Responsive Site

Responsive design is great. I always felt that fixed-width websites were too rigid. I mean, if my browser is not expanded, then I can only see part of the website and I would have scroll horizontally to see it . With responsive design, I am able to make sure that the website will fit the browser and not the other way around.

 

Learn by doing

When it comes to coding, computer language, or programming, the best way to learn is by doing. There’s not a single genius programmer at Facebook who learned what he learned by sitting in a classroom and listening to a professor. You need to dive into real exercises to help you build muscle memory and force your brain to remember all the syntax unique to your particular language.

If you are new to responsive design, you need to learn it the old fashion way: make an entire responsive website from scratch. It’s not hard, but the important thing here is to challenge your mind so that you understand the basic concepts of responsive or even mobile design. When I redesigned my website into a one-page website, I made it from scratch as well. It was tough having to change the way I look at CSS, but it was worth it in the end.

 

What about Twitter’s Bootstrap?

If you’re reading about responsive design, then you’ve probably heard of Twitter Bootstrap. Bootstrap is a responsive HTML/CSS framework. A framework is just a foundation to make a website with. For example, if you ever made an HTML form, you’ll know that the default browser buttons and inputs are ugly as sin. A framework will typically style or take care of small things like that, so you can focus on more important design elements. You can try using Bootstrap, but if you’re not familiar with media queries and responsive concepts, it’s gonna be rough. Bootstrap is basically only for people who understand responsive design already.

 

Instructions for responsive design

Keep in mind that by default, a website will be responsive. Don’t believe me? Try and make an html file with only text. Then resize your browser to see what happens to the text. The text shifts around, right? That’s what you call responsive. In web design, you’re always going to have a container though, so we’ll include a container and add the following CSS:

.container { width:90%; max-width: 960px; margin: 0 auto }

This means that the container will be 90% of the browser, but not to exceed 960px. This is important because we don’t want a website to get too wide. And the margin: 0 auto just makes the container centered, with a 5% space on the left and right of the container. This is a typical base for responsive design.

For the rest of the code that you’ll need to build a responsive website, take a look at this comment that I wrote on Quora.com as an answer to the question, “can we build a complete responsive website using css media queries?”

You really only need a handful of CSS snippets to make a website responsive. Here are the snippets that I use:

1. Make image width flexible.

img { max-width: 100%; height:auto }

You need your images to be able to adjust to any size parent container (note: 100% is assuming that your image has no padding, margins, or borders). With max-width:100%, the image width will never exceed the container width. Height:auto allows for the image height to resize proportionately.

2. CSS Media Queries.

CSS media queries allow you to completely change the layout of something, depending on the size of the browser.

In the above example, we have 2 elements: .loop-thumbnail and .loop-excerpt. In a regular view, .loop-thumbnail floats left, while .loop-excerpt floats right. However, when the browser gets too small, this creates an awfully small image and an awfully small text column. So what we do is add the following media query.

@media only screen and (max-width:768px) {
  .loop-thumbnail, .loop-excerpt {float:none;  width:100%}
}

The above code means this: if the browser size is from 0 to 768 pixels, make the .loop-thumbnail and .loop-excerpt 100% width and don’t float them.

You can also use min-width or use a combination of both:

 @media only screen and (max-width: 480px) and (min-width:767px) {
  img { float: none}
}

Any css in between those brackets will only happen when the screen or browser size is between or equal to 767px and 480px. An example use of this would be to display:none your regular menu and display:block your mobile, drop-down menu (having 2 menus is typical in responsive design). I recommend putting these media queries below regular css.

The numbers you will use for these media queries are called “break points.” It’s called that because when the browser width changes, it will suddenly snap into a new view. In my example, the break point is 767, which basically represent sizes smaller than iPad portraits. The most common breakpoints are 960px, 768px, 480px, 320px, which correlate to standard size, iPad portrait, iPhone landscape, and iPhone portrait, respectively.

So, in a typical css file for a responsive site, you’ll usually see something like this (this is an example using font size):

  h1 { font-size: 2em } /* normal view, standard size, or iPad landscape */

@media only screen and (max-width: 768px) and (min-width:481px) {
  h1 {font-size: 1.6em} /* smaller view or iPad portrait */
}

@media only screen and (max-width: 480px) and (min-width:321px) {
  h1 {font-size: 1.3em}  /* even smaller view or iPhone landscape */
}

@media only screen and (max-width: 320px) {
  h1 {font-size: 1em} /* smallest view or iPhone portrait */
}

3. Add some code to let your browser underestand how you want your site to be viewed.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

For responsive sites that have flexible views, you’ll need this in your site <head> section to let mobile browsers to view your site in mobile size. Otherwise, the browser will display your site in full size and zoom out.

 

Testing is important

Testing is the most important things with responsive design. In fact, testing is the main reason why responsive design is so time-consuming.  Believe it or not, I’ve been working on responsive designs for over 6 months now, but I don’t own a smartphone nor do I have a mobile browser. The beauty is that you don’t need it. Here’s a some great tools to test with:

• Opera Mobile Emulator
• Manymo, A Better Android Emulator
• BlueStacks, Run Mobile Apps on Windows
• Or just resize your browser (the quick and dirty method)