This can be done through combining a site persona with an ongoing narrative, consistent throughout, which will all come together to create a ‘story’ through which you can deliver relevant content.

It’s important to recognize as a designer that the story, which the content is then based on, comes before anything else in the site.

The content can’t simply be ‘dropped’ into the site post-design; it needs to be built up in the correct order: story, content, and then, finally, design.

Putting together the ‘story’ for your site involves two main components, a persona, and a narrative.

Personas

When designing a website, any seasoned designer will tell you is that the most important piece of information they need is the target audience. This is necessary information in styling the website, layout, what content (both text and images) to include, even what color schemes to use.

Once this information is found, either through market research, or through your primary objective as a site being to appeal to a particular audience, you can then work out how to adapt that into your site design. Whilst the content will often dictate what the target audience is—an e-commerce site selling kids toys is clearly aimed at parents—obviously there will always be exceptions. But this is an important part of knowing what your story needs to be conveying. Your ideal target audience has preferences and personality; this is your user persona.

Next comes the site persona, which is effectively a fictional individual, representing your site (not audience) in all ways: style, looks, ideas, age—all symbolizing various aspects of your site. These characteristics come together to form a personality—a persona—that defines your site and helps to provide a clear picture of how it should behave, what it should look like, and what content it should contain.

The importance of this in web design cannot be stressed enough, as it stops designers from falling into the trap of focusing on individual elements from the site, which combine to create a poor site with lack of coordination. A designer with an overall picture of the site, right from the conceptualization stage at the very beginning, will create a far better end product.

To create your site persona, you will need to have the following:

• A good idea of your Target Audience: as mentioned above, you can use your user persona to help mold your site’s persona, however it only needs to relate to the user persona, not mirror it directly, otherwise your site will be far too specific
• References to key figures in your organization (if any): this will help if your brand identity is based on the people in your organization, as your site persona can reflect elements of theirs, just as Apple did with Steve Jobs, and mojang.com, a game development company does with their lead title, Minecraft, referencing it in their site title and various other prominent places.
• Promotional Content: this will make up the user experience on your site, and will be partly influenced by your site persona, but by being a part of it, and so influences it in return. The content will tell your user what the site is about, and what the persona is, playing an important role in the persona of your site. This will be a topic I will return to later in this article, however it is a point worth touching on in relation to personas.
• Any other relevant documentation/content: this may seem incredibly vague, however sites can be so varied, and any relevant content or aspects of a site can be useful in creating a persona for it, and even subtle and seemingly inconsequential things can make a noticeable difference to the front-end of your site.

Narrative

The narrative of your site is the essence of your story, and encompasses all your content. Your narrative is the video embeds in your site; it is the content on your about page; it is your background image; it’s virtually all your content coming together to bring the user an overall experience that forms a narrative.

It’s easy to think of a narrative in a similar way to a thematic site. However, it’s slightly different as themes focus on design, where narrative focuses on all aspects including, and especially, content. The importance of the narrative is that it dictates your site’s pacing and how the user interacts with it, everything from your navigation bar to your ‘transaction complete’ screen.

The best narratives come organically grown, and it helps to have some existing content to define your narrative from, rather than working out your narrative and then artificially creating content around that. In a nutshell, the narrative is the journey the user experiences on their journey throughout your site, and you’ll need to get it right for your user to have an enjoyable experience. Just as a narrative needs to hang together well in a novel, so does your site’s narrative.

As with the ‘references to key figures in your organization’ under Personas above, your narrative can benefit from input from the story of your company, or a figure in your company, highlighting the highs and lows—anything that will make your user/reader care, and take an interest in your site. If your site has a blog, then your users will, if you have an interesting story, return time and again, to check for updates, and to participate in your site. This is especially evident if you have a forum on your site, as users can directly contribute.

A far too often used narrative method is the splash page—usually an all singing, all dancing entrance to the main event of your site. In most cases it doesn’t tell a story, it just gets in the way. It breaks up the structure of the site, and offers a facade that might not reflect the true content of the site.

Where narrative can be more practically useful in your site is in this context (focusing specifically on navigation):

In the story of this site,  you learn about the product of the site, you try it, and  like it, so subsequently buy it. After purchase you need support for any reason, a fault, or a query of some description. And then, at the very end, we can contact the company, for business queries, or as a customer.

The natural inference of the layout of this navigation bar, unfortunately for the site, is that SUPPORT follows PURCHASE because something has gone terribly wrong, and CONTACT is our last hope of getting satisfaction after SUPPORT has failed. (Support must have failed, not only because it has a terrible reputation across various industries, but also because it fits the plot: if support succeeded, who would we need to contact?)

This may seem like far too much psychoanalysis for a web designer, but if your story is based around a basic navigation system, then it’s important to think of the process in which your user will go through each page. Getting the order of the navigation wrong is similar to killing off a character in a book before introducing them: it simply does not make sense in the narrative of the story.

Another helpful way to think of layout in relation to your narrative and story is by visualizing a newspaper, or a comic. For comic book/graphic novel artists, there is always an issue with the positioning of panels, insofar as they need the reader’s eyes to be drawn from one panel to the subsequent one, rather than out of order. You can see how this would be an issue with the comics in a Sunday paper. With only a few panels to work with, an artist has to make sure that the punchline (usually the final panel) doesn’t detract from the final product so much that the reader looks to it first.

In this way you can visualize the layout of your site, and how it flows, as users are often channeled subconsciously through the same order of pages and links, creating their first impression of the site based on ad positioning or content below the scroll line that they can’t see, where you wanted the initial viewing of the site to be so different!

To conclude, your site, small or large, will have a user experience, and if you haven’t taken the time or care to create a story, it won’t be as coordinated or flow as well as it could do. The sites you see  where you think, ‘that’s really slick’, or ‘I wish my site worked as well as that’, have most likely been storyboarded with a narrative, and taken care over styling a persona.

So next time you visit Apple.com, think about what sort of persona it has, and how the site has been designed to flow, placing their leading Mac product first, but the iPhone product in the center of the navigation, rather than second, and having their Apple logo instead of a home button for brand recognition.

Dan Rajan is a video editor, creative content designer, and passionate writer from the UK, follow him on twitter!

Do you use a narrative approach when designing? Have you ever storyboarded a site design?

400 Web Backgrounds – only $29!

These larger organizations aren’t content to let their backend user interface be branded using WordPress logos and design cues; instead, they prefer to customize the software and ensure that all of their employees know that they’re working within the company’s structure and purview.

It might sound complicated, but customizing the WordPress interface is actually pretty easy, especially when customizing the initial login screen that brings users to the traditional Dashboard homepage.

Because WordPress is styled using CSS, and can be customized with PHP functions, it’s straight forward and even encouraged to give this crucial part of the interface its own look and feel.

Step 1: defining a custom function that points to a custom stylesheet

