Try Tuts+ Premium, Get Cash Back!
Building VideoBlogger: New on Premium
plusvideos

Building VideoBlogger: New on Premium

on May 28th 2012 with 9 comments
Tutorial Details
  • Topic: Responsive Web Design
  • Difficulty: Intermediate
  • Screencast duration: 53 mins

Final Product What You'll Be Creating

Demo View It Online

Our latest Premium post is the first in a series of three screencast tutorials. During the series we’ll walk through the build process of VideoBlogger; a responsive media blog layout.

Become a Tuts+ Premium member to gain access to the whole tutorial, as well as hundreds of other advanced videos, tutorials, and courses.

You’ll Learn How to:

  • Prepare a design in Photoshop.
  • Build and maintain spritesheets.
  • Organize a web project using the Skeleton framework.

..and a whole load more besides..

Tuts+ Premium

The recently re-launched Tuts+ Premium is a service that provides top-tier training in a variety of creative fields. Whether you prefer books, visual training, or in depth tutorials, we have you covered. While we unfortunately can’t afford to provide the service for free, it’s only $19 a month – less than you’d spend on dinner.

We hope you’ll consider checking it out! In addition to learning a huge variety of new skills, it’s also a fantastic way to say thank you to Webdesigntuts+.

Adi Purdila is AdiPurdila on Themeforest
 
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.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

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

    I really love how you keep your designs simple as it can possible be at the same time adding background and icons that make the theme stand out, Great theme. love it <3

  • dj

    You seem to be pretty good at what you do; however, I’m not sure how this can be called “responsive” when there’s 40% of my desktop screen completely wasted with plane background. Responsive to who? I know some designers think if they make it so their site merely doesn’t break between desktop and mobile they call it “responsive.” And others think if they use one @media tag, that’s responsive. And I know that one single reading column must be at a reasonable width; but, you couldn’t think of anything a site could put in that wasted space above the fold? I see that you have four break points. I’m curious why you would stop at a notebook size? And especially with segmented content like this which could have easily been made to be five up instead of four up, if there wasn’t something like “recent blogs” or “monitization” or a hundred different things that would have been more important for a “first sight” than blank margin.

    Perhaps all the rhetoric about “designing for above the fold” has gone out the window all of a sudden, but I think not. I would hope that Envato, and perhaps you, or somebody with more design skills than I could begin thinking about the wastefulness that the 960 grid has enticed developers to merely accept.

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

      I hear ya DJ :)

      I’m not going to open this discussion again, but I do agree with you that “Responsive Design” is a whole mentality towards designing websites, not just a question of throwing media queries at a layout.

      This tutorial makes use of (coincidentally) the Skeleton boilerplate so the media queries provide five stages, catering for resolution all the way down to mobile portrait at less than 479px wide. Arguably adaptive, rather than responsive, but as I say – I’m not opening that can right now!

      As far as your request for larger screens goes, it’s rightly something you feel strongly about. This isn’t the first time you’ve brought it up in comments across Webdesigntuts+ and I hope I can reassure you by saying I’m working on something right now. I think it will make for a great discussion – and I’m looking forward to your reaction!

      Cheers :)

  • http://laranzjoe.blogspot.com lawrence77

    Is the wordpress part will covered? or PSD->HTML/CSS??

    Both will be awesome adi as usual..

    If I get a chance to get in, I will look through it :)

    Thanks,

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

      No WordPress on this occasion Lawrence – which indicates to what degree the HTML build process is covered!

  • Ben

    I was there would be 1 or 2 non-premium full-site creation tuts :(

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

      There are a few non-premium full site creation tuts in the works :)

      • Ben

        Thanks, can’t wait!

  • Saud

    Great !
    When you will start ?
    Can’t wait : (