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

Question

I have a website which uses pixel to render the pages. But when i view the website in different devices having different screen resolution the whole page will not fit into screen and if i use percentage, the page content will get squeezed.

Is the responsive web design is the right choice to design the web page. If so, I have got few concerns.

1. What is the risk involved in converting existing web site to incorporate responsive design.
2. Is there any framework available to do this and which is the best one
3. How it is supported across devices and browsers

Randirandie

(1) There's a risk in not doing it, given today's market, but no risk in doing it. (2) There are lots of frameworks. Google 'responsive design' and you'll find lots of resources. I'm starting such a project myself and did just that yesterday. (3) The very excellent resources you'll find as a result of your Google search will explain support across various devices and browsers. – Sachsse

you my also want to look into pros and cons of responsive design to make a choice of whether to use it. I still prefer to create a separate mobile site as responsive design can make mobile devices download as much as the desktop site but not make use of content it is downloading – Piddle

Answer 1

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.

Spiroid

I don't agree with naming Bootstrap a "framework". It is not ! People will be missleaded. CodeIgniter is a Framework, Bootstrap (although it's named on it's own website a framework) it's just a set of predefined CSS3 rules, which you can build with CSS directly. A framework contains very complex set of custom functions and variables and offer shortcuts for the programmer to use. I do agree with Bootstrap as the best for fluid and responsive design. – Substratosphere

I think that identifying progressive enhancement with mobile first is misleading – Buchheim

@LucianMinea Bootstrap is a framework. Regardless, calling it a framework or not shouldn't cause any actual problems for people who use it. – Adjoin

Answer 2

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.

Natatorium

Brett suggested awesome. And for all standard media screens check all mediaqueries here scaledrop.com/blog/?p=783 – Xl

Answer 3

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

Heroism