The first step in generating a customized login page for a WordPress installation is to define a custom function that directs the page to look for a new stylesheet instead of the one that is used by default when WordPress is installed. This is actually pretty easy and can be done on a theme-by-theme basis. This means that a WordPress login page can be unique customized to match the look and feel of every theme a user develops.

To define this new function, open an FTP client and navigate to the following server path:

/public_html/wp-content/themes/SELECTED-THEME/functions.php

Remember that, since this is on a theme-by-theme basis, the current theme selected in the Dashboard is the one that we will have to modify in order to see the results immediately reflected using a web browser. Once you have located this theme’s functions.php file, right click that file and download it to your computer. Open this file in a plain text editor.

Optionally if your current WordPress theme has no functions.php file in its main folder (and this is the case with a good number of custom and self-made themes), open a text editor and create a new plan text file. Save it as functions.php and ensure that no “rtf” or “txt” extension was appended to end. This file will then be uploaded to the server and WordPress will immediately recognize it and put its custom code to use on the login screen.

The function that will be placed into this file is used to redirect the page’s header file from the WordPress-defined Dashboard stylesheet to one that is created by the user. It looks like this:

function custom_login() {
echo '< link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/branded-login-screen.css" / >';
}

Remember that a functions.php file must open with <?php and be closed with a final ?> tag. Paste this code between those tags, save the file, and then upload it to the server.

Step 2: creating the branded login page’s stylesheet information

The previous function placed a stylesheet meta tag into the login screen’s “head” section, but that stylesheet has yet to be created or filled with unique material that will change the appearance of the login screen itself. Rectify this by opening a plain text editing application; create a new file called branded-login-directory.css and save that file. Upload it to the server, but keep it open on the desktop as well.

Remember that this file must be placed within the current selected theme’s home folder, the same place that the functions.php file previously edited is located. Putting this file anywhere else will result in no changes being made to the appearance of the login screen.

There are several pieces of information that will be modified using CSS code. These will be pasted into the new stylesheet that was just created, and users can customize their specifics according to their own taste and branding requirements.

Step 3: changing the page background colors and properties

The first step in the process is also the most broad. Users must customize the background color from the traditional WordPress login screen’s light gray to the color of their choice. This is done by assigning style attributes to the page’s “HTML” tag, and it looks like this:

/* Branded Login Background Colors */

html {
background: #000 url('http://your-domain.com/path-to-url/image.gif');
margin: auto;

The first line of code simply describes what the CSS code is doing and it’s a great way to keep track of the changes being made. There’s nothing wrong with annotating a CSS file; during an experimental design process like this one, it will speed things along and make them far easier to manage.

In the code above, a background color of black was defined using the #000 code. Next to that code is a url() construction, which allows the user to define a custom background image for the page. If no background image is preferred, this can be deleted and the page will default to a solid back background color. The use of the “margin:auto” tag centers all content within a page based on a browser’s width. This is why the login box is centered horizontally on every WordPress installation.

Step 4: removing and replacing the WordPress logo

For branding purposes, perhaps the single most important modification is removing the existing WordPress logo and replacing it with the company’s branding mark. This clearly identifies which company controls the content within, and it helps to create a consistent use and administration appearance for those users who publish content to the site and interact with the company’s readers. This is done using the following CSS code in the custom stylesheet:

/* Brand Logo in Place of WordPress Logo */

h1 a {
background:url('http://your-domain.com/path-to-url/logo.gif') no-repeat;
width: 400px;
height: 100px;
margin-left: 0 0 0 10px;
padding-bottom: 0;
}

Using this code keeps the same padding and margins that accompany the standard WordPress logo. However, the code redefines the “h1″ tag in favor of the branding company and allows them to place whatever image they prefer in place of the standard logo. The use of width and height tags within this class allows for a custom logo size that can be either bigger or smaller than the standard WordPress logo.

Step 5: customizing the top bar on the login page

Every WordPress installation comes with a black bar at the top of the login and Dashboard pages that contains useful information, standard links, and other content based on where a user finds themselves in the administration interface. While black is a universally neutral and compatible color, it might be in the best interest of some businesses to customize the bar’s color as well as the appearance of link text and other information contained within it. The CSS code in this step of the process allows any color to be defined as the WordPress bar’s background color, and it enables changing the color of text and links in that top bar.

/* Branded Top Bar Background Color */

body.login {
border-top-color: red;
}

/* Branded Top Bar Lost Password Link */

.login #nav a, .login #nav a:hover {
color: #fff!important;
}

/* Branded Top Bar Link Color and Styling */

.login p#backtoblog a:link, .login p#backtoblog a:visited {
color:#fff;
font-weight: bold;
}

.login p#backtoblog a:hover, .login p#backtoblog a:active {
color:#fff;
text-decoration:underline;
}

The above CSS code changes the top bar’s background color to red and ensures that all links and texts printed on that bar are done so in white (#fff). This ensures maximum contrast and makes readability easy, even without the standard black background. It’s a great way to take customization of the WordPress login screen to the next level with a relatively minor change to the site’s appearance.

Step 6: customizing the last pieces of the WordPress login page

There are two pieces of the standard WordPress login page which are typically overlooked by the average user when branding the appearance of this critical website within the WordPress installation. Those two things are the actual login button itself and the returned message text when a password is invalid or the installation is offline for things like upgrading and maintenance issues. Typically, the message text is printed in pink while the login button is displayed in a gray, rounded fashion. Both things can be changed using our custom stylehseet.

First and foremost, the message text must be changed so that it matches the new site’s color scheme. This is done by including a new class in the stylesheet known as “.message.” It looks like this when it has been fully customized:

/* Error Message Text for Custom WordPress Login Page */

.message {
margin-bottom: 0px;
color: #000;
border: 1px solid black;
background-color: #fff;
padding: 10px;
}

This code defines the error message text as being in a thick white box, surrounded by a solid black border, featuring plain black text. It is perhaps the least inspiring way to present this information but, as always, designers are encouraged to put their stamp of creativity on this error message and make it more inviting to the end user.

Next, it’s time to style the login button. The standard styling of this button is compatible with a wide range of color choices, but many companies will still prefer to alter its appearance to blend in with their overall site structure and design. This button is customized just like any other form element, and the final version of this login button will look something like the example shown below:

/* Login Button */
#wp-submit {
background: #fff;
border: #000;
}

Truly a boring login button, the example above merely creates a standard form button with a white background and black text. No border, no margins, no padding. This, like the rest of the CSS stylesheet, is a blank canvas which is designed to be inviting to motivated and inspired designers. Almost anything can be done with this CSS class, including using a background image instead of a background color, and forcing the button’s text to be removed so that only the image can be seen.

Step 7: uploading the stylesheet and testing the results

Designing a customized WordPress login page is easy in theory but, when push comes to shove, using CSS to define a page full of custom elements is never an easy task. It requires a good deal of experimentation with colors, pixels, alignments, and all manner of customizations that typical XHTML and CSS files require. For this reason, it’s important to periodically upload the stylesheet and then navigate to the login page to judge its appearance.

