I have read the book “Responsive Web Design - By Ethan Marcotte”. There I ahve learnt the forumla “target / context = result”
Those who have read the books, you saw that the main container at first got a width of “960px”. But after converting it in percentage, Ethan set that as “90%”. But actually, 90% is not equivalent to 960px.
Let us take out the following example:
My screen resolution is 1280x1024. Usually, my browser width in full screen is 1280px. Suppose that I want to design in 960px. So if I want to make it percentage, it would be
960 / 1280 = .75
And if we take the decimal after two numbers, it’s 75%. But 75% and 90% is not the same. So if I want to design a fluid grid which is actually equivalent to 960px, what should I do? So to say, Ethan did the same thing in his book, set the main wrapper width 960px and later to 90%. Practically, when I set one of my 960px design in 90%, there was a vast difference; at that time it didn’t followed the grid system of 960 (I also tested a grid overlay with Jquery plugin).
Okay, now I suppose that my width is 90%, but what should be the “context” in the target / context formula? - as I need to mention the context in px’s to get the rational percentage. It’s surely not 960px.
A width of 90% means 90% of the viewport (that is, the browser window). So if you are using a small screen like that of an iPhone, you are talking a very small viewport … so forget about pixels.
Your best option here might be to set a width of 90% but also a max-width of 960px. You still have to account for widths when your viewport is narrower than 960px, though. You could also use ems instead of pixels. They are more flexible.
With all this talk of grids and pixels, it sounds like you want to keep your cake and eat it too. If you are going for a “responsive” design, you have to let go of pixels and grids and what not. Well, I know that’s not quite true, but it’s how I look at it. You need to allow your content to be flexible and not try to pin it down like a print design.
I have no real right to say that, because many people do it. But it may not be needed. It depends on your content, really. I wouldn’t just go for a grid system without first checking that it’s necessary. (Personally I’d never use a grid system, but that’s me …)
As for px, they are not flexible like % and em, but you can use them. There is no right or wrong … just what works best in any particular situation.
What unit should I use about margin and padding in responsive design?
Any you like, really. Be careful mixing different units, though—such as % when you have px borders etc.
For units, I usually don’t touch percents. When you try to add in margin, padding, nesting… things can get messy. They also can make using the occasional <img> element a bit difficult, though I’m sure there are ways to accommodate this. I like pixels for everything except fonts, where I use ems.
Ahmed - you can set a max-width:960px; for your main container and then use percentages for everything inside that - using Ethan’s formula. That’s a nice book. Keep reading and experimenting!
Now you have context. So anything you want to place inside your container can be divided by 960, unless it is nested.
Also, if you are just starting out with responsive design, I would not recommend any frameworks or any boiler plates. Use them as references but write from scratch. Build two to three test pages on your own and then look into boiler plates and frameworks etc.