Which Framework Is Best for Starting with Responsive Web Design

Which framework is best for starting with responsive web design?

In my opinion, there's one book that explains anything and everything you might want to know. If you're just beginning to get into responsive web design, I'd start with this:

Responsive Web Design - Ethan Marcotte

To my understanding, Ethan is known as the "guy who started the movement". I can personally attest that the book has been of immense help to me. I'm not even sure quite frankly that you need to use a framework. If you code your website with the best practices the first time and build it as fluid as possible (even if you wrap within a 960px wide div) then resizing downwards from there using CSS media queries is a snap. I'd also check out the book Mobile First by Luke Wroblewski.

You can even buy these books as a bundle. They're quick reads, you can read each of them in an afternoon. These two books got me into responsive web design, I couldn't suggest checking them out enough!

How to implement responsive web design and its best practices

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.

Best solution/framework to Responsive Design for IE7

Just looking into this. I was going to use adapt.js, but I found some JS that enables media query functionality on older browsers (including IE7).

That way newer browsers without JS will still work properly, the only situation where the responsive design will fall back to the smallest version is on

Here are two of the best JS media query fallbacks I have found:



Respond

https://github.com/scottjehl/Respond

Respond is around 3kb when compressed and supports the basic media queries that you would need for simple responsive design (min/max-width)



css3-mediaqueries-js

http://code.google.com/p/css3-mediaqueries-js/

A bit bigger at <16kb minified. Supports a wider range of media queries (not tested, but it is referenced on the Respond site)



Constructing a responsive website

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

Sample Image

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)

Sample Image
~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>

What is difference between building a responsive website and mobile first web?

In my opinion "mobile first" is more design concern rather than development. To deliver the best UX you should follow mobile first guidelines. If you have layout designed with "mobile first" approach then you can use any framework to acheive responsivness. Framework will make it easier. That's all.
The responsive is simply adaptive layout(media queries) and fluid/liquid layout(percentages grid). It's not complicated. The hard part is the design.

You can read more about "mobile first" design here:
http://www.html5rocks.com/en/mobile/responsivedesign/

**Popular responsive frameworks **

  • Twitter Bootstrap
    www.getbootstrap.com

  • Foundation
    www.foundation.zurb.com

  • Skeleton
    www.getskeleton.com

Getting started with responsive website layout

Let me try explain a little for you :

  1. I've read you should build for mobile then move up, is this correct? Some people start from smaller device to biggest (phone to desktop), but this is not a must. If you already have deep learning in coding responsive site you can start from Big to Small. But the reason behind start from small to bigger screen is if your page fit with the small screen then its easier to make it fit on bigger screen. So you take focus first on small.

  2. Should I start off with a template? If so, any recommendations? Depend on you, if you dont want to make your hand dirty coding lots of element to fit your requirement you can using template. But for better understanding you may use grid CSS framework without UI styling like simplegrid or unsemantic 960.

  3. Can you recommend any tutorials or tools that are a must? I'm not sure i can recommend. But do research, buy some book, start practicing and ask some expert for help if meet rock stone.

  4. What's the best way to test the layout? If you coding using netbeans IDE they have built in tester with resolution option (Desktop & Mobile), or from browser plugin, on Firefox you can use Developer Kit and press Ctrl + Shift + M to activating screen simulator. And if you on chrome you can use Extension called Ripple, its have many device as a simulator.

  5. I've read about people using bootstrap, but I've used it in past projects and it seemed a little bloated. Although, it could be a good starting point? Any CSS Framework is good, but the most famous is Bootstrap & Zurb Foundation.

Good Luck to you,

Responsive web design: percentages / html5 boilerplate / 960gs or Foundation framework?

Whatever 960gs gives, Bootstrap and Foundation both give + more. That is Bootstrap and Foundation both already contain a grid-based layout with an option for responsiveness.

That said, I suggest you have a very close look at Bootstrap and Foundation and then draw your own comparison. Choose the one that offers the features you like more. One out of the two should be enough, if you're well organised in what you're doing.

Since you haven't even tried any, I suggest you really do now and your question will be gone in a twinkle of an eye. And I suggest you start with Bootstrap, cos when you do, you might never consider trying out the rest even.



Related Topics



Leave a reply



Submit