The first several times, it’s likely to appear quite distorted, jumbled, or just plain ugly. That’s fine. Simply return to the customized stylesheet and add new information which will help change the appearance of the site.

Optionally, the advanced web designer might choose to view the actual source of the login page to get a feel for all of the elements that are used to compose its appearance. While this tutorial will help designers radically change the appearance of their WordPress login page, it is by no means a comprehensive list of every microscopic and structural element that composes the site.

Do you use custom login pages on your WordPress installs?

Vladislav Davidzon is the principal of a US-based online marketing consultancy, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world. For more details visit Vladislav Davidzon & Associates.

400 Web Backgrounds – only $29!

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments. And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

CSS Text Shadow

The CSS Text Shadow generator from WordPressThemeShock makes it easy to create a variety of styles for your text using CSS. Included are pressed, embossed, shadowed, and a variety of other styles.

SlickGrid

SlickGrid is a JavaScript grid/spreadsheet component that’s easy and quick to use. It’s incredibly fast, and can even handle hundreds of thousands of rows with extreme responsiveness.

The Responsive Calculator

The Responsive Calculator is a simple calculator that makes it easy to turn your pixel-perfect PSD files into the start of a responsive website design.

Timeline

Timeline makes it easy to create timelines that are easy to use and intuitive. You can pull media in from a variety of sources, including videos from YouTube and Vimeo, Google Maps, and SoundCloud, as well as tweets.

Responsive Horizontal Layout

This Responsive Horizontal Layout shows you how to create a horizontal layout that includes multiple panels that can each be scrolled individually.

Filtrify

Filtrify is a tag filtering plugin that lets you search tags within tags, and filter items by multiple tags from different categories. It even includes live feedback on the number of items containing the related tags.

NHP Theme Options Framework

The NHP Theme Options Framework is a simple, very extendable theme options framework for your WP themes. It includes section tabs, uses the WP Core Settings API, custom error handling, and more.

Camera

Camera is a free jQuery slideshow plugin based on Diapo Slideshow. It offers a number of options, including the ability to add captions, HTML elements, and more.

WebPutty

WebPutty, the CSS editing and hosting service, has now become open source! It gives you syntax-highlighting, a side-by-side preview pane, instant publishing with minification, and more.

Intelligist

Intelligist is a jQuery plugin for making in-page Gist code sharing and demos easier. You can share multiple Gists, and even execute code.

jQuery ProQuo

Getting your visitors to share your content on Twitter is a great way to get more traffic. jQuery ProQuo lets you turn any part of your HTML content into tweetable quotes. It automatically determines the proper text length, includes a link back to the page the quote came from, and adds a “Tweet this” link to the tweetable element.

Export Responsive Prototype v0.2.7

If you use Fireworks for your design work, then you need the Export Responsive Prototype plugin. It lets you simulate a responsive design and then export the results, simplifying your design work.

jPages

jPages is a client-side pagination plugin that includes auto page turn, key and scroll browse, and a completely customizable navigation panel, among other great features.

SpritePad

SpritePad is a free, easy-to-use app for creating CSS spritemaps. Just drag and drop your images to the grid and it will immediately be available as PNG and CSS code.

Bacon

Bacon is a jQuery plugin that lets you wrap text along a bezier curve or a line. You can curve your text around an image, or even turn the text itself into a curved shape.

Wordless

Wordless is a WordPress plugin that can drastically speed up your custom theme creation. It includes structured and clean theme organization, Haml views, Sass & Compass stylesheets, optional Coffeescript-powered logic, and more than 50 Rails-like helper functions.

CSS-Only Pinterest Style Columns Layout

CSS-Only Pinterest Style Columns Layout is a free layout you can get from CSSDeck. It includes all the HTML and CSS code you need, for free.

Foldy960

Foldy960 is a responsive 960 grid that includes some extra classes and more for making your 960.gs design responsive. It includes a simplified 3-column responding grid that stays 3-columns for layouts above 640px and one column for layouts under 640px.

TypeButter

TypeButter lets you set optical kerning for any font on your website, making it possible to have much more beautiful typography.

Codeanywhere

Codeanywhere is a code editor that lets you code from your browser or via mobile app, and includes a built-in FTP client. It supports PHP, HTML, CSS, JavaScript, and XML.

tQuery

tQuery is a library built on top of three.js for plugin developers. It mimics the jQuery api, and makes it easy to share code and build on top of each other.

Silk

Silk is a new web-based publishing platform that makes it easy to provide content in a more structured manner. Users can choose the data they want to display from the mass of information available, and then view it and arrange it in a way that makes sense.

Shifticons

Shifticons provides an easy way to create custom icon web fonts from a variety of web fonts. Just find the icons you want, build a web font with only what you need, and then buy the finished web font.

Snowy Evening

Snowy Evening is a powerful issue tracking app for developers that’s also easy to use for clients. It includes jsFiddle and GitHub integration, as well as an API to track errors for your applications, among other features.

Goal Stacker

Goal Stacker makes it easy to focus on things you can get done in the time you have available. Just tell it how much time you have, and it will schedule your time for you, based on tasks you need to complete. It will even email you a list of tasks to complete each day!

Mikodacs (free)

Mikodacs is a free sans-serif display typeface with a very modern feel. It comes in regular and smallcaps versions.

Wellfleet (free)

Wellfleet is a low-contrast slab serif typeface with an upbeat style. It was inspired by German poster lettering, but is functional at a range of sizes.

Simonetta (free)

Simonetta was inspired by Italian Humanistic typefaces, and was named after Simonetta Vespucci (the model for Botticelli’s “The Birth of Venus” painting, among others). It is slightly slanted in both regular and italic versions.

Vulpa ($90)

Vulpa is a serif font family that comes in regular, italic, and bold versions, inspired by the proportions of Plantin. All three styles include quirky foxtail terminals.

Funkydori ($66.50)

Funkydori is inspired by the typography of the seventies, and includes 213 alternates, 13 discretionary ligatures, and 38 ornaments.

Love Potion ($29)

Love Potion is a romantic, handwritten serif font. It includes an extended character set to support Central and Eastern European languages, in addition to Western European ones.

Brownstone Sans ($83.30)

Brownstone Sans is a curved script font, with subtle historical and cultural references, while being firmly modern at the same time.

Foro ($198)

Foro is a slab serif typeface that’s less harsh and warmer than most slab serifs. It comes in sixteen styles, with standard ligatures, proportional lining figures, tabular lining figures, proportional old style figures, lining old style figures, and more in each weight.

Twenty12 (free)

Twenty12 is a hand-drawn gothic-style font, with a limited character set.

Hyperspace (free)

Hyperspace is based on the original Atari vector font from Battlezone, Asteroids, and other classic games.

Written exclusively for WDD by Cameron Chapman.

