Responsive Breakpoints?
- Started
- Last post
- 24 Responses
- mg33
Anyone have some knowledge of responsive breakpoints and @media queries specifically for different sized monitors?
Looking for:
Large monitor - 20" +
Laptop screen - 15"
Laptop screen - 13"I'm sure this is out there somewhere but figure one of you have this handy. I'm looking at one of my sites on my wife's 13" macbook and realized I need to adjust so things for a smaller monitor.
Thanks.
- albums0
the screen size doesn't matter as much as resolution, more so even the size a user sets their browser chrome. that said, you are aware of 960.gs, bootstrap, etc. right?
it's not as much about breaks for monitors, but resolutions & possibly device targeting to load smaller images etc. to mobile devices.
imo, a site should max out with a fixed width of 990px, possibly as high as 996px but could then grow even wider using css that is also percentage based allow the site to expand to fill the remaining space (or vice versa) as needed instead of setting a break point. to me, a site should display the same on 13" - 20" monitors, then begin breaking for mobile & tablet devices.
the reasoning behind this is the display of information on a mobile vs monitor. mobile is always a list, where monitors allow column space.
design for the available hardware, not just your own.
- oh yeah http://unsemantic.co… is the responsive http://960.gsalbums
- utopian0
Supported devices
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below
Fluid columns, no fixed widths
Phones 480px and below
Fluid columns, no fixed widths
- mg330
Good tips. On my photo site, the largest size my photos display are at 1280px wide. www.michaelgallegly.com
Right now the max width for the content area is 1280px. But it also has a total margin of 10%, so even on my 15" MBP the width scales down as the window gets smaller. Just noticing on this 13" however that the 10% margin doesn't allow the photos to display fully from top to bottom.
So, I guess I'm thinking that knowing the resolution that corresponds to a smaller laptop screen, I can add additional media queries for those resolutions. The theme has standard breakpoints for computer, tablet, and mobile phone, which I've already tweaked as needed.
- mg330
Utopian - thanks for the bootstrap links. I started learning bootstrap a few months ago and started working on a basic WP theme to just kind of get my feet wet. The theme I use may actually be built using bootstrap; I've just not looked in enough detail to see if they used that. The theme is from www.graphpaperpress.com - great group and really nice themes. Been using them for a while.
As much as I'd love to start building themes from scratch, I just don't have a need for it right now. That sort of thing is really fun though; I had a great time doing some basics and a lot of it made sense really quickly.
- If you build it leveraging bootstrap you will not have an issue with any breakpoints and or screen sizes/resolution.utopian
- utopian0
I just started working on my new folio site using a responsive isotope. I will probably finished around Thanksgiving with my schedule.
- Keep us posted!mg33
- responsive isotope seems buggy to me. http://isotope.metaf…albums
- albums0
it might be too late to read all this, but it might bear something useful, i don't know.
http://blogs.msdn.com/b/b8/archi…
- mg330
^ I love good isotope examples. A previous coworker and I were going to design/build a really awesome internal portal using isotope to sort all our client sites by different criteria. Would have been cool. Then no more job for me. Not sad in the slightest.
- utopian0
Keeping your grid "simple" is the most effective way to perfectly executing your design.
- mg330
utopian,
You're talking pure bootstrap, right? I was using Twitter Bootstrap, and it's funny to find this article on it:
http://css.dzone.com/articles/pl…I should delve into the bootstrap stuff you linked to a bit. I don't have immediate needs right now, but it'd be nice for some stuff I'm wireframing right now to have an idea of how to approach a bootstrap/WP build from scratch.
- I'm not sure what you are referring to as "Twitter Bootstrap"?utopian
- https://dev.twitter.…albums
- I think I'm specifically referring to a particular theme/style that was called "Twitter Bootstrap."mg33
- Dumb question... is it all "bootstrap?" because the stuff I was using frequently used "Twitter" all of the place.mg33
- I didn't realize that Twitter developed and created Boot Strap.utopian
- mg330
I'm so confused now...
This is an example I was learning from: http://getbootstrap.com/examples…
But I feel like that was branded rather heavily around the word Twitter back in April/May. Am I nuts or just slightly confusing a few things?
- does this put you at ease? http://bootstrapdocs…albums
- Yep. Thanks.mg33
- meffid0
Came across this last night - probably useful for you.
- meffid0
Also - what's the point of responsive if you're going to set 800 break points?
You need:
Mobile, Tablet, Desktop. And you only really need those for font and buttons sizing.
- albums0
read this:
http://designshack.net/articles/…
- mg330
^ I agree completely. I think this might just be a case of me possibly using images that are too large, and needing to make an adjustment when a resolution isn't massive.
Maybe I'm over thinking it a bit, but I just want to ensure that the full height of individual photos can be seen in a smaller browser window. On my 15" MBP at max resolution, and my 27" display, it's not a problem. But this 13" is at 1280 x 800, so I think I just need to increase the margins at smaller resolutions. That will size the photos down appropriately.
- http://www.qbn.com/t…albums
- I should look into that. Each photo page averages around 8 - 10 MB.mg33
- albums0
also A List Apart article on the birth of bootstrap to better acquaint you with the whys and wherefores.
http://alistapart.com/article/bu…