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.
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?
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?
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.
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.
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.
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
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.
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.
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:
#We can't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ \
#Don't compress executables
SetEnvIfNoCase Request_URI \
#Don't compress pdf files
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
If we are able to use mod_gzip, we’ll use this:
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_exclude mime ^image/.* #Exclude images
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
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'))
// start ob_gzhandler
//set document type headers
//set cache-control headers
$addition = 60 * 60 * 24 * 365 ;
$expires = "expires: " . gmdate("D, d M Y H:i:s", time() + $addition) . " GMT";
//set expires headers to 1 year
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:
#Revalidate in 1 hour
Header set Cache-Control "max-age=3600, must-revalidate"
#Cache expires in 1 year
Header set Cache-Control "max-age=290304000, public"
Header unset Pragma
Header unset Last-Modified
FileETag MTime Size
#Never cache this, files are dynamic
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
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:
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.
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