Know of a new app or resource that should have been included but wasn’t? Let us know in the comments!

400 Web Backgrounds – only $29!

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

An Introduction to Underscore.js – Part 2 Array-like collections http://su.pr/1vUy3L

The logo is no longer the shining star it once was >> http://ow.ly/aJUJj

How to Create a Custom Page in #WordPress – http://ow.ly/aJUlK /via @wpbeginner

Make sure to check out Jonathan Burton’s illustrations for Cover Her Face by PD James http://ow.ly/aJVeI

Big question: how important is it to you to keep your clients happy? http://ow.ly/aLCtQ /via @netmag

The Future Isn’t What It Used to Be http://ow.ly/aLCLg What happened to science-fiction graphics?

Ingenious and bold graphic work here http://ow.ly/aLzxh Frank Lloyd Wright’s Lesser-Known Contributions to Graphic Design

Do you know how to think outside the box when finding a job? http://ow.ly/aNzsM

Ultimate Guide to Upgrade #WordPress for Beginners [Infograph] – http://ow.ly/aND11 /via @wpbeginner

jCSML – A New Cross Platform Animation Library http://ow.ly/aO68A

How To Build A Real-Time Commenting System http://ow.ly/aO6uW – very cool article by @smashingmag

WordPress Plugins That Make Your Life Easier http://ow.ly/aOSE9

Shell Apps and Silver Bullets http://ow.ly/aP16f A detailed article in the classic web vs. native debate

‘Imagination is more important than knowledge’ http://ow.ly/aP2Sc Yet, you’ve gotta read this & get inspired!

Learn more about the creative Von Glitschka, his books and illustrations from this inspiring interview http://ow.ly/aP6F3

The Complete Guide of Retouching Photos with Human Subjects http://ow.ly/aP7ek

How to List Future “Upcoming” Posts in #WordPress – http://ow.ly/aQjN1 /via @wpbeginner

Responsive Design 101 http://ow.ly/aQk8o Because designers who don’t adapt will be left behind

Interaction Design In The Cloud http://ow.ly/aQkhZ *Great article by @smashingmag

Very cool collection of Chinese posters taken from Shanghai’s golden age http://ow.ly/aQjKv

Poster design is a true art form http://ow.ly/aQlFt Check out this awesome collection

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

400 Web Backgrounds – only $29!

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

The dreaded quota

The wrong joint

Banking software

Can you relate to these situations? Please share your funny stories and comments below…

400 Web Backgrounds – only $29!

This one is called the Media Black UI Kit and contains graphic elements suitable for any sort of media elements, such as video and audio players, along typical navigational items.It’s provided as a layered PSD file.

If you want more items like these, head over to Grafpedia, which hosts over 70,000 great files and where you can download more graphic resources like these along with icons, vectors, brushes and more.

Redistribution is not allowed, so if you’d like to share this one with your friends, kindly direct them to this page so that they can download their own copy from here.

The file is free for personal and commercial use… see the full preview and download after the jump!

400 Web Backgrounds – only $29!

He said that he thought by posting his prices, using a basic, bottom line cost, he would weed out the people who wanted bargain basement prices and he would save time of not having to deal with them for initial meetings and creative briefs, only to be told that the $10,000 he stated at for web sites was $9,750 too high.

It made sense when he put it that way. Figure the total amount of time one spends in a first meeting, listening to a prospective client talk about what they want, then explaining how your service works to them, following up with a short creative brief and then having to explain why it is the proper way to do a proper web site, he would cut out at least 75% of the people who are “just browsing” or looking at costs on their way to a crowdsourcing site.

The discussion begins…

The internet, technology itself, has affected the way we all do business. The rise of Amazon.com and the effect it has had on certain retail sectors (i.e. retail toy and book sales). We have gotten use to the ease of point-and-click buying. Personally, I prefer to hold the product in my hands before buying. I like looking at the package, flipping through pages, trying on clothes and shoes BEFORE considering the purchase. Unfortunately, that option is disappearing.

Some would say that’s a con and not a pro but apparently society doesn’t agree as evident in the bankruptcy and closing of retail stores and chains. How does this affect the design industry?

There will always be the design projects that need the personal touch. The meetings, the briefs, the back and forth and the negotiations for the fees involved…followed by the arguing and non-payment thereof. When it happens for the big projects, it’s necessary but, having many large corporate clients, I’m seeing increasing requests for flat out pricing that allows “flexibility” on my part as the vendor. As one client put it when they returned my contract with an addendum added to the list of service provided for the flat fee, “and anything else we deem necessary.”

I didn’t accept that addition and lost the project. To me, it sounded as if the open-ended wording would have me providing service until I died.

Most people misunderstand the concept of a price list for creative services. Under much discussion and anger amongst some of my local peers was an ad posted by a designer that promised ANY design job for $299 with unlimited revisions. ANY? UNLIMITED? We were outraged that the designer had turned our industry into a discount shoe store. We discussed taking up a collection for the $299 and then hiring the designer to create a web site and keep asking for changes to see how far he/she would go before breaking.

When people we all knew started admitting to considering adding a price list, the laughter subsided and the discussions ensued. How would one approach creating a price list that could turn a profit without leaving the question of changes a client could request open to interpretation? What kind of clients would go for it? Would it put off some clients? We started formulating what a price list would contain.

We all had a good idea of how long an average job took to complete and everyone had his/her hourly rate in mind. We were frank about what a logo would cost when quoted to a client with the usual research, sketches, changes and delivery. We discussed how much we all charged up front and how long the thirty-day payments took to receive once the job was delivered. It seems payments in thirty days were getting rare among our clients and arguments about upfront deposits were increasing. The first thing we all agreed upon was that using a price list would include a 50% deposit with the final payment due upon delivery. As files were emailed by most of us or uploaded for digital projects such as web sites, it would be easy to hold the job for ransom until the final payment was made.

There was discussion about using PayPal or a credit card and the fees involved. The answer was to just incorporate those fees into the price. As with anything ordered online, we figured that clients would be willing to use their credit card for payments. It’s instant, easy, and common these days when making any purchase.

In creating a price list, it would need to leave no holes or misunderstanding – this is what you pay and this is what you get. Most people argue that any list can’t cover everything a client will demand. By the same thinking, neither can a contract for a project.

As we all know, a contract means nothing when a client starts arguing about wanting what they want despite what was agreed in the beginning. When I was working the wonderful service position of serving obese idiots greasy burgers and fries, they would argue over having to pay to supersize their disgusting food orders. A dollar was too much. So, what happens when the same slobs are ordering a web site and are told they have to pay $500 for supersizing their logo? Looking across the plastic counter into the eyes of these cheap bastards, I would have to smile when they scolded me for never hearing the phrase, “the customer is always right!”

The manager would inevitably give them their supersized poison without charging for it. The day I quit that nightmare job, I had the pleasure of answering those who used the aforementioned phrase with, “only from people who want something for free. Pay the extra dollar and sit down or I’ll spit in your food!”

