Try Tuts+ Premium, Get Cash Back!
Building a Responsive Layout With Skeleton: Starting Out
videos

Building a Responsive Layout With Skeleton: Starting Out

on Mar 12th 2012 with 94 comments
Tutorial Details
  • Topic: Responsive Web Design
  • Difficulty: Intermediate
  • Screencast duration: 36 mins
Download Source Files
Demo View It Online
This entry is part 2 of 8 in the series Building a Responsive Layout With Skeleton

Building a Responsive Layout With Skeleton

Dave Gamache’s Skeleton Boilerplate provides the perfect foundations upon which to build responsive websites rapidly and reliably. We’re going to use Skeleton and build a responsive page based on the Magazine design featured on Webdesigntuts+ recently. We’ll be looking at everything from multiple background images, through to media queries, flexible media and mobile-friendly navigation. Let’s get started!

First Steps

In this first video we’ll download the Skeleton Boilerplate and prepare our project. We’ll dive into the .psd layout and take whichever images we deem necessary, creating a sprite file for bits and bobs like the logos.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Structure and Columns

It’s time to get stuck into the markup and some styling. In this video we’ll examine the structure of our design and translate that into HTML using Skeleton’s markup. We’ll use the grid system supplied by the boilerplate and set out some of the columns in our page.

We’ll also deal with some of the aesthetics by using CSS multiple background images on certain areas.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Multiple Background Images

Browser support for multiple background images is pretty good, with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all cooperating nicely.

Unfortunately, non-supporting browsers won’t understand the rules and therefore won’t display anything at all. It’s therefore advisable to use a suitable fallback, for example by implementing Modernizr and declaring an additional background rule specifically for offending browsers. Skeleton approaches this by using conditional comments on the <html> tag; if viewed in Internet Explorer 8 or earlier then it will be assigned the class “ie”. You can therefore target those browsers specifically by using something like this:

/*ie multiple background image fallbacks*/
.ie .band.navigation {
	background: url(../images/bg_dark.png) repeat left 2px #343434;
}
.ie .band.footer {
	background: url(../images/bg_dark.png) repeat left 2px #343434;
}
.ie .band.bottom {
	background: url(../images/bg_bottom.png) repeat #343434;
}

Additional Resources

Here are a few bits and bobs mentioned in the videos so far:

