I am fairly new to this and I hope you guys can help me. I have created some basic web pages but now I want to move on to responsive web design. I have checked out a number of tutorials but I am not reallly getting the hang of it. Normally I when I want to create a web page I just set the width and height of a div in px. However I have noticed in the tutorials where a web page should be dynamic the width and height are no set in px but in %. Can someone explain to me what the difference is because I have done some searches but can't really find any easy to understand explanations. Thanks in advance.

When you set your width and height properties in px your elements will be a fixed size and not adapt to screen/window sizes. Values in % will be relative to parent elements (and in the end the browser window). With responsive layouts you should use % as much as posible. in general you should also only set width properties and let the height adjust to the content. You can combine width properties (in %) with diferent max-width properties (in px) specified in media queries to avoid to wide elements on big screens.

Thanks for your reply. To make a web page dynamic what would you say are the important aspects? Is it the width?

Thanks for your reply. To make a web page dynamic what would you say are the important aspects? Is it the width?

My understanding of the term "dynamic webpage" is more related to the content as in a web page with changing content based on conditions in contrast to a static document. But I asume you are talking about webpages where the layout is flexible depending on different devices. In that case "adaptive" or "responisive" would be better terms than "dynamic". It might sound pedantic but if you want to google for some answers it will save you time if you use the right terminology.

 

The most important aspects of creating a responsive layout would be to:

 

Make sure the default device zooming is disabled you do that with a meta tag in the head section of your documents:

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

Use "%" for all your widths and "auto" for heights combined with floats/display propperties and min-with/max-width in "px". That will allow you to have sections of your page stack on top of each other on small screens and side by side on wider screens. Setting a box-sizing property to "border-box" on all your block elements can make it easier for you to calculate how many "%" to asign to each element's width. Try to limit your positioning to the default "static" or "relative" as absolute positioned elements are difficult to make "reponsive".

 

Use media queries to adjust what can not be done with %.

 

For optimizing typography for different resolutions use "rem" for font-sizing http://snook.ca/archives/html_and_css/font-size-with-rem

Edited September 1, 201412 yr by Nillervision

As a base in responsive design you generally want to create a container with a max width and center that container:

.site-wrap {
  max-width: 1170px;
  margin: 0 auto;
}

Then within that you should go with a grid system (there are many available -- I use a modified version of the Bootstrap grid.) But for a simple grid yopu can go with something like this:

.row {
  ;
  margin-right: -15px;
}
.row:before {
  clear: both;
  display: table;
  content: " ";
}

.col-75,
.col-50,
.col-25 {
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}

.col-75 {
  width: 75%;
}
.col-50 {
  width: 50%;
}
.col-25 {
  width: 25%;
}

For the grid to work you will need to change your site-wide box-sizing:

*,
*:before,
*:after {
  box-sizing: border-box;
  /* Include vendor prefixes! */
}

That's a VERY simple grid system. you generally go with more complex grid systems with more columns (I use 12 ) and then you want to be able to put in specific breakpoints as you wont want a grid of 4 columns to be so at the smaller screens, it might go 4-2-1 columns as the screen size reduces.

 

When things get more advanced again you might wanna combine fixed withds with fluid widths, like an image on the left and text on the right, the text is fluid and the image is fixed width but that's something you can learn down the line. Here is a fiddle I just created to demonstrate two ways you could do this: http://jsfiddle.net/ymdLjhzn/

Is creating a responsive web page without a column system bad design/practise?

Not necessarilly. But you'd still generally want a grid system of sorts but it might not be the wisest idea to go for a complex grid system when you only need to employ something much simpler (thinking file size here )

Is creating a responsive web page without a column system bad design/practise?

Not at all. Actually a webpages default display-mode is allready responsive without columns (its only when we start to specify pixel values that we break the default responsive layout). But for readability it is recomended to max have about 65 characters in each line so 2 or 3 columns would often be more appropriate for wide screens. But for mobile phones one column works best. As a very simple example: Say you have two sections inside a 100% wide body element. if you give each section a width of somwhere between 50%-100%, a max-width of 400px and then float them, they will then be side by side if the window is wider than 800 px and stacked into one column when the window is smaller.