Aside from that amusing anecdote, which still haunts me when I drive past a fast food place, there are three things one can count upon: The first is that people like to see the posted price for whatever it is they are considering buying and second: People have trouble negotiating for a price (hence the multitude of articles on how to negotiate the price when buying a car). The third thing is: Even when it’s spelled out in front of them, people just don’t read or understand price lists! 90% of the morons I waited on couldn’t order a simple burger, fries, and soda without help from me.

Creatives run up against the same problem but with less grease. I too often hear my peer designers complain about a client who wants something extra, a complete change, to renegotiate the original price and other problems we usually encounter. When I ask about the contract they have with the client, more often than not, they say they don’t have a contract. Why? Fear! They think that asking a client for a contract will cause the client to not give them the project. By the same token, they don’t feel comfortable saying “no” to lowering the price when the client starts negotiating.

A friend of mine who is known for her biting humor tells me:

“When I’m asked how much I charge? I answer, more than your average crack-addicted hooker but significantly less than a small agency.”

“I don’t list prices on my site because I don’t want to be held to it. I have a base price, which I convey, in person or over the phone, and then I add an “annoyance” tax as needed — in the form of extra hours over what I’d normally charge. Don’t want to send me revisions in one nice, tidy email? Boom! Annoyance tax applied. That 2-minute change just cost them 15 minutes. Every single time!”

Let’s look at some price posting examples…

Here are some companies that post a price for design services. Let’s look at how they do it. The first example from countrylovin.com has the weakest self-protection terms. It is exactly what people fear will be the problem with putting up a price list. There’s no word about revisions, delivery, payments, etc. A basic “here’s the cost.”

GoDaddy.com, known for their slightly more then semi-pornographic commercials, is a very popular web hosting company and, as with most hosting companies, offers web design. There’s the option for a do it yourself, drag-and-drop, template and stock image site for an ongoing, monthly fee. Quality isn’t part of the price but how many small businesses and sole-proprietorships really know or care about cost? When designers complain that they are being asked for free work, it’s by those who have seen the $4.99 a month option.

When it comes to custom web design for clients, their price list is presented in two parts. The first part is a quick overview of “standard” and “premium” design but it isn’t a one-time fee. Maybe they think prospective customers won’t do the math of what the monthly fee will add up to in six months or a year. Of course, what happens to your “custom designed site” once you drop the service? I can’t seem to find any information on that.

Still, the prices are…“competitive” and although there might be outsourcing and templates available for basic HTML to get a head start on the “custom design,” only those inside GoDaddy.com truly know…unless they comment on this article.

One thing that cannot be ignored, if you look at what is included in both custom packages: There is almost no way for a freelancer or design studio to compete with these prices.

Triad Web Design is yet another contender in the rising number of price list companies that are increasing. Their flat rate includes, among a laundry list of services, “unlimited revisions.” Whether they are off shore outsourced isn’t a concern – they are competition that must be considered with price levels set by freelancers and design firms alike.

While I detest the idea of crowdsourcing, it is a practice that has taken hold of our business. Here’s one of the companies that run these “design contests.” Just look at the prices of the completed sites.

One question that arises is that of revisions. Unfortunately, in the FAQ section, it posts the question of, “can I get designers to revise the designs they created for me?”

The answer is, “absolutely. Designers thrive on guidance, so the more feedback you provide, the better the quality of your finished product.”

I don’t know if this means that once the “judging” is over, the client can request endless revisions for the set bid or there are additional fees. The mere fact they write, “designers thrive on guidance” has me throwing up forever. I mean, there’s guidance and then there’s endless second-guessing. Get me a new, empty bucket, please.

This “offshore” company offers ridiculously low prices but the inclusion of “USD” (U.S. Dollars) shows it’s aimed at an American customer base. With prices like these, you might as well give up design, join the armed forces, and kill everyone in the nation that provides this cheap work!

Some other opinions…

Having put the question of price lists on LinkedIn, I received some interesting opinions. Unfortunately, as it’s open to anyone, there were some maniacal responses, too.

One person’s answer showed a good amount of time and thought to formulate her answer:

I would not post a price list on my website because the majority of my projects are quoted in lump sum with milestones for various deliverables. While my lump sum is based upon my hourly rate, I determine the level of effort on the entirety of the project and not on exactly the length of time it’s going to take me. By posting fixed prices, the customer might get fixated on the hourly rate or on fixed lump sums for projects instead of my estimate of the level of effort.

I can give an example:

Not all logo projects are created equal. On the one hand, a new client contacts me to create a logo for them. They want a text type logo, with very simple colors and a small graphic. They leave the design completely up to me with a few color guidelines. For such a simple project, I would charge $70 – 105 for two logo designs, and then have the client take elements of both or choose one as the final. My usual rate is $35 (per hour).

On the other hand, I could have a client contact me for a logo and they want 5 distinct elements, an illustration, a tag line, and different color schemes to try. I would end up charging a lot more than $70-105!

If I had put $70-105 on my website as my Logo Design fee, then I would be stuck when Client No. 2 comes around and brings me their laundry list of requirements. I could still give them a lump fee proposal, but it would be on what I believe their project requires…not what my website says it will be.

In short, placing a price list on your website may put you in a position where you have to bargain for a better rate or fee if you feel a project requires more work than customary.

Unfortunately, this person is not a full-time professional designer (and very limited part-time, as per her LinkedIn profile), as her rates attest and help lower the bar for full time designers. She does, however, bring up one of the arguments for not putting prices on one’s web site: Flexibility.

Unless you can really judge the time it takes to execute a project, a flat rate can be a money-losing possibility. To keep extraneous changes from draining the fee, what is promised under the price would have to be iron clad with an hourly change rate listed for work above and beyond the flat fee. Giving unlimited revisions, as listed in some of the price lists shown, as examples would break you and your ability to make a profit.

Someone involved in the creative business but not a designer imparts:

The upside = it makes the value of your work non-negotiable. The downside = it makes the value of your work non-negotiable.

If your prices are set for all clients regardless and do not change, then by all means. However, if you want room to raise or lower prices on the value of a client, then don’t post them.

An interesting observation but one can change prices easily on their site as needed. The “value” of a client is an interesting concept. What do you do if a client who may represent regular business is turned off by your price list?

As someone who has heard the old promise of “do this for $XX dollars now and in the future, it’ll be $XXXXXXX,” I have little faith in return clients based on price. In my experience, I retain clients due to the value of WORK.

Another designer adds:

I price all my work on a project basis after I’ve had a conversation and an opportunity to review what’s needed. Yes I have an hourly rate. Do I ever charge or reveal that hourly rate? No. It’s always per project. I give a price that I think is fair to both parties, if someone chooses to take it, great…if not…great. If they don’t like it, then they’ve just been weeded out.

