338 posts
  • Has been part of the Envato Community for over 4 years
  • Located in United Kingdom
  • Made it to the Authors' Hall of Fame
  • Sells items exclusively on Envato Market
+3 more
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.

2468 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $100+ on Envato Market
  • Has referred 100+ members
  • Has been a beta tester for an Envato feature
+2 more
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;
    }
}
338 posts
  • Has been part of the Envato Community for over 4 years
  • Located in United Kingdom
  • Made it to the Authors' Hall of Fame
  • Sells items exclusively on Envato Market
+3 more
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
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has referred 200+ members
  • Has collected 10+ items on Envato Market
+5 more
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

338 posts
  • Has been part of the Envato Community for over 4 years
  • Located in United Kingdom
  • Made it to the Authors' Hall of Fame
  • Sells items exclusively on Envato Market
+3 more
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
  • Has sold $1M+ on Envato Market and is now a Power Elite Author
  • Power Elite Author: Sold more than $1M on Envato Market
  • Has referred 200+ members
  • Has collected 10+ items on Envato Market
+5 more
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

1726 posts LoveThemes
  • Nominated Community Superstar of the month
  • Contributed a blog post
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
+8 more
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 referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Has been part of the Envato Community for over 6 years
+2 more
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

3503 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark 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.

1029 posts
  • Has referred 500+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+6 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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by