After attending a few web design conferences this year (namely An Event Apart and Future of Web Design) I saw it fitting to put together a few tips that I’ve picked up, both technical and procedural. I feel these conferences have greatly changed my view on how websites are and should be created, and hope this list of tips can help strengthen my fellow web designers. So without further blabber, here they are:

1. The Magic of 62.5

Let’s start off with an easy technical tip. If in your stylesheet you set the font size of your body element to 62.5% your text will render on most browsers (we’ll get to IE6 in a minute) as 10px. You might be saying, “10 pixels?? Why is that so special?.”

Doing this allows you to create fluid layouts out of practically any design. With a base value of 10px you can now set every measurement in your CSS in em’s. Have a wrapper container that needs to be 1000px?

Well, now you can set it to 100em and the browser will display it just as planned, but if a user decides to increase their text size, your entire layout will grow respectively, essentially creating a “page zoom” that doesn’t break your containers.

For an example of what this looks like, check out one of our recently launched mini-sites: Beaujolais Duboeuf. Below is the code that you can put into your CSS, including an IE6 rule to balance out all the browsers.

body { font-size: 62.5%; }
* html body { font-size: 10px; }

2. Reset and Reload

Some of you may be familiar to this phrased coined by Eric Meyer himself. If you haven’t already, it’s time to learn the importance of a (what I’m going to call) foundation stylesheet. I found a great starting point to be Eric’s reset.CSS which he has posted for public use.

This stylesheet is incredible. Essentially it resets all of the quirky browser default display properties that would vary across different browsers (such as the left-padding of a ul or the font-size of an h2). During one of his sessions at An Event Apart, he encouraged everyone to build upon it however, and not just use it for it’s resetting glory.

The stylesheet can be transformed into a powerful foundation for all of your websites. Do you typically make your websites 1000px wide and centered? Put your div#wrapper rules in there.

Some common things I have included in my foundation stylesheet are the clearfix hack (renamed to .group for semantic purposes as well as the comfort of clients who might be worried at something called “fix” all over their website), and the 62.5% font-size trick covered in the above tip.

3. Forget What You Know About “Design Trends”

We all fall victim to this one. We can’t help but notice when certain elements become incredibly popular in the web world, like watercolor splotches, or realism-texture photo backgrounds, and want to incorporate these stunning new concepts into our designs.

However, of what benefit to the client are these things? Are we incorporating a starscape into the header because our client sells telescopes, or are we doing it to just follow the other kids in the neighborhood? It is important to keep the clients best interest in mind and create thoroughly thought out concepts that directly cater to the clients market.

Use these things when appropriate for the client, but don’t simply try to incorporate them for the sake of having them in your portfolio. Strive to create a design that is really going to speak to your client’s target market and appeal to them, not necessarily what’s going to make it onto a design trend blog. We have personal sites for that! Bottom line, a good design is one that accomplishes client goals and motive.

4. A World of Inspiration

After listening to a talk by Nick Le, author of such useful sites as Web Designer Wall, not only was my mind blown at his incredible illustrating capabilities but my eyes were truly opened to all the inspiration around me. He pointed out that inspiration should not just come from CSS galleries online, or the new post from Smashing Magazine, but simply by studying the world around us.

Here you can find more than just what everyone else is doing. It allows you to find new, creative elements to incorporate into your designs. At FOWD, he revealed two of his newest illustration works and then proceeded so show us various things he found inspiration in, which included things like craft paper, women’s bags, carpet, flowers, leaves, animals, etc.

He said if you look at anything close enough, there is a pattern to be found in it, and this is what we can use to strengthen our designs. If you haven’t had a chance to look at his work I highly recommend it.

If you look at some of it close enough you can pick out some his inspiration: the veins of a leaf, the tail of a rooster, etc.

5. Craftsman: Now Available at More than just Sears

Pointed out by many speakers, there seems to be a gap in web design that could be classified as “great”. Looking through history you can pick out truly effective and memorable design in theatrical posters, record covers, magazines, and the list goes on. Yet when was the last time a website went down in history?

Now we can blame it on all sorts of things, and say that web design is restricted to less than 10 fonts and inconsistency between browsers, or the limited control over vertical alignment of content on the web, but is it not restrictions that force the designer to be that much more creative? Can we not take these restrictions and produce great work? Is the Web not the perfect platform?

We essentially are putting paintings on the biggest, most accessible art gallery in the world. Our designs can be viewed by thousands of users in thousands of locations and hundreds of languages. What is holding us back from using this canvas to its full potential?

No one can say for sure, but what we can do is start paying attention to detail. Instead of worrying about what isn’t possible, focus on what is, and what could be, and strive to achieve greatness in a design.

Jason Santa-Maria gave a great example at AEA of something as simple as a magazine. You pick up the new issue of Wired or Layers Magazine, and open it up to the spread. Instantly through images, color, text-treatment and grid an emotion is evoked before you even start reading. These elements are incredibly impactful to the reader and really set the stage for what the article is trying to get across.

Now let’s go one step further and open those same articles up on the web. No longer do we have big images with impactful text and mood-evoking colors. We have a very standard black headline, right aligned image with plain text wrapping down the page.

Where is the emotion? Where is the impact? Just because we design on the web does not mean that we have to be boring. These emotions and moods can be achieved on the Web with just keen attention to detail.