Again addressing the question of posting prices, one commenter said:

I would also have a disclaimer allowing you to alter the prices so a customer doesn’t see them say in February, you raise them in March, then they come back in June, and ask for the February price.

This is very true! As with giving a prospective client a written quote in February and then having them return in June and demand the same quote, even if you have raised you rates (perhaps material costs have increased, office space cost, equipment rent, etc.), what can you do?

There has long been the agreement among designers that a written quote should have a time period of two to four weeks in which that quote is considered “good.” You can honor it months later if you have no need to raise the quote or wish to gain the client but, if the price is changed on your site in March and someone comes back in June and demands February prices, I believe that’s a red flag that you don’t want to get involved with such a client…and would only end up spitting on their burger! Legally, if the price is posted on your site, even if it has changed, you are in the right. How many people have sued food markets for raising prices after one week? How many people thought their burgers weren’t as delicious without my spit on them and felt cheated?

One respondent wrote this excerpt:

Since each assignment, client, approach, strategy, and deliverable is different (or should be), it would be difficult to sell a pre-packaged solution associated with a fee that is the “right” solution for a client.

I guess if you are in the ‘drive-thru’ design business, then posting your fees would be appropriate and go ahead and offer them the option to supersize their logo for an extra fee.

Price lists don’t have to be a just a “one-size fits all” practice. The price list is like a menu with available items that a prospect picks from and then, after they have seen the total and the terms and clicks the accept button, the next step should be the meeting to discuss needs and the addition/deletion of items needed for the client’s needs. THEN they get a link to pay the deposit before the job starts.

A “relationship marketing specialist” adds a candid view:

Sometimes it works as it certainly weeds out those who won’t invest, other times it can scare off a potential client who simply needs to interface with you to get comfortable enough to invest. There is not absolute answer here. Personally, I prefer transparency but that is actually rare.

One of the few web and graphic designers who weighed in on the question posted:

Pricing can be a barrier to sales, on the other hand if the quality of your work is stunning people may make the assumption they can’t afford you.

My suggestion is to have a low, medium and high rate card that you submit via email after initial contact with the client. And that you also have “rate ranges” i.e. starting as low as…($30-$50/HR) for certain types of work, etc. The reason for this is that projects for individuals vs. companies will have different levels of involvement and resources associated with them even if it is the same type of work like a logo design, for example.

Doing this for an individual starting their first company, vs. doing a brand refresh logo design for an established company with a regional presence involves vastly different amounts of research, revisions, and attention to detail, not to mention the time in communicating with the parties involved will be different (one decision maker vs. design by committee).

So in a scenario like that it’s only fair that they pay differently. They are getting a different level of service (not necessarily a different quality).

A well-made contact form with clear instructions should direct them to contact you for rates and quotes. Estimate calculators are good, but sometimes people get that “quoted price” fixed in their mind and when you discuss project details with them they get too attached to that number.

A respondent put it very succinctly:

Try it and if it doesn’t work, stop it. If you want to try it both ways, try an A/B testing.

It’s not unheard of to test market an initiative. One has to consider what the appearance of a price list would do when viewed by a regular client. For A/B testing, you would need an entirely new site for new prospects and that presents too many problems and upfront costs.

A design firm in England has found a unique middle ground to this question. Promo Design hits the “process,” “value,” and samples of their work right up front on their home page. Their contact page asks the PROSPECT to layout all of their needs AND budget before the first contact is ever made. The pulldown menu of budget will act to weed out the clients looking for a bargain but it still gives the salesperson at Promo a chance to negotiate the work and fee. Seems like a good approach!

In conclusion…if there is one

I shouldn’t be too hard on those who ventured to offer their opinions. They are, of course opinions and this is something that is just coming to the surface in many industries. Out of the fifteen answers I received on LinkedIn, almost all the respondents agreed that they would rather have a consultation with the client first and prove the value of their service and then negotiate the price. Some asserted that a fixed price left no room for negotiation or any misunderstandings. Personally, I think no matter how much things are spelled out, people will either not read the whole agreement or misinterpret the terms, causing problems after the fact.

Has the industry or society evolved (or de-evolved as some would argue), to a point and click type of purchasing? ARE people looking for price and not “value?”

Large corporations routinely ask advertising agencies to make presentations on spec to gain an account and then negotiate the fee. Is web site surfing for the purpose of viewing design samples and prices really any different?

We unleashed the internet and failed to watch it as it grew almost without us. Entrepreneurs sought a better way and innovated sales and customer service. Now we need to follow suit or be left behind like those who insisted in producing buggy whips while other leather companies retooled and made car seats for Henry Ford. It’s a hard question to answer. Where is the future taking our field?

Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter @speider

Have you posted a price list on your site? Are you thinking about doing it and why? Please let us know how you feel about this practice.

400 Web Backgrounds – only $29!

This book differs from the previous two books in that it has a distinct theme throughout: redesigning websites.

It starts out with the business side of redesigns, and then progresses to the technical aspects, including chapters on CSS3, HTML5, and JavaScript, as well as mobile design.

Contributors to this edition include Elliot Jay Stocks, Paul Boag, Rachel Andrew, Aaron Walter, Ben Schwarz, Lea Verou, David Storey, Christian Heilmann, Dmitry Fadeyev, Marc Edwards, Aral Balkan, Stephen Hay, and Andy Clark.

The first chapter, The Business Side of Redesign, written by Paul Boag and reviewed by Collis Ta’eed, talks about all the “boring” aspect of a redesign. Things like determining if a redesign is even appropriate, the process of a redesign, and the importance of testing and future-proofing your designs. The section covering Why Complete Redesigns are Wasteful is particularly eye-opening, and something a lot of designers are apt to overlook.

Chapter two discusses Selecting a Platform: Technical Considerations for Your Redesign and was written by Rachel Andrew and reviewed by Ryan Carson and Harley Finkelstein. It builds upon the first chapter, and talks about some of the technical issues you’re likely to encounter in tackling a redesign or a realignment of a website. It recommends things like learning from the current platform being used and figuring out technical requirements.

From there, chapters dive into more specific technical discussions and specific redesign topics, including:

• Jumping Into HTML5 by Ben Schwarz
• Restyle, Recode, Reimagine With CSS3 by David Storey and Lea Verou
• JavaScript Rediscovered: Tricks to Replace Complex jQuery by Christian Heilmann
• Techniques for Building Better User Experiences by Dmitry Fadeyev
• Designing for the Future, Using Photoshop by Marc Edwards
• Redesigning with Personality by Aarron Walter
• Mobile Considerations in User Experience Design: Web or Native? by Aral Balkan
• Workflow Redesigned: A Future-Friendly Approach by Stephen Hay
• Becoming Fabulously Flexible: Designing Atoms and Elements by Andy Clarke

