Skip to content

24 ways to impress your friends

Redesigning the Media Query

Les James Les James

10 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Mathew Porter

I love this theory and your right, content should be king, however content is not always the sole purpose of a website.

Without going off on a tangent I have 2 main points that I think are worth considering.

1 – Always know what the purpose of your site is, what your users / visitors are and what they use and create a site that is fit for the user base and purpose.

2 – Is RWD removing choice from a user? I believe so. Would a mobile site that is responsive to a certain point with the choice for a user to select the full website, which is again responsive to a certain point better? Even I find sites frustrating when I’m forced to view content or less content on a responsive site in some cases.

Anyway, always worth a thought.

Barry McGee

Les – thank your for your article.

However, the major drawback I see with this approach is that if a device has a screen resolution that is just shy of what is needed to add another column, then you are left with quite a bit of redundant space either side.

This become particularly a concern on smaller devices where screen real estate is already at a premium.

Barry

emb03

The 1140 grid already does this. It uses percentages and almost no media queries and it works right out of the box.

Also, the css is human-friendly.

Niels Matthijs

Hmmm, based on the title I had hoped for another plea to ditch media queries based on browser and/or device sizes, instead focusing on the actual available space (width/height) a component has. Article 11 (Paul Robert Lloyd) mentioned this issue already, but I believe it really needs more backing to gain some traction.

More about this particular subject:
http://blog.andyhume.net/responsive-containers/
http://www.onderhond.com/blog/media-queries-based-on-elements

Bark Golgafrincham

This was a very interesting read… I still have some fundamental problems with the concept of RWD in its application to complex web apps, but this still was interesting to me. I’ll be tweeting.
My thoughts on RWD as a developer of web apps can be found here:

http://tinyurl.com/cpkhk5x

Ben Callahan

Love this concept. I love that this shifts your thinking away from specific widths and allows you to design from the content out.

I do agree with @barry above, the “fixed-width” nature of this is kind of a bummer. So… I made a few tiny changes to the codepen (see my fork here: http://codepen.io/bencallahan/full/mCwBe) so that it uses the fixed width column/gutter definitions to calculate the breakpoints but still uses percentages for the widths.

Good stuff @lesjames! Thanks for sharing.

Dagobert Renouf

Hello Les, thank you for this article.
I love the idea of column-layout breakpoints, it’s like we can design for fixed width again, but for all kind of containers and without having to think about it.

to answer emb03 > one big difference between the two is that the 1140 grid uses percentages, and therefore creates fluid layouts that are unpredictable depending on window size. This article offers a solution which allows us to keep fixed-width, predictable columns in place, and to shift our focus away from the size of the device to the shape of the layout – that’s big.

Dagobert

Ryan Cannon

The trick with @body::before@ got me thinking—if you’re going to use JavaScript based on the window size, why use media queries at all?

JavaScript has access to window size, pixel density, resize and orientationchange events, activating alternate stylesheets and setting class names on the @<body />@, and these are all techniques that have been around for a long time.

Just a thought.

Impress us

Be friendly / use Textile