How to implement responsive web design and its best practices [closed]

Answer 1

Read up on media queries to change css according to browser width or height.

Include viewport to make your webpages on mobile devices scale correctly.

Answer 2

Look below a typical responsive head of html:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<meta name="description" content="How to make android app">
<meta name="author" content="Animesh Shrivastav">
<title>Make-Website</title>
<link rel="stylesheet" href="../css/my.css">

and a typical responsive css

html {
    margin: 0;
    padding: 0;
}

body {
    font-size: 1em;
    font-family: sans-serif;
    margin-left: 20%;
    width: 78%;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 20%;
    min-height: 1500px;
    color: rgba(255,255,255,0.5);
    background-color: #34495e;
}

Now understand yourself.

If you can't understand, then check out my website below: writing responsive website in text editor like notepad

Answer 3

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.