The 336-page Smashing Book #3 took seven months of production time, from brainstorming to finished project. It had a six-figure budget and was worked on by over forty people, from authors to editors to layout artists and designers. Fun side fact: there are 623 animals hidden within the pages of the book.

There are a few options for purchasing the Smashing Book #3. The regular print edition is available for $39.90. There’s also a printed bundle that includes the Smashing Book #3 as well as the Smashing Book #3 1/3: The Extension (a 160-page supplemental book that includes four extra chapters) for $49.80.

There’s also an ebook bundle available for $19.90 that includes both books for just $19.90. The ebook bundle includes PDF, ePUB, and Mobi versions of both books. And if you want all four (both books in print and ebook editions), you can get them for just $59.90!

As with all of the book released by Smashing Magazine, the Smashing Book #3 is an invaluable resource for web designers, regardless of skill level or experience and we highly recommend it.

Reviewed by Cameron Chapman

400 Web Backgrounds – only $29!

In fact, it has been noted by various analysts at Google that people don’t often sit through the first 30 seconds of a video, much less the first 15, so it would be wise of you to get the content of your site loaded as fast as you can so that people can make a judgement and agree to either use it or not.

It may be a bit superficial that people judge sites that fast, but it is often the case, and we shouldn’t take it for granted.

Optimizing your site should be a top priority, and often times when using WordPress and other engines they have nice plugins that help. I will assume though, that you may not be using WordPress, because there are a lot that don’t, and I will give you a few of the best ways to optimize any site regardless of where its hosted.

Images

Image optimization can be a tough topic, but one that actually has a lot of aspects from which to choose. There are file formats, image optimization tools, and code/CSS best practices to follow to make sure you are saving and acting with images in the best way possible.

I want to give an example as to why this is important though, so let’s take a recent example. It has recently become apparent to various iOS developers and app creators that apps that use the Retina ready images are taking up 2–4 times as much space on the person’s phone than their previous versions, and it is causing people’s phones to simply run out of space from simple app downloads.

This isn’t as relevant to us web developers and designers, but it does go to show you just how important it is to properly handle your images on any platform. The following are a few of what I think are the most important topics to remember when optimizing images for the web.

Image formats

The formatting of images is a heated topic, and it seems to be because everyone believes a different format will increase speed, but there is a pretty prevalent school of thought on this, and we can always use this as a de-facto standard. JPEG’s are for photographs, GIF’s are for low color images/flat color images, and PNG’s are for everything else. Most web designers and developers that I know of prefer to use PNG’s for just about everything, unless they have a button perhaps that has one or two colors, whereby they find GIF’s to work great.

Now, of course you can play with those specifications but always remember that these are standards for what will save smaller and lighter vs bigger and heavier. If you are doing a photography site though, it will be loading pretty slow regardless compared to other sites — so try out some of these next methods to increase the image optimization overall.

Image code

One of the worst things we can do for server time when loading images is let the code do the sizing for us. Well, that could be said for anything regarding ‘letting the code do ____ for us’. The common saying is, “If you can do it, then do it”, and it is a darn good one. Using things like width='50px' height='30px' can really throw off the server load time as far as that image is concerned, because the server is parsing the page and sees there is a task it has to accomplish – one that could have been done by the creator. So make sure you go ahead and do that with all of your images.

Image optimization tools

Tools are always helpful. Well, most of the time. Sometimes they are a burden and a distraction, but in this case it seems that they are often very useful. If you can find a great image optimization tool, first of all — link it in the comments because we are all on the hunt, but a few of my favorites are following. I love ImageOptim for Mac, and Riot for Windows. These two tools are very different, but perform a similar task.

You can put images in and it will decipher a way and method to optimize them, do so, and then spit back out the final result all the while saving the format you sent them in with. They are really quite nice, and there are tons more out there. In fact, there are a bunch that will analyze an image’s bitmap and tell you what format is best. You can easily tell that these are some of the most useful things in a web designers tool bucket other than a text-editor and design program, and rightfully so.

Image based server optimization

I’m not an expert when it comes to setting up servers, but I certainly have enough background on the small scale to give this advice. Don’t have massive image loads stored locally. That is, don’t leave a database of images stored on your servers that you are serving the other site files from. Take note of the technologies such as Amazon S3 or Flickr’s servers, and use those to serve your files from.

I’ve recently implemented an Amazon S3 bucket to server our files from, and it was actually quite easy — so feel free to try that. It is a great method. The main reason is that you don’t want a database bottleneck to happen in an instance that you are serving multiple loads from, because it can be a diagnosing nightmare. It’s good practice to store separate file’s on different servers (if under massive load) unless of course it is just a simple general purpose string storage database or something similar.

CSS and JavaScript Optimization

CSS and JavaScript are really important languages when it comes to web design, and especially when it comes to creating dynamic content. I think that people often forget that they can optimize their dynamic content, and they forget that they can optimize their JavaScript and CSS. These aren’t really the most significant things for smaller sites, but with larger sites it’s really important — especially when it comes to sites that rely on a lot of design. Let’s step through a few of the “CSS and JavaScript Rules” that are pretty standardized when it comes to creating web applications.

First rule of CSS and JavaScript

If you can do it in CSS, then do it

Often times we forget that we have amazing tools right in front of us, and I’d say CSS classifies as one of the most amazing web designers have. I’d also say that designers jump into photoshop too quickly by nature (but it is their job so who can blame them). Do keep in mind though that as you design you have something in your browser that can do quick mock ups too: CSS3. Take advantage of it! Having a place to do quick mockups really helps, and it will lead you away from doing hacked together things in HTML later on. Instead of “ ” I am sure you can find a way to add that space in CSS, so do it!

Second rule of CSS and JavaScript

Minify, minify, minify!

The minification of code is perhaps one of the best and easiest things you can do to speed up your site. Keep in mind, we are talking miliseconds, but still it has a noticible effect — and especially if you are using something like a jQuery library. Remember that if you are ever adding plugins for JavaScript/CSS and you are given the option to download the minified version (and don’t need to edit it), do so. Some of my favorite tools to do this are, Code Minifier for Mac, Minify for Windows, and JSCompress/CSSCompressor for those of you who want some browser-based cross platform solutions. Happy minifying!

Third rule of CSS and JavaScript

In-line is a no-no

It is bad practice to use in-line CSS or JavaScript, but especially when it comes to CSS. The reason for that is not only due to legacy issues, but also because if we leave the CSS within the HTML code (especially in-line) it will read as such: HTML/CSS/HTML/CSS/HTML/CSS/HTML/CSS instead of just a simple HTML => CSS. As you can tell, this is really bad for server load times, and can often lead to the detriment of most web applications should there be a designer who refused to use it in a separate file. It certainly wouldn’t cause your site to crash, but it will cause another employee to go through and extract it — it is that important. So always remember to be the one who is extracting it, not the guy who leaves it for others to extract.

Fourth rule of CSS and JavaScript

Move it down

