This is super helpful to collect, test and experiment with your collection of semantic HTML & CSS patterns. For beginners it can be a great way to begin to understand the relationship between markup and style. No matter which audience you fall into, it is a handy tool for improving speed and productivity.

Also make sure to take notice of the Pears website itself, which is beautifully designed and responsive.

Thanks Dan, for making our lives more enjoyable with Dribbble and easier with Pears. :)

It’s difficult to test aesthetics, but with tools like Spur App you can make sure that your design looks good for people with color blindness and other mild vision impairments. You can also make sure that your design has enough contrast and feels "balanced" on both sides.

Check My Colours is another web-based tool that can help out. Simply type in your live URL, and you’ll get a listing of all the areas where your color contrast can be improved. It’s a bit more technical than simply looking at a black and white image, but it’s good for more detailed analysis, especially on a complex web application that might have lots of dynamic views.

Why Use Version Control?

You might be wondering why you should use version control, even for a site you’ll never collaborate with anyone on. This is a valid question. I can best illustrate the answer with a scenario you may have encountered in the past. Let’s say you’re in the middle of making a site and want to try something crazy with the css. Maybe you want to do a bit of an experiment and make everything strange shades of yellow and red. You don’t know if you’re going to keep the work when you finish it. Since it’s an experiment, it would probably be a good idea to not mess up your working version of the site.

At this point, you might be thinking of creating a copy of the site and making your changes on the copy. Maybe you’re sure that you’re going to use this work and you’re going to crank through. Maybe it doesn’t work out, though. Wouldn’t it be nice if you could take a snapshot of your site now, do your experiment, and not have to worry about whether you mess things up? That’s exactly what version control is for!

Step 1: Install and Configure Git

In order to start working with git, though, we need to install it. Git is fairly easy to install. If you’re using Windows, GitHub has an excellent set up guide to get git installed on Windows. They also have great guides for Mac OS X and linux. If you don’t already have git installed, follow those guides and come on back here.

Once you have git installed, you have to tell it who you are. This is done using the config command. Open Terminal and type in the following:

$ git config --global user.name "Jason Seifer"
$ git config --global user.email "jason@teamtreehouse.com"

Step 2: Initialize a repository

We’re going to initialize a git repository now. A repository is just a directory with one or more files we want to track the changes of, in this case our web site. Open up terminal (or command prompt on Windows) and change to the directory containing the site you want to put in to git. You do that with the cd command. I’m going to put my web site in the Sites/think_vitamin directory.

[~] $ cd Sites/think_vitamin
[~/Sites/think_vitamin] $

Once you’re in there, type the following:

[~/Sites/think_vitamin] $ git init

Assuming you have correctly installed git, you should see the following:

  Initialized empty Git repository in /Users/jason/Sites/think_vitamin/.git/

This is git telling you that thinks are working and that the path it gave you is now a repository. If you don’t see that output, go back to step 1 and verify that everything was correctly installed.

Step 3: Add Your Files

Now that we have initialized our git repository, we have to tell git what files we want to add to the repository. In order to do this, we use the add command. The add command takes either a single file or a path. The add command takes the changes you’ve made and adds them to something in git called the staging area. The staging area is kind of like a waiting room for git. It lets you tell git what changes you’re going to add to the main index.

Since we are already in the directory with our web site, we’ll tell it to add the path of the current directory:

[~/Sites/think_vitamin] $ git add .

At this point, you won’t see any output. My example is just an index.html file. In order to see what git is about to stage, you can use the status command:

[~/Sites/think_vitamin master]$ git status
 
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached ..." to unstage)
#
#	new file:   index.html
#

The first line of the output says “On branch master“. In git, a branch is just a pointer to something called a commit (explained in the next section). Since this is our first commit, git lets us know that on the second line of output where it says Initial commit. Next, git says there are changes to be committed. My index.html file is there since it’s the only thing I have in the directory right now. This is good!

Step 4: Commit Your Changes

A commit in git is a pointer to a series of changes that you have told git you want to track with the add command. When you commit your changes, git writes them to the index. This is git’s way of saying “this is what the repository looked like at this point in time.” So let’s commit our changes:

[~/Sites/think_vitamin]$ git commit -m "Initial commit"
[master (root-commit) 542d5fa] Initial commit
 1 files changed, 1 insertions(+), 0 deletions(-)
 create mode 100644 index.html

Here we use the commit command to tell git to commit our changes to the repository. The -m argument told git that we want to give the commit a message. My message here was “Initial commit” because this was the first commit to the repository. As you make changes, you can be much more descriptive. This is helpful when working on larger teams. Time Pope has a great article on writing good commit messages if you’d like any pointers.

The important thing about commits is that, once you have committed changes, you can always go back to how your repository was at the point in time of that commit. How cool is that? That means that you’re now free to make horrible changes to your site. Wnat to see how Comic Sans looks for all the headers? Go for it! You can always go back.

Step 5: Make some changes

Now that things are committed, you can feel free to make some changes to your code. In my example web page, I made changes to the header of the page. Now we can run git status again to see what happened:

[~/Sites/think_vitamin]$ git status
# On branch master
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Now we’ll add the file we just changed:

[~/Sites/think_vitamin]$ git add index.html
1.9.3 [~/Sites/think_vitamin]$ git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD ..." to unstage)
#
#	modified:   index.html
#

Finally, we’ll commit the change:

[~/Sites/think_vitamin]$ git commit -m "Modify home page header"
[master bc8251b] Modify home page header
 1 files changed, 1 insertions(+), 1 deletions(-)

Great! We just made our first two commits. Our co-workers will love us for writing a descriptive message along with the second commit, too, although they might also still be mad for taking the last cup of coffee.

Step 6: Make a branch

Remember earlier when we were talking about making experimental changes that you may want to keep? That’ what branches are for! Branches let you easily separate your work. You can have two branches going at the same time with different work. Branches are great for experimentation with something that you’re not sure you’re going to keep.

Let’s say we wanted to change the font on all headers to Comic Sans. You’re not sure how this is going to look (bad) but your client really wants you to give it a try anyway. Let’s create a branch to do that just in case we want to switch back. In git terms, we call this process creating a branch. We do that by checking out the branch and passing a flag to git saying that we want to create it:

[~/Sites/think_vitamin]$ git checkout -b comic_sans
Switched to a new branch 'comic_sans'

Now that we’re on our comic_sans branch, we are free to make changes and commit them. This won’t affect anything on our master branch until later. Let’s make our changes:

[~/Sites/think_vitamin]$ git status
# On branch comic_sans
# Changes not staged for commit:
#   (use "git add ..." to update what will be committed)
#   (use "git checkout -- ..." to discard changes in working directory)
#
#	modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

Git also let’s us see what changed in between what we’re about to stage with the diff command:

