Constructing a responsive website - html

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">
nav bar itemnav bar itemnav bar itemnav bar itemnav bar item
</div>
<div class="sidebar">
</div>
</div>
In short, how would this 'responsive' design be constructed? Is there a 'best practise' when dealing with responsive-designs?

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>
You should notice how that div will always be '50% of its container'.
This would become very handy if you were building your website from scratch, but would also be useful if you were adapting one as well.
Use Media Queries
Media queries are great when used properly.
A media query is a logical expression that is either true or false. A
media query is true if the media type of the media query matches the
media type of the device where the user agent is running (as defined
in the "Applies to" line), and all expressions in the media query are
true.
A shorthand syntax is offered for media queries that apply to all
media types; the keyword ‘all’ can be left out (along with the
trailing ‘and’). I.e. if the media type is not explicitly given it is
‘all’.
For example, you could test something like "if my screen is smaller than 500px, use this css instead".
This would use a definition of something like:
#media (max-width:500px) {
//my css for when screen is lass than 500px wide
}
Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND
A simple demo of this would be:
div{
width:500px;
height:200px;
background:gray;
}
#media screen and (max-width:500px){
div{
width:100px;
background:tomato;
}
}
<div></div>
Use a Responsive Plugin
(Personally not advised, but still valid)
Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive webs.
Although I would advise not to using this, as it has a lot of 'unnecessary' css rules and hence I think it should only be used for 'concept code', and not production code.
Other Frameworks include:
foundation 3
skeleton
Bootstrap
Use a combination of these
In reality, most developers would use a whole range of combinations of these.
There isn't really a 'definitive' way of making a website responsive. However, hopefully you will be able to use some of this in future.

Answer 2

I've recently found that for responsive images I had to ensure that images in a Jekyll site (porting a template and adding functionality) would scale and fit on smaller screens, but not stretch and take up half the screen on screens with larger sizes.
Here are 2 methods to ensure that images/media do not overstretch or mess up the entire responsive site by going through the boundary without having to manually resize them.
CSS max/min-width attribute
For media assets like images, most browsers will support the max-width attribute that specifies how wide the image can be, or max-height if your use case prefers that. Here's an example:
/*in a css file */
img {
max-width: 90%;
height: auto;
width: auto;
}
That tells the browser to display images at a maximum width of 90% and resize the width and height accordingly (you do not need both attributes). For all img elements.
For even finer control individual styling of classes can be done like so:
img.responsive {
/*css for specific class here*/
}
And later specify the element is part of the image responsive class like so:
<img class="responsive" src="/assets/pic.png">
EDIT:
Centering or Positioning in CSS
I found a simple website that generates the code on how to position elements in CSS for you based on input settings, which is a real issue on responsive devices as well. This is the website: http://howtocenterincss.com/
Note that you will need to fully fill everything in (including the middle option). Also, despite the website's name, it also handles positions that are not center as well, so it is a fairly good catch-all.
Wrap the image in a container
The benefit of this is you style the container, and every element inside it will adhere to the container styles if their attributes are auto. By specifying a max size for a container with width=800px, whilst making the image width: auto so the image will resize to the dimensions of a container.
These 2 examples are adapted from the following site, which is a great resource for handling responsive assets like responsive videos/images/fonts and relative sizing, 5 useful CSS Tricks for a Responsive Website. The author is much more well-versed on the topic than I am currently.
Note that as mentioned in that tutorial not all browsers support max-width (IE7 and 9 do but not IE8) so that might be an issue for some people who use outdated browsers. In that case a conditional CSS is needed of a hack such as below (example taken from site) is needed:
#media \0screen {
img {
width: auto; /* for ie 8, */
}
}
-- Notice how I just placed width:auto in my first example with the max-width attribute
Additional: Another Framework
Many templates made by web designer n33 employ the lightweight Skel framework to make responsive websites that load the right CSS based on screen size. However this is a Javascript framework which won't function when users have noscript turned on. In which case you have to load the CSS by specifying <noscript> paths to CSS here </noscript>
A good reference on responsive templates (that have opensource files like CSS) that allowed me to study and understand some methods in making a responsive site can be found at HTML5UP.net also by the same developer that wrote Skel.