If you have to put your JavaScript in the page with the HTML itself, and have no way around it, then put it at the bottom of the HTML document. This helps speed up the site load time as well, because we can perform all of those functions and other JavaScript goodies after the page itself has loaded. Another thing is that this decreases the likelihood of a bug squashing the performance of the entire site, because when there is a bug with the JavaScript in a sight it will often eat memory like no tomorrow. So it is good practice to make sure your site isn’t doing that, and to warn against future events in which it may — none of us want people to visit our site and then have their browsers crash.

Fifth rule of CSS and Javascript

DOM optimization

Reduce the DOM if you can. Take for instance an example that you are using a lot of jQuery that points to various DOM elements or reads through all the DOM to find something — it can slow your site down quite a bit. There is a little saying I always loved and it fits here, “If you are doing things because it is the only way you know how, then there are probably better ways to do it.” You could also say, “If you are doing things because it is the only way you know how, then you are doing it wrong,” but that version is a bit harsher.

Research, and find those things out in such a case. If you are working with a div in HTML just because you need it for one little thing and it is the only way you know how to do that then it may not be the best way. Now, of course I understand that using div tags because you need them for your CSS is entirely understandable, but perhaps you can remove a few and find a more broad manner of handling that style issue.

I just recently did this myself, as I am going through a Ruby on Rails project currently. Earlier in the week I nested roughly 5 div’s within each other in HAML of all things, just to do something I wanted (a box in a box in a box inside of something else in this case). And I just looked at it, knew it was crap, but didn’t know a better way to do it, so I scrapped it all to re-do it. Having to re-do that made it much harder but it forced me to learn a new way to handle that issue. And in the end I learned a lot from it, and I would recommend the solution to anyone in the future. Go ahead and grab one of those knowledge nuggets for yourself! They are certainly low hanging fruit.

General optimizations

These are more of the broad topics that really don’t fit in anywhere else, but that I still feel deserve some attention. In fact, some of these may be the most important things you can do to speed up a web application or site.

Slashes on links

This is noticeably important. When a user opens a link without a slash at the very end from a website the server literally has to figure out what kind of file or page is at that address. The server will then include said slash, but if you add it yourself then you are reducing milliseconds of load time. These milliseconds all do add up, I promise. Often times I find designers especially who don’t think about it think that their unoptimized code will not burden anything, but it does in the end. If you save quarters for 10 years you certainly will have a lot of money, and the same concept applies here — just on a smaller or larger scale depending on your site’s traffic.

Favicons

Browsers always do a pull for a favicon.ico file at the root level of your server, so you may as well just go ahead and include it. Even if it is something temporary, it is always good to have. If you don’t, the browser itself will give an ‘internal 404′, and just cache that 404 up on the browser’s favicon.ico section, and we all know reducing 404′s speed up load time.

Reduce cookie size

This one may not apply to all of us, but if you are developing web applications then reducing the cookie size is really important. For instance, in what I am familiar with — Ruby on Rails applications — you can use cookies (or other methods) for authentication from session to session and often times people will prefer to use the other methods because they can decrease user load times with them.

Now, a cookie does imply that it is caching things on your computer so you may think it would increase load time, but typically all they are good for is authenticating user sessions or tracking you around the web (as Google and Facebook have been accused of). If you have to work with Cookies, though, make sure you keep the size low and you use them with your better judgement. If you have to, set the expire date shorter to decrease the load time.

Cache

This is a massive topic, and one that I am not an expert on. Caching though is a pretty simple concept. It is storing files (typically HTML/CSS code) from sites that you frequently visit on your computer so that you don’t have to load them every time you visit.

It is really an incredibly useful technology, and one that a lot of web applications are starting to employ as of the past few years. There have been a number of database solutions for caching and probably the most notable is Memcached. What this does is store a copy of database files to your browser as you are using a web application. So, for instance, if you have various profiles you visit often it may store the profile pictures to your computer, and the beauty of Memcached comes in the next phase. In your code, you can actually call (before you pull from the DB) from the Memcached servers and see if you can pull a cached version of the file(s). And if not it will, of course, pull the file from the Database, and if it isn’t in the cache already it will add it to save time next time. This is a beautiful example of caching on a large scale and it has helped tons and tons of companies speed up servers and databases throughout the past 2+ years.

And that will just about sum it up. Those aren’t all of the ways to speed up your site, of course, but it should start to peak your curiosity and get you looking for all the great things out there that will.

I hope you embark on this journey with all of us, and while you do be sure to share your opinions on what you think are the best solutions! You can do on a blog, twitter, or even better in the comments below here so we can all stay in touch on what the best solutions are! I know some people even go as far as to minify their HTML files. Do you do that? If so, have you noticed a performance boost? Let’s get the sharing started!

Dain Miller is a Sr. Engineer at a Chicago based start-up, though he is still accepting freelance projects. He has a passion for responsive design and Ruby on Rails. You can follow him on twitter at @_dain, or find him on about.me.

400 Web Backgrounds – only $29!

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Thoughts on “Silent” Browser Upgrades http://ow.ly/aBdcL

21 Most Useful Time Saving #WordPress Shortcuts – http://ow.ly/aBmk5 /via @wpbeginner

You might need this http://ow.ly/aBvgX 6 Essentials to Setting Up Your Illustrator Documents

We bet you wanna know the common #typography mistakes http://ow.ly/aBDGt

Ignore the design, please http://ow.ly/aBDTC *pretty cool insights

Why Scope Creep is Your Fault (and What You Can Do to Prevent It) http://ow.ly/aBFYd – great read

Take a look at the very cool comic drawings of Jon Boam http://ow.ly/aBGrP

Professional PSD: How to Properly Prepare a Design for Development http://ow.ly/aCEq4

Viewport Sized Typography And Why Is This Awesome? http://ow.ly/aCEvq #CSS3

Christian Stoll captures some of the world’s largest corporations in wide-angle splendor http://ow.ly/aCFZu

Take a look at the creative 3D work of Teodoru Badiu >> http://ow.ly/aE71m

For Your Inspiration: Videos of Typography that Astounds http://ow.ly/aE94x *Must-see

Swedish designers Nakkna introduce a summer line based on simple shapes and platonic solids http://ow.ly/aE8SG

The amazing world of the humble footer http://ow.ly/aFA4X

Why Brainstorming Has To Work A certain Way http://ow.ly/aFCDu

Dirty car artwork by Scott Wade looks truly amazing http://ow.ly/aFAFQ

Cool article about fly-outs and why they’re a failure http://ow.ly/aGDtz

Should Web Design and Development Trends Be Focused on Social Networking? http://ow.ly/aGDyS What do you think?

What can a tablet magazine do that a real magazine can’t? http://ow.ly/aGEDt Quite a lot in fact! #HTML5

Agile UX vs Lean UX – How they’re different and why it matters for UX designers http://ow.ly/aGHGZ *Awesome read!

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

400 Web Backgrounds – only $29!