Needing help with getting mediaqueries right for this responsive and fluid design

sophieschoice · October 15, 2013, 5:21pm

Hi all

I have created this very basic fluid webpage layout, which features a header section, navigation, sidebar, content section and footer. I also want to make this one responsive, so it will work everywhere. As it is fluid, not much elements will need changing, only on small screens the sidebar needs to be pushed below the content. I have gotten that to work with a screensize of 320x480 and 360x640px (I checked this with Firefox own developer toolkit). Only when I change at these screen sizes from portrait to landscape mode, that mediaquery doesn’t seem to work, as in landscape mode the sidebare isn’t pushed below the content. Did I get my breaking points somehow wrong, or didn’t I understood correctly how mediaqueries work? Is what I want even possible to do?

My HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Title of the document</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="page">
	Dit is de wrapper
	<div id="header">Dit is de header</div><!-- einde header -->
	<div id="nav">Dit is het menu</div><!-- einde nav -->
	
			
			<div id="content">	
			<h1>Achieve sentience with Skynet! <a href="">Read more &raquo;</a></h1>
			<p>Dit is de content!</p>
			</div><!-- einde content-->		
			<div id="sidebar">Dit is de sidebar!</div>
	
	<div id="footer">Dit is de footer
	</div><!-- einde footer -->
</div><!-- einde page -->
<!-- einde-->
</body>
</hmtl>

My CSS code:

/* reset stylesheet door Eric Meyer, maak alle browsers gelijk */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*typography*/

body{
	background-color:#DCDBD9;
	color:#2c2c2c;
	font: normal 100% Arial, Georgia, serif;} /* font size is 16px */


h1{
	font-size: 1.5em; /* 24px delen door 16px */
	font-style: italic;
	font-weight: normal;
}

h1 a{
	font: bold 0.458333333333333em Arial, sans-serif; /* font size is 11px delen 24px */
	color:#747474;
	letter-spacing: 0,15em;
	text-transform: uppercase;
	text-decoration: none;
}

/*Layout structure*/
#page{
	background-color:#000000;
	width:90%; /* we gaan uit van een breedte van 1024px */
	margin: 0 auto;
}

#header{
	background:#ddd;
	width:100%;  /*volledige breedte van page benutten */
}
#nav{
	background:#c99;
	width:100%; /* volledige breedte van page benutten */
}
#sidebar{
	background:#c9c;
	width:20%;
	float:left;
}
#content{
	background:#9c9;
	width: 80%;
	float: right;
}
#footer{
	background:#cc9;
	clear:both;
	width:100%; /*volledige breedte van page benutten */
}

/* Responsive mediaqueries */

/* Disable iOS/WinMobile font size changes */
@media screen and (max-width: 600px),
screen and (max-device-width: 480px) {
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
}

/* Smartphones (landscape) */
@media only screen and (max-width : 480px) and (orientation : portrait){	

#sidebar{
	background:#c9c;
	width:100%;
	clear: both;
}

#content{
	background:#9c9;
	width: 100%;
	clear:both;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width:  :640px) and (orientation : landscape) {	

#sidebar{
	background:#c9c;
	width:100%;
	clear: both;
}
#content{
	background:#9c9;
	width: 100%;
	clear:both;
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

#sidebar{
	background:#c9c;
	width:100%;
	clear: both;
}
#content{
	background:#9c9;
	width: 100%;
	clear:both;
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

#sidebar{
	background:#c9c;
	width:100%;
	clear: both;
}
#content{
	background:#9c9;
	width: 100%;
	clear:both;
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

#sidebar{
	background:#c9c;
	width:100%;
	clear: both;
}
#content{
	background:#9c9;
	width: 100%;
	clear:both;
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

Where did I get it wrong with my CSS? I am trying to get this one right and learn from this

ralphm · October 15, 2013, 11:26pm

A couple of things …

Firstly, you are chasing a lot of screen sizes there, which isn’t a good idea. There are so many screen sizes that it’s a losing battle to chase them all down. A better approach is to look at the layout and decide at which point it’s better to have a single column and leave it at that. E.g.

@media only screen and (max-width:640px)  {	

    #sidebar{
	background:#c9c;
	width:100%; 
	clear: both;
    }
    #content{
	background:#9c9;
	width: 100%; 
	clear:both;
    }
}

Better still, use ems rather than pixels. I.e.

@media only screen and (max-width: 40em)  {	

}

