327 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United Kingdom
PaulWinslow says

Hi all,

I’m reading Ethan Marcotte’s “Responsive Web Design” and playing with translating pixels to percentages for responsive layouts. If anybody already releasing responsive themes could take a look over this post and help me out – I’d appreciate it.

Ethan gives a simple formula for calculating the width of an element as a percentage:

target divided by context = result

So if you have a 960px wide layout and a sidebar of 300px and you wanted to figure out the sidebar’s width as a percentage.. you would take the target (300px) and divide it by the context (960px) to get your result (0.3125 or 31.25%)

That’s simple enough. But what’s tripping me is how to calculate the width of my containing element in proportion to the browser window. If I know I want my layout to be 1000px wide, how would I calculate that width as a percentage without a context to divide it by?

It might be really simple but it’s not clicking for me yet.

Check out my example here: http://pau1winslow.com/responsive/

I have a 1000px fixed-width container (red) to measure my responsive layout against. My responsive container is 90% in width which I just plucked out of thin air.

I mean, I know I could keep testing the width at 89%, 88%, 87% until it lines up with my red container but surely that’s not the way to go every time?

Markup: http://snippi.com/s/1r1wj5d CSS : http://snippi.com/s/4i9cpq3

Cheers, Paul.

2436 posts
  • Has been a member for 5-6 years
  • Exclusive Author
  • Europe
  • Bought between 10 and 49 items
  • Referred between 100 and 199 users
  • Sold between 100 and 1 000 dollars
  • Envato Studio (Microlancer) Beta Tester
digitalimpact says

Wouldn’t you specify width in % for each max-width?

Like:


/* let's target a common 15" laptop resolution here. Oh well, at least my resolution */

@media only screen and (max-width : 1366px) { 

#container {
    width: 73.2%; /* aprox. 1000px out of 1366px*/
    margin: auto;
    padding: 50px 0;
    }
}
327 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United Kingdom
PaulWinslow says

I think it’s just clicked. If I’m right then you’re on the right lines there but it’s even simpler than that.

Rather than defining a max-width in % for each media query, I think I’m good to go if I just simply specify a max-width on my container in pixels – seeing as the idea primarily is to respond as the window is reduced.

So I can choose a nice 80-90% width for when the window is reduced on mobile/tablet and then display a max-width of 1000px for when viewed on the desktop & beyond. And I can remove floats to let elements stack within that 80-90% layout.

Cheers :)

p.s Obviously if anybody thinks I’m talking a load of toot then feel free to correct me here.

194 posts Dreams Money Can Buy
  • Power Elite Author
  • Power Elite Author: Sold between 1 000 000 - 1 999 999 dollars
  • Bought between 10 and 49 items
  • Referred between 200 and 499 users
  • United Kingdom
  • Has been a member for 3-4 years
  • Exclusive Author
SwiftIdeas says

Hi Paul,

Getting percentages right can be a pain. I went down that route first, before I found www.getskeleton.com

Their framework is superb for a great starting responsive template. You assign a certain number of “columns” to an asset to set it’s width (based on 960gs 16 column layout).

Give it a look and see what you think.

- Ed

327 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United Kingdom
PaulWinslow says

Cheers, guys.

I’m also seeing a few examples where the developer isn’t even using percentages, just simply using media queries to snap the layout to a smaller width when the window is reduced beyond certain points. So it doesn’t gradually flow into place, rather it snaps suddenly at 768px and then again at 430px. But it’s all still fixed-width pixels just being served up in a few different widths.

Any idea which method would be more beneficial?

194 posts Dreams Money Can Buy
  • Power Elite Author
  • Power Elite Author: Sold between 1 000 000 - 1 999 999 dollars
  • Bought between 10 and 49 items
  • Referred between 200 and 499 users
  • United Kingdom
  • Has been a member for 3-4 years
  • Exclusive Author
SwiftIdeas says

I guess there are arguments for both, but at the end of the day it all comes down to your needs/target market.

The benefit of snap layouts is not having to resize every individual asset with every move of the browser to keep everything in place. The idea behind them is to target the different device groups (mobile portrait, mobile landscape, tablet portrait, tablet landscape, and deskop/laptop browser).

- Ed

1237 posts
  • Interviewed on the Envato Notes blog
  • Won a Competition
  • Halloween Competition Winner
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 50 000 and 100 000 dollars
  • Referred between 100 and 199 users
  • Bought between 1 and 9 items
  • United Kingdom
LoveThemes says

I prefer to just target each device specifically rather than messing with %.

How many people are actually going to spend time scaling their browser to see the size?

They’re more likely to just visit from a particular device and want it to look good on that.

-Scott

78 posts
  • Has been a member for 6-7 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Romania
  • Referred between 100 and 199 users
  • Bought between 100 and 499 items
adiacone says

I also agree with Ed in the sense that every project is different and in the end you have to look at the specifics of that project before making a decision.

I also have been looking at all kinds of frameworks and grid options, but in the end I went with a custom approach, that uses bits an pieces I found useful in other frameworks. Plays a lot like Skeleton though. You can see a work in progress version here: http://demo.canvasthemes.net/emptycanvas/

For making a layout adapt to mobile, the “fixed widths using media queries” approach works for me. If we’re talking about really optimizing a website for mobile, that’s a totally different story. :)

- Adrian

3415 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Community Moderator
  • Bought between 100 and 499 items
  • Referred more than 2000 users
  • Has been a member for 4-5 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
+4 more
sevenspark Volunteer moderator says

Agreed with Ed and Adrian. Most customers won’t want a fully fluid layout, since the layout is more unpredictable. I’d also add that as an end-user I personally prefer “snap-to” responsive layouts over fully fluid layouts from a usability standpoint.

I tested a lot of responsive frameworks, and I also highly recommend Skeleton.

1028 posts
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Author had a File in an Envato Bundle
  • Bought between 50 and 99 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 500 and 999 users
+1 more
ThemeBlvd says

Hey Paul,

Ya it looks like a few others are saying this also, but the point of this whole responsive design kick is not necessarily to go all the way back to the fluid designs of 10 years ago. It’s more of a hybrid. When your user view the site on the computer, we want it to look like it always has, but when going smaller we want it to also work.

I have seen some people taking the approach of snapping the layout to different dimensions with media queries, but I personally think it’s a little bit better approach to use percentages and allow it scale naturally depending on the device, as not all tablets or mobile devices are going to have the exact same widths.

I think you got this down already obviously, but it all is fairly simple when you look at it like this. So for example if before you were making sites with a container you were giving say a 960px width. Now, you want to not give your container a width but instead give it a “max-width” of 960px and make sure all of the inner layout elements are done with percentages.

So before maybe you had a site:

#container {
    width: 960px;
}
#content {
    width: 660px;
}
#sidebar {
    width: 300px;
}

Now it would be more like this:

#container {
    max-width: 960px;
}
#content {
    width: 68.75%;
}
#sidebar {
    width: 31.25%;
}

So now when a user is on a computer (assuming their browser window is larger than 960px) it will always appear as the classic 960px wide website.

by
by
by
by
by
by