Series Navigation<< Design a Professional Blog Layout in PhotoshopBuilding a Responsive Layout With Skeleton: Navigation >>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Antony

    Great video series, have been looking forward to something like this for a while. Thanks Ian.

  • supprof

    thank you very mutch
    good tutorial

  • http://www.annukka.info Annukka

    Thank you, I have also been waiting for something like this!

  • http://varemenos.com/ Varemenos

    Is there a 1140 gs version of Skeleton?

  • http://umbraprojekt.pl mingos

    Thanks for the article, Ian. After a comment under my design’s workshop recommending this framework, I was eager to get started with it. You’ve just done the homework for me :).

    • http://www.snaptin.com Ian Yates
      Author

      Good to hear! I hope you enjoy the rest of the series :)

  • Rob

    Looks great :)

    I was busy the last few weeks, more precisely with Responsive Web design and all sorts of possible grids. Ethan Marcotte http://ethanmarcotte.com/ who coined the term. let the browser window choose how the page is visible for the User. The approach is a fluid grid he calculates with the formula target / context = result. This one http://goldengridsystem.com/ for example is build upon this formula.

    Personally, I find it very difficult to fit the Screen width with the design to look good, especially when the resolution is very high, the sites only seem big and bloated. Also hard to decide how to possibly rearrange the content elements for a WordPress Blog propably to look good on als sorts of higher resolutions too. I wonder if someone here has earned positive experience with those, willing to share.

    • http://www.snaptin.com Ian Yates
      Author

      All good points and we’ll be covering many of them later in the series. Saying that, Skeleton does take a lot of the decision making out of your hands in terms of layout :)

  • Robert Smith

    Great tutorial. Waiting to watch the next one.

    Thanks!

  • Paul

    Thank you for this tutorial !

  • http://gonzoblog.nl Gonzo the Great

    Hi Ian,

    .. it seems nowadays everything is called responsive? As you probably know, for a website to call itself responsive there are 3 features needed, these 3 key technical features are the heart of every responsive Web design:

    Media queries and media query listeners, a flexible grid-based layout that uses relative sizing AND flexible images and media, through dynamic resizing or CSS.

    I’m missing the last feature in this tut, so fairly enough, this tutorial is how to make a website adaptive or mobile friendly, .. but in NO way responsive!

    • http://www.snaptin.com Ian Yates
      Author

      Hey Gonzo the Great – thanks for your comment (and why do I get the feeling this is going to launch a large thread of semantic discussion?!)

      I fully see where you’re coming from, but I’m not a subscriber to your definition of responsive. You’ve latched onto what Ethan Marcotte defined as Responsive Web Design, which is fair enough, but I think the term has developed a bit since. These days I feel we should all be more open to what RWD means, instead of making it reliant on the technical aspects you listed.

      Even Jeffrey Zeldman has since realigned their position, saying that RWD really covers any means of achieving resolution independence.

      I quote:

      “Our understanding of ‘responsive design’ should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device.”

      So, without wanting to kick up a storm (or do I?) I disagree that this tutorial is “in NO way responsive”!

    • http://amitmojumder.net amit mojumder

      Hey Gonzo the Great
      Thanks for your provocative comment.

      According to your definition of RWD, the last feature is missing in this tutorial— well said…. first of all its a series and this is the 2nd part, we havent gone there yet to set a dynamic re sizing of the images or media. This is just the starting, so i think you should mention this at the last installment of this series if the author (i donno yet) has missed this point.

      Well the way people are calling or trying to define RWD, is absurd in some point. Cause, we are familiar with a 100% fluid layout system. So according to your definition, every website must expand 100% to the view port of any device, which means you are in big trouble to manage large scale blog or websites. Cz if all the elements block or layout starts to stretch to the viewport of the device there will be definitely composition problem. A website looks great in certain widths. So if i design for 1920×1020 monitor, my layout structure is still a fixed width, which is at best 1140 px. Now my question is why 1140 px ???????? it should be 1920 px or 1900 px wide. isnt it?

      Thanks a lot :)

  • http://gonzoblog.nl Gonzo the Great

    Hi Ian,

    First of all, thanks for your reply, cheers!

    This could easily evolve into a ‘semantic’ discussion, I too agree with that! But by ‘streching’ a definition to everything what adapts to the resolution of the device its seen on, doesn’t mean it’s automatically responsive. Why? Because there is a solid defintion what responsive web design is .. a site with flexible images & grids and media queries.

    That’s why I called this website (from this tutorial and BTW every other website made with Skeleton) adaptive or mobile-friendly. Adaptive and mobile friendly websites also adapt (somehow) to the resolution, but it’s done without one or more features that define ‘RWD’ (as brought into the world by Ethan Marcotte).

    Okay, fluid design isn’t new .. back in the early days of internet we all were making fluid designs, we didn’t call it responsive back then too. Why? Because with HTML5 (especially media queries) and flexible grids and images a new ‘approach’ to web design was made possible, .. yep, it’s all about those 3 features again.

    Maybe I can explain my point better by asking you if you think Masonry is also respsonsive web design? It adapts to the resolution, but doesn’t use media-queries, has no fluid images or text and the grid ain’t flexible too (fixed widths). Is Flash (with width 100%) also responsive web design, cause it too adapts to the screen width/iframe or div its embedded in? How broad do you want to go with the definition?

    There is a good definition of what responsive web design implements and with which (3) features it comes, why should we bend that? This way a ‘definition’ isn’t worth much, don’t you think? But anthows, maybe it’s time to introduce ‘adaptive’ web design as an definition:

    “Adaptive Web Design is everything that isn’t responsive” ;-P

    So, .. let the discussion begin, very interested to find out what other readers think about this? Cheers & Ciao ..

    P.S.: It’s not the first time I disagree with Zeldman BTW ;-P

    • Rob

      The definition of RWD by Ethan Marcotte sounds desirable. But putting it apparently also very complicated, because I do not see many of these designs out there to convince me completely. Btw pretty nice Blog Design you’ve got, maybe willing to share some information :)?

      • http://gonzoblog.nl Gonzo the Great

        Hi @Rob,

        Thanks for your kind words about my blog .., appreciated!

        Maybe one day I will explain a bit more how I made my blog responsive, who knows? But responsive design is often a ‘trail and error’ concept, meaning experimenting with codes. And also, there are loads of great articles out there to get you started (just the way I did, and the simplest way to begin something is to start with it ;-P)

        But it’s all about content management and using the different techniques to make your grid and images fluid (without using JavaScript) and picking my breakpoints (media queries) strategically.

        Cheers & Ciao ..

        • Rob

          Hi Gonzo,

          Thanks for your Reply. I have to agree, learning by doing is propably the best way to achieve promising results in any way :)

          I guess Media Queries is worth looking for some insperation on this Topic.

          • http://gonzoblog.nl Gonzo the Great

            Hi @Rob,

            Mediaqueri.es is a great website, and not only for inspiration! Check the codes of the websites showcased on this site, I bet you can learn more there too ;-P

            This is how I learned it, and still am learning BTW ;-P Good luck with you ‘responsive expedition’, I hope you’ll love it as much as I do! Cheers & Ciao ..

    • http://introworks.net Jeremy

      I would have to agree with Gonzo—I tried the demo before reading the comments btw. My first thought was “hey, this isn’t responsive, it’s adaptive.” I find that distinguishing between the two terms is valuable especially as it pertains to defining the goals of a project and helping clients understand how their site will function when it’s complete. Semantics aside, excellent tutorial and thank you.

      • wendydalesmith

        Stating that using “flexible images, grids and media queries is the only way to define responsive design” is ultimately limiting and detracting from the point of what it means to be responsive (the “spirit” of responsive design, if you will). A responsive design should respond AND adapt to ALL user agents successfully (or at least give it the old college try).

        Defining “successful” here is the sticking point. Falling back to a technical definition is too easy. What about screen readers? What about older browsers? What about accessibility in general? There is a very fine line between the concepts of RWD and Progressive Enhancement. I would say they are inseparable. You cannot consider one without the other. That being said, if the UI works well with a user agent and/or viewing environment and it does NOT require image flexibility (which, I’ll admit, is an improbable feat) then it is STILL responsive.

  • parallel

    Thanks for the tutorial!! Great explanation!!

    Wondering if the responsive technique can be applied to all kinds of layout?

    For example, a parallax layout or fullscreen layout ?

  • dj

    @ian… as you know I’ve never missed an appropriate opportunity to nag in my comments on Envato’s sites about making tut’s which drop the silly “one-size-fits-all” 960 approach. So, I was excited to see the title of this post and eagerly punched the “view it online” button; only, to be crushed by still seeing 5-6 INCHES of wasted white space ON BOTH SIDES of my screen! In my opinion, you cannot even call a design responsive until it accommodates the standard wide-screen format monitor – the highest selling monitor type.

    True – the design did have a couple of break-points, and it did even alter the menu at one of them; but, to me the thing looks better on a mobile device than it does on my desktop. Admittedly, a small annoyance expressed in at little comment a couple of years ago has heightened my awareness to the point that I now notice and become disgusted when I see approaching 25% or greater wasted space on my monitor.

    Monitors were once square and we programmed for them. Then they became large and for the most part developers decided to just ignore them completely – “they can make due” “they don’t have to browse the web in full-screen mode.” Then, mobile devices came out and within only a couple years developers began nearly tying themselves in knots to accommodate them. Now it looks as the don’t even design for desktops – laptops and notebooks seem to get the “full” design and we feed desktops merely wasted views of the background texture!

    Is there truly NOTHING that anyone can think might benefit from being “above-the-fold” when there is room to do so? Are we truly so flush with space for content that we can’t use ALL or most of it? Do we think that, if given an actual choice, clients would choose us to waste 25 or up to 35% of above the fold real-estate? Personally, I hate the premise to “begin from phones and progress outward” if it means stopping at notebooks!

    I am truly curious. Why did you (or does anyone) stop at notebook size and call it a day? The links posted by rob cssgrid seems like they deserve another bump. His comment about difficulties in making it look good (“higher resolutions” I assume he means wider screens) is understandable because it seems that so far most people just want to ignore the issue and that’s what we’ve been used to. However, try Chris Coyier’s site as an example of what I’m talking about. It’s just that so far, Chris seems to be the exception rather than the rule.

    • http://firebugging.wordpress.com alexandra

      it’s a nice point you’re making, dj. there is so much interest in mobile and hardly any in large screens.

      but from a user’s point of view, i would chose to check my fav websites on my mobile phone (maybe on my way to work or running errands) and when i would get home, i would prefer to watch movies or play games on a big resolution screen. so i think that’s why we’re more and more interested in mobile, because there is a need and a market for it.

  • dj

    @ian… was miffed when it initially looked like you were snubbing < IE9, but then saw the writeup and need to give appreciation for specifically making the effort to provide a polyfill.

    However, I wouldn't be me if I didn't ask why a design which ignored the most common desktop sizes (i.e. wide screen layout) would be called "responsive." The design in the demo actually looks good to me on everything from phones to to notepads.

    Screens used to be square and we programmed for them. Then, prices came down and the screens became wide; but, nearly everyone just preferred to ignore the extra space. Now, we've got phones and notebooks etc and we make extraordinary efforts to accommodate them. Is there nothing else that we can think of which would benefit from being "above the fold"? Do we really think that desktop users prefer to look at our background pattern on 30% of their screens over content?

    I would have liked to see the page developed using a framework which supports a "real" desktop size breakpoint – but, at least it's not that insane 960! [Just a thought - why don't you next take the same site through a series of "Making it in WordPress" tut's, so we can get a much better idea of the differences in difficulty, etc.? Oops, I realize to do that in Envato's scheme of things you'd need to do a guest post over on WPtuts. Why not?]

    • dj

      Sorry guys… after posting the first, I received no “posted” feedback and several refreshes over 10 minutes still didn’t show that the first post had actually been received/accepted – now after posting this second one the lengthy first one appeared, go figure. Don’t know what happened.

      • http://www.snaptin.com Ian Yates
        Author

        Haha – for some reason that first essay of yours triggered the “requires moderation” flag before being published :)

        Anyway, long story short; in my defense I’ve based this design on the Skeleton framework which does all the hard work to determine the media queries and layouts. Obviously that doesn’t mean I couldn’t have changed them, but for the sake of ease I’ve stuck with the out-of-the-box solution.

        In answer to the real question here though; you’re dead right. There’s much less emphasis placed on wide screen layout than there is catering for mobile devices. Our priorities are a direct result of the practicalities I suppose – a non responsive layout is perfectly readable on a large screen, but not so on a smaller device.

        In any case, it’s a good point, and I’ll be sure to post something soon on RWD for higher resolutions. Thanks for your (considerable) input!

        • DJ

          @ian… Great, thanks for the info – Not sure why it would trigger “moderation” (perhaps the length?); however, a feedback you may want to flow back to your site-developers is that WHEN a comment triggers the “moderation” flag it needs to provide feedback of some sort. In this case, I got no feedback that it had been received – If It had said “received for moderation” then when it didn’t appear I wouldn’t have assumed that something had bombed with our carriers or back-end.

          BTW – watching the subsequent postings – they’re great, and you seemed to let slip in the last one something about “this is as wide as they currently are… which we’ll talk about later.” I hope that this means you’ll talk about “retrofitting” the framework to cover “full desktops” as well?? Hope so.

  • http://www.lorenzonovia.com Lorenzo

    Great tut!
    Sorry, but I don’t understand why you insert the background color on the background css if you already put the background image :(

    thanks!

    • http://www.snaptin.com Ian Yates
      Author

      It’s always good to consider the ‘what if?’ in web design. What if the user has their images disabled to speed up page loading? What if the site in question has a lot of other resources to load, leaving the background images until later? In our case both of these situations would leave the user looking at a white background – problematic when the text color is also pale..

      The added background color is a backup to render a rudimentary, but functional version of the layout :)

  • Matt

    Could you tell us where you got your chrome extension where it auto reloads when you make the changes? Thanks!

    • http://www.snaptin.com Ian Yates
      Author

      Hi Matt, check out LiveReload. It’s an OSX app which works in combination with the browser extension. It’ll cost you $9.99 but is a real time saver. A Windows version is in development…

  • Kushan

    Thanks for these videos :) and soon need some jQuery integration for slider please ;) may be after Navigation :D

  • Kushan

    oh and i like that wallpaper too >.>

  • http://www.lehok.com Leah

    Thanks – just figuring out all this responsive design.
    Is this a better way then linking different CSS pages with etc for the different sizes?
    I have just finished a site doing it this way, but have found it to be so heavy with loading so much CSS….
    Next one going to try using Skeleton.
    Thanks!

    • http://www.snaptin.com Ian Yates
      Author

      Hi Leah, it’s not necessary to be loading completely different assets for each possible screen resolution, that’s not the idea behind responsive web design. Media queries can all sit in one css file and serve up whichever styles are appropriate.

      Before you go any further, the best advice I can give you is to read Ethan Marcotte’s book. Put simply; if you’re serious about web design, you need to have read it.

      Hope that helps :)

      • http://www.lehok.com Leah

        Thanks for your response.
        I didnt load total files, followed the media queries concept targeting a few main elements that needed resizing.
        Will read the ebook!

  • Aldren

    Yes finally! Thanks Sir Ian!

  • Jkd

    Thanks ian. This will be most usefull if you turn into WordPress and integrate slideshows, that could be smashing tuts.

  • Pingback: Building a Responsive Layout With Skeleton: Starting Out | Webdesigntuts+ » Web Design

  • http://private-storm.de stOrM!

    Really nice tut!
    May I asked because I was too blind to see if there any videos which will be following to finish creating the complete site or does it end with the two videos shown? Well, and if so when will they be released?

    kindest regards

    • http://www.snaptin.com Ian Yates
      Author

      There are at least two more videos coming – as many as are needed to finish the layout :)

      • http://private-storm.de stOrM!

        Thank you for your fast response Ian

      • Lloyd

        Yay! for more video’s coming!

  • http://richardmisencik.com Richard

    Hey Ian, this might be a stupid question but i just cant seem to find where are styles for class “band” that define “width: 100%” to this class. In the demo, divs with class of band take all the available space and are full width. Did i miss something or did these styles came with the skeleton? Thanks!

    • http://www.snaptin.com Ian Yates
      Author

      Hi Richard – nowhere is it specified that the bands have a width of 100% (neither in Skeleton’s styling, nor mine) but given that they’re divs (block level elements) they will automatically expand to fill 100% width of the available space.

      Any element which has display: block, either by default or applied by you, will behave this way unless it’s floating.

      Hope that helps!

      • http://richardmisencik.com Richard

        Oh of course, how come i didnt think about that.

        I was checking css files and firebug where that width: 100% comes from and i totally forgot about basics.
        The way i was making layouts was that i created a div and set width: 100% to it and then another inner div inside the first one (now with for example 960px width), otherwise it wouldnt work.

        The problem was that I didnt have any content inside the div, therefore without specifing width: 100% it would show nothing at all. And thats why i was excepting somewhere to find that exact style.

        Thanks for quick answer Ian :)

      • http://www.facebook.com/geoffrey.barker.90 Geoffrey Barker

        Disregard my post that is stuck in “moderation”. I figured it out in “hand to forehead” fashion.
        Thanks again for this tut.

        • ianyates

          Sorry about that Geoffrey – your comment hit the spam queue (since been approved). Glad you sorted your problem out and I’m also glad you’re intrigued to look further into responsive web design!

  • Monk

    Thank you so much for sharing your thoughts.

    Parsonally, I don’t like fluid or liquid layout so much, but I’m all for your way or skelton’s way of doing things. Actually, I applied it to my website. Just a few points, I needed to fix or adjust the css; like line135 and 185, we don’t want margin-top and bottom zero. Instead just rignt and left zero would have more controll.

    Our main concern now might be new iPad, Retina display. It’s great, but for us, web designers, it could be tought than we think, I guess.

  • Hamid

    nice article:-) keep it up Ian.

  • ercandelaria

    Need a bit of help thanks :) What is wrong with my html?? Here is the image of my problem http://img535.imageshack.us/img535/6510/errorsite.png

    As you can see my first and second act as a link that makes the web page go up but my second container in the bottom is the same but does not have this error.

    =======[CODE]=======
