Favourite Media Query Breakpoints

[Joss]

Conveniently forgetting that best practice says you should base your media queries on what works best for your design and not the other way around, what are you favourite breakpoints?

What are the numbers that make you zing!!?

Playing around with response.js and trying to work out a common list between that and my css, I have come up with this provisional little list. This is mobile first, so only uses min-width in ems, though I have put the px in the comments.

/* 321px 20.063em phone portrait for larger phones - when would I use this? */
@media only screen and (min-width: 20.063em) { 

}
/* 481px 30.063em - Phone landscape */
@media only screen and (min-width: 30.063em) { 

}
/* 530px 33.125em - small tablet portrait/Kindle */	
@media only screen and (min-width: 33.125em) { 
	
}
/* 768px 48.000em - ipad portrait and small tablet landscape */
@media only screen and (min-width: 48.000em) { 
	
}
/* 1025px 64.063em - One pixel higher than ipad landscape so for laptops and small screens and nexus 10 landscape */
@media only screen and (min-width: 64.063em) {

}
/* 1281px 80.063em - one pixel higher than my normal width, so for wide desktops only */	
@media only screen and (min-width: 80.063em) {
	
}

[OrganizedFellow]

I'm delighted to see you using EM instead of the dreaded PX

See that? YOU ARE A CODER!

Now to answer the question, I use Foundation5, so all my breakpoints are taken care of for me

But when I was using the sweet little PocketGrid, I built from mobile^up. I use this awesome little bookmarklet: http://lab.maltewassermann.com/viewport-resizer/

Then begin adding the proper widths per element based on the layout chosen.

[Joss]

I have used that for a while, though it sometimes conflicts with other js.

I have been playing with the built in emulator in chrome, but it is very clunky

[pwired]

But when I was using the sweet little PocketGrid, I built from mobile^up

Did you stop using pocketgird ?

[Joss]

I am enjoying the very basic grids. My main reason is a wish to only load the things I want when I want. I was doing that with Foundation (not using the min versions, but only loading components) but it was still a little heavy. 

Also, I am trying to search out JQuery snippets to do little things rather than use something that does more than I want. It just feels easier to control. I doubt I will never get to the stage of writing my own slideshow, but all the other small things I hope to cover.

It is one hell of a learning curve, however!

[arjen]

Seems you guys need something from the bird.

[Joss]

I must, at some point, sit down and learn sass. My brain seems resistant to it, for some reason.

[arjen]

I know what you're saying. What ProcessWire is to frameworks (or content management systems) is Susy to grids.

[Ivan Gretsky]

I am using sass a bit, but never tried Susy though. I think I should give it a try.

Wanted to link to some really nice interactive online presentation about building grids with sass, but did not find it. But this is probably the same, but on slideshare.

I do not have an own opinion on the best breakpont widths. But I've read, that content should determine that. If so, sass ans susy (or less equivalents) are the tools to be used. But I have an opinion on twitter bootstrap breakpoints: it certainly misses Joss' #2 and #3 (or at least one of them).

[Joss]

Yeah, Ivan - I have found that with both Foundation and Bootstrap. I have a kindle fire HD with a 7" screen and using the standard breakpoints really doesn't take advantage of the screen size (or lack of it).

And Amazon sell a LOT of them!

