Something New and Awesome on Smashing Magazine Layout

So far I never realized that there was something interesting on the new design of Smashing Magazine. I had been using a Netbook to see that page, so all this time I have never seen it :p
Something unique, when you try to zoom out the browser resolution...

On it's normal size, the Smashing layout displays it's navigation on the left side as a sidebar, while the current layout is minimized, the navigation move away to the top! I think this is something pretty rare (maybe), whatever, for me this is something very funny and cool.

View Demo on JSFiddle

At first, I thought it was quite difficult to make that until I tried to think the mobile first. This layout is a bit different with the original, but at least this is enough to explain something that makes me curious, about how they picked up the navigation menu that was originally located on the side as a sidebar to the top and turn into a header.

1. The First Thing You Should Know

The first thing you should know is that I put the sidebar earlier than the article. And to make sure that everything are on the right position, I use float:right for the sidebar and float:left for the nav and the main content:

<div id="page-wrap">

    <nav id="nav-group">
        <ul id="nav">
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Comments</a></li>
        </ul>

        <ul id="share">
            <li><a href="#"><img src="blogger.png" alt="icon" /></a></li>
            <li><a href="#"><img src="facebook.png" alt="icon" /></a></li>
            <li><a href="#"><img src="twitter.png" alt="icon" /></a></li>
            <li><a href="#"><img src="rss.png" alt="icon" /></a></li>
        </ul>
    </nav>

    <aside id="sidebar"> ... </aside>

    <div id="main"> ... </div>

</div>

2. Give a Fixed Width on Page Wrap at First

There is a problem when you try to use a percentage unit. When the screen width was too large, it usually makes the page appearance looks too wide and could not be read comfortably. The best solution is by limiting the page maximum width. So, when the width of the screen have exceeded the maximum width of the page, the page will stop growing and stay with it's own width.

Some people use max-width for their pages. So, if the the screen width has reached the page maximum point, then the page will stop growing. But I usually set a fixed width on the page at first, then I will set it's media query with command: "When the screen width is equal/smaller than the page width, set the page width to 100%":

#page-wrap {
  width:1024px;
}

/* When the screen width = the width of #page-wrap, set the #page-wrap to 100% */
/* it will destroy the fixed width of #page-wrap that was written previously */ 
@media screen and (max-width:1024px) {
  #page-wrap {
    width:100%;
  }
}

3. Smaller Screen :: 1024

When the screen width is equal/smaller than 1024 pixels, move up the #nav-group and set the navigation as horizontal menu:

@media screen and (max-width:1024px) {
  #nav-group {
    display:block;
    clear:both;
    float:none;
    width:auto;
    height:50px;
    overflow:hidden;
  }

  #nav {float:left;}

  #nav li {
    float:left;
    display:inline;
  }

  #nav li a {
    padding:10px 15px 0px;
    height:40px;
  }

  #share {
    float:right;
    margin:10px 20px 10px 0px;
  }

  /* Set back the #main and #sidebar width. Because now, the layout change to 2 column layout */
  #main    {width:54%;}
  #sidebar {width:34%;}
}

4. Smaller than Smaller Screen :: 750

When the screen width is equal/smaller than 750 pixels, set the #main and #sidebar as block element!

@media screen and (max-width:750px) {     
  #main, #sidebar {
    float:none;
    display:block;
    width:auto;
  }

  #nav li.current a {background-color:#bbb;} /* Change the current nav background color to sidebar background color */
}

5. The Last...

Never use a fixed width for the grid inside #page-wrap, except for the small thing such like icons or something that doesn't need any maximum width.

View Demo on JSFiddle - Again