Once upon a time in a world without computers, designers were trained to create static print layouts for newspapers, magazines, posters and every other editorial piece you can think of. Each design was created with a final size in mind, so what you saw was generally what you got. If a newspaper column was 11 picas wide, designers knew exactly how many columns there were, how many words fit on each line, and how far the text flowed down the column. Now, with desktop computers, smartphones, and even smart watches, designers must take into account that content can be viewed on screens of nearly any size. Websites as we knew them would never be the same.
So now what?
Goodbye static websites. Hello responsive design!
Responsive websites are designed to adapt to the size of the display and optimize user experience. Websites that are viewed on a large desktop monitor can seamlessly adapt to any mobile screen size without losing visibility or legibility of the content. It is referred to as responsive design because the websites respond to their environments. They do all the work so you don’t have to.
How it works:
Think of a website as a puzzle made up of different sized blocks. For example, there could be a thin rectangle at the top for the navigation, a larger rectangle for the hero image, four squares in a row for some examples, two rectangles in a row for some block quotes, and another single rectangle for the footer.