Content should determine breakpoints, but it is useful to have a starting point. The interesting one is with response.js - you can create tests that use height, width, pixel radio, or even a mixture (though I haven't worked out how yet).  Although the risk is that you make too much work for your self, you can set up some interesting parameters, and then use fluidity within those. 

Bends your brain, though.

[diogo]

Also, I am trying to search out JQuery snippets to do little things rather than use something that does more than I want. It just feels easier to control. I doubt I will never get to the stage of writing my own slideshow, but all the other small things I hope to cover.

It is one hell of a learning curve, however!

It's not that difficult to make your own slideshow though. I think what makes it hard to do this kind of things with jQuery is not jQuery itself, but having a good understanding of CSS. What you need to do with jQuery it's quite simple actually. Not much more than updating classes and creating the buttons. All the rest is CSS, with the trickiest part being, understanding very well the "display" and "position" properties. In the end, what I mean is, study CSS, make a lot of "trial and error" by changing the CSS properties of images in a list of images. After that, jQuery will be the easiest part.

[Joss]

It's not that difficult to make your own slideshow though. I think what makes it hard to do this kind of things with jQuery is not jQuery itself, but having a good understanding of CSS. What you need to do with jQuery it's quite simple actually. Not much more than updating classes and creating the buttons. All the rest is CSS, with the trickiest part being, understanding very well the "display" and "position" properties. In......

And that was the difficult bit!

[diogo]

[vxda]

Im using susy, its awesome tool, specialy helpful when converting basic page to responsive.
Before that i was using Foundation but custom build only grid.
And when i want site to be super responsive i dont user breakpoints i just resize browser and add media queries where needed, then u can use gulp task to clear all media queries with this plugin:
https://www.npmjs.org/package/gulp-combine-media-queries
i build http://hate.it this way (without breakpoints).
 

[OrganizedFellow]

Did you stop using pocketgird ?

Yes, but I'll be returning to it for my personal site.

I use Foundation5 when I need to get things up quickly. Great for prototyping.

[Joss]

Playing with pocketgrid is interesting. Since there is no grid system within it, you just throw percentages at it and play with blocks, that really frees up the thinking.

The media queries above are just ones I have worked out thinking about target audience - I know at some point I have to fit into that space in one way or another.

Whether I use one, none, all, or add some specific ones for one little bit, is another thing entirely. 

[OrganizedFellow]

Seems you guys need something from the bird.

How does Bird compare to Neat?

http://neat.bourbon.io/

[Adam Kiss]

I use the 'when I need it' approach – I don't have any value predetermined when I start with the design – it's little less tidy (the css is minified anyway), but the content likes it

[Manfred62]

of course there are some em's (converted from pixels) to care about in media-queries like in the first post --> the default way.

Another way: your content makes the breakpoints. Means, start from mobile size. Then slowly widen your browser. When the page starts looking ugly it's time to set a breakpoint.

[muzzer]

@Joss, my recent experience FWIW; Been playing with PocketGrid for the past couple of days also. Found it to be a very sweet little system. Redesiged an entire non-responsive site to be fully mobile-compatible (my first responsive site) in about 6 hours, including developing my own responsive menu, learning the grid (10 mins max, so simple) and converting content with new styling. To say I was impressed is an understatement.

I've tried Bootstrap, Foundation, Pure, and a pile of other grid systems in the past few weeks and kinda felt "weighted down" by them, and doing exactly what I wanted often caused more problems than it solved. This could be because I'm not fluent enough in their use - I know others rave about Foundation etc - but really, PocketGrid was so easy to use and I felt like I still had complete control of the pages. I like that

[Joss]

I like Foundation, more than I like Bootstrap, but I have ended up in the same place that brought me to ProcessWire in the first place.

With Drumlapress, I felt hogtied; I had to work the way the system wanted me to. Attempts by people like Seblod to make Joomla, for instance, more manageable, just ended up as bloat - one huge system glued on top of another huge system and I still wasn't close to what I needed.

ProcessWire was a relief because, at its most basic, it allows me to put any content I want into a page and manage it from a backend - and that is it.

Likewise, working with Pocketgrid, Simple Grid and the other minimalistic approaches means I am freed from a straightjacket - I can happily wander off and make my own mess, not wallow in someone else's.

[OrganizedFellow]

I've tried Bootstrap, Foundation, Pure, and a pile of other grid systems in the past few weeks and kinda felt "weighted down" by them, and doing exactly what I wanted often caused more problems than it solved...

I feel weighed down because I have to search for the CSS class or id just to overwrite it with my own.

Time consuming.

[renobird]

Hey Joss,

Once you switch fully to Sass (.scss syntax) it's just like CSS, but with nesting and variables. There is way more to it than that, but if you start there it's easy to switch.

After that, look into Bourbon and Neat (on mobile or I would link),

With neat you don't need grids. Just code semantically, and use media queries nested right inline. Sure, the complied CSS has a lot of media queries, but it'll get minified and maybe gzipped anyhow.

I don't use break points at all anymore, I just make adjustments to elements where the layout starts to break. So from a mobile first perspective, start widening the viewport until the layout needs to adjust, and then make an adjustment at that point. Neat makes all this super easy.

Anyhow, just my 2 cents.

[Joss]

Its down to me finding time to learn, really. The list of things to learn is getting depressingly long.....

[renobird]

Sass is one of those things that will save you tons of time in the end.  The mostly difficult part (depending on your code editor) is getting your environment all set up.

I use Sublime Text 3, so there are packages and build systems for it that can be installed in a minute or 2. Might take a little longer depending on what you use.