The video pages themselves offer up cool charts that are updated each hour and show how and where videos are trending. Users on the site can then react to each video with comments and preselected phrases such as:

This video made me… cry

This video made me… OMG

Users can also submit videos to the site themselves from a choice of around 10 of the largest video sites on the Internet. This gives them the ability to gain clout on the community by finding material before other people and before the site itself finds it. Another cool feature that members of the site are given is the ability to create playlists featuring their favorite videos.

Overall DISQY is a fun site for the casual visitor or the hardcore user.

Check out DISQY

When I was designing Make A Dare, I really wanted to highlight the major features and let the new user know what they were in for right away on the landing page. On its homepage, I put in a big banner the general concept of the site.

Watch – Check out the crazy things our members are doing everyday!

Join – Why just sit there when you can be a part of Make A Dare?

Dare – Got something you want to see? Dare someone to do it!

Vote – Like what you see? Hype it! Think it’s lame? Diss it!

Compete – Earn streetcred by completing dares and impressing your friends and fans.

Beneath the banner I placed a large featured video section to give a general sense of the type of dares one could expect to see/complete on Make A Dare. This is followed by a featured user and the most popular dares on the site. Upon seeing all of this, I believe it is immediately recognizable just what kind of a fun, addicting site this can be.

The second likely landing page was the individual dare video page. On this page we see clearly in the title what the dare is, how much streetcred has been earned so far and who completed the dare. We also have social sharing buttons in the title section. On the right side we put a section for “more about the dare” which explains the dare more in depth in case it wasn’t clear from the title, as well as a section for what the user had to say about the dare and which other people had completed the dare previously. There is also a related media section at the bottom of the page which encourages deeper site navigation for a new user and fuels addiction to the site.

Although typically referred to as “Jackass meets YouTube,” we really wanted to emphasize in both the design and concept that this was not just a site to show how much pain you could withstand, but was also a site about how much fun you can have out in public or in your own bedroom. In reality, the dares range from the funny, humiliating, gross, off-the-wall, to painful. Because of this, the design really stays away from being really crazy and all over the place and really sticks to clean and fun.

Sign up at Make A Dare and find out for yourself just how fun and addicting this new social network is.

Last weekend I had a really interesting project. I redesigned and developed an existing site called MakeAGif.com to make it more user friendly and to give it a nice boost in traffic. MakeAGif is a clever site that was started by my favorite partner in crime, Troy Osinoff, that lets users create an animated .gif online out of still images they have on their computer in just 3 easy steps. The main problems with the old version were that it was hard to figure how to make a gif and once you had made it you were redirected to a page that was only temporary. Check out the old site by clicking the picture to the left.

With the new redesign, there are clear steps laid out to animating your gif and the form options are much easier to use. The script used to create the gif is a lot more fast and efficient now, as well. Once your gif is uploaded, instead of being redirected to a temporary page, you are redirected to a “Share Page” where you can link your gif to your blog, website, facebook and twitter pages.

Along with improving the UI and speed, I was able to implement some new features to the site. The most notable is the photo booth which allows you to take pictures directly from your webcam on the website and create a gif from from them instantly. I also had the site translated into Spanish and created a sister site called Animados Gif to be more user friendly to our Spanish-speaking traffic.

Since implementing the share pages and other features, traffic on the site has almost doubled in less than 3 days, with more people sharing and hosting their gifs right on Make A Gif, rather than uploading them elsewhere and sharing. Be sure to check out the redesign and to use the photo booth. Trust me, it’s addicting.

Honestly anyone with knowledge of HTML can do this and trust me it will save you loads of time in the long run.  The main idea behind this structure is that anything that is going to be on more than one page in your website is going to be called through a php include.  The reasoning behind it is that if you ever plan on updating the design or structure of your site, you’ll be able to do so much quicker through this method because instead of updating each page individually, you’ll only have to update one file.  It is also a wonderful solution because of how clean your markup will look.

The first thing we want to do is map out the areas that we are going to be using on every page on our site.  Let’s start with the information between our <head> tags.