6. Photoshop or PhotoSTOP?

Okay, don’t let the headline of this tip fool you, Photoshop (and other graphic editors) are incredibly useful to the design process. What needs to be discussed is how far these programs can take us.

Various speakers from companies such as 37 Signals described their design process and encouraged designers to take the step to HTML as early in the concept development as they can.

I believe this is going to be a different point for each designer, as we are all comfortable beginning code and different points. Now I know you’re probably thinking “What about my client? They want to see what the site is going to look like before it gets built!”

There is no disagreeing with that, but how much more effective would it be to the client if you gave them your prototypes in HTML than a simple graphic?

Now if you’re mocking up a product page for an item that comes in multiple colors, your client can actually click the drop down and see how their various colors are going to be available to the customer.

It is important to keep in mind that these are still just prototypes, and not finished pages, so it doesn’t need to be perfect or all-inclusive. The idea is to give the client an idea of what the page is going to look like and decide on changes before the finished page is built.

By doing your prototypes in HTML you now have an excellent start for once you get that client approval as you already have styles in place as well as a layout defined. You can now continue to apply them to other pages and focus on the details.

Again, by no means am I saying “Uninstall Photoshop and forget it’s existence” as even I find a few Photoshop prototypes helpful to me in a project.

The point is that your Photoshop files are going to be useless once the site is built, so why spend more time on them than needed if the same goal can be accomplished through something that will be used in the finished site?

7. Be the Expert

While at FOWD in New York, quite possibly the most beneficial session was about getting your clients to say the word all designers long to hear… “YES” Through this session it was concluded that the reason our clients are less likely to say yes to a design is due to a flawed relationship, both on the clients side, and our own.

Unfortunately, for this flawed existence to be repaired, it is the designer that will have to step up. More often than not a client will view the designer as being negative when we shoot down their ideas to add photos from their printed newsletter back in the 80’s, or including a bright flashing loop of how their customers can win a free product.

Despite the fact that we know these are terrible ideas and know it would be a waste of time to try and implement them, if we simply say “No” to the client what else are they supposed to think? This mentality has brought about a stereotype that designers are radical artists in their own world who do things for no other reason than the fact that it “felt right”.

Some tips that were given to repair / establish a better relationship with clients are

• Always give a reason or motive behind your work, no matter how small
• Say yes to the client initially but then suggest a possible better alternative before doing the work
• Direct the client to give you feedback on more contextual sections of the site

Contextual sections include such as functionality to it’s viewer, strength of call to action, and consistency with branding.

Remember, your client is typically going to be in the marketing department or an executive at the company they work for, they know their company better than we will.

By maintaining a relationship where each person feels they are being used positively, a client will be ten times more likely to sign off on your work. You just have to be the expert.

8. Keep Up to Date

Web design has to be one of the fastest evolving and changing industries. No sooner do we get used to writing custom JavaScript, does a library like jQuery come out making our lives 20 times easier.

It is important to be on the prowl and constantly pick up new tricks and tips (hopefully even some covered in this blog). There are tons of great resources on the web giving great advice and posing real solutions to problems that every web designer experiences. Some of the sites that I frequent include:

• Alistapart.com
• Smashingmagazine.com
• Perishablepress.com

And many, many others.

Also with social networking utilities like Twitter it is easier than ever to develop a network of fellow designers to assist with hang-ups and showing off new techniques.

Lastly, there are hundreds of seminars and conferences held all over the world that are dedicated to best practices and new technologies, such as An Event Apart and Future of Web Design, the two mentioned here.

9. Designers and Developers CAN be Friends.

We all know that somewhere along the lines designers and developers step on each others’ toes and the product of which is a lot of frustration.

Designers think that developers are lazy, developers think designers are unrealistic, and the rest is history. However, if a designer and developer can find a happy medium, the outcome can be incredibly productive and beneficial.

A designer who understands capabilities of a developer will design with those things in mind, making prototypes more functional and comprehensive, saving both the designer and developer headaches down the road.

A designer from Digg stated that just by listening to and sharing with one of the developers there was a much better understanding between the two, and both parties were much more open to suggestion.

A developer and designer that work closely tend to turn out work faster and more thoroughly. I mean, lets face it, two heads are better than one, and someone who doesn’t know how something works tends to ask questions the creator wouldn’t.

10. IE6: To Be, or Not To Be…

We’ll finish with an quick technical tip.

Everyone is wondering “how soon can I stop designing for IE6″. The answer is simple: when your users stop using IE6. Your site should always be functional in IE6 no matter what, but if the percentage of your users coming from that browser is slim to none, then you probably don’t need to worry about creating an above-functional experience for them.

This data can be found through stat trackers such as Google Analytics or Mint. Designing for IE6 should be on a site-to-site basis, not necessarily off of what national browser statistics say.

If you’re site is death-to-ie6.com you’re probably a lot less likely to have a strong IE6 userbase, and on the other end, if your site is ie6-plugins.com, you can probably expect to be designing for IE6 long into the future.

Obviously these are very radical examples, but the point being this is a step that each site will be capable of making at a different stage. If you don’t have browser statistics for a site yet, it’s probably a good idea to keep IE6 both functional and as aesthetically pleasing as possible until you can gather a better idea of the userbase.

Feel free to leave any suggestions for design in the comments!