<!--[if lt IE 7 ]&gt; &lt;![endif]-->
<!--[if IE 7 ]&gt; &lt;![endif]-->
<!--[if IE 8 ]&gt; &lt;![endif]-->
<!--[if (gte IE 9)|!(IE)]&gt;&lt;!--> &lt;!--
	sk8shop-pr.com | skate shop, patinetas, zapatos para patinetas, ropa, accesorios, en San German Puerto Rico
	<!--[if lt IE 9]&gt;-->
			<a href="" rel="nofollow">sk8shop-pr_logo
	<!-- container -->
<!--End band-->
			<a href="" rel="nofollow">sk8shop-pr_logo
	<!-- container -->
<!--End band-->
			<a href="" rel="nofollow">sk8shop-pr_logo
	<!-- container -->
<!--End band-->
			About Skeleton?
			Skeleton is a small collection of well-organized CSS &amp; JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.
			Three Core Principles
			Skeleton is built on three core principles:
				<strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.
				<strong>Fast to Start</strong>: It's a tool for rapid development with best practices
				<strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.
			Docs &amp; Support
			The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com&quot; rel="nofollow">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton&quot; rel="nofollow">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com" rel="nofollow">hi@getskeleton.com</a>.
	<!-- container -->
	<!--End band-->
			About Skeleton?
			Skeleton is a small collection of well-organized CSS &amp; JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, tabs, forms and media queries. Go ahead, resize this super basic page to see the grid in action.
			Three Core Principles
			Skeleton is built on three core principles:
				<strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.
				<strong>Fast to Start</strong>: It's a tool for rapid development with best practices
				<strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.
			Docs &amp; Support
			The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com&quot; rel="nofollow">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton&quot; rel="nofollow">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com" rel="nofollow">hi@getskeleton.com</a>.
	<!-- container -->
	<!--End band-->