<head> – include name: “head-constants.php”
Likely culprits in this section include your content type, favicon, stylesheets, javascript and possibly RSS feeds:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/global.css" />
<script type="text/javascript" src="/js/global.js">
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="Development Blog RSS" href="http://www.jaredlunde.com/blog/feed/" />

Next let’s think about the <body> of our document. Since I like to keep similar page structure on all of my sites for easier user navigation, I’m going to include a file that has the <body> tag within it. This file will be required directly after the </head> tag.

<body> – include name: “body-top.php”
<body>
<div class="main">
<div class="content">

Now that I have my main page structure set in body-top.php, I’ll want to include a file within body-top.php that takes care of the header portion of my website.

Header & Navigation – include name: “header.php”
Within header.php, we’ll keep our markup for our logo, navigation, search bar, etc. Anything that will be in the header of every page on your site.

If you have a sidebar that is constant on your entire site, it’d be a good idea to include that as well, but for the sake of length I’m only going to include a footer in this example.

Footer – include name: “footer.php”
The footer is where we will close our body, html and set structure tags. You may also want to include a footer navigation or copyright information in this file as we did with header.php.
</div>
</div>
</body>
</html>

So what does this look like when it is all pieced together into a document?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World!</title>
<meta name="description" content="An example of a well-structured HTML layout" />


<?php require('head-constants.php'); ?>


</head>


<?php require('body-top.php'); ?>


Here is the rest of our body content.


<?php require('footer.php'); ?>


It’s looks clean and pretty doesn’t it? What’s great is that we can now spend 10 minutes updating all of our pages instead of 10 hours or having to deal with the horror of a massive find/replace.

I don’t get particular enjoyment out of pointing out the flaws in others, but in this case it is so worth it.  For over a year, WebDesignerDepot (Web Designer Depot) has been handing out terrible advice and ripped off posts to its users.  Their articles lack attention to detail, sense, and quality of any kind.

Perhaps the funniest post I read of theirs was one that they did on “Coding for Speed and Quality”.  I say it is funny because if they can’t even control the speed at which their own website loads and is presented (it is slow and looks like someone threw up on the header – also lacks any navigation whatsoever) why in the world are they writing an article about it?  The site (uncached) weighs an incredible 1642.3KB, with a cached weight of 118.3K and all the while making an unprecendented 160 HTTP requests.  The entire site took an astonishing between 22 and 29 seconds for me to load uncached and between 14 to 20 seconds cached.  Maybe I’m nitpicking, but if I’m not on a 56K modem and a site is taking that long for me to load, someone is doing something very very wrong.

The worst part of all of this is that the Web Designer Depot actually has people who drink their kool-aid on a regular basis.  Their following is over 85,000 on twitter and they sport a cool 4,500 Alexa ranking.  You get what you pay for I guess.  At least I assume that’s how they did it – paying users at digg to get their articles to the front page.  There is no other possible way that intelligent beings would ever digg or distribute their drivel.   I suppose it’s easy from there, you’ve got your name in the ring and you become a hobby for beginner and know-nothing web designers and developers who are now doomed for eternity (or at least until they find a better blog).

Frank O’Driscoll
E-Revenue Project Manager
American Cancer Society
Eastern Division, Inc.

Web Fonts
A well-known fact about non-developing designers is that they love to use not safe for web fonts. This becomes more of a problem when they specifically request that a webpage looks exactly like their design. The truth is that no matter how you slice it, web developers are limited in options when it comes to web fonts. We shouldn’t use sIFR, because that can cause serious load time problems. Even with @font-face our hands are tied because we are limited to only free fonts due to redistribution clauses in font licenses. The last resort is to use images to replace all of the good quality content that should be on the page. An alt tag only does so much for search engines so we are really shooting ourselves in the foot in the form of Search Engine Optimization by using this method. What is the purpose of producing a website that *looks good* if no one is going to see it in the first place?

Page Titles
Another problem I have faced not only with web designers, but clients in general is that they like to use their page titles as cheesy marketing devices rather than for keyword optimization. In a perfect world, I’d like to use something like Works by Jared Lunde | Design Simplified, but the reality of the matter is that I am much better off using a page title like Logo Design & Web Development | Madison, Wisconsin because those are the key phrases that I am looking to get visits from. Again, what is the purpose of making it look good if no one is visiting?

