Responsive web design questions

Question

I have been reading up on responsive web design (RWD) and trying to wrap my brain around this concept.

Is responsive web design really the way that we should go for mobile development? I like the idea of having 1 site that should work on many different devices like desktops, laptops, tablets, and mobile phones.

On a desktop I have a wide screen, so my website works as what it was designed. It has a column with most of my main content and a left or right less wide column (depending where you are on the site) for navigation purposes. How does RWD determine what columns are stacked upon which columns? Does it start from the left of the screen, load first the contents of the left column and then the contents of the right column? Is it possible to maybe drop a column so that it does not display on certain devices? Can RWD handle stuff like this? The wider the device the more content you want to display, and the less wide you want just the necessary stuff to display.

How does RWD handle more of the cheaper phones? Phones that aren't really smart phones? What happens if a phone can't handle RWD, what then?

How do you get your data grid with 20 columns to display on a mobile phone that doesn't have a wide screen? And paging?

It's stuff like this that I don't know if RWD is for me? I like neat sites instead of having everything squashed in just to get the contents into the boarders of the phone's screen.

Besides Twitter bootstrap, any other decent RWD frameworks to consider? I've heard of a few decent frameworks.

Answer 1

This is a really big question. In an nutshell it typically works like this:

1. Build mobile site with all content and features.
2. Use media queries/javascript to reformat content as it gets wider, either fluidly or with breakpoints or with both.
3. Add any features that are only on your desktop version (ideally there won't be any)

You can use ajax to load additional content etc if needed, though usually you'd be having the same content (why would 30-40% of your visitors want stuff hidden from them?)

You are typically focussing here on Smart Phones, not old phones that don't have modern web browsers.

For specifics, e.g. grids with 20 columns, it's hard.

Perhaps flip the table so it's the other way, and has 20 rows, display it as a graph, make it slide left and right, or just consider why that is in there at all – that's an unusual thing to have on a website.

Paging is usually done as an infinite scroll – e.g. Apple's Mail app.

As far as frameworks go, there aren't any that will solve everything for you. The grid aspect of Zurb's Foundation and Bootstrap is useful, but it won't make everything suddently work.