=======[CODE]=======
    • http://www.snaptin.com Ian Yates
      Author

      Can you stick a copy online somewhere? The source you posted has been completely butchered for some reason :’(

  • Alf

    Hello Ian.
    Can you please tell me what’s that Coda theme please?

    Thanks

    • http://www.snaptin.com Ian Yates
      Author

      Hi Alf – it’s called Blueby; based on the snippets used by http://www.ruby-lang.org. Very easy on the eyes :)

      • Alf

        Thanks for the quick reply Ian.

  • http://coder-design.com/ coder-design

    This is a great tutorial. Thanks for sharing.

  • Pingback: My Stream | Best of Tuts+ in March 2012 | My Stream

  • Pingback: Best of Tuts+ in March 2012

  • Pingback: Best of Tuts+ in March 2012 | SearchPsd Blog

  • Pingback: Best of Tuts+ in March 2012 | Shadowtek Hosting and Design Solutions

  • Pingback: Best of Tuts+ in March 2012 - Milk-Break

  • Pingback: Best of Tuts+ in March 2012 | How to Web

  • Pingback: Best of Tuts+ in March 2012 | clickshots

  • Pingback: Best of Tuts+ in March 2012 | linuxin.ro

  • http://twitter.com/vladimir_light V-Light

    First of all – thank you for that great video-tut. I was a little confused about skeleton at first, but then… :)
    I’ve got a question: Is it possible to “stretch” the navigation …to the current “sixteen” (or whatever i’m using) column width? So that the “home-link” would be at the left side and the “contact-link” at the right….I hope you understand what i mean :)

    • http://www.snaptin.com Ian Yates
      Author

      Well, it would be possible, but you’ll usually lose some of the dynamism by doing it, there’s no way of evenly distributing a row of menu items across a container with css alone.

      If you know exactly how many menu items your navigation comprises, you can calculate an average width and apply that value to each list item. For example, 960px / 7 = ~137px. But then, because we’re dealing with responsive/adaptive layouts, you’d need to recalculate for each layout width, or use % values (width: 14.2%).

      You could also use jQuery to calculate the % widths for you, based on however many items there are.

      The problem with all this is that you may end up with menu items whose labels are too long, ‘entertainment’ might mess things up, for example.

      Finally, you might choose to float the last menu item to the right and distribute the remaining menu items a bit more, which would create a sort of ‘faux’ full width effect.

      I hope some of that helps!

  • Pingback: | Graphfucker

  • Pingback: Best of Tuts+ in March 2012 | PHP Developer Resource

  • Kevin

    Hi! Nice tutorials, thanks for your help/time. I have a question though, why did you used classess instead of ID’s in the header, navigation, and footer? As far as I know, we use classess when we have multiple elements and ID’s when there’s going to be a unique element i.e. header, footer, etc.

    Thanks again!

    • http://www.snaptin.com Ian Yates
      Author

      Hi Kevin, it’s a personal preference of mine – I rarely use IDs these days. There are very few circumstances when you’ll need to be so specific that you need an ID, you should always be able to target individual elements using classes alone.

      This just keeps things more flexible and helps the markup remain clean.

  • FredB

    Is anyone experimenting with the design of adaptive/responsive sites without the use of media queries?

    Just a thought, as with the current plethora of screen sizes in the market place we can generalize, but how are we going to cover all of the breakpoints that may be used in the future? Or will we keep adding media queries to our CSS as new screen sizes are developed?

    I’m playing around with purely using em and % and getting good results. I also use and max-width on images.

    Can anyone point out any drawbacks to using this method? I’d be interested in case I’m using an incorrect approach that may fall down around my ears!

    • http://www.snaptin.com Ian Yates
      Author

      Hi FredB – you make an interesting point, and what you’re describing (fluid layouts, flexible typography and fluid images) is a fundamental part of the process.

      I think the best media query example I can give relates to readability of large bodies of text. Imagine you have a single column of text on a mobile device, now stretch that to 2000px for a desktop screen. The result will be pretty miserable in terms of readability and aesthetics.

      Media queries would help, in this case, to apply columns and a more readable layout to your original page.

      Try not to think of your breakpoints being device-specific (ie: don’t necessarily aim media queries at iPhones, specific tablets etc.) Instead consider the sizes at which your layouts need help – then tailor media queries to those. At the moment, that’s as future friendly as you can be without knowing what’s going to happen in five years’ time!

  • Pingback: Use Skeleton Boilerplate to build responsive website

  • Pingback: Design Fluid « Wannabe Dev

  • MaveriXhunter

    Thank you for the tutorial, it’s really useful and understandable!

    Would you please also tell me which stunning Coda color scheme were you using while making this tutorial?

    Thanks! Great job!

    • http://www.snaptin.com Ian Yates
      Author

      Hi there – you’re not the only one to ask about that – let me point you towards this comment. Hope that helps!

  • http://pmlmedia.co.uk pete0161

    Champion tutorial by Ian Yates! following it and learning lots about HTML5!

    Tabs have now been pulled from the Skeleton Framework as the authors argue that Skeleton is not a UI framework. You can add them back in by editing the latest version of Skeleton’s base.css to match Ian’s provided files for this tute. (I’ve posted this comment to the youtube vid as well)

    Details of the pull request are here… https://github.com/dhgamache/Skeleton/commit/6b3162ee3ffc126853816d047b0d79d0f1dddbb5

    • http://www.snaptin.com Ian Yates
      Author

      Thanks for that Pete :)

  • http://www.haselden.co.uk Fran

    It’s a good tutorial but it’s a shame there is no real code shown in the tutorial, only on video. I am very much stuck because the video goes too fast and my html looks different. Would be useful if the code used was supplied at each section of the tutorial so if you went a bit wrong you could easily pick it up and be ready for the next step. Shame as I have to restart the tutorial (again) and I’m still not getting something right. Makes what could be a brilliant tutorial end up a lot less useful and frustrating.

    • http://www.snaptin.com Ian Yates
      Author

      Hi Fran, sorry to hear things went a bit fast for you :(

      Initially, I didn’t make the source files available because Mahdi (who designed the whole thing in Photoshop) wanted to build it himself and sell it on Themeforest. That’s no longer the case, so I’ve made the final source files available on each tutorial in the series. They’re not progressive source files, but hopefully you’ll be able to pick out the bits you need.

      Best of luck!

  • http://CLUSTERfoo.com Noam Gagliardi

    This is amazing stuff. I just found out about Skeleton / grids (late to the party?) and it’s a godsend for so many issues I was having.

    QUESTION: I’ve noticed there’s a “column” class and a “columns” class. Since “.columns” seems to be the one you use for laying out everything, what exactly is the purpose of “.column”?

    • http://www.snaptin.com Ian Yates
      Author

      Welcome! Skeleton is a great introduction to grids and media queries – not to mention an extremely rapid framework for getting sites up and running.

      In answer to your question, Skeleton has two types of columns. The class “columns” which can be accompanied by one of the sixteen sizes:

      <div class="columns twelve"></div>

      And the class “column” which is accompanied by one of the more generic descriptions, allowing use of thirds:

      <div class="column one"></div> <!--full width of container-->
<div class="column one-third"></div> <!--self explanatory, you can fit three of these columns across a container-->
<div class="column two-thirds"></div> <!--one of these, plus a "one-third", will fill a container width-->

      Hope that helps!

  • Shana

    Great tutorial! I noticed that the demo is not quite responsive in IE8 when re-sizing as it is in chrome. Is there a way to accommodate?

    • http://www.snaptin.com Ian Yates
      Author

      Hi Shana – IE8 (and earlier) don’t support CSS3 media queries so they therefore ignore all the adaptive layouts within the Skeleton framework.

      I like the idea of starting mobile first and serving IE7, IE8 with a large mobile layout. See what Joni Korpi has to say about that.

      Alternatively, you can use something like respond.js which is a polyfill for getting older browsers to work with media queries.

      Let us know how you get on!

  • http://igerli.com Stefano

    Cn I do it with skeleton 1.2 because I dont find skeleton 1.1

    • http://www.snaptin.com Ian Yates
      Author

      Absolutely – Dave has stripped out all the JavaScript in recent versions, so you’ll have to forget about the tabs, but the essential framework is still all there.

  • Rich

    Ian,

    Why not just apply the white background images to the body as opposed to all the bands?

  • curious

    Hi there! First I want to say thank you for the great tutorial! I already watched all the series and started to experiment with a similar layout. However I’ve noticed something (it is about the footer – doen’t stay at the bottom) and would like to ask for a solution if it is possible of course. In the tutorial you are keeping the browser in a windowed mode and probably haven’t noticed it, but when the browser is open in fullscreen mode (1280×1024/Chrome, Opera, Firefox – everywhere it is the same), there is very annoying white (body bg color defined in base.css ) stripe at the bottom of the site, when there is little content. I know that nowadays most of the blogs or websites have a lot of blog posts/content which extends the height enough, but what about if you want to add just a couple of lines and use it for example for personal site or similar, or preview it on a larger screen. Is there any/easy solution so the site can have a sticky footer?
    Thanks

    • http://www.snaptin.com Ian Yates
      Author

      Hi curious (…) If you’re after an actual sticky footer you’ll need to rejig the markup and the styling a bit. Take a look at Ryan Fait’s explanation of how it fits together.

      Alternatively, you could just assign the footer’s background image to the <html> element. so that the white stripe at the bottom is disguised. Hope that helps!

      • curious

        Thanks for that lightning fast response:)! The trick did the job well, however I will try the solution from the link you have provided as well.

        Thank you very much!

  • http://allsnoringcures.com/ Sisir

    Was looking for something like this for a long time! I was lurking on net.tutsplus.com this site has better resources.

    • http://www.snaptin.com Ian Yates
      Author

      Very kind Sisir, but not true! We have different audiences, that’s all – Webdesigntuts+ aims at web designers, Nettuts+ aims at developers. Glad you enjoyed the tutorial :)

  • Max

    I am trying to get my head around responsive web design and I wanted to know if you would suggest using skeleton.css together with html5boilerplate to create a fluid grid layout or if the html5boilerplate is simply enough?

    • http://www.snaptin.com Ian Yates
      Author

      Hi Max – the best advice I can give you is to read Ethan’s book. If you’re serious about RWD then learning the fundamentals will launch you beyond needing to work out which framework suits you best :)

      • Ma

        Thank you very much for the suggestion and the link, I’ll certainly give it a read!

  • Mees Frenkel Frank

    Hi,

    i use Coda 2.

    which Coda color scheme are you using in the video?

    Thanks

  • Alicia

    Hi Ian,

    You appear to have strong knowledge on grids. Would you recommend Zurb Foundation or Twitter Bootstrap? I’m trying to decide between the two or determine which is best to start out with.

    Which is more flexible for customizing and creativity?

    I read that Twitter Bootstrap supports down to Internet Explorer 7 and Foundation supports down to Internet Explorer 8.

    Thank you for your GREAT Video tutorial!

    • ianyates

      Hi Alicia,

      That’s a difficult question as both frameworks (or libraries, depending on your definition) are hugely capable so it really depends on your preferences and the type of project you’re working on.

      For browser support you can check out this page for Foundation and this thread for Bootstrap. The only real issue with either is the use of media queries which aren’t supported in IE8 or lower. This can be solved by using a javascript polyfill if needed.

      In terms of customisation and creativity, they’re both fairly massive platforms to tailor. If you’re planning aesthetics and structure that differ a lot from their defaults you could end up with a lot of overhead (files and styles which you don’t need).

      As always with these things, it’s best to just download and have a play around! Good luck :)

  • Pingback: Building a Responsive Layout With Skeleton : Widescreen | JDesign's Blog

  • Pingback: 8 Useful Responsive Web Design Tutorials | A7lakalam Host

  • Pingback: Jazz up a Static Webpage with Subtle Parallax | Webdesigntuts+

  • Remco Bakker

    Hey there,

    Cool write up! I was wondering if anyone is able to help me with a vague problem i can’t solve. Please check 2012.ydworld.com in Chrome and Firefox. Firefox renders the containers at 960px(which it should), but chrome renders it way wider. It’s about 1050px in Chrome. Does anyone have a clue how i can solve this?

    Thanks in regards,

    Remco Bakker

    • Remco Bakker

      Never mind. It’s fixed.

      • http://blair.rorani.com/ Blair Rorani

        Used to happen to me all the time :)

  • Pingback: Sam Osborne plays music, rides bikes and thinks

  • Davis Clark

    Great article.

    Just a side note…and I may be alone in this….but developers like TEXTUAL tutorials with pictures where necessary. Not much drives me nuts more than a video tutorial for something that has no business being in a video.

    • http://blair.rorani.com/ Blair Rorani

      +1. Coding is easier to learn from words + pictures. Using software (clicking, entering text, etc) works better in a screencast. Or, break the video into smaller chunks. The point is, you can scan text easier than scanning a video :)

      • @OuangDrak78

        I like both since it give us a chance to see the workflow in direct. Sometimes some issues occurs and then we can see how the author solve them. Quite interesting to me ;)

  • Pingback: Courtyard Creative | HOW I REDESIGNED THE COURTYARD CREATIVE WEBSITE

  • http://blair.rorani.com/ Blair Rorani

    This tutorial series is ‘the boss’.

  • http://twitter.com/LadsRack LadsRack.com

    Great stuff