Background Images
A major pet-peeve of mine is when I see a website that doesn’t take into account screen resolution sizes or load times with their web pages. A designer should always be aware of typical screen resolution sizes and plan accordingly. I’m also a firm believer that a background doesn’t need to be elaborate or textured and in some cases it definitely shouldn’t be. While the background may look *cool* it is entirely possible that you are in fact doing harm to the experience by a) increasing load time by a lot or b) distracting from content that a visitor should be paying attention to. I mention the former a lot because it really is the most important thing you need to consider when designing a web page. You never want to direct a visitor’s attention away from where they should be looking and with proper background usage, we can actually point them in the correct direction. For instance, you’ll see a lot advertisements in magazines where something as subtle as lines in sand can be directing your eye attention to a specific phrase on the page. It is entirely possible to harness those same techniques on a website and you should definitely consider it if you are going to be using a background image.

Javascript
One final annoyance of mine is poor use of javascript effects. Not all javascript effects are bad, in fact if used correctly they are amazing and can add a real wow-factor to the UI. Some designers just don’t know how to use it correctly, though. I’ve been on a few projects where a substantial amount of good information is hidden from a user’s view for the sole purpose of using javascript fade ins/outs. The last thing we want to do is hide something we need the user to see from their eye line. Another downfall of hiding information is that there is a possibility that hiding enough will actually start to harm your search rankings. Because of this (and because some users have it turned off) there absolutely needs to be a no javascript backstop on the page where ever it is used.

Different websites have different purposes and therefore have different requirements in the user interface. The first question I ask myself and my client when designing a web page is ultimately “What do you want the user to do next?” The question is so important, yet is often overlooked by most designers and developers. If I want them to fill out a form, how do I direct their attention to the form? If I want them to watch a video, how can I get them to do so? Knowing what you want a user to do next is important as knowing what exactly it is your website is about.

This task is much more difficult than it sounds on paper. We need to consider that the last thing we want a user to think they are looking at is spam, even if it is. Ultimately, a user wants to land on a page that is a) what they were searching for when reaching you and b) professional-looking enough not to raise any red flags. The former is most important on e-commerce websites where the goal is to sell something tangible and not look like a scam-artist while the first is a requirement across all websites. This means that the user interface includes not only includes design and content, but page titles and descriptions as well.

By taking into account the little things that affect a user’s website experience, we can ensure that the end result will be a positive one.

If you are embedding more than two javascript files per document or more than one CSS file per document, sorry, but you’re doing it wrong.  It is much better to embed one 60K CSS or JS file than to embed three 20K files.  By doing so, you are making it easier for the browser to cache the files and you are reducing the number of HTTP requests your browser has to make on page load.

2. Minify javascript and css

If you are using jQuery or some other javascript framework they will have minified versions available.  Beyond that, you should only use what you need.  Do you really need every single effect that comes along with this framework?  Does this plugin really add anything to my interface?  K.I.S.S.  If you are writing your own javascript,  /packer/ is a great resource for minifying your javascript.

You should only minify your CSS file after you are done writing it (for quicker formatting on your end).  If you Google “Compress CSS” there are plenty of resources available, although CSS Drive has my favorite.  Remember to back up your CSS file beforehand, just in case a) something goes wrong or b) you plan on redesigning your pages in the future.

3. Compress your javascript/css/html files

I’ll admit, I was scared the first time I tried this.  The worst that can happen is you get a temporary 500 internal server error from your .htaccess file or php gzip compression just doesn’t work.  Not scary at all.  Also keep in mind that we’ll only want to compress plain text files such as php, css, html and javascript so as not to overload the CPU. The most important thing you’ll want to check before doing this is obviously if your server allows you to do so.  Unfortunately, different hosting companies offer different compression packages. Most, if not all, allow the basic PHP compression ob_gzhandler and a happy few allow mod_gzip and mod_deflate in Apache.

If your server uses Apache2, mod_gzip is out of the picture so we’ll use mod_deflate instead. Here is an example of basic compression with mod_deflate:

<IfModule mod_deflate.c>


SetOutputFilter DEFLATE


#We can't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
no-gzip dont-vary


