Put On Your Thinking Cap.

Evaluate and discuss topics with me.

I’ve coded a lot of websites for a lot of different designers and a common problem I experience with each one is something that should really be natural to them in the first place – the idea that form follows function. Most of this problem stems from the fact that they are not web developers. The most overlooked areas that I’ve noticed are those in SEO, usability and in page load time.

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.

The user interface is an integral part of a website no matter what the purpose. My job as a web designer and developer is to figure out how to make a website navigable and easy to use whilst making it look professional.

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.

The Evolution of My JAL Logo

I was looking at my Gravatar account earlier today when I stumbled upon something interesting. I remember the day I first uploaded my new identity to Logopond I thought that was it, I would never tweak it and never have a need to. Wow how things change. Below is the evolution of my logo from May 31st on the right to sometime in July in the middle to my current version which I’ve just updated today.

jared lunde logo evolution

The most glaring problem I was facing with the previous two was that in small sizes the shape could be kind of lost. The logo designs started to feel really frail to me which is a far cry from the look I was going for. Today I am fairly certain that I am done tweaking it, though. This latest version seems to portray the boldness I had always hoped it would and reduces to even favicon size really well. While, the general shapes of all of the marks are still very similar (a shape which I love and I think really speaks very loudly), the personality supporting the 3 is drastically different, in my opinion.

It just goes to show you, some projects just never end :)

1. Dexter (Showtime)

The Dexter introduction is an admirable combination of eerie and interesting. From cutting himself shaving, to splattering hot sauce on eggs, they chose the right lighting, music and routine items the whole way through. It’s a perfect mood-setter for the certain tension and anxiety you’ll be feeling as the episode progresses.

2. Mad Men (AMC)

Composed to RJD2’s A Beautiful Mine, Mad Men’s intro is both creative and simple. There are a lot of things great about this introduction. The choice to use a silhouette, as opposed to say a full character was brilliant in that it could be any one of us in that daily grind. The clever color choices are also a standout in this intro in that they are used sparingly and really reflect well against the overall paleness of the scene.

3. Six Feet Under (HBO)

I’m not sure what it is about Michael C. Hall, but great introductions seem to follow him. Along with Dexter, Six Feet Under is the boasts a wonderful soundtrack another great sequence. Following several shots filled with dull lighting and muted colors, you are smacked in the face with a perfectly bright blue and green landscape, at the center of which sits a single tree that quickly fades into the Six Feet Under logo, which by the way is one of my favorites in the history of television.

4. Lord of War

Lord of War begins with one of the most compelling opening sequences I’ve ever seen in a movie. The scene, known as “Journey of the Bullet,” is played to the tune of For What It’s Worth by Buffalo Springfield and depicts a bullet’s lifespan from production, to shipping, to the inevitable shooting.

5. Weeds (Showtime)

Weeds is the perfect example of how to take an introduction that is good and destroy in your latest seasons. The Weeds opening sequence in season 1 was produced to the great, original rendition of Malvina Reynolds’ song Little Boxes and the shots were a witty and literal interpretation of the song. While seasons 2 through 4 used the same opening sequence, they cleverly switched out Little Boxes with a new cover each episode. Standouts for me include covers by Regina Spektor, Michael Franti, the Decemberists, Randy Newman and Rise Against. In season 5, Jenji Kohan and Weeds decided to ditch the original opening in favor of a different 10 second piece of garbage each episode, of which I don’t remember one scene.

6. The Royal Tenenbaums

Prologue to the Royal Tenebaums

Since I couldn’t find a good embed for this video, the link will have to do. The Royal Tenenbaums opens with original music by Mark Mothersbaugh (common in Wes Anderson flicks) followed by a take on Hey Jude by The Mutato Muzika Orchestra and the deep-voiced, raspy narration of Alec Baldwin. This opening sequence does a great job introducing each character in the movie and provides a great foundation for the rest of the flick. It is captioned by the unmistakeable Wes Anderson classic typeface, Futura Bold which I have always considered to work perfectly with his shooting style.

7. True Blood (HBO)

I have only had the pleasure of watching this show for a few episodes, but I have seen the intro well over a hundred times. The imagery, the soundtrack, the typography – all spot on. The sequence plays to Bad Things by Jace Everett and the way that the scenes hold the tempo and emotion of the song is truly compelling and a work of art. I also figured I’d include this one on the list while vampires were still in.

1. Consolidate your javascript and css files

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