html - Constructing a responsive website

Question

In today's web development community, It is almost 'standard practise' to make a website "fully responsive" - meaning it would work on all screen sizes.

I currently have a website that is designed for a set width and height of 900 * 600px. However, I would like to alter this in such a way that I can make it mobile responsive, without loosing its functionality.

I was looking for some 'industry standard' concepts in which I could adapt to this purpose, although I am at a slight loss as to how 'professionals' would go about achieving this in real world situations?

+---------------------------------------+
|     NAVBAR (900px)                    |
+---------------------------------------+
|      |                                |
|      |                                |
|      |           body                 |
|200px |          (700px)               |
|      |                                |
|      |                                |
|      |                                |
|      |                                |
+---------------------------------------+

Here's a quick demo of a layout design which suits the 900 * 600px screen:

.page-wrap {
  height: 600px;
  width: 900px;
  background: lightgray;
  position: absolute;
  top: 0;
  left: 0;
}
.nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 900px;
  background: tomato;
}
.sidebar {
  position: absolute;
  top: 50px;
  left: 0;
  height: 550px;
  width: 200px;
  background: dimgray;
}
.nav a {
  display: inline-block;
  height: 50px;
  width: 100px;
  line-height: 50px;
  text-decoration: none;
  background: rgba(200, 200, 200, 0.4);
}
.nav a:hover {
  background: transparent;
}

<div class="page-wrap">
  <div class="nav">
    <a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a>
  </div>
  <div class="sidebar">
  </div>
</div>

Answer 1

there are many ways in order to make a website responsive. It bottles down to so many factors.

You need to use RWD, which stands for Responsive Web Design. It means that you can deliver your webpage in a variable size of screen, without having to re-write your html over and over. This is very much a must-do if you had to work with mobile and/or tablet devices.

Use Dynamic Units

One of the most important features of making a webpage responsive is the units you use, so I'll mention that first of all. At the moment, you have 'hard coded' these values by using a (pixel) px unit, which would be seen as a 'static unit'.

Below is a couple of units you may want to consider in the generation of your markup:

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org

The above table displays what is known as 'absolute' units, and this is because they do not 'technically' change when you resize your browser or view on a mobile device.

Instead of using such units, you should consider using one of the 'dynamic' units. For example:

• percentage (%)
• viewport-width or viewport-height (vw and vh respectively)

~Image from this article note this is an old article, and support for these has improved a lot since

Using the likes of percentage, for example, means you can set the width and/or height of a div depending on your containing block's size.

For example, resize your screen here:

div {
  width: 50%;
  background: tomato;
  height: 50px;
}

<div></div>