SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast sophieschoice's Avatar
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    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:

    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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    @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.

    Code:
    @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:

    Code:
    @media only screen and (max-width: 640px)  {
    instead of this:

    Code:
    @media only screen and (max-width: 640px)  {	
    
    }
    Also, there are other errors, such as this:

    Code:
    (max-width:  :640px)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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).

  4. #4
    SitePoint Enthusiast sophieschoice's Avatar
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

    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.
    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?

    Quote Originally Posted by Paul O'B View Post
    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).
    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?

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by sophieschoice View Post
    Using ems instead of pixels is very interesting. Is that considered the best way to do it? And why would it be better?
    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-ha...a-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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sophieschoice View Post
    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?
    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.

  7. #7
    SitePoint Enthusiast sophieschoice's Avatar
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.


  8. #8
    SitePoint Enthusiast sophieschoice's Avatar
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What would be the best width for a content column, so reading is also comfortable at wide/large screens? 60em?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sophieschoice View Post
    What would be the best width for a content column, so reading is also comfortable at wide/large screens? 60em?
    This article goes into depth on the subject and should help

  10. #10
    SitePoint Enthusiast sophieschoice's Avatar
    Join Date
    Mar 2009
    Location
    Belgium
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    This article goes into depth on the subject and should help
    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!!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by sophieschoice View Post

    Argh, so much to think about!!

    ... my design is not going to be consistent I am afraid...
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •