Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Best Practices In Modern Web Design: The Ultimate Round-Up

Web design has evolved at such an extreme rate over the past ten to twenty years that it’s often hard to keep up with current trends and best practices. It wasn’t that long ago that table-based designs were considered cutting edge and CSS was unheard of. And to compound the problem, finding up-to-date information on what the “right” way to do things is can be nearly impossible at times.

So we’ve collected more than 100 best practices for designing modern websites, from blogs to portfolios, covering everything from CSS and coding to images, graphics, and typography. Along with the practices themselves are resources for more information and examples of the practices themselves to help you visualize what we’re talking about.

General Guidelines Link

There are plenty of general modern web design guidelines that cover more than one category or are just plain useful and shouldn’t be ignored. These span everything from using dummy text to hover effects to minimizing your page load times. And each one can have an enormous impact on your site’s overall impression. Here are 7 general best practices:

1. Use Hover Effects Link

Hover effects can add a lot of functionality to your site, and there are a variety of ways to use them. Whether you simply highlight a link when it’s hovered over or have the object change completely (offering more information, for example), don’t overlook the increased functionality that can be achieved with hover effects.

Showcase of Design Elements - De-clutter Your Interface With Hover Controls1

2. Use Lorem Ipsum or Other Dummy Text Link

Trying to layout a page design when you have no text to work with can be nearly impossible. Using Lorem Ipsum or other dummy text makes a designer’s life much easier. Just be prepared for the inevitable comments from clients if you show them a mockup using Ipsum (“Why’s there all this Latin on the page? You’re gonna have to get rid of that before we put the site up,” is probably the most common remark I’ve heard).

3. Switch to Using the Real Text as Soon as Possible Link

While Lorem Ipsum works great for laying out your basic page structure, having the real text is sometimes necessary to fine-tune things. Headings, titles, and and special content are especially important.

4. Use Repetitive Elements to Give Pages a Cohesive Structure Link

Repeating different design elements, whether it’s an image, a style, or colors, can tie everything on your site together and make it look much more intentional.

5. Make Sure the Purpose of Your Site is Immediately Apparent Link

As soon as someone lands on any page of your site, they should immediately be able to tell why your site is there. Taglines are one way to convey this information. You can also use images, short introductory text (in headers is the best way), or other identifying information. Don’t overlook the text contained in your meta title tag either.

Showcase of Design Elements - Make Your Purpose Apparent

Showcase of Design Elements - Make Your Purpose Apparent2

6. Optimize Your Page Load Times and Make Them as Fast as Possible Link

While a large percentage of internet users are now using broadband, there are still a fair number out there using dial-up. And even DSL can get bogged down with graphics- or multimedia-intensive websites. Aim to keep your load times as low as possible to appeal to the widest possible audience.

7. Only Be Innovative When Appropriate Link

Innovation for innovation’s sake is almost never a good thing. People are accustomed to certain things acting in certain ways. Collective intelligence sets certain guidelines for what different symbols, shapes, colors, and other abstract concepts mean. Deviating from these concepts can have a unintended or even negative impact on how users view your site.

Resources Link

Backgrounds Link

1. Don’t Be Afraid of Big Backgrounds Link

Big background images can add a lot of personality to your site. Many designers shy away from them as being too tricky or complex to implement. But there are plenty of resources out there now for implementing large backgrounds on your site. It’s a technique that can really set your design apart from the crowd.

Showcase of Design Elements - Large Website Backgrounds8

Showcase of Design Elements - Large Website Backgrounds

Showcase of Design Elements - Large Website Backgrounds9

Showcase of Design Elements - Large Website Backgrounds10

2. Don’t Resort to Tables for a Large, Complicated Background Image Link

In the past, Big, complicated backgrounds were implemented with tables in most cases. But tables definitely aren’t the best solution for page layout. There are plenty of ways to layout your image-heavy background using CSS. There’s almost certainly a solution that will work for your particular site. There’s no excuse anymore for using tables for these kinds of sites.

Showcase of Design Elements - Large Website Backgrounds11

Showcase of Design Elements - Large Website Backgrounds12

3. Make Sure Your Large Background Image is Large Enough Link

As monitor sizes increase, it’s becoming more and more important for background images to work on a monitor with a resolution as high as 1920×1080 (the standard resolution for HDTV) or 1920×1200. If you’re only designing on a monitor set at 1024×768, it’s likely at least some of your visitors aren’t seeing what you’re seeing.

4. Make Sure Your Background Image Tiles Properly Link

There’s nothing worse than a background image that doesn’t match up when tiled. Whether you’re using a background created by someone else or creating your own, make sure it tiles seamlessly.

Showcase of Design Elements - Tiled Website Backgrounds

Showcase of Design Elements - Tiled Website Backgrounds13

Showcase of Design Elements - Tiled Website Backgrounds14

Showcase of Design Elements - Tiled Website Backgrounds15

5. Optimize Your Background Images! Link

Optimizing your background image so it’s as small as possible while still looking good makes your site load faster. This is especially important when using a large background image. Using an image that’s 1920×1200 pixels can make for very large file sizes if you’re not careful with your settings.

6. Backgrounds Don’t Have to Be Complex Link

While big backgrounds can add a lot of personality to a site, having a minimalist background can make just as big of an impact. You’ll need to pay more attention to other elements of your site if your background isn’t there to make a big impact, but it can make for a better user experience (depending on the purpose of your site).

Showcase of Design Elements - Simple Website Backgrounds16

Showcase of Design Elements - Simple Website Backgrounds17

Showcase of Design Elements - Simple Website Backgrounds18

Showcase of Design Elements - Simple Website Backgrounds19

Showcase of Design Elements - Simple Website Backgrounds20

Resources Link

Blog Design Link

1. Focus on Readability Link

The majority of people visit blogs for the content. Design is somewhat secondary. While this doesn’t mean you should disregard what your blog looks like, make sure all of the elements on your page are enhancing your content, not distracting from it.

Showcase of Design Elements - Readability26

Showcase of Design Elements - Readability27

Showcase of Design Elements - Readability28

Showcase of Design Elements - Readability29

2. Use the h1 Tag for Your Post Titles Link

Search engines place a lot of weight with heading tags, and the h1 tag carries the most weight. If your post titles are keyword-rich (which they should be), this can make a decent impact on how your posts rank in search engine results.

3. Don’t Clutter Your Sidebars Link

Some sidebars seem to run on forever, even beyond all the other page content. Pair these down. Only include information in your sidebars that’s really relevant. Use two sidebars if that makes things less cluttered. And make sure you keep a consistent visual style throughout all the elements in your sidebar.

Showcase of Design Elements - Decluttered Sidebars30

Showcase of Design Elements - Decluttered Sidebars31

Showcase of Design Elements - Decluttered Sidebars32

4. Show Off Your Personality Link

Blogs are often looked at as being less formal than traditional websites, so you can often get away with showing more personality, even on a corporate site. Let your or your company’s personality shine through in your blog’s design.

Showcase of Design Elements - Show Your Personality

Showcase of Design Elements - Show Your Personality33

Showcase of Design Elements - Show Your Personality

Showcase of Design Elements - Show Your Personality34

5. Consider the Design of Every Element Link

Blogs contain a lot of elements that might not be found on a traditional site: archives, comments, categories, and posts for starters. Don’t forget about these elements when you’re creating styles for the different parts of your site.

Showcase of Design Elements - Consider Every Element35

Showcase of Design Elements - Consider Every Element36

6. Properly Integrate Advertising Link

If you’re going to have advertising on your site, make sure it’s integrated with the look and feel of the rest of your site. If you’re using text ads, make sure font colors and link colors are consistent with (or complimentary to) the rest of your site. If you’re including banner ads, make sure they’re styled in some way that ties them into the rest of your site (either with borders, drop shadows, or whatever is appropriate based on your design).

7. Use Styles for Post Images Link

This is probably one of the most overlooked bits of blog design out there. Applying CSS to images within your posts is no more difficult than adding it to any other part of your site. And it can make a big difference in the appearance of your site. Add a border. Or apply a hover effect. Use a style for the caption associated with the image. Whatever you do, just don’t ignore this important element.

8. Make it Easy to Subscribe Link

Make sure your RSS feed is easy to subscribe to. Using an oversize RSS icon is one great way to make it easy for people to subscribe. Adding a “subscribe by email” option can also greatly increase your subscription rates. Make sure your RSS icon is in the top portion of your page, above the fold if possible (the top of your sidebar or even in your header are both great locations).

9. Integrate it With Other Social Media Link

If you use Twitter, integrate your Twitter feed right into your blog. Whether you put it in the sidebar, footer, or even the header, it’s a great way to get more Twitter followers. If you use Flickr or YouTube, why not post your most recent images or videos right in your sidebar or elsewhere on your blog? This is especially important if your other social media feeds are related to your blog’s content. In addition to integrating your feeds with your blog, make sure it’s easy for visitors to your blog to share your content with others through their own social media channels.

Showcase of Design Elements - Social Media Integration37

Showcase of Design Elements - Social Media Integration38

Showcase of Design Elements - Social Media Integration39

Showcase of Design Elements - Social Media Integration40

10. Keep Load Times Short Link

As Internet connections get faster, it becomes more and more tempting to disregard how large your pages are and how long they’ll take to load on a slower connection. Even internet users with DSL may see noticeable wait times on very large pages. Don’t let yours be one of them. After all, if the page isn’t loading, that back button looks very tempting.

Resources Link

Buttons and Icons Link

The use of buttons and icons within your site for navigation or other elements can add tons of character and added usability to your site. But there are a number of things to keep in mind when choosing or designing buttons and icons, from consistency to sizing. Using buttons and icons effectively adds a new dimension to your site’s design, often elevating it to the next level.

1. Use Appropriate and Consistent Icons Link

There are hundreds of free icon sets out there. And there are probably thousands of paid icon sets. Finding one that meshes with the rest of your site design shouldn’t be too hard. Make sure that whichever one you choose echoes the rest of your design elements and that the icons you use are consistent throughout your site. In other words, don’t mix glossy icons with grungey ones.

Showcase of Design Elements - Appropriate Icons47

Showcase of Design Elements - Appropriate Icons

Showcase of Design Elements - Appropriate Icons48

2. Buttons Aren’t the Best Option for General Navigation Link

Here’s the thing: buttons aren’t great for menus or other general navigation. You don’t press a button to turn the page of a book or magazine. Buttons make things happen in real life, more than just moving from one page to another. Tabs make a lot more sense for general navigation (after all, tabs in a notebook are used to mark new sections of content, like new web pages).

3. Use Buttons to Make Certain Navigation Elements Stand Out Link

Buttons are not a great solution for general web navigation. But if you want a certain navigation element to stand out, using a button is a great way to do just that. In real life, when you push a button, something happens. The same should be the case on your website. Buttons are great for downloads, adding things to a shopping cart or wishlist, or otherwise taking action. Make sure your button stands out against the surrounding design for added importance and effect.

Showcase of Design Elements - Button Design Showcase

4. Size Your Buttons and Icons Appropriately Link

Buttons and icons, like other page elements, should be sized according to their importance. Buttons or icons that represent a call to action (download, buy, etc.) should be larger and stand out more. Buttons or icons that are logically expected (such as a login button or to submit a form) can be smaller and still be effective.

Showcase of Design Elements - Creating Usable Links and Buttons49

Showcase of Design Elements - Icon Design: Sizing50

5. Don’t Be Afraid of Metaphoric Icons Link

Using literal icons works great if you’re not going to include any text near them. But don’t overlook using metaphoric icons if you’re going to be pairing them with text. Just be sure that very common icons (such as those for subscribing to RSS feeds) are kept at least somewhat similar to their well-known images to prevent confusing your visitors.

Showcase of Design Elements - Metaphoric Icons51

6. The Best Places to Use Icons are with Headers, as Buttons or on Buttons Link

Putting an icon in your header is a great way to draw attention to a specific portion of your site (such as an RSS feed). In this case you have to be sure to integrate the icon into your design so it doesn’t look like an afterthought. Using well-known icons as buttons is another great use. Pairing an icon with a hover effect giving a description is a good way to make the more usable when not combined with text. And finally, integrating an icon into a button that also includes text is a nice way to add a bit more flair to your buttons.

Showcase of Design Elements - Icons and Buttons in Headers52

Showcase of Design Elements - Icons and Buttons in Headers53

Showcase of Design Elements - Icons and Buttons in Headers54

Showcase of Design Elements - Icons and Buttons in Headers55

Showcase of Design Elements - Icons and Buttons in Headers56

Resources Link

Code Link

1. Meta Information (Title, Description) Should be Accurate and Explanatory Link

The most important bits of descriptive meta data are the title and description tags. Both of these are used in SEO (both in rankings and as what actually shows up in search results). Using a key-word rich title and description is a good way to get a little extra weight in search engine results, and a way to get searchers to actually click on your site within the results.

2. Always Close Your Tags Link

This really shouldn’t have to be said anymore, but you need to make sure you always close your HTML tags. The latest HTML standards require tags to be closed (unlike earlier versions that let programmers get away with being lazy).

3. Make Sure Your Doctype Declaration is Correct Link

The doctype declaration in your HTML code can make the difference between your page validating or not. And in some cases, it can make the difference between your page displaying properly or not. Read up on what the different HTML and XHTML declarations require and then choose accordingly.

Showcase of Design Elements - Correct Doctype Declaration63

4. Validate Your Code!!! Link

Valid code is more likely to be displayed the way you intended across different browsers and platforms. It’s also more likely to continue doing so in newer browser versions. Writing valid code isn’t difficult, and there are plenty of doctype options to choose from to meet your particular needs. Use the W3C code validator often during your markup to prevent having to change a bunch of things later.

5. Always Use UTF-8 Encoding Link

UTF-8 encoding supports every character out there. By using it, you’ll ensure that special characters don’t show up as code snippets or strings of random characters.

6. Use Semantic Markup to Provide Meaning to Your Code Link

Using semantic markup uses meaningful names for your classes, ids and other tags. Adding meaning not only helps you remember which classes effect which elements, but also makes it easier for anyone who takes on your code in the future. And at some point, search engines may be able to use semantic information in a meaningful way to improve search results.

7. Comment Like There’s No Tomorrow Link

Commenting your code makes it much easier to revise later. With good comments, you’ll immediately know which parts of your code effect which parts of your content, without having to spend hours sifting through the code itself. And while many web developers think they’ll remember why the did something six months down the road, the majority of them won’t.

8. Keep Your Code Clean Link

Keeping your code cleaned up is important for a couple of reasons. First of all, clean code makes for smaller file sizes and faster load times. Second of all, it makes it easier to make changes to your code later, because it won’t be cluttered up with unnecessary elements.

9. Use the Correct Markup for Quotes Link

Using the correct markup for quotations and other punctuation elements is not that difficult. Using smart quotes, dashes, smart apostrophes and other special punctuation characters makes your content look more polished. Here’s the proper coding for some of the most common:

  • – En dash: –
  • — Em dash: —
  • “ Left double quote (use on the left-hand side of quotations): “
  • ” Right double quote (use on the right-hand side of quotations): ”
  • ‘ Left single quote: ‘
  • ’ Right single quote (also used for apostrophes): ’

Resources Link

Color Link

1. Make Sure Colors Stay Consistent Throughout the Site Link

Keeping a consistent color palette across your site is more professional and gives your site a more cohesive image. If you want to switch colors, have a good reason for doing so and make sure other elements remain consistent.

2. Make Sure There’s Appropriate Contrast Between Colors Used in Different Elements Link

This mostly applies to text and background colors. Make sure there’s sufficient contrast between the text color and the background it’s against to make reading easy. On the flip side, make sure you don’t have too much contrast (it can be harsh on the eyes, especially when it’s light text against a dark background), and whatever you do, don’t use true contrasting colors (like blue and orange, yellow and violet, red and green, etc.) or your text will be all but impossible to read.

Showcase of Design Elements - Appropriate Color Contrast70

Showcase of Design Elements - Appropriate Color Contrast71

Showcase of Design Elements - Appropriate Color Contrast

Showcase of Design Elements - Appropriate Color Contrast72

3. Make Use of Gradients Link

Subtle gradients can give a simple background or other element a lot more emphasis and style. Whether you use a gradient that fades from one color to another or between two shades of the same color, it’s a great way to add some visual interest to your site.

Showcase of Design Elements - Gradients

Showcase of Design Elements - Gradients73

Showcase of Design Elements - Gradients74

4. Limit the Number of Colors Used Outside of Images Link

Using ten or twelve colors on a site sometimes sounds like a great idea. But in practice, it rarely works and often makes your site look cluttered and way too busy. Outside of images, try to limit your color palette to only three or four colors, and make sure they’re not clashing with each other. If color isn’t your strong point, there are plenty of color palette generators out there you can take advantage of.

Showcase of Design Elements - Limited Color Palette75

Showcase of Design Elements - Limited Color Palette76

Showcase of Design Elements - Limited Color Palette77

Showcase of Design Elements - Limited Color Palette78

Resources Link

CSS Link

1. Don’t Use Inline Styles Link

It’s very tempting as you’re coding something to throw in an inline CSS style. But it makes your code more complicated and can cause problems when you’re trying to change those styles later. After all, you’re going to have to constantly switch back and forth between your HTML and CSS files, when you really should only need to open your CSS files.

2. Compress Your CSS Files Link

Compressed files make for faster load times. While just compressing one file likely won’t make a noticeable difference, if you keep your code clean and compress where possible, it can all add up to a significant improvement in performance. There are plenty of online utilities for compressing your files; make use of them.

3. Include Dependent CSS Files Within Your CSS Files Link

Using @import instead of HTTP link declarations makes your CSS file easier to reuse, as it carries its dependencies with it. Otherwise you’ll waste time having to look through your HTML files to find the dependent files.

4. Use Comments Correctly Link

Use comments within your CSS files to specify which styles apply to which elements. Separating your styles between header, footer, content, and other sections makes it infinitely easier to make adjustments later and makes it easier to identify which styles are effecting which parts of your design.

Resources Link

eCommerce Link

1. Use an Effective Call to Action Link

Make it enticing for visitors to the site to take the desired action. Whether you use a button, an icon, or some other technique, make it so users want to do what you’re requesting.

Showcase of Design Elements - Design Decisions: The new Highrise signup chart86

Showcase of Design Elements - Hover Effects in Web Design: Best Practices and Examples87

Showcase of Design Elements - 10 Tips to Design Usable Shopping Carts88

2. Make Checkout as Streamlined as Possible Link

Using a single-page checkout can have a big impact on how many people actually finish the ordering process. People are busy and if it looks like checkout is going to take half an hour, they might just decide to come back later (or go elsewhere entirely). You want to remove anything that might slow a customer down on their way to completing their order.

Showcase of Design Elements - Streamlined Checkout89

Showcase of Design Elements - Streamlined Checkout90

3. Use a Mini Cart Link

Using an AJAX or other type of mini cart that allows visitors to view the items within their cart without leaving the page they’re on is both helpful and more likely to keep them shopping.

Showcase of Design Elements - Streamlined Checkout91

Showcase of Design Elements - Streamlined Checkout92

4. Always Use a “Verify Your Order” Page Link

This is one of those psychological things that makes people feel more comfortable in ordering. If they know they’ll have a chance to verify and edit their order before placing it, they’re less likely to hesitate or cancel their order. And in case the customer did make a mistake in their order, it helps prevent costly returns and customer service issues down the road.

5. Include Contact Information Prominently to Increase Sales Link

Having a phone number and even a mailing address prominently displayed on your site makes a lot of customers more comfortable. It used to be that people were warned against ordering anything online from a company that didn’t at least provide a phone number, and a lot of people still follow that advice. Putting your phone number right in your header, your sidebar, or your footer, not just on your contact page.

Make sure there’s a way for customers to search your entire site in case they’re looking for information in addition to searching for products. Keeping these two searches separate reduces confusion and search time. A simple drop down next to your search box that allows customers to choose between searching the entire site or just products is a simple solution for this.

Being able to refine a search based on specific criteria (category, size, color, etc.) is another way to make your store more buyer-friendly. If customers can find what they’re looking for quickly and efficiently, it’s less likely they’ll leave before completing their purchase.

Showing related products increases the likelihood that customers will purchase more than one item. For example, if a customer is looking at jeans, show shirts and belts in the related products area. A good place to display related products is under the product description or “add to cart” button on individual product pages, though there are plenty of other appropriate locations.

Showcase of Design Elements - Show Related Products93

Showcase of Design Elements - Show Related Products94

9. Don’t Make Shoppers Register for an Account Up Front Link

This goes back to slowing customers down. You want to make it as fast and simple as possible for customers to place an order. Give them the option to save their information for next time after the order is placed.

10. Add a Wishlist Function Link

Letting customers save items they’d like to purchase later is a good way to increase future purchases. Allowing them to share their list with others is a great way to get even more orders (people shopping for gifts might just buy something for themselves, too).

11. Prominently Display Security Badges Link

As strange as it sounds to someone who’s very web-savvy, a lot of people are still wary of shopping online. Displaying security badges and reassuring customers that their information is safe is one more way to putting their minds at ease and helping them to complete their purchase.

Resources Link

Because the footer of a page is located at the very bottom, it’s often overlooked. But there are a ton of different options for styling and utilizing that space. And the design of your footer should set it apart as its own unique content area, not an afterthought stuck on there to show copyright information.

Showcase of Design Elements - Footer Design99

Showcase of Design Elements - Footer Design100

Showcase of Design Elements - Footer Design

Showcase of Design Elements - Footer Design

A sitemap makes your site more accessible, especially if your main navigation is image or Flash-based. A sitemap also helps with SEO, as it gives search engines a clear-cut path to your most important pages.

Showcase of Design Elements - Footer Sitemap101

Showcase of Design Elements - Footer Sitemap102

Showcase of Design Elements - Footer Sitemap103

Instead of an “about” page, why not place that information in your footer? Including information about your company, site, or anything else in the footer is a good use of space and can help keep your navigation cleaner.

Showcase of Design Elements - Important Information in Footers104

Showcase of Design Elements - Important Information in Footers105

Showcase of Design Elements - Important Information in Footers106

Showcase of Design Elements - Important Information in Footers107

Give your footer its own unique design. Whether you echo the style of your header of go for something different, make sure it fits with the design of the rest of your site and doesn’t look like an afterthought.

Showcase of Design Elements - Clearly Delineated Footer108

Showcase of Design Elements - Clearly Delineated Footer109

Showcase of Design Elements - Clearly Delineated Footer110

Showcase of Design Elements - Clearly Delineated Footer

Including things like a contact form, search box, or other advanced functions in your footer is another great use of space. Again, make sure it doesn’t look like an afterthought.

With all this talk of doing something really unique and special with your footer, it seems like having a simple, functional footer isn’t acceptable. But it is. Using a more traditional footer is perfectly fine, as long as you take the time to make it look integrated with the rest of your site.

Showcase of Design Elements - Simple Footer111

Showcase of Design Elements - Simple Footer

Showcase of Design Elements - Simple Footer

Resources Link

Forms and Logins Link

1. Make Registration Forms as Short as Possible Link

People don’t want to fill out huge, long forms asking for lots of personal information. The best registration forms are the shortest and simplest. Keep your registration forms so they fit on one screen if at all possible.

Showcase of Design Elements - Short Registration Forms

Showcase of Design Elements - Short Registration Forms

Showcase of Design Elements - Short Registration Forms116

2. Require as Little Information as Possible Link

Don’t ask users to give too much information about themselves up front. Many registration forms just require an email address or username and a password. Allow your users to add additional information about themselves after they’ve completed the sign-up process.

Showcase of Design Elements - Little Required Information117

Showcase of Design Elements - Little Required Information118

Showcase of Design Elements - Little Required Information119

3. Clearly Mark Required Fields on All of Your Forms Link

There’s nothing more annoying than filling out a form, hitting submit, and then getting an error message saying you’ve missed a required field.

Showcase of Design Elements - Clearly Marked Required Fields120

Showcase of Design Elements - Clearly Marked Required Fields

4. Make Form Validation Helpful to the User Link

Using real-time form validation (that signals immediately if a user has entered invalid information or skipped a required field) is helpful to those trying to sign up on your site or fill out another form. If a form fails to validate, make sure it doesn’t erase the form contents and make it immediately apparent why it didn’t go through. Otherwise you risk driving users away with a sign-up or contact process that just seems too complex.

5. Make Sure You Confirm Successful Submission to the User Link

There’s nothing worse than hitting “submit” and then landing on a blank page or another page completely unrelated to what you were doing. It leaves you wondering whether the form went through. Whenever a form is submitted on your site, make sure it tells the user it was successful.

6. Give Detailed Information About Login Failures Link

While it may seem more secure to use generic statements like “The user ID or password you entered were incorrect,” those kinds of broad statements can be frustrating to users. Many internet users use different IDs and passwords for different sites and remembering which one you used where can be tricky. Tell those trying to log in whether it was the user ID or the password that failed to make it easier for them to successfully login.

Resources Link

Functionality Link

1. Create a Custom 404 Page Link

404 pages are often-overlooked in the grand scheme of website designs but can be a great way to keep users on your site even if what they were looking for isn’t there. Whether you opt to be funny, serious, or somewhere in between, give users helpful information when they land on a 404 page, including links to search for the content they were looking for and a link back to the home page of your site.

Showcase of Design Elements - Create Custom 404 Pages

Showcase of Design Elements - Create Custom 404 Pages

Showcase of Design Elements - Create Custom 404 Pages

Showcase of Design Elements - Create Custom 404 Pages

Showcase of Design Elements - Create Custom 404 Pages126

2. Be Sure to Include a Search Function on Your Site Link

Unless your site is very, very small (one or two pages), include a search box to make it easier for users to find content. Make sure search results are also organized in an easy-to-browse format, too.

Showcase of Design Elements - Search Functionality127

Showcase of Design Elements - Search Functionality128

Showcase of Design Elements - Search Functionality129

Showcase of Design Elements - Search Functionality130

This shouldn’t even be something we have to mention, but make sure you don’t have any broken links on your site. This applies to both internal links and to links leading to other sites.

4. Test Your Forms Link

Make sure your forms work the way they were intended to. This includes submitting properly, sending out any confirmation emails, and delivering the proper message after both successful and unsuccessful submissions (you are testing to see what happens when a form doesn’t go through, right?).

5. Make Sure Elements Function as Expected in Different Browsers Link

What shows up in Firefox fine might not be showing up the way you intended in Google Chrome, Internet Explorer, Safari, and/or Opera. There are online utilities available that let you see how your site is appearing in different browsers, different versions of those browsers, and on different operating systems.

Resources Link

Graphics and Images Link

1. Optimize Your Alt Tags Link

Alt tags serve two purposes. First, if your image doesn’t load for some reason, it lets whoever is browsing your page know what the image was supposed to be. Second, since search engines can’t read images, alt tags tell search spiders what the image is displaying and can greatly improve your search results. It only takes an extra second or two to add an alt tag to each image and the benefits are well worth it.

2. Use Image Title Tags Link

Title tags can also have a positive impact on SEO. But even more importantly, if you use JavaScript on your site, title tags allow you to call objects easier, with just their title.

3. Look at the Overall Impact Each Graphic or Image Makes on Your Entire Site Link

Graphics and images can make a huge difference in how your site appears and how users interpret it’s intentions. Make sure you take into account how each graphic or image alters the overall appearance of your site. This includes paying attention to color scheme, negative space within the image, and the image’s actual content.

Showcase of Design Elements - Impact of Images137

Showcase of Design Elements - Impact of Images138

Showcase of Design Elements - Impact of Images139

Showcase of Design Elements - Impact of Images140

Showcase of Design Elements - Impact of Images141

4. Be Aware of File Sizes and Load Times Link

Make sure your images are optimized to load quickly. Of course, at the same time don’t compress them to the point of looking distorted or pixelated.

5. Always Specify Image Height Link

There’s nothing worse than being in the middle of reading something and then suddenly having the page jump down as an image loads. If you specify the height of your images, when the page loads it automatically leaves enough space for the image and prevents those annoying page jumps.

Header Design Link

Users have come to expect that headers, and especially logos within headers, will link back to the home page of a site. Don’t disappoint or confuse them by having yours do something different (or nothing at all).

Showcase of Design Elements - Linked Logo in Header142

Showcase of Design Elements - Linked Logo in Header143

Showcase of Design Elements - Linked Logo in Header144

Showcase of Design Elements - Linked Logo in Header145

2. Don’t Be Afraid of Big Headers Link

Big headers can add a lot of visual impact to your site. Just keep in mind how much the header will push other content down the screen and the effect this will have on site users. If possible, make sure something is included in your header that immediately lets new visitors know what your site is about.

Showcase of Design Elements - Big Headers146

Showcase of Design Elements - Big Headers

Showcase of Design Elements - Big Headers

Showcase of Design Elements - Big Headers

3. Include Content Other Than Your Logo in Your Header Link

Headers are a great place to give users other information about your site. Whether it’s a tag line, navigation, a search box, or an icon to download something or subscribe to an RSS feed, don’t overlook the impact of added content in your header.

Showcase of Design Elements - Added Header Elements147

Showcase of Design Elements - Added Header Elements148

Showcase of Design Elements - Added Header Elements149

Showcase of Design Elements - Added Header Elements150

Showcase of Design Elements - Added Header Elements151

4. Make Sure It Conveys What You Want Link

The header of your site is really the first thing new visitors will see. Make sure it grabs their attention, directs them where you want them to go, and makes a positive first impression.

Resources Link

Intros and Splash Pages Link

1. Not All Intros are Flash Link

An intro doesn’t necessarily have to be Flash. A lot of sites use a short splash page to give new visitors a quick peak at what they do or if they have any special content they want to showcase. Other sites use a simple image and an “enter” button. And still other sites include the intro on the home page, often located either in or right under the header. Any of those options are fine, as long as it makes it immediately apparent how to get from that page or section to the actual content.

Showcase of Design Elements - Non-Flash Intros

Showcase of Design Elements - Non-Flash Intros155

Showcase of Design Elements - Non-Flash Intros156

Showcase of Design Elements - Non-Flash Intros157

2. Make the “Skip Intro” Button Easy to Find if You’re Using a Flash Intro Link

Some people just won’t want to watch your intro, no matter how cool you think it is. Make it easy for these people to go straight to the main content of your site or risk them clicking their back button.

3. Use a Progress Bar Link

No one wants to sit looking at a blank screen waiting for a page to load. Most people won’t stick around for more than a second or two if the page looks like it has nothing on it. A progress bar keeps them satisfied until your actual intro starts.

4. Keep Intros Short Link

A Flash intro longer than thirty seconds is unlikely to be watched by many people, not matter how great it is. Keep you intro as short as possible to maximize the number of people who actually see it. If you’re not using Flash, but rather a text intro or splash page, keep it to a paragraph or two to get the most impact.

5. Only Use an Intro if You Really, Really Love It Link

Intros, to some extent, have very little functional purpose. A lot of users hate them and will skip them all together. Plus, they take up bandwidth and slow down the load time of your site. Only use an intro if it’s something you really, really want to do and the intro itself is something you really love and couldn’t bear to part with.

Resources Link

JavaScript, AJAX, and Flash Link

1. Use JavaScript to Add Functionality, not Content Link

JavaScript was designed to add functionality to sites, not content. Use HTML or XML for your content, and leave JavaScript for performing functions and actions.

Showcase of Design Elements - JavaScript for Functionality162

Showcase of Design Elements - JavaScript for Functionality163

Showcase of Design Elements - JavaScript for Functionality164

2. For Faster Page Loads, Place JavaScript Files at the Bottom of Your Pages Link

Because JavaScript is a client-side script, it can take a bit longer to download (depending on its function) than other content on your page. And if it’s sitting above other content in your code, the JavaScript going to have to load first. Putting it at the bottom allows everything else on your page to load so your visitors aren’t staring at a blank or half-loaded screen.

3. Don’t Use Inline JavaScript! Link

Using separate JavaScript files makes your pages load more quickly and makes your files sizes smaller. Plus, it’s easier to reuse scripts if they’re self-contained.

4. Optimize Your Loops Link

Optimization of your JavaScript loops makes your script faster and leaner, resulting in quicker responses and load times.

5. Keep Your Code Simple Link

The simpler your code, the easier it is to modify, adapt, and update. Plus, simpler code generally results in smaller files sizes, faster load times, and fewer opportunities for your code to do something unintended.

6. Make Sure Your Scripts Degrade Gracefully Link

Graceful degradation is important considering there is still a percentage of internet users out there who don’t have JavaScript enabled on their computers. Make sure your page isn’t unusable for these users.

Resources Link

Multimedia Content Link

1. Make Sure Video and Audio Content Don’t Autoplay Link

Video and especially audio content that autoplays can be really annoying to users. Sometimes it even causes them to close the site without looking any further (especially when that content is in advertising on the site). Instead of having video or audio autoplay, just make the play button stand out so users know where to click. And don’t allow advertisers to have audio content that starts automatically.

2. If You Use Background Audio, Make Sure it’s Easy to Turn Off Link

If you insist on using some kind of audio as background sound on your site, make sure it’s easy for users to turn the sound on and off. A button to do this in either your header or your footer is probably going to be the easiest to find.

Showcase of Design Elements - Background Audio174

Showcase of Design Elements - Background Audio175

3. Make Sure Video and Audio Content Has a Clear Purpose on the Page Link

Don’t put video or audio content on your site just for the sake of having multimedia content. Make sure each video and audio file on your site has an important and well-defined purpose and will be useful to your visitors.

4. Don’t Treat Video Content as an Afterthough Link

If you want to use video from YouTube or other popular video-sharing sites, make sure the content area you plan to place it in is wide enough for that kind of content and that any added videos will look like they were meant to be there. There’s nothing uglier than a YouTube or other video covering up or pushing over content in your sidebar (or being partially covered by your sidebar) or looking like it was just something you slapped on there at the last minute.

Showcase of Design Elements - Video as an Afterthought176

Showcase of Design Elements - Video as an Afterthought177

Showcase of Design Elements - Video as an Afterthought

Showcase of Design Elements - Video as an Afterthought178

Resources Link

1. Make Sure Navigation is Immediately Recognizable Link

Don’t make users search for navigation on your site. Navigation elements should be immediately recognizable to new visitors, though that doesn’t necessarily mean you have to use traditional navigation elements like buttons or menus.

Showcase of Design Elements - Obvious Navigation182

Showcase of Design Elements - Obvious Navigation183

Showcase of Design Elements - Obvious Navigation184

Showcase of Design Elements - Obvious Navigation

Make links on your pages distinct from other text. Underline isn’t your only option for this. Making links have a different font weight, color, or other style are also acceptable.

Showcase of Design Elements - Easily Identifiable Links

Showcase of Design Elements - Easily Identifiable Links185

Showcase of Design Elements - Easily Identifiable Links

Showcase of Design Elements - Easily Identifiable Links

Showcase of Design Elements - Easily Identifiable Links186

Using text links as an alternate form of navigation on your site improves its accessibility if your main navigation is based on Flash or images. Your footer just happens to be an ideal place to put these things.

4. Use Breadcrumbs Link

Breadcrumbs let visitors know exactly where they are on your site, and their probable path of getting there. The improvement in navigation is well worth the extra time it takes to code.

Showcase of Design Elements - Breadcrumbs187

Showcase of Design Elements - Breadcrumbs

Showcase of Design Elements - Breadcrumbs188

Showcase of Design Elements - Breadcrumbs

5. Consider Using Tabbed Navigation Link

Tabbed navigation has a more positive psychological impact on visitors than other menu formats. This is primarily because tabs more accurately reflect the way things work in the real world (a tab in a notebook, for example, brings you to a different page or section). Tabbed navigation subconsciously encourages users to click through to different parts of your site and tells them what’s important.

Showcase of Design Elements - Tabbed Navigation189

Showcase of Design Elements - Tabbed Navigation190

Showcase of Design Elements - Tabbed Navigation191

6. Have a Sitemap Somewhere on Your Site (Even if It’s Just an XML One) Link

Link-based sitemaps improve the accessibility of your site and has a positive impact on your site’s search engine optimization. If you opt not to include a full text-based sitemap, an XML sitemap will at least give you the same SEO benefits.

7. Keep Pagination Simple and Straightforward Link

When you split content into multiple pages, make sure it’s easy for users to not only get to the next page, but also to the last page, first page, or any page in between. Make sure it’s clear which icon does which function, too. It’s incredibly annoying when you think you’re clicking the “next page” button and then find yourself suddenly on the last page!

Showcase of Design Elements - Pagination192

Showcase of Design Elements - Pagination193

Showcase of Design Elements - Pagination

Showcase of Design Elements - Pagination194

Resources Link

Page Layout Link

1. Don’t be Afraid of Negative Space Link

Despite its name, negative space is an important design element. Basically, negative space (also called “white space”) is comprised of areas within your design that have no content (text or images). Negative space keeps your site looking less cluttered.

Showcase of Design Elements - Negative Space

Showcase of Design Elements - Negative Space199

Showcase of Design Elements - Negative Space

Showcase of Design Elements - Negative Space

2. Use a Grid Layout as the Basis of Your Design Link

Using a grid as the basis for your design keeps the different elements of your design lined up and balanced. And despite its name, grid-based design doesn’t necessarily look like it’s based on a grid at first glance.

Showcase of Design Elements - Grid Layout200

Showcase of Design Elements - Grid Layout201

Showcase of Design Elements - Grid Layout

Showcase of Design Elements - Grid Layout202

3. Be Aware of What Content will Appear Above the Fold Link

Make sure the content on your site that will appear onscreen at different resolutions when the page first loads are the things you feel are most important to visitors. This generally consists of your header, and at least part of your navigation and main content.

4. Prioritize Information on Your Pages Link

Different information on your site should have different levels of importance. Your design and the emphasis placed on different elements should reflect their importance in the grand scheme of your site.

Showcase of Design Elements - Prioritized Information

Showcase of Design Elements - Prioritized Information203

Showcase of Design Elements - Prioritized Information

5. Strive for Balance in Your Designs Link

To some extent, balance is a bit subjective. Symmetrical designs are the most obvious examples of balanced sites. But balance doesn’t necessarily equal symmetry. Asymmetrical designs can be well-balanced, too, as long as the different elements are positioned in such a way that one side of your site doesn’t overpower the other.

Showcase of Design Elements - Balance204

Showcase of Design Elements - Balance205

Showcase of Design Elements - Balance

Showcase of Design Elements - Balance206

6. Use CSS for Your Layout Link

This is something that shouldn’t even need to be on this list, but tables were never really meant to be used for the structure and layout of your site. Tables were originally designed to organize data, nothing more. But CSS creates a much cleaner, leaner, and faster-loading site than tables. Plus, current web standards insist on CSS for the layout of a site in order for the HTML to validate.

Resources Link

Portfolio Sites Link

1. Keep the Purpose of Your Site in Mind Link

For the majority of portfolio sites, the aim is to gain new clients. Keep this in mind when designing your site, including who your clients are likely to be and what kinds of information they’ll be looking for.

Showcase of Design Elements - Portfolio Purpose

Showcase of Design Elements - Portfolio Purpose

2. This is the Place to Show Off Your Design Skills Link

To some extent, your portfolio site becomes a part of your portfolio, especially if you’re a web designer. Show off your design abilities and make your portfolio something truly unique.

Showcase of Design Elements - Portfolio Design214

Showcase of Design Elements - Portfolio Design215

3. Showcase Only Your Best Work Link

Don’t include everything you’ve ever designed in your portfolio. Pick out a dozen or two designs in each category in which you work (or whatever number works best with your page layout) and display only those pieces. Most clients won’t want to spend hours combing through a couple hundred examples, anyway.

4. Make it Easy for Prospects to Contact You Link

Since the goal of most portfolio sites is to get new clients, make sure it’s easy for those new clients to contact you. Including a contact form plus your email address (and maybe even a phone number or Skype ID) gives potential clients options in how they contact you.

5. Include Client Testimonials Right on Project Pages Link

Instead of having a special testimonials section on your site, why not include client testimonials on their respective project pages? It makes it more likely that prospective clients will actually take the time to look at your testimonials.

6. If You Have a Diverse or Very Large Body of Work, Use Categories Link

Categorize your work if you have a lot of it or if it spans a lot of different mediums or niches. Categories make it easier for prospective clients to look at work that’s similar to their own project without having to wade through a bunch of unrelated work.

Showcase of Design Elements - Use Categories in Your Portfolio216

Showcase of Design Elements - Use Categories in Your Portfolio217

Showcase of Design Elements - Use Categories in Your Portfolio218

7. Don’t Overlook Search Engine Optimization Link

Because portfolio sites can be much more image-intensive than many other kinds of sites, it’s easy to overlook SEO. But take the time to use alt tags and titles along with keyword-rich project descriptions on your site. After all, how are you going to get new clients if no one can ever find your work?

8. Keep the Look and Feel of Your Site Consistent Link

Because portfolios often have to tie together a very diverse body of work, it’s even more important to make sure that the rest of your site stays consistent in both look and feel. Maintain your color scheme, fonts, and general layout site-wide.

9. Include an About Me Section Link

Prospective clients want to know about the designer behind the work. Include an “about” section either in your sidebar, footer, header, or on its own page.

Showcase of Design Elements - Portfolio About Me Section219

Showcase of Design Elements - Portfolio About Me Section220

Showcase of Design Elements - Portfolio About Me Section221

10. Don’t Get Too Creative Link

While you want to showcase your creativity, be careful that your creativity doesn’t impact the usability of your site. The goal is to show how competent you are as a designer, not just how creative and talented you are as an artist.

11. Provide Explanations of Your Work Link

Explaining your work and what role you took in different projects is incredibly helpful to prospective clients. Plus, it makes you appear more honest and reliable if you’re willing to say you only had a small part in a certain design rather than implying you did the entire thing single-handedly. Devote a page to each project and provide basic information about who the project was for, the design, objectives, and your own comments.

Showcase of Design Elements - Portfolio Explanations of Your Work222

Showcase of Design Elements - Portfolio Explanations of Your Work223

Resources Link

Social Media Integration Link

1. If You Use Icons, Make Sure They’re Consistent Link

Social media logos are as distinct as the sites they were created for. And there are thousands of social media icon sets out there, each with their own unique look and feel. But if you’re going to include a variety of social media options on your site, make sure the icons you use for each are either from the same icon set or are similar enough in look, size, and design that they feasibly could be.

2. Integrate Your Twitter Feed Only if it’s Relevant Link

Integrating Twitter feeds into sites is a great way to get your visitors to be more involved. But if your Twitter feed has little or nothing to do with your site’s content, don’t bother. Visitors to your website are there for something specific; providing extraneous information is only likely to confuse or distract them.

Only include links to your social media profiles if you’re okay with friending anyone who asks. Otherwise, what’s the point of broadcasting that you’re on Facebook, MySpace, or LinkedIn? Denying friend requests from people after you’ve broadcast your presence is akin to sending out an open invitation to a party and then having a doorman and guest list at the event.

4. Style Your Feed Integrations to Mesh with Your Site Design Link

Your feed should be integrated into your site in a way that makes it look like it belongs there. Just because Twitter, Facebook, or any other site with feed capabilities formats things one way doesn’t mean you have to stick with that particular format (in most cases, anyway).

Resources Link

Typography Link

1. Make Sure Your Font Size is Appropriate Link

Having a font that’s too large or too small can portray the wrong image for your site. Make sure headlines are larger than body text and that all of your font choices are readable.

2. Special Type Styles (bold, italic) Should be Used Sparingly Link

Don’t make every other word on your site bold or italic. Only use them sparingly when you want to emphasize something important.

3. Pay Attention to the Overall Structure of Your Typography Link

Look at the way your different type styles interact with one another and look together. Make sure your heading classes are logically sized (with the h3 tag being the largest and the one with the most impact and the H6 being the smallest and least important-looking).

4. Don’t Overlook Typography Details Link

Details such as the leading, spacing, and other minutiae of typography design can have a huge impact on the overall look of your site. Make sure there’s adequate spacing between your letters, words, and lines, as well as between headings and paragraphs. These little details can make a big difference.

5. Use an Appropriate Text Color Link

Make sure your text color has sufficient contrast against your background color without being glaring or hard on the eyes. Stark contrasts (especially those with light text on a dark background) can be especially hard to read for large blocks of text.

6. Don’t Use Centered Blocks of Text Link

Centered text is fine for headlines but avoid it for paragraphs or other large blocks of text. The jagged edges take longer to read and tend to interrupt the flow of the text.

7. Embrace Sans Serif Fonts for Body Copy Link

As a general rule, sans serif fonts are easier to read on screen than serif fonts. While there are some serif fonts that are fine for large blocks of text(Georgia being the most prominent), serif fonts are usually a safer choice.

8. Use em Units to Size Your Text Link

Em units allow visitors to your site to adjust the text size according to their own preferences. This makes it easier for those with poor eyesight to enjoy your website as much as those with 20/20 vision.

9. Don’t Use Too Many Typeface or Weights Link

It’s easy to go overboard with typefaces and other type styles. But using too many just makes your site look cluttered and, at worst, unprofessional. Limit your typefaces to two or three and make sure that type weights reflect the relative importance of the elements you’re applying them to.

10. Use a Scale in Your Typography Design Link

Scales were developed to make typography look balanced and proportional. Whether you use the original type scales developed in the 15th century or develop your own, make sure the relationships between font sizes on your site are consistent and look good together.

11. Style Your Headings Logically Link

Headings should be styled based on their importance. In other words, the h3 tag should have the most impact of all your heading styles, larger and heavier than the others. Your H6 tag should be the smallest (maybe only a size or two larger than your body font size) and lightest.

12. Make Sure You’re Using Web Safe or Very Common Fonts Link

Not everyone out there is going to have the same fonts installed on their computers as you. And in many cases, people never install any fonts beyond the basic system fonts that come pre-installed on their computers. Make sure the fonts you choose for your site are either web-safe or pre-installed on the majority of systems. And specify a series of fonts so if your first choice isn’t available, it will load in the next-best-thing.

People expect underlined text online to be linked to something. If it isn’t, you’ll do nothing but confuse your visitors.

Resources Link

WordPress Link

1. Use a Theme Framework Link

There are more then a dozen good WP theme frameworks out there. You’ll save yourself tons of time by using one, especially if you’re not planning on doing anything too out-of-the-ordinary with your particular WordPress installation.

2. Take Advantage of All the Different Template Files Available Link

WordPress offers a variety of different templates to style different parts of your site. These include page, comments, post, index, and a variety of other templates. Take advantage of as many of them as you deem appropriate for your site.

3. Widgetize Your Theme Link

Widgetizing your theme used to be optional. But now, with so many different widgets available to extend the functionality of your site, it’s become a requirement. Widgetizing a theme is incredibly simple and there’s really no reason not to do so.

4. Make Sure Your Theme Handles Pages Well Link

Make sure pages on your site are displayed the way you want them to be. While formatting pages the same as posts can be tempting, you often end up with a bunch of extraneous information you don’t need (such as category tags and a date stamp). If nothing else, customize your post template to remove this extraneous information and then re-save it as your page template.

5. Verify Your Hooks are Working Properly Link

WordPress works with a ton of different hooks for dealing with different types of data. Make sure whichever hooks you’re using work the way they’re supposed to under a variety of different circumstances.

6. Use a Mobile Theme for Your Blog, Especially if Your Primary Theme is Graphics-Intensive or Complicated Link

Graphics-intensive or magazine-style sites can become a mess when viewing a site on a 3″ screen. And considering how many people now surf the web with their iPhone or other mobile device, not catering to those people is a huge mistake. There are a number of off-the-shelf mobile themes for WordPress out there so finding one that works with your site shouldn’t be difficult. And you can always use one to customize your own mobile theme.

7. Set Up a Local Installation of WP for Testing Link

Having a local installation of WP for testing themes and plugins will save you tons of time if you develop themes regularly. And since WP is developed entirely on open source platforms, installing a local version won’t cost you a thing.

8. Consider Customizing a Theme Link

Theme development can be time consuming. Instead of starting from scratch or even from a basic framework, why not customize an existing theme. Changing the color scheme and graphics of a theme can make a stunning difference, to the point no one would even recognize the two finished themes as being built on the same basic structure. This can be especially time-saving if you know of a theme that already performs some special function you have in mind.

Resources Link

Further Resources Link

About the author Link

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing269.

Footnotes Link

  1. 1 http://www.usabilitypost.com/2008/11/19/de-clutter-your-interface-with-hover-controls/
  2. 2 http://www.lionite.com
  3. 3 http://www.webdesignerwall.com/tutorials/maximize-the-use-of-hover/
  4. 4 http://www.spoonfeddesign.com/hover-effects-in-web-design-best-practices-and-examples
  5. 5 http://www.usabilitypost.com/2008/11/19/de-clutter-your-interface-with-hover-controls/
  6. 6 http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/
  7. 7 http://www.lipsum.com/
  8. 8 http://f91w.com/
  9. 9 http://www.peter-pearson.com/
  10. 10 http://365daysofastronomy.org
  11. 11 http://ma.tt/
  12. 12 http://www.designbyhumans.com/
  13. 13 http://www.ricoverdeo.com/
  14. 14 http://www.bgpatterns.com/
  15. 15 http://www.chamadigital.com/
  16. 16 http://idesigniphone.com/
  17. 17 http://www.atebits.com/
  18. 18 http://www.verdenssterkestemann.no/
  19. 19 http://www.kmaier.com/
  20. 20 http://www.apple.com/macosx/
  21. 21 http://www.webdesignerdepot.com/2008/11/dos-and-donts-of-large-website-backgrounds/
  22. 22 http://www.bgpatterns.com/
  23. 23 http://www.noupe.com/trends/website-backgrounds-70-impressive-trends-how-tos-best-practices.html
  24. 24 /2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
  25. 25 http://www.webdesignerwall.com/tutorials/how-to-css-large-background/
  26. 26 http://www.bigspaceship.com/
  27. 27 http://css-tricks.com/
  28. 28 http://zenhabits.net/
  29. 29 http://www.writetodone.com/
  30. 30 http://zenhabits.net/
  31. 31 http://www.narrowdesign.com/
  32. 32 http://www.aigapda.com/
  33. 33 http://www.schneeballschl8.de/
  34. 34 http://mattbrett.com/
  35. 35 http://blog.squarespace.com/blog/2009/5/15/styling-comments-by-author.html
  36. 36 http://digitalmash.com/journal/
  37. 37 http://www.spoonfeddesign.com/hover-effects-in-web-design-best-practices-and-examples
  38. 38 http://www.studiowhiz.com/2009/04/01/23-free-amazing-modern-clean-fonts/
  39. 39 http://sethsaid.com/
  40. 40 http://impromptustudio.com/
  41. 41 /2008/07/24/a-small-study-of-big-blogs/
  42. 42 /2009/03/18/10-principles-for-readable-web-typography/
  43. 43 http://www.webdesignerdepot.com/2008/12/13-characteristics-of-outstanding-blog-design/
  44. 44 http://vandelaydesign.com/blog/design/blog-design-above-fold/
  45. 45 http://www.sitepoint.com/article/beautiful-web-site-archives/
  46. 46 http://designm.ag/design/improve-blog-theme/
  47. 47 http://www.searchinsidevideo.com/#p1
  48. 48 http://www.takethewalk.net
  49. 49 http://www.uxbooth.com/blog/creating-usable-links-and-buttons/
  50. 50 http://mezzoblue.com/archives/2007/02/21/icon_design/
  51. 51 http://turbomilk.com/blog/cookbook/icon_design/10_outstanding_icon_metaphors/
  52. 52 http://www.spoonfeddesign.com/a-guide-to-using-icons-in-web-design
  53. 53 http://www.donortools.com
  54. 54 http://rockstartup.com
  55. 55 http://www.analyticsview.com
  56. 56 http://jonwhitestudio.com
  57. 57 http://www.spoonfeddesign.com/a-guide-to-using-icons-in-web-design
  58. 58 http://www.turbomilk.com/blog/cookbook/criticism/10_mistakes_in_icon_design/
  59. 59 http://psd.tutsplus.com/articles/7-principles-of-effective-icon-design/
  60. 60 http://turbomilk.com/blog/cookbook/icon_design/10_outstanding_icon_metaphors/
  61. 61 http://www.uxbooth.com/blog/creating-usable-links-and-buttons/
  62. 62 http://mezzoblue.com/archives/2007/02/21/icon_design/
  63. 63 http://www.w3schools.com/tags/tag_DOCTYPE.asp
  64. 64 http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/
  65. 65 http://htmldog.com/guides/htmlbeginner/tags/
  66. 66 http://www.w3schools.com/tags/tag_DOCTYPE.asp
  67. 67 http://www.utexas.edu/learn/html/spchar.html
  68. 68 http://validator.w3.org/
  69. 69 /2008/11/12/12-principles-for-keeping-your-code-clean/
  70. 70 http://justcreativedesign.com/2008/06/13/how-to-design-learn-the-basics/
  71. 71 http://www.haveamint.com
  72. 72 http://www.whenimnotsleeping.com/mima/
  73. 73 http://www.etatdesieges.com
  74. 74 http://www.junecloud.com/journal
  75. 75 http://www.baeck.no
  76. 76 http://www.method.com/#/thoughts/all
  77. 77 http://www.typedeskref.com
  78. 78 http://www.wishlistr.com
  79. 79 /2009/01/28/colors-in-corporate-branding-and-design/
  80. 80 http://www.sitepoint.com/blogs/2009/02/24/21-stimulating-color-palette-tools-for-designers/
  81. 81 http://www.colorsontheweb.com/
  82. 82 http://www.colormatters.com/colortheory.html
  83. 83 http://webusabilityhelp.blogspot.com/2009/05/25-great-examples-of-using-gradient.html
  84. 84 /2009/04/06/showcase-of-well-designed-tabbed-navigation/
  85. 85 /2007/05/10/70-expert-ideas-for-better-css-coding/
  86. 86 http://www.37signals.com/svn/posts/1496-design-decisions-the-new-highrise-signup-chart
  87. 87 http://www.spoonfeddesign.com/hover-effects-in-web-design-best-practices-and-examples
  88. 88 http://www.webdesignerdepot.com/2009/04/10-tips-to-design-usable-shopping-carts/
  89. 89 http://www.teefury.com
  90. 90 http://www.tickettrunk.com/event/add
  91. 91 http://www.gap.com
  92. 92 http://www.saksfifthavenue.com
  93. 93 http://www.carhartt-streetwear.com
  94. 94 http://www.freepeople.com
  95. 95 http://www.getelastic.com/registration-usability-tips-ecommerce/
  96. 96 http://www.ecommerceoptimization.com/articles/ecommerce-shopping-cart-usability-21-best-practices/
  97. 97 /2008/10/13/pricing-tables-showcase-examples-and-best-practices/
  98. 98 /2008/02/07/shopping-carts-gallery-examples-and-good-practices/
  99. 99 http://www.lionite.com
  100. 100 http://www.css-tricks.com
  101. 101 http://www.bellingham-realestate.net
  102. 102 http://www.dealarray.com/electronics
  103. 103 http://www.studio7designs.com
  104. 104 http://sixrevisions.com/web_design/25-stylish-website-footer-designs/
  105. 105 http://www.colourpixel.com
  106. 106 http://www.creamycss.com
  107. 107 http://www.webdesignerwall.com
  108. 108 http://www.43folders.com
  109. 109 http://www.carhartt-streetwear.com
  110. 110 http://www.joyent.com
  111. 111 http://www.colorart.in/home
  112. 112 http://www.webdesignerwall.com/trends/modern-sitemap-and-footer/
  113. 113 http://sixrevisions.com/web_design/25-stylish-website-footer-designs/
  114. 114 /2008/04/08/footers-in-modern-web-design-creative-examples-and-ideas/
  115. 115 http://www.backtoessentials.com/showcases/100-creative-examples-of-footers-for-web-designers/
  116. 116 http://www.psdthemes.com
  117. 117 http://www.invoicemachine.com/signup
  118. 118 http://www.kontain.com/#signup
  119. 119 http://www.virb.com/signup
  120. 120 http://secure.woofoo.com/signup/1/
  121. 121 http://www.slideshare.net/psykoreactor/best-practices-for-form-design
  122. 122 http://stackoverflow.com/questions/243957/best-practices-for-login-pages
  123. 123 http://webdesignledger.com/inspiration/interface-design-loginsignup
  124. 124 http://webjackalope.com/lazy-registration/
  125. 125 http://www.getelastic.com/registration-usability-tips-ecommerce/
  126. 126 http://henrikhedegaard.com/404/404.html
  127. 127 http://www.uxbooth.com/blog/create-effective-search-result-pages/
  128. 128 http://www.uxbooth.com/blog/create-effective-search-result-pages/
  129. 129 http://kontain.com/#home
  130. 130 http://alltop.com/
  131. 131 /2009/05/19/8-layout-solutions-to-improve-your-designs/
  132. 132 /2008/12/04/designing-the-holy-search-box-examples-and-best-practices/
  133. 133 http://www.uxbooth.com/blog/create-effective-search-result-pages/
  134. 134 http://searchenginewatch.com/3631002
  135. 135 http://www.dead-links.com/
  136. 136 http://browsershots.org/
  137. 137 http://www.davidairey.com/5-vital-logo-design-tips/
  138. 138 http://www.ecoki.com
  139. 139 http://www.emptees.com
  140. 140 http://www.markdearman.com
  141. 141 http://www.michaelnagy.at/#top
  142. 142 http://vandelaydesign.com/blog/design/blog-design-above-fold/
  143. 143 http://vandelaydesign.com/blog/design-process/goals-of-the-re-design-process/
  144. 144 http://www.uxbooth.com/blog/the-good-the-bad-and-the-ugly-of-portfolios/
  145. 145 http://www.sitepoint.com/article/principles-beautiful-html-email/
  146. 146 http://sixrevisions.com/web_design/five-types-of-effective-headers-in-web-design/
  147. 147 http://psd.tutsplus.com/tutorials/interface-tutorials/five-looks-one-layout-how-to-develop-a-library-of-web-design-styles-at-your-fingertips/
  148. 148 http://www.astheria.com
  149. 149 http://www.highrisehq.com
  150. 150 http://www.shortyawards.com
  151. 151 http://www.xero.com
  152. 152 http://www.uxbooth.com/blog/5-more-tips-to-make-website-headers-more-user-friendly/
  153. 153 http://sixrevisions.com/web_design/five-types-of-effective-headers-in-web-design/
  154. 154 http://vandelaydesign.com/blog/galleries/website-headers/
  155. 155 http://www.goodmorningmarriage.com/five/
  156. 156 http://www.nineliondesign.com
  157. 157 http://www.winnielim.com
  158. 158 http://www.webdesignerdepot.com/2009/03/50-inspirational-website-introductions/
  159. 159 /2007/10/11/splash-pages-do-we-really-need-them/
  160. 160 http://www.wiliam.com.au/wiliam-blog/website-micro-site-splash
  161. 161 http://sherpablog.marketingsherpa.com/marketing/blog-23447/
  162. 162 http://www.artrepublic.com/tags/81-limited-edition.html
  163. 163 http://www.audi.de/de/brand/de.html
  164. 164 http://www.mediaeventservices.com/blog/2007/11/15/ajax-image-gallery-powered-by-slideflow-like-cover-flow/
  165. 165 http://www.javascripttoolbox.com/
  166. 166 http://dev.opera.com/articles/view/javascript-best-practices/
  167. 167 http://www.scriptiny.com/2008/04/5-javascript-best-practices/
  168. 168 /2008/09/16/jquery-examples-and-best-practices/
  169. 169 http://www.webdesignmo.com/blog/2008/07/11/flash-best-practices-part-1/
  170. 170 http://www.webreference.com/authoring/flash/
  171. 171 http://www.webreference.com/authoring/flash/
  172. 172 http://thinkingandmaking.com/entries/63
  173. 173 http://ajaxian.com/archives/accessible-ajax-best-practices
  174. 174 http://www.jonabel.com
  175. 175 http://www.kathleenedwards.com
  176. 176 http://www.apple.com/findouthow/mac/#tutorial=wirelessbasics
  177. 177 http://www.julianandrade.com
  178. 178 http://www.taoeffect.com/espionage/
  179. 179 http://www.ictknowledgebase.org.uk/videocasestudy
  180. 180 http://theinsider.idxcentral.com/using-video-on-your-website/
  181. 181 http://theinsider.idxcentral.com/using-video-on-your-website/
  182. 182 http://www.infoworld.com
  183. 183 http://www.ministryofsound.com
  184. 184 http://www.rocketclub.com
  185. 185 http://www.contrast.ie/blog
  186. 186 http://www.youthedesigner.com
  187. 187 http://www.uxbooth.com/blog/5-more-tips-to-make-website-headers-more-user-friendly/
  188. 188 http://www.ideo.com/work/featured/samsung
  189. 189 http://www.berttimmermans.com
  190. 190 http://www.veer.com
  191. 191 http://www.vyniknite.sk
  192. 192 http://www.goodusability.co.uk/2009/01/easy-as-123/
  193. 193 http://www.13creative.com/portfolio.htm
  194. 194 http://www.thestrangeattractor.net
  195. 195 http://www.uxbooth.com/blog/tabbed-navigation-and-what-makes-it-useful/
  196. 196 /2009/04/06/showcase-of-well-designed-tabbed-navigation/
  197. 197 /2009/03/24/designing-drop-down-menus-examples-and-best-practices/
  198. 198 /2007/11/16/pagination-gallery-examples-and-good-practices/
  199. 199 http://www.uxbooth.com/blog/increasing-usability-with-user-feedback/
  200. 200 http://www.airbagindustries.com
  201. 201 http://www.bevia.be/news
  202. 202 http://www.hypefortype.com
  203. 203 http://www.uxmag.com
  204. 204 http://www.20x200.com/art/2009/02/trash-mountain.html
  205. 205 http://www.manndiblecafe.com
  206. 206 http://www.vlourenco.com
  207. 207 http://psd.tutsplus.com/tutorials/interface-tutorials/five-looks-one-layout-how-to-develop-a-library-of-web-design-styles-at-your-fingertips/
  208. 208 http://sixrevisions.com/design-showcase-inspiration/40-beautiful-examples-of-minimalism-in-web-design/
  209. 209 /2008/03/26/grid-based-design-six-creative-column-techniques/
  210. 210 /2007/04/14/designing-with-grid-based-approach/
  211. 211 http://www.webdevelopersnotes.com/design/index.php3
  212. 212 http://www.sitepronews.com/archives/2007/aug/13.html
  213. 213 http://creativebriefing.com/priority-provides-clarity/
  214. 214 http://www.reactive.com/portfolio/
  215. 215 http://www.rikcatindustries.com/work/
  216. 216 http://www.designsensory.com/browse/
  217. 217 http://www.jasonsantamaria.com/portfolio/
  218. 218 http://nb.bottledsky.com
  219. 219 /2009/02/26/10-steps-to-the-perfect-portfolio-website/
  220. 220 http://www.ideo.com/work/
  221. 221 http://www.nclud.com
  222. 222 http://www.designsensory.com/work/alzselftest-website-development/
  223. 223 http://www.pixelshell.com/about.php
  224. 224 http://www.instantshift.com/2009/04/26/how-to-create-a-better-online-portfolio/
  225. 225 http://www.webdesignerdepot.com/2008/12/10-characteristics-of-excellent-portfolio-sites/
  226. 226 http://www.uxbooth.com/blog/the-good-the-bad-and-the-ugly-of-portfolios/
  227. 227 http://www.digital-web.com/articles/the_perfect_portfolio
  228. 228 /2009/02/26/10-steps-to-the-perfect-portfolio-website/
  229. 229 /2008/03/04/creating-a-successful-online-portfolio/
  230. 230 http://www.veen.com/jeff/archives/000935.html
  231. 231 /2009/04/29/ultimate-guide-to-using-wordpress-for-a-portfolio/
  232. 232 /2009/02/26/10-steps-to-the-perfect-portfolio-website/
  233. 233 http://vandelaydesign.com/blog/galleries/twitter-on-blogs/
  234. 234 http://vandelaydesign.com/blog/galleries/twitter-on-blogs/
  235. 235 http://www.sitepoint.com/blogs/2009/04/20/social-media-best-practices/
  236. 236 http://www.sitepoint.com/article/principles-beautiful-typography/
  237. 237 http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/
  238. 238 http://www.sitepoint.com/article/principles-beautiful-typography/
  239. 239 http://www.thedesigncubicle.com/2008/12/10-common-typography-mistakes/
  240. 240 http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
  241. 241 http://www.webdesignerdepot.com/2009/03/5-simple-ways-to-improve-web-typography/
  242. 242 http://jontangerine.com/silo/typography/p/
  243. 243 http://forabeautifulweb.com/blog/about/improve_your_web_typography_with_baseline_shift/
  244. 244 http://designshack.co.uk/articles/five-tips-for-better-typography
  245. 245 http://www.conversationmarketing.com/2008/02/5_easy_tips_for_web_typography.htm
  246. 246 http://www.gracesmith.co.uk/75-truly-remarkable-typography-resources/
  247. 247 http://www.uxbooth.com/blog/the-irritation-of-non-clickable-links/
  248. 248 http://yoast.com/perfect-wordpress-theme/
  249. 249 http://codex.wordpress.org/Installing_WordPress#Installing_WordPress_on_your_own_Computer
  250. 250 /2009/05/27/wordpress-theme-development-frameworks/
  251. 251 /2008/01/31/10-principles-of-effective-web-design/
  252. 252 /2008/04/24/5-more-principles-of-effective-web-design/
  253. 253 http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/
  254. 254 http://www.webdesignpractices.com/
  255. 255 http://www.slideshare.net/stoyan/high-performance-web-pages-20-new-best-practices
  256. 256 http://www.sitepoint.com/article/principles-beautiful-web-design/
  257. 257 http://psd.tutsplus.com/articles/9-information-design-tips-to-make-you-a-better-web-designer/
  258. 258 http://psd.tutsplus.com/articles/8-ideas-techniques-tricks-for-your-web-design-toolkit/
  259. 259 http://psd.tutsplus.com/articles/6-interface-design-principles-and-tips-every-web-designer-should-know/
  260. 260 http://line25.com/articles/5-must-know-web-design-polishing-techniques
  261. 261 http://psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphic-design-theory/
  262. 262 http://www.uxbooth.com/blog/increasing-usability-with-user-feedback/
  263. 263 http://psd.tutsplus.com/tutorials/designing-tutorials/working-within-limitations-to-achieve-great-designs/
  264. 264 http://www.myinkblog.com/2009/03/21/4-principles-of-good-design-for-websites/
  265. 265 http://www.uxbooth.com/blog/understanding-conventions-when-being-unique-is-a-bad-thing/
  266. 266 http://www.digital-web.com/articles/principles_of_design/
  267. 267 http://bokardo.com/archives/five-principles-to-design-by/
  268. 268 http://thinkvitamin.com/features/design/web-design-isms-7-surefire-styles-that-work/
  269. 269 http://cameronchapman.com
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.

  1. 1

    Byron Rex Phillipson

    May 11, 2011 1:30 am

    Nice top comprehensive top-level round up! Thank you.

    0
  2. 2

    Wow! Massive :-)

    1
  3. 3

    Helpfull round-up. great work! Big thanks for you…

    0

↑ Back to top