#Don't compress executables
SetEnvIfNoCase Request_URI \
\.(?:exe|t?gz|zip|bz2|sit|rar)$ \
no-gzip dont-vary


#Don't compress pdf files
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary


</IfModule>


If we are able to use mod_gzip, we’ll use this:

<IfModule mod_gzip.c>


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$ #Compress plain text
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.* #Exclude images
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


</IfModule>


The above two examples are really the easiest way to do this, since .htaccess will take care of everything automatically. If you are not allowed to implement either of the above, there is a php alternative. What you’ll want to do is create a file in your includes called gzip.php and add the following:

<?
if(isset($_SERVER['HTTP_ACCEPT_ENCODING']) && substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
{
ob_start('ob_gzhandler');
}
else
{
ob_start();
}
?>


Add at the top of all of your main documents and then add the line to the bottom of each. This will compress your html. To compress your javascript files and css files there is slightly more work. You’ll want to turn each javascript file into a .php and at the top of each include:

<?
// start ob_gzhandler
include('path/to/gzip.php');


//set document type headers
header ("Content-Type: text/javascript; charset: UTF-8");


//set cache-control headers
header("Cache-Control: must-revalidate");
$addition = 60 * 60 * 24 * 365 ;
$expires = "expires: " . gmdate("D, d M Y H:i:s", time() + $addition) . " GMT";


//set expires headers to 1 year
header($expires);
?>


and again you’ll want to add the <? ob_flush(); > to the bottom of each of those documents. The above example is for javascript files, but you can use the same mold for CSS by changing Content-Type to text/css. Your embed for javascript files would then look like:

<script type="text/javascript" src="path/to/javascript.php<?='?v=' . filemtime($_SERVER['DOCUMENT_ROOT'].'/path/to/javascript.php');?>"></script>


4. Add expires headers, configure entity tags

Why do we want to do this? It is going to help the browser cache your files easier and the more files a browser caches of yours, the less HTTP requests the browser has to make. Load time will also decrease because your browser will have to download fewer files to load the page. To do this properly, simply add this to your .htaccess file:

<IfModule mod_headers.c>


#Revalidate in 1 hour
<FilesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>


#Cache expires in 1 year
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
Header unset Pragma
Header unset Last-Modified
FileETag MTime Size
</FilesMatch>


#Never cache this, files are dynamic
<FilesMatch "\.(php)$">
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>


</IfModule>

Because we are setting the expiration on our javascript and css files to 1 year and we may edit them within that time frame, we’ll want to add a version number to each of them. To do this, simply change your embed code to resemble the following:

<script type="text/javascript" src="js/filename.js<?='?v='.filemtime($_SERVER['DOCUMENT_ROOT'].'/path/to/js/filename.js');?>"></script>

What the above code does is grab the file’s date of last modification (filemtime()) and appends it to the file name and what you end up with is something like this:

<script type="text/javascript" src="js/filename.js?v=1256944181"></script>

You can use this same method for your CSS files, as well. Images that are updated may require renaming depending on which browser a visitor is using.

5. Cool it with the images

This is a simple one.  Don’t be an idiot – if the image isn’t adding to the content/design or making it easier for a user to navigate the site, chances are you don’t need it.  The truth is, you can do a lot with CSS and you can make it look just as hot as you can with images. You should also try to use png’s instead of jpg’s or gif’s whenever possible. PNG’s provide the best quality in almost every situation and have generally have smaller file sizes.

6. Use CSS Sprites for background images

This is especially important for things like rounded corners and menus that require more than 1 image to complete.  You can make a full menu with hovers included in one image.  CSS Tricks has a great article on how to use CSS Sprites to your benefit. They use jpg’s which, as you now know, I am totally against. So just imagine that post including png’s and you should be all good.

This is YouTube’s master PNG file used for all background images

7. Download YSlow + Firebug or use some other free website optimization analyzer

You can download YSlow and Firebug here: http://developer.yahoo.com/yslow/

There you have it, these are some simple steps you can take to get the most out of your website.  Feel free to ask any questions in comments or if you’re one of those types, call me an idiot. To learn more about website performance and optimization, visit Yahoo Developer Network