Anyhow, other than that, you have errors in your CSS. Make sure to close off your media queries. You have lots of instances of the opening { without the closing one. E.g. you have this:

@media only screen and (max-width: 640px)  {

instead of this:

@media only screen and (max-width: 640px)  {	

[COLOR="#FF0000"]}[/COLOR]

Also, there are other errors, such as this:

(max-width:  [COLOR="#FF0000"]:[/COLOR]640px)

PaulOB · October 16, 2013, 9:08am

Hi,

I agree with Ralph and you are chasing too many devices and orientations. You would only need to do that if you have a fixed width design but a fluid design will fill in all the gaps and naturally fit the devices.

You can usually forget about devices and just target the viewport width for all devices (desktops and mobile) which also makes testing easier as you just close the browser window (although you do of course eventually need to test the real device to be sure).

I would have issues with your 20% left column though as that is certain to be too small for any usable content especially as the screen narrows. I would usually go for a fixed width side column and allow the main column just to fill the available space (not a percentage width as such).

sophieschoice · October 16, 2013, 10:57am

Hi Ralph,

Thank you for the feedback :). And indeed, the errors in my CSS prevented it from working. Fixed those, and it works now! I indeed target a lot of screen sizes, but this was just for me to learn and understand the mediaqueries. If I am expanding this basic lay-out to a real design for a webpage or website, most of the mediaqueries will be not needed. Only the real breakpoints for the website will be used

Using ems instead of pixels is very interesting. Is that considered the best way to do it? And why would it be better? I understand using ems for a fluid lay-out, but not quite for mediaqueries?

Hi Paul,

I appreciate your concern regarding my sidebar. But I would only use it for subnavigation purposes, and that’s why I place it under the content section on smaller screens. My own concern is that if I want to keep the subnavigation alongside the content on smaller screens, especially in portrait mode, there wouldn’t be much space for the content column. The sidebar would easily be a width of 140px… Or is this me overthinking it and not thinking creatively?

ralphm · October 16, 2013, 11:40am

It’s not quite the nrom yet, but I think it will be in time, as it has a lot of advantages. Here is a great article that can spell it out better than I can:

http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Basically, tying anything to pixels (other than perhaps a thin border) isn’t such a good idea. I’m really getting into ems.

PaulOB · October 16, 2013, 11:50am

Hi,

You can still move the sidebar even if its a fixed width and you move it when the design requires that it needs to be moved. If you want one column at 960px width (ipad width) then its fine to lose the side column at that width if that is the design you want.

The missing ingredient for your tests is one of “content”. Without content you are in effect working backwards to a solution. Start with the content and then design around the content and not the reveres (although in practice you do have to keep an eye on both the design and the content but ultimately it will be the content that tells you how your design needs to be).

For example if your left column contains only simple text that can wrap to very small then a small percentage column is fine. However, if you have images, adverts, widgets of fixed width in that side column then its better off as a fixed width and then move it out of the way on smaller screens.

Using ems instead of pixels is very interesting. Is that considered the best way to do it? And why would it be better? I understand using ems for a fluid lay-out, but not quite for mediaqueries?

You can read here about the benefits of using ems for the media queries. Though to be honest I still mostly use pixel queries as its easier to set the right breakpoints in a fluid design but I understand the benefits of ems although as mentioned in the article a browser refresh is needed (in some browsers) when the layout is zoomed to activate the new em size which I don’t believe any normal users will do.

Edit:

Ralph beat me to it.

sophieschoice · October 20, 2013, 9:10am

Paul_O_B:

Hi,

You can still move the sidebar even if its a fixed width and you move it when the design requires that it needs to be moved. If you want one column at 960px width (ipad width) then its fine to lose the side column at that width if that is the design you want.

The missing ingredient for your tests is one of “content”. Without content you are in effect working backwards to a solution. Start with the content and then design around the content and not the reveres (although in practice you do have to keep an eye on both the design and the content but ultimately it will be the content that tells you how your design needs to be).

For example if your left column contains only simple text that can wrap to very small then a small percentage column is fine. However, if you have images, adverts, widgets of fixed width in that side column then its better off as a fixed width and then move it out of the way on smaller screens.

Ah, I understand. For fixed width media it is indeed better to make a fixed width column.

And yes, the ingredient ‘content’ is very important and that should be the starting point. I found out during testing and experimenting that content in a two-column design on a big resolution (iMac screens for example) is a pain in the ass to read (because the content column is too big which leads to too long lines of text etc.) Back to the sketching board until the content works well everywhere, and get the design going from there.

:p:D

sophieschoice · October 20, 2013, 12:13pm

What would be the best width for a content column, so reading is also comfortable at wide/large screens? 60em?

PaulOB · October 20, 2013, 2:58pm

This article goes into depth on the subject and should help

sophieschoice · October 20, 2013, 6:01pm

Thank you, Paul! A really interesting article, thanks for sharing! But with all I have read now, including other articles, I am just a bit confused to how correctly to approach the skeleton of my website. I need the design to achieve the following:

layout with only content area
lay-out with left sidebar and content area
the text in the content area needs to be comfortable to read (around 12 words) on wide/large screens with both lay-outs

But how to achieve that? I am thinking one of the solutions here (http://www.markupframework.org/demos/layouts/) could work for me, but since the one column and three column designs have different max-widths, my design is not going to be consistent I am afraid…

Argh, so much to think about!!

PaulOB · October 20, 2013, 9:32pm

Responsive design does give you a lot more to think about but you shouldn’t try to make the design the same at all widths. There’s no problem in changing the actual design as long as the theme is consistent. Smaller viewports require a different approach to large viewports but you maintain the continuity with your design elements.

By all means use a template to test out how things will look but in the end you will learn more by doing it yourself and trying out ideas along the way. There is no one right answer and as I mentioned before it largely depends on your content so there is a bit of a process of trial and error at first to see what works and what doesn’t for the content concerned.

system · October 8, 2014, 5:02am