[adrenalinfeed]

Anybody been experimenting enough with responsive layouts to give a tip about the number of breakpoints to use, and where to set them to cover the spectre of screens in a good/optimal way?

Thanks in advance for any answer.

[Wickham]

Small-screen devices are typically 160px, 240px, 320px, 480px wide resolution so I break at 480px.

I don't know whether that's correct or whether it's what others do.

I'm probably not doing it properly, but it seems to do what I want. I've adapted this tutorial:-
http://kyleschaeffer...-media-queries/

I've set the media queries to max-width: 480px and if viewports are 480px or less all horizontal lists are converted to vertical, all table td cells become vertical, all fixed widths become 100% so eveything including images squeeze up so you only have to scroll vertically.

Outside the media queries style, if a viewport is more than 480px the main wrap div has max-width: 1000px; min-width: 481px; but inside that I still have a fixed width for some content elements (like a sidebar 160px) to stop them becoming too narrow, although images are still width: 100%; and the section element has a margin-left: 160px but no width so it can expand between 480px and 1000px including margin. However, I do have some content elements with a fixed width so someone with a 600px wide viewport will see an image 600px wide but will have to scroll some content elements. I don't believe that many people have a width resolution between 480px and 1000px nowadays although someone may have reduced the window width.

Typical main styles:-

#wrap { 
	width: 100%;   
	margin: 0 auto; 
	max-width: 1000px;
	min-width: 481px; 
}

nav { 
	position: fixed; /*causes overlap in small windows less than about 950px: 160+770+scrollbar wide when scrolling but nav is on top. 770px is the fixed width of one of my content divs*/  
	top: 40px; 
	width: 150px;  /*total 160px including 2*5px padding*/
	border-radius: 10px; 
	background-color: #000000; 
	padding: 0px 5px 0 5px; 
	z-index : 5;
}

section {  
	margin-left: 160px; 
}

/*Many small screen devices have resolutions up to 480px, typically 160px, 240px, 320px, 480px.*/

@media screen and (max-width: 480px) {
	#wrap {
	width: 100%; 
	min-width: 0;  
	}
	nav { position: relative; 
	top: -5px;
	width: auto;
	float: none;
	}
	section {
	margin-left: 0; 
	}
}

img { 
	border: none; 
	display: block; 
	max-width: 100%;/*part of Responsive Layout*/
	margin: 10px auto; 
	border-radius: 10px; /* ? old Opera versions only applies to a container and image will show square through it*/	
}

Please tell me if this doesn't work (but it seems to do what I want).

This post has been edited by Wickham: 31 January 2012 - 07:29 AM

[adrenalinfeed]

480 sounds like a good idea to fit those ones. I am wondering about how to implement ads for mobile devices into this though. Possibly another break point at 320/321? Google/Facebook seems to be aiming for this format on mobile, as I´ve understood it.

One of my personal best findings so far, is to have a break point at 980 (@media screen and (max-width: 980px)). This makes you get one version of the site on horizontal iPad version, and another on the vertical one.

[Wickham]

adrenalinfeed, on 31 January 2012 - 07:15 AM, said:

One of my personal best findings so far, is to have a break point at 980 (@media screen and (max-width: 980px)). This makes you get one version of the site on horizontal iPad version, and another on the vertical one.

Good idea, but I've got max-width: 1000px; for my wrap div outside the media queries, so that's covered.

[BlueDreamer]

Don't forget that Android devices between them have over 500 different screen widths so by using fixed breakpoints you can't guarantee that everyone will be free from sideways scolling. Much better to use % widths.

[porkchops]

I'd use:

<320px for portrait iPhone
480px for landscape iPhone
768px for portrait iPad
1024px for desktop/landscape iPad
1200px for larger screens
>1600-1800px for really large screens (24-30" & 1080p TVs)

People always forget to scale upwards, too.

Also, you should still be using fixed percentages for layout. The only reason you have break points is to remove or reposition page elements that don't make sense for the device you are using. You can handle all the android screen size nonsense with percentage or fluid width coding.

If you only change the layout at certain break points and don't fluidly scale content and images you are using Adaptive Web Design instead (which sometimes is most appropriate).

This post has been edited by porkchops: 31 January 2012 - 08:59 PM

[adrenalinfeed]

A lot of good points here. The Android units coming along like a meteor swarm is definetly a challenge.

I still think some combination between responsive (if we talk about responsive as in percentage) and adaptive (if we talk about fixed sizes here) is overall the best combination I´ve seen so far. Mainly because the usage of videos and image elements are quite hard to implement in a percentage given layout in a lot of cases.

Btw, came over a sweet showcase site on responsive layouts.

[adrenalinfeed]

Hopefully we will get to play around a bit more with responsive images in the future as well.

[Renaissance-Design]

porkchops, on 31 January 2012 - 08:58 PM, said:

People always forget to scale upwards, too.

True. I like what Nick La did with Web Designer Wall's menu @ over 1280px.

porkchops, on 31 January 2012 - 08:58 PM, said:

Also, you should still be using fixed percentages for layout. The only reason you have break points is to remove or reposition page elements that don't make sense for the device you are using.

I'd disagree with that, slightly. Another use case, related to but still a separate issue from the context of screen size, is to maintain a comfortable measure. I'd be tempted to play with breakpoints and text sizing to keep things readable.

This post has been edited by Renaissance-Design: 02 February 2012 - 05:00 PM

[porkchops]

Renaissance-Design, on 02 February 2012 - 04:59 PM, said:

...I'd disagree with that, slightly. Another use case, related to but still a separate issue from the context of screen size, is to maintain a comfortable measure. I'd be tempted to play with breakpoints and text sizing to keep things readable.

Fair enough. I suppose I was thinking you could scale the text size and images at an equal, linear rate to keep the meter the same at all sizes, but adding specific breakpoints for meter is an interesting way to approach it.

[Renaissance-Design]

porkchops, on 02 February 2012 - 07:14 PM, said:

Fair enough. I suppose I was thinking you could scale the text size and images at an equal, linear rate to keep the meter the same at all sizes, but adding specific breakpoints for meter is an interesting way to approach it.

It's something I've been thinking about a lot since Mark Boulton started preaching content-out rather than device-in when formulating grids. I think it makes a lot of sense.

This post has been edited by Renaissance-Design: 02 February 2012 - 08:56 PM