[~/Sites/think_vitamin]$ git diff
diff --git a/index.html b/index.html
index 159202e..266d025 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-

Hello world

+

Hello world

We can also add and commit the change with one command by using the -a flag when committing:

[~/Sites/think_vitamin]$ git commit -am "Make header font comic sans"
[comic_sans 94af8b2] Make header font comic sans
 1 files changed, 1 insertions(+), 1 deletions(-)

Now we’ve committed to the comic_sans branch. Sweet!

Step 7: Merge your changes

Our client is now happy with the header changes. Our experimental branch we created now needs the changes to make their way back in to our main branch. We do this through a process called merging. What we want to do is merge or changes from the comic_sans branch back in to the master branch. First, we have to go to the branch we want to merge to. We do that by checking out. This time, we won’t use the -b parameter since we’re not creating the branch:

[~/Sites/think_vitamin]$ git checkout master
Switched to branch 'master'

Now we use the merge command to get our changes from the comic_sans branch in to master:

[~/Sites/think_vitamin]$ git merge comic_sans
Updating bc8251b..94af8b2
Fast-forward
 index.html |    2 +-
 1 files changed, 1 insertions(+), 1 deletions(-)

Boom! Now we have all of our changes in to git. If we want to see what these changes were, we can use th log command to get a nice display of times, dates, and authors:

[~/Sites/think_vitamin]$ git log
commit 94af8b2e976ba11755f7483bc761ea2b9a747e0a
Author: Jason Seifer 
Date:   Wed Feb 1 15:07:45 2012 -0500
 
    Make header font comic sans
 
commit bc8251b338b8ac4451888e1da482708df6264529
Author: Jason Seifer 
Date:   Wed Feb 1 10:16:41 2012 -0500
 
    Modify home page header
 
commit 542d5fab4c86d29a125a78b8a89366f70bdfaa9d
Author: Jason Seifer 
Date:   Wed Feb 1 10:10:01 2012 -0500
 
    Initial commit

Well Done!

In this article we learned how to install git, create a repository, change branches, and commit changes to our code. In the next article in this series, we’ll learn about removing files, going back to different commits, and pushing up to GitHub and working with other people. Stay tuned!

The ongoing drawback to Google Fonts has been the smaller selection compared to other font services, but that’s rapidly changing. Even better, an editorialized web page called “Beautiful Web Type” has popped up that showcases the best fonts that Google has to offer. Loving this!

View the Tutorial
Demo Page

You can read all about Elliot’s ideas on his website. He explain everything is great detail. If you read his post you will find it hard to disagree. Fixed designs are becoming harder and harder to justify.

You can also follow @twbootstrap on Twitter.

Here’s some of what’s new in this release:

• Responsive layout (!) with media queries.
• New 12 column grid (the old one was 16 columns).
• Stacked forms are the default.
• Split button dropdowns.
• New Pills.
• Navigation lists.
• New Dropdowns.
• Tabbles in any direction.
• New JavaScript plugins.

What better way to start off the new year than a fresh new Dribbble portfolio?  If you are a designer with minimal coding experience and want to display your Dribbble work in all browser sizes, you have come to the right place.  We will be creating a HTML5 one page portfolio which pulls your Dribbble information and is responsive in all browsers.  This little project will be presented in two parts.

Part 1 (this post):

HTML/CSS/jQuery set up.

Part 2 (coming soon):

Convert HTML to PHP and use the Dribbble API to pull your data. Plus IE fixes.

The File Structure

Let’s dig right in and start off with our file structure.  On your desktop create a folder labeled: ‘Dribble-Portfolio’.  In that folder create the following files:

• folder labeled ‘css’
• style.css
• folder labeled ‘images’
• logo.png
• connet.jpg
• me.png
• sample.jpg
• index.html
• folder labeled ‘scripts’
• jquery.js
• fitText.js

It should look a little something like this:

*to download the .js and image files simply select the links above and save them to the appropriate file structure.

The HTML

Now that we have all of our assets and files lets begin with the HTML. Below is the proper code for your ‘index.html’ file.

<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>
 
  <!--Google fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
  <!--Main Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>
 
<body>
 
	<header>
 
  	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
    <nav>
 
    	<ul class="menu">
 
        <li><a href="#" class="email"></a></li>
        <li><a href="#" class="dribbble"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
        <li><a href="#" class="linkd"></a></li>
 
      </ul>
 
    </nav>
 
  </header>
  <!--end header-->
 
  <section class="half">
 
      <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
  </section>
  <!--end main image-->
 
  <section class="half">
 
  	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
  </section>
  <!--end tagline-->
 
  <div class="clear"></div>
 
  <section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
			</div>
 
	</section>
  <!--end dribble content-->
 
  <div class="clear"></div>
 
  <footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
  <!--end footer-->
 
 
 
</body>
 
</html>

As you can see the code is fairly simple. We have a basic HTML5 markup with some ‘viewport’ settings at the top. The ‘viewport’ settings tell devices such as iPhones to display at the devices width and scale.

 
<!DOCTYPE html>
 
<html>
 
<head>
 
	<!--Viewport-->
	<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
	<title>Dribbble Portfolio</title>

Also the ‘head’ is reaching out and grabbing some Google font stylesheets as well as our ‘style.css’ file in our ‘css’ folder. We will get to this file in our next step.

 
  <!--Google fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
 
  <!--Main Stylesheet-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
 
</head>

As we get into the body of the file we have four main sections(header, section(half), section(dribbble) and footer).

The header contains two elements. Element one is the logo, feel free to change it. It’s located in the images folder, labeled ‘logo.png’(200x80px). Element two is our social network icons which we won’t see until we add the css styles. For now we are going to link to hash tags. In part two of this tutorial we will be pulling in the correct data via Dribbble.

<header>
 
  	<h1 id="logo"><a href="#"><img src="images/logo.png" alt="My Logo" /></a></h1>
 
    <nav>
 
    	<ul class="menu">
 
        <li><a href="#" class="email"></a></li>
        <li><a href="#" class="dribbble"></a></li>
        <li><a href="#" class="twitter"></a></li>
        <li><a href="#" class="facebook"></a></li>
        <li><a href="#" class="linkd"></a></li>
 
      </ul>
 
    </nav>
 
  </header>
  <!--end header-->

The next section, section(half) contains our ‘me.jpg’ image and our tagline which are located directly below the header. Feel free to swap out the image(me.jpg) and tagline copy to better personalize your portfolio. The image currently being pulled in is 800x600px as it is scalable to the screen size.

 
<section class="half">
 
      <img src="images/me.jpg" class="main-image" alt="This is Me" />
 
  </section>
  <!--end main image-->
 
  <section class="half">
 
  	<h2 class="tagline">Check Out My Super Radical One Page Responsive Portfolio Which Pulls My Dribble 'Shots'. Get Gnarly!</h2>
 
  </section>
  <!--end tagline-->
 
  <div class="clear"></div>

Our next section is section(dribble) which is going to pull our most recent Dribbble ‘shot’ titles and ‘shot’ images. For now we are going to use dummy content. In part two we will be running a loop to pull the latest projects with the all mighty power of php. You will also be able to choose how many projects you would like to display. For now we are going show twelve ‘shot’ examples.

<section>
 
			<h1>Latest Work</h1>
 
 
			<div id="container">
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
          <a class="box" href="#">
            	<h3>Title of the Work</h3>
            	<img src="images/sample.jpg" alt="Work Title" class="pic"/>
          </a>
 
 
			</div>
 
	</section>
  <!--end dribble content-->

The last section is the footer area. This is for any links or Copy Right text you wish to display or link out to.

<footer>All RIghts Reserved <a href="#">www.website.com</a></footer>
  <!--end footer-->

The CSS

Now that we have inserted all of our HTML data, let’s add our styles to the page. Simply copy the CSS code below and input it into the style.css file. Here is the CSS code:

/* DRIBBBLE PORTFOLIO SITE - 2012 */
 
/*RESET*/
html,body,div,span,applet,object,iframe,#logo,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{outline:none;border:0;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
/*MAIN*/
body { background:#dce877; margin:0 auto; padding:0 5%; font-family:Open Sans, Arial, Helvetica, sans-serif; width:90%; font-size:13px; line-height:21px; color:#616634; }
header, footer { float:left; width:100%; }
section { float:left; }
ul { list-style:none; margin:0; padding:0; float:left; }
a { color:#616634; text-decoration:none; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; cursor:pointer; }
a:hover { color:#111; opacity:1; }
h1, h2, h3 { font-weight:normal; float:left; }
h1 { margin:20px 0; }
h2 { font-size:30px; line-height:40px; }
h3 { font-size:14px; line-height:40px; }
p { font-size:12px; }
.full { width:96%; margin:0; padding:2%; float:left; position:relative; }
.half { width:46%; margin:0; padding:2%; float:left; position:relative; }
.clear { clear:both; }
 
/*HEADER*/
header { position:relative; width:100%; border-bottom:5px solid #bcc664; margin:0 0 20px; }
#logo { float:left; margin:20px 0 0; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; }
 
	/*CONNECT*/
	nav { float:right; transition:all linear .5s; -webkit-transition:all linear .5s; -moz-transition:all linear .5s; }
	.menu { list-style:none; margin:15px 0; }
	.menu li { display:inline; }
	.menu li a { width:32px; height:31px; background:url(../images/connect.png) no-repeat; opacity:.5; float:left; display:block; margin:30px 5px; }
	.menu li a:hover { opacity:1; }
	.dribbble { background-position:0 0; }
	.linkd { background-position:-38px 0 !important; }
	.twitter { background-position:-78px 0 !important; }
	.facebook { background-position:-118px 0 !important; }
	.email { background-position:-158px 0 !important; }
 
/*SECTION(HALF)*/
.main-image { width:100%; }
.tagline { line-height:140%; color:#616634; font-family:Raleway; font-weight:normal; }
 
/*SECTION(DRIBBBLE)*/
#container { -moz-column-count:4; column-count:4; -webkit-column-count:4; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; float:left; width:100%; }
.box { background:#BCC664; padding:5%; opacity:.75; display:inline-block; margin-bottom:10px; border-bottom:2px solid #616634; border-radius:2px 2px 10px 10px; width:90%; }
.pic { width:100%; float:left; clear:both; }
 
/*FOOTER*/
footer { border-top:5px solid #bcc664; margin-top:20px; padding:20px 0; font-size:12px;}
 
 
/*MEDIA QUERIES*/
@media screen and (max-width:960px ) {
 
	#container { -moz-column-count:3; column-count:3; -webkit-column-count:3; }
 
}
 
@media screen and (max-width: 768px) {
 
	.half { width:95%; }
	.menu li a { margin-right:1px; }
	#container { -moz-column-count:2; -webkit-column-count:2; column-count:2; }	
}
 
@media screen and (max-width: 479px) {
 
	#logo { margin:0 0 0 48px; }
	nav { float:left; margin:0 0 0 50px; }
	.menu { margin:0; }
	#container { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
 
}

After we save our ‘style.css’ file and refresh our browser, we have a very clean portfolio layout that responds well to the browser size.

When you view the stylesheet css code you will see ‘%’ used a lot on the width attributes. The page is styled with a responsive fluid layout in mind. If you have any questions about responsive web sites, please check out ‘Responsive Web Design Foundations’ over at Treehouse.

As of now we have a fully functional static HTML5 page which has been tested in the latest versions of Firefox, Chrome and Safari. Because we are using HTML5 and CSS3 capabilities we will not be testing in IE at the moment. Once we finish up part 2 of the tutorial we will set up separate IE files to compensate for it’s lack of functionality with HTML5 and CSS3.

The JavaScript

Lastly we are going to add a little javascript to our page allowing our ‘tagline’ text to scale with browser size. Insert this snippet of code directly below the footer.

<!--js files-->
	<script src="scripts/jquery.js"></script>
	<script src="scripts/fitText.js"></script>
 
	<!--initiate fit text-->
	<script>
 
  	 $(document).ready(function() {
 
  		 /*FitText*/
  		 $(".tagline").fitText(1.1, { minFontSize: '20px', maxFontSize: '200px' });
 
  	 });
 
	</script>

This snippet simply links up to our ‘jquery’ and ‘fitText’ files we set in our scripts folder earlier. Then it initiates the ‘fitText’ function and gives it some variables. Feel free to change the max-font-size and min-font-size as your ‘tagline’ will be different.

Wrapping Up

Now lets review what we have just done.

• We have set up our HTML
• Added our CSS styles
• Inserted a little javascript

Congratulations you have successfully set up a static responsive one page portfolio.

Source Files
Demo Site

Still to Come(Part 2)

In the final portion of this tutorial we will be using Dribbble API to load in our user data and ‘shots’, as well as IE 8 and up fixes. In the meantime if you would like to know more about HTML5 and CSS3 please check out Treehouse, or contact me at mat@teamtreehouse.com. As always, Get Gnarly and Design your Life!

Role Those Credits:

• Dribbble
• jQuery
• Fit Text
• Treehouse

Just when you thought scrolling your web page was getting boring. Scrollorama has stepped the scroll game up with this remarkable jQuery Plugin. Scrollorama allows you to manipulate text when you scroll the page. You can do everything from Transitions to Zoom to Parallax. Check out the Scrollorama site to view some great examples and the plugin’s documentation.

This Plugin is great for landing pages and highly interactive web applications. Like CSS3 transitions, use your animations sparingly.

I remember the weight of separation vividly. I remember writing custom JavaScript to replace the <a> tag’s target attribute because it added behavior to HTML. I remember dropping the <font> tag from my arsenal of tools, something I don’t regret.

In principle, the rule of separation was good. It helped us explain the best practice and implementation of HTML, CSS and JavaScript. It spun the web toward a brighter future. Separation vanquished the <font> tags, spacer gifs and inline JavaScript that polluted the web for years. In the old web structure, presentation and behavior lived in one layer but the principle of separation divided them.

The Path

The principle of separation lead web standards into victory during the first browser wars. Separation did not do this by eliminating proprietary standards, but by defining the “path” for new standards like CSS and XHTML. Through this victory browser makers work together now, for the most part. Browsers prefix proprietary CSS and push together for new technologies such as HTML5.

However, separation was an old idea that lived hand in hand with XHTML 2. The idea was that structure, presentation and behavior should be at all times pure. Separation like XHTML 2 has seen its day. Just look at the current state of our specifications. The proof is in the pudding.

The Truth

CSS now has behavior with features like :hover and animations. CSS has structure as well with the pseudo elements ::before and ::after. HTML has the same issues. Its new <input> types have behavior and presentation littered throughout. What the web currently looks like vs what separation wants the web to be is not the same.

The specification says separation is dead and the browser makers agree. Last year at SXSW during the browser wars panel I asked the panelists for their thoughts. I asked them what was to keep the <font> tag from coming back and why separation was not being addressed. Brendan Eich answered quickly and simply, “We don’t care about separation.”

He is right to say this. Separation has played its roll. But if he is right and we live in a new age, why do we we still teach separation? Why do we still pretend to follow it? I have a few assumptions.

Why Separation is Still Around

First, it worked at a basic level. It let us know when we were getting into gray areas. Second, the principle was simple and easy to understand. Each technology has its place, HTML, CSS and JavaScript.

So then, what should we do? Ignore all reason and do whatever we like? No, of course not. We need to be honest with ourselves and understand the raising pattern: Divergence.

We have been using Divergence for years. With every site you include :hover in your CSS. With the “email” value you use as your <input> tag’s type. With the many jQuery plug-ins that add new structure and presentation to a site. You use Divergence.

Divergence

What is Divergence? Divergence is the process you take when any of the three layers of separation cross. Let’s think about what we know the web is like today.

As an example let’s examine a scenario where presentation and behavior cross, such as when you need a design change as the cursor moves over a link. You need to pick CSS or JavaScript.

JavaScript has the mouseover event handler and CSS has :hover. However, you want to add a presentational effect, a nice underline maybe.

During the crossover of the two layers we are forced to choose CSS or JavaScript. You could choose CSS because you want to change the link’s style, but you could also choose JavaScript because the change is triggered by a behavior.

Unlike separation where you are trapped, Divergence says this is fine. In Divergence the lines can cross.

Think of Separation and Divergence as totally different logical approaches.

With Separation you live in a true and false world. Everything is black and white. It is on or off. It is Boolean by nature. With Divergence there’s black and white, but there’s also gray.

Truth is Conditional

The first rule of Divergence is that truth is conditional. Presentation can be behavioral and vice versa. We can use CSS a presentational technology with behavior as in the case of :hover.

However, Divergence does one thing that keeps it from creating a world where anything goes. To understand that concept we need to look at the <font> tag and understand how divergence keeps us from using <font> just as the principle of separation does.

Under the “conditional truth” rule of Divergence the <font> tag is fine. It is presentational and structural. However, with the second rule of Divergence there is an issue. This is the rule of “wholeness”.

Wholeness

The <font> tag is in HTML so it is a structure. However, it is not semantic and so while it is a structure it is not structural. The rule of divergence says that an item who falls into conditional truth is fine. It can be both structural and presentational at the same time. The <font> tag is.

However, the <font> tag must now pass the second rule. This rule, wholeness, says that the item must by nature be compliant wholly… to at least one of its parts. This does not negate the first rule. It only approves the item has the properties of the layer in which it lives.

Wholeness works like this:

• An item who is in structure must have the properties structure. In other words HTML must be semantic.
• An item who is in presentation must have the properties presentation. In other words CSS must effect presentation.
• An item who is in behavior must have the properties behavior. In other words JavaScript must effect behavior.

Divergence says that items can have multiple properties but can only operate from a layer if it belongs to it in wholeness. This means that the item itself must have the properties of the layer it lives in and can demonstrate the properties of another layer if it likes.

Where <font> Fails

The <font> tag meets the conditional truth of Divergence but is not fully structural. It demonstrates the properties of presentation in that you can set “font properties” with it. But, it can not belong to structure because its structural property is not structural. This is because the tag name is purely presentational – “font”. This means that it doesn’t belong fully to at least one of its parts.

Therefore it can not diverge to one side or the other. HTML or CSS. So, we can not use the <font> tag under Divergence.

The principle of Divergence is simple and complex. It apples to all layers of web design.

Some Examples

As a quick example we can say that the HTML5 email value of the <input> tag’s type is fine under Divergence. It is semantic and behavioral but complies wholly to at lest one of its parts HTML.

Simply using the pseudo elements ::before and ::after to create content as structure and not presentation is not divergent because it is not fully presentational. Not to mention inaccessible.

It is unfortunate that the world of web design is not black and white and fortunate at the same time because it moves us forward.

To Round it Up

We are standing in a new age. We need to stop saying separation and doing divergence. In the end we can pretend that the principle of separation is still relevant but it doesn’t support the current direction of the web. It doesn’t help standards and browser makers don’t care.

Most importantly we need practical principles to guide us. So we know when to say yes or no to new features in CSS and HTML so that we can keep one eye on the vendors and the other on the web’s future. We need to accept the fact that separation of structure, presentation and behavior is dead.

Some other responsive templates to check out:

• 1140 CSS Grid
• Gridless
• Less Framework 4

I’m always on the lookout for high quality, useful resources and get super excited when I find one – especially when it’s affordable. I came across this UI toolkit via Twitter and purchased it in a heartbeat. After looking through all the resources, I knew I just had to share it with you all!

For only $8, you get access to 300 high quality resources created specifically for UI developers and designers.

• 20 Photoshop Styles
• 94 Vector Glyphs
• 40 Background Patterns
• Shadow Creator Action
• 130 Custom Shapes
• 10 Ring Indicators
• 10 High-Res Photo Textures
• 34 Common UI Symbols

Remember my post on Finding the Perfect Icon Set? Well this set of 94 vector icons most definitely fits the bill and are worth the 8 bucks alone!

The Photoshop layer styles and patterns included in this toolkit are ones I commonly use and repeatedly recreate, which will most definitely come in handy.

Head on over to www.uiparade.com to view the rest of their resources and to take advantage of this awesome deal.

There are endless amounts of free and paid icons all over the web, but finding a set with a large quantity of icons that that are customizable, scalable, and of high quality can be hard to come by.

Simplicity

Detailed, glossy icon sets – while they’re pretty to look at – aren’t the best investment to start building your versatile collection. Their complex shapes with layer styles and masks can be tricky or even impossible to manipulate. Something as simple as changing the color (the right way!) or adjusting paths can turn into a painful endeavor.

Don’t get me wrong, they can be great for a specific project, but don’t expect to use them over and over again unless you want your work to start looking redundant.

In my experience, I find that when purchasing simpler sets you get sharper, more pixel-perfect icons, since there’s no gloss, glow or shadow to distract from the quality of the shape. Start with a simple icon as your base, and then add the gloss and glows if you so desire.

Scalability

I prefer to invest in icon sets that contain entirely vector shapes, so I can scale the icon to whatever size I need – for web or for print.

PNG or GIF icon sets can be great for the web if they’re at the exact size you need them to be, but scaling down (and up, of course) will distort the shape. This is unavoidable, because any transformation made to a raster file will ultimately bring down the quality of the image.

Recently we’ve been seeing more and more icons that are actually web fonts, completely eliminating the need to export icons as images for your website. Small file sizes and scalability? Awesome. The only downfall is that you’re limited to styling the icon with CSS. (Which really isn’t too much of a limitation these days!)

Quantity

Quantity is super important when looking to purchase icons. Make sure you have enough to work with so you don’t have to worry about mixing too many different sets of icons in one design. By purchasing a large set of icons with lots of variety (or a series of sets from the same illustrator) you know the general style will stay consistent throughout your design.

Quality

I used to scrounge the web for free icons. There are good free icons out there, but they’re hard to find. It wasn’t until I started freelancing that I realized I was spending quality time trying to find the free ones, when I could have been working and earning money.

You’ll notice many of the free icon sets aren’t crafted with the same level of detail as the ones that will cost you. Why should they be if they’re not being compensated for their time? If you pay for a quality set, you can almost guarantee it’s quality.

So invest in a few great sets and you won’t need to scrounge like I did. Not to mention you support the illustrators for their hard work, say thank you for all the time they saved you, and fund their efforts to make more great icon sets!

Sets to Invest In

These are some sets that will get you some serious bang for your buck. There are tons of icon sets I could list, but I wanted to keep it short to include only sets that contain a significant amount of beautifully crafted, simple icons. If there are any icon sets you swear by that aren’t on this list (vector and/or type) please let me know and I’ll add it!

Helveticons – $279 for 245 icons (Vector)

Helveticons by Goodbye Horses

Pictos Complete – $240 for 4 sets (Vector & Type)

Pictos by Drew Wilson

Symbolicons – $35 for 400 icons (Vector)

Symbolicons by Sensible World

Glyphish – $25 for 400 icons (Vector)

Glyphish by Joseph Wain

Tipogram – $18 for 90 icons (Vector & Type)

Tipogram by Tom Creighton

Gedy’s Social Media Icons – $5 for 107 icons (Vector)

(Best 5 bucks you’ll ever spend.)

Social Media Icons by Lifetree Creative

Iconic – FREE 177 icons (Vector & Type)

Iconic by P.J. Onori

The Noun Project – FREE (Vector)

The Noun Project

The people over at PANDR have created a really cool bookmarklet that allows you to see all the colors on a web page with one click. Simply drag their bookmark link into your browser’s bookmark toolbar and then click the newly created link. Alternatively, you can visit the page containing the color tool and simply type in a URL.

Awesome stuff!

Whenever I see great UI in a native application on a mobile device or a desktop, I always imagine how that might translate to the web. That’s why I was so happy to see the Path menu UI recreated in CSS3! Mad props to Victor for putting this together.

What is Font Management Software?

Basic font management software will allow you to organize your fonts, preview and compare them easily. More importantly, it will let you activate only the fonts you need, while leaving the others deactivated. It should also take care of issues like installing and uninstalling fonts, and diagnose and repair any font conflicts.

Managing your Font Collection

Sync your Fonts

Instead of storing fonts locally, I prefer to keep all of my fonts on a cloud, like Dropbox. This allows me to share one font file between my own computers instead of having multiple copies floating around. Since I download and purchase fonts at home and work, this assures the two libraries are always synced and up to date.

Categorize Your Fonts

It’s up to you what organizational and naming convention works best for your workflow, but I like to group them by classification – Decorative and Display fonts (which contain irregular styles like distressed, handwritten, symbols, etc.) Script, San Serif and Serif fonts.

Screenshot of Suitcase Fusion 3

Tag Your Fonts

I’ve more recently been tagging some of my favorite web fonts that are available on sites like Typekit or Google Web Fonts and also freeware fonts to be used with @font-face. This will be time consuming or even impossible to keep up with if you try to download and tag every single one of the fonts available. I try to narrow it down to my favorite and most-used fonts. This is just an example of how you can tag your fonts to work best with the type of work you do.

Downsize Your Collection

Categorizing, grouping and tagging your fonts might seem a little obsessive compulsive to some, but for me, the initial time spent up front organizing my fonts has made a huge difference in my workflow. I actually downsized my font collection by thousands. The extra time and effort it takes to stay organized keeps me from hoarding too many fonts. If you don’t want to take the time to categorize and tag it, do you really love it that much? :)

Fontcase Typesetter

Fontcase (the font management software I currently use and love!) really caters to web designers, especially with their typesetter feature. You can pull up any website, and by dragging fonts from your library on the window, substitute the fonts immediately. You can even adjust the size of the font, color, leading and paragraph alignment right in the window.

This feature is perfect to see how combinations of certain fonts look together in different styles before committing, and much easier than opening up a graphics editor like Photoshop.

Screenshot of Fontcase Typesetter in action

Popular Font Management Software

There are tons of really great font management software out there. Here’s a list of a few popular ones. If you don’t see one listed, let me know and I’ll add it. :)

• Font Book (Mac)
• Suitcase Fusion 3 (Mac & Win)
• Fontcase (Mac)
• FontExplorer X (Mac & Win)
• Font Expert (Win)

Badges are just one example of a gamification feature that we use at Treehouse to provide instruction, inspire and reward achievements, establish and maintain reputation, and create a community. Let’s dive in and take you behind the scenes of how and why we’ve implemented badges as a major feature of Treehouse.

Why Treehouse embraced gamification:

Badges provide instruction to the user.

Badges can be a great way to provide visual instruction for a user within the mobile or web application environment. At Treehouse, we use badges to guide the user through the curriculum in a way that makes the most sense. If you take a look at our badge map, you’ll notice that the HTML badge can’t be achieved without first unlocking all of the child badges. This creates academic structure and work flow in a fun and rewarding way. It also means there’s no shortcut around learning and understanding tables to unlock the HTML badge, no matter how much you might despise them. :)

Badges challenge the user to set goals.

Incorporating badges into a mobile or web application challenge users to set and meet goals. Upon joining Treehouse, a member may only plan to learn HTML but when they realize the design foundation badge can’t be achieved without also unlocking the CSS & CSS3 badges, their goals are broadened. This forces the user to step outside their comfort zone to learn topics they might otherwise have avoided, creating self motivation. It also introduces content to a user who wouldn’t have initially explored it on their own. That sounds like a win-win to me!

Badges are an affirmation of a job well done.

Once a Treehouse member has watched the videos, passed the quizzes, and succeeded in the code challenges, a message and the awarded badge pops up, affirming their success. Badges in application design serve as a virtual trophy to make the user feel as though all their effort (beyond the knowledge they retain) is worth it in the end. The virtual trophy can then be displayed on their virtual shelf – or profile page – to remind others and themselves of a job well done.

Badges encourage users to establish and maintain their reputation.

At Treehouse, a user’s collection of badges are a visual representation of their experience, expertise, and accomplishments. Much like a resume, it allows a user to advertise what or who they know without blatantly bragging. Humans are instinctively competitive, so collecting badges can be motivating and exciting to unlock. The more you have, the more it appears you know (and hopefully actually know, too!). In turn, the user is more inclined to collect badges since they know other users can see how many and which badges they’ve earned.

In addition to quantity, exclusivity of badges can also be a way to establish and maintain a user’s reputation. For example, our Future of Web Design attendees who participated in the Treehouse LEGO contest received a unique limited edition badge that no one else can unlock.

Badges create a sense of community.

Treehouse encourages members to interact with each other and the content, ask questions, and share what they’ve learned – much like a real classroom environment.

Publicly showcasing unlocked badges on users’ profiles and announcing achievements through social networks creates buzz for non-members and inspires current members to keep learning. It also allows the user to see what badges they have in common with other Treehouse members. It is this bond with each other that emphasizes it’s a journey they’re all taking together.

Websites should no longer be something you simply see and read, but something you explore and interact with. It’s with the help of our badge system that we have broken down that invisible barrier between the 2 and 3-dimensional worlds. The concept of combining education and gamification is a modern and effective approach that the team at Treehouse is hoping will change the way we learn in the web industry.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

• Accessibility
• Business
• CSS3
• Design
• Django
• HTML & CSS
• HTML5
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• SASS
• UX
• Version Control
• WordPress Theme Design

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

• Accessibility
• CSS3
• Design
• Django
• HTML & CSS
• HTML5
• iOS Development
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• SASS
• UX
• Version Control
• WordPress Theme Design

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

This video is from Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

• Accessibility
• Business
• CSS3
• Design
• Django
• HTML & CSS
• HTML5
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• SASS
• UX
• Version Control
• WordPress Theme Design

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos.

This iteration of the Treehouse logo featured a treehouse with several leaves layered on top.

This version of the Treehouse logo featured several leaves surrounding a Treehouse.

This is another version of the treehouse and leaves logo, placed with a different font and different colors.

This version included wooden planks with leaves on top.

This final version of the Treehouse logo is a water droplet with leaves, symbolizing growth.

FitVids.js allows for Flash video embeds to work in a responsive layout. Typically, this is pretty difficult to achieve; often the video will get cut off, or it will have the incorrect aspect ratio. With FitVids.js, all of those problems fade away! Check out the video below to see FitVids.js in action.

The Master Class is available to all Gold Members of Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

• Accessibility
• Business
• CSS3
• Design
• Django
• HTML & CSS
• HTML5
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• SASS
• UX
• Version Control
• WordPress Theme Design

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos and check it out!

We’ve read countless articles, heard tons of presentations and own lots of books on “The Design Process,” and we see the awesome work that results from following it. You can’t help but drool at the extensive amount of research, the picture-perfect timelines and of course – what must be an unlimited budget. While it’s inspiring, and definitely sets the bar for what can be achieved in ideal circumstances, how does it affect the designer working under quite the opposite scenario?

For those of us who work independently or for small studios, we know what it’s like to be expected to turn around design solutions in several days, or even hours. What we don’t read or hear enough about is how we can manipulate the design process to fit into our everyday workflow. And when we do streamline the design process, which phases do we skip and which can we never work around?

Discover

During this phase we’re provided a creative brief, perform research and a competitive analysis, create user personas, and determine stakeholders. These all sound intimidating and time consuming, but we can include them into even the smallest of projects on a lesser scale than the big budget projects.

Tip: Designing an email or newsletter? If you get a lot of similar clients like I do, register a test email account and subscribe to your clients’ competitors’ email newsletters and tag them for quick reference. They’ll be impressed that you know what their competitors are doing. Even though it’s on a smaller scale, it’s still considered competitive analysis. Not so scary, right?

Define

In this stage we gather the findings we’ve discovered and move on to define the project. We’ll begin establishing our information architecture through methods like card-sorting. We’ll also begin forming a vision for the design solution through sketches, wireframes, and prototypes. This might sound impossible to make time for during small projects, but there are less involved techniques, too.

In this article Allison H. gives a super fast sketching technique for assigning value and arranging UI elements.

Tip: More likely than not, you’ll find UI Stencil’s browser sketch pad on my desk. Omnigraffle is one of my favorite applications for creating prototypes. It’s a fairly robust program that lets you share layers and link up pages. For designers, you’ll feel right at home in the user interface.

Design and Refine

Now we can focus on the look and feel of the user interface, and like most designers it’s the phase I’m always anxious to get to. Since we’ve already established our layout and information architecture, we can narrow our focus on everything from (but not limited to) photography, typography and color palettes to styling UI elements like buttons, forms and CTA’s.

Starting from scratch can make this seem pretty overwhelming. For clients I frequently design for, I’ll create a global PSD that contains everything from button and form styles to dummy header and paragraph text. This helps ensure brand cohesiveness, consistency and improves efficiency.

Tip: I have a folder on my desktop filled with design inspiration for everything from emails, newsletters, websites, forms, buttons, etc. and browse with Adobe Bridge for easy access. It’s so much easier and more efficient than visiting design inspiration websites that can distract you from the task at hand. (Guilty!)

Develop and Test

It’s during this phase where we start building the actual website/application. We know how important it is to write clean, semantic and multi-browser compatible code. That doesn’t sound too overwhelming until you start including different operating systems, multiple email clients, various devices and screen resolutions. Be a pal to your future self and use grid systems, resources like Boilerplate and Compass, which will take care of a lot of the legwork for you.

Tip: I have a small library of templates I’ve created to make the coding process quick and painless. When I’m coding, I use tools like TextExpander to avoid typing things over and over from project to project.

Deliver and Manage

In the final stage of the project we’ll hear terms like quality assurance, focus groups, heuristic inspections and user testing. In smaller environments where the knee jerk reaction is to get started on the next “ASAP” project, it can be tempting to forgo this phase. Instead of skipping it all together when time is of the essence, perform them on a much smaller scale.

Tip: When I need some quick feedback on a project I’ll prepare a few specific questions to ask individuals in the office who have less of a creative and/or technical background. This could be the sales rep, the project manager, the programmer, etc. I’ve found that the less attached to the client and project – the better. Don’t limit yourself to your fellow creatives or account executives, take advantage of the people around you.

While I’ve only skimmed the surface of The Design Process, I hope this got you thinking about different ways to manipulate techniques and processes normally only associated with large budget projects and big time clients.
For those of you who work for yourselves or small agencies, how have you streamlined The Design Process to fit into your everyday workflow?

Over the past year, responsive design has become quite the hot topic in the web design community. If all the buzz has you feeling like Rip Van Winkle waking up in the 21st century, this summary will help you catch up with the times.

What is responsive design?

Let’s just get right into it: Believe it or not, the Think Vitamin blog that you’re reading this article on is actually a responsive design! To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the design looks like at various screen resolutions:

It’s hard to talk about responsive design without mentioning its creator, Ethan Marcotte. If you haven’t read his seminal article about responsive web design, I highly recommend you check it out (seriously, this is required reading). In the article, Ethan discusses all the key ideas that form responsive web design; and that’s really what responsive design is, technically. It’s not a single piece of technology, but rather, a set of techniques and ideas that form a whole. This is one of the main sources of confusion, and in a moment we’ll break things down and take a look at each part.

So, what is responsive design exactly? Actually, a better question to ask might be, what problem does responsive web design solve? Well, as you may have noticed, computers aren’t the only piece of hardware with a web browser anymore. I might get myself in trouble by saying this, but the iPhone was one of the first mobile devices to feature a really great web browser, and it really put the spotlight on upgrading the experience of the mobile web. Many other devices followed suit and, seemingly overnight, the face of the mobile web had changed.

The changing landscape of web browsers meant that users expectations also changed; people expected to be able to browse the web on their phones just as easily as they browse the web on a desktop computer. So, in response to this (if you’ll excuse the pun) the web design community started creating mobile versions of their websites. In hindsight, this wasn’t really the way forward, but at the time it seemed like a reasonable idea. Every website would have their normal ‘desktop’ version of their site, and as a bonus, a ‘mobile’ version.

Technology never stops marching forward, so not long after the phone hardware market had been revolutionized, other form factors surged in popularity. In addition to phones and personal computers, devices like touchscreen tablets and small notebook computers (netbooks, if you prefer the term) started appearing everywhere.

It’s not just small screens, either. Large, high-resolution displays are starting to become much more common than they used to be, and it would be a waste for web designers to not take advantage of this.

In summary, the spectrum of screen sizes and resolutions is widening every day, and creating a different version of a website that targets each individual device is not a practical way forward. This is the problem that responsive web design addresses head on.

Previously, I mentioned that responsive web design is not a single piece of technology, but rather, a collection of techniques and ideas. Now that we have a better idea of the problem space we’re addressing, let’s take a look at each part of the solution.

Fluid Grids

The first key idea behind responsive design is the usage of what’s known as a fluid grid. In recent memory, creating a ‘liquid layout’ that expands with the page hasn’t been quite as popular as creating fixed width layouts; page designs that are a fixed number of pixels across, and then centered on the page. However, when one considers the huge number of screen resolutions present in today’s market, the benefit of liquid layouts is too great to ignore.

Fluid grids go a few steps beyond the traditional liquid layout. Instead of designing a layout based on rigid pixels or arbitrary percentage values, a fluid grid is more carefully designed in terms of proportions. This way, when a layout is squeezed onto a tiny mobile device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to one another.

In order to calculate the proportions for each page element, you must divide the target element by its context. Currently, the best way to do this is to first create a high fidelity mockup in a pixel based imaged editor, like Photoshop. With your high fidelity mockup in hand, you can measure a page element and divide it by the full width of the page. For example, if your layout is a typical size like 960 pixels across, then this would be your “container” value. Then, let’s say that our target element is some arbitrary value, like 300 pixels wide. If we multiply the result by 100, we get the percentage value of 31.25% which we can apply to the target element. Here’s the math:

If your values don’t work out so neatly, and you get some floating point value with many numbers after the decimal, don’t round the value! We humans may enjoy nice neat numbers and making our code look pretty, but your computer (and the final look of your design) will benefit from the seemingly excessive mathematical precision.

Fluid grids are a very important part of creating a responsive design, but they can only take us so far. When the width of the browser becomes too narrow, the design can start to severely break down. For example, a complex three-column layout isn’t going to work very well on a small mobile phone. Fortunately, responsive design has taken care of this problem by using media queries.

Media Queries

The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify. If we wanted to apply some styling to mobile phones, our media query might look something like the following.

@media screen and (min-width: 480px) {
 
  .content {
    float: left;
  }
 
  .social_icons {
    display: none
  }
 
  // and so on...
 
}

Using a series of media queries like this, we can work our way up towards larger resolutions. The set of pixel widths I recommend targeting are as follows:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

Again, these are just recommended, and should serve as a starting point. In an ideal world, you would adjust your layout to perfectly match every device width, but often times you have to pick and choose where you spend your efforts. From a more practical perspective, the resolutions that a design targets will be based on the resolutions of the people using that design, time and budget constraints, highly contextual situations, and so on. In summary, when deciding what resolutions to target, you should use your judgement. Targeting more resolutions is going to take more time, and assuming you’re not an immortal being with unlimited time, that effort should be spent carefully.

Again, to see a responsive design in action, simply open this article up on a desktop browser and slowly resize the browser to make it thinner. You should see all the page elements adjusting themselves automagically to fit the new width, going all the way down to the size of a mobile browser.

Resources

Responsive web design is about a year old now, and there are plenty of resources that can help you learn more about it. On our high-quality video training service Think Vitamin Membership we have many videos that go in depth on the topic. Here are some links:

• Responsive Web Design Video Course on Think Vitamin Membership
• Video: Introduction to Responsive Web Design
• Ethan Marcotte’s article on Responsive Web Design
• The W3C specification for CSS3 Media Queries
• A great roundup of responsive design techniques via Smashing Magazine

Hopefully this article helped, but if you’re still feeling confused about responsive design, don’t be afraid to leave a question or comment. If you’re already utilizing responsive web design in your site or web application, share the link here so we can see!

The Master Class is available to all Gold Members of Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

• Accessibility
• Business
• CSS3
• Design
• Django
• HTML & CSS
• HTML5
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• SASS
• UX
• Version Control
• WordPress Theme Design

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos and check it out!

As a user interface designer, the most important thing to remember is that it isn’t just you and a blank canvas. There’s a very important third party – the user. Unlike traditional art, they’re not an observer, but a key participant in the final product.

Learn when and where to be break creative boundaries, and when it’s more appropriate to be consistent with what’s proven to work. Design around your constraints; don’t reinvent them for the sole purpose of being “creative.” There’s a reason why certain design patterns are used over and over again — because they’re familiar, recognizable, and they work!

Respect the Boundaries Before You Break Them

We’ve heard of heat mapping, been told to respect “the fold” and referenced things like the “F Pattern” to base our interfaces on. This stems from the newspaper industry, where the most important story would appear in the upper half of the front page of the newspaper and from western culture, where we read from left to right and top to bottom. (Check out Above the Fold by Brian Miller for more information on this topic!) These principles from traditional design standards have created a structure of suggested guidelines for us to follow as interface designers.

While it’s imperative to keep these boundaries in mind when designing, don’t use it as an excuse to limit your creativity. Use them as structure, but don’t be afraid to tastefully “break the rules” and design around your constraints. Step out of your comfort zone — that’s how new design patterns are created!

Establish Hierarchy and Encourage Exploration

The second a user lands on your website or opens your application, they should quickly understand it’s purpose, how it benefits them and what actions they can take. Help them answer these questions by establishing visual hierarchy and arranging the layout purposefully to encourage exploration.

Use size, position, color, whitespace and typographic treatment to draw the eye immediately to a fixed point or anchor with a digestible amount of content that then naturally leads our eye through the rest of the page.

According to Avinash Kaushik of Google, the average bounce rate is between 40-60%, stressing the importance of first impressions. “Everybody has ADD, if you don’t have want they want they leave instantly. You can’t win them all.”

Guide Your Users; Don’t Herd Them

Once a solid visual hierarchy has been established, guide them. Primary call-to-actions should have more visual weight (ex: brighter and larger) than less optimal, but necessary call-to-actions (ex: smaller and muted).

Don’t make assumptions and herd the user or force them to go somewhere they might not be ready to go yet. Give them the opportunity to explore and use your interface as they see fit. Bottom line is that not everyone wants to or will use your website the same way.

Help maintain the user’s focus by reducing clutter and showing only the most applicable and important information necessary for the interaction taking place at that time. This is referred to as “progressive disclosure” and can be achieved through simple solutions like dropdowns and accordions or more advanced technologies like AJAX.

Prepare the User for What’s Next and Constantly and Consistently Provide Feedback

Now that the user knows who you are and where to go first, they should be aware with what effect their actions will have on their experience. You never want to leave them wondering, “If I click here, what will happen?” No one wants to be caught of guard, especially in a new and unfamiliar environment. Because as soon as the user feels out of control, they’ll escape the first chance they get.

Warn them when something’s about to happen and reassure them once it has. It can be details as simple as in-field labels, auto-focus, hover states and thoughtfully written call-to-actions that make the biggest difference in user experience.

Similar actionable elements throughout your website or application should have consistent results. For example, a rule of thumb I like to stick to is dedicating specific colors for buttons and links. I avoid using the same color for headlines, subheads or any other text. It’s a great way to distinguish call-to-actions or hyperlinked text from non-clickable elements. While there’s always extenuating circumstances, it never hurts to be consistent.

All in all, the user will feel more comfortable exploring deeper and interacting more often with your website or application, if they can rely on constant and consistent feedback.

Try, Test, Fix and Repeat

What’s great about interactive media is that nothing is permanent. We can instantly begin improving the experience of our website or application based on feedback we’ve gathered from tools like Google Analytics, methods like A/B testing, or direct input from the users themselves. Our user interface should always be changing.

As designers, it’s our challenge is to balance what’s been proven to work, the business needs of our clients and breaking the creative boundaries of user experience. Testing the limitations of design is what creates new design patterns, but not without respecting them first.

The Master Class is available to all Gold Members of Think Vitamin Membership, a high-quality video training site, curated by us at Carsonified and Think Vitamin, with hundreds of short videos on topics like …

• Accessibility
• Business
• CSS3
• Design
• Django
• HTML & CSS
• HTML5
• JavaScript
• jQuery
• NoSQL
• PHP
• Responsive Web Design
• Ruby
• Ruby on Rails
• SASS
• UX
• Version Control
• WordPress Theme Design

New videos are added every week, so it’s a great way to stay up-to-date on all the latest technology and methods. Browse the entire library of videos and check it out!

It wasn’t until college that I started reading more design books and realized that I wasn’t asking the right questions during my process. Questions like:

• Why is the user on this screen?
• What is the most important piece of information to them?
• What’s the next action they want to take?

It was no longer about patterns and standards and all about how those can facilitate the user’s experience. This was a turning point in my approach to design, and the responses to my work changed accordingly. Suddenly, a lot of folks were asking me how I do what I do—almost as if I had developed that sixth sense.

I’m going to demonstrate how those questions impact my design thinking with a walkthrough of a design I’m working on now.

Identify the primary goal

Here’s a bunch of stuff I need to put on the class page for Treehouse, the new Think Vitamin Membership.

A class is basically a playlist of videos related to a particular topic—Design Fundamentals or CSS Animation, for example. I also need to include some information about the video and actions for the class.

Before I do anything, I have to get into the user’s head. Designers are fortunate to be equipped with fantastic imaginations, and this really comes in handy when you want to pretend you’re someone else. Alright, I’m the user. Why am I on this page? What do I want to do? This is the time to be discerning—I have to decide on their primary goal.

I’m going to assume their primary goal is to watch the class, so that’s my focus.

Group and Assign Value

Now that I know my focus, I can group the elements and assign value from there.

Of all the information about the class, the description, thumbnail, and author are most important is helping the user determine whether they want to watch the class. The total duration of the playlist and number of videos in it is less important.

Similarly, the two most important actions are watching the class and taking the quiz. Less important are the RSS feed, downloads, and social sharing.

An Arrangement of Elements

Once I’ve identified the most and least valuable elements, it comes down to making the important stuff stand out and de-emphasizing the unimportant stuff. There are lots of ways to make things stand out—size, boldness, contrasting color. Since I’m sketching, I’m just going to use what I can represent on paper: size and position.

What’s important here? The big stuff. The title is a large font size, the “watch class” action is the largest button, the playlist takes up the most space, and the quiz button is differentiated from the less important action button next to it by bigger size.

Remember: If you use the same visual style for two elements, you’re saying they’re equally important.

Open to Change

I never get it right the first time, always making further re-arrangements as I go along. Don’t be afraid to scrap layouts and start over—if you get the feeling things could be better, you’re probably right. With every change, take a moment to get in the user’s shoes and walk through the interface; asking the same questions about their goals, desired actions, and intentions.

—
This post has been kindly translated into Korean.

If you want to see an in-depth tour of Google Web Fonts v2, and see the ways Google will help you load fonts faster, check out this talk from Google IO.