Project Management

Quick tip: Design elements that really make a difference

Ryan Boudreaux picks four important design elements that make up a website's total effect, recommending standards and additional resources to help you with each one.

Part of putting together your website means getting the design elements just so, and that can be a daunting task if taken on as a single project. However, when you break it down into the individual parts, you will find that each element can be an important piece of the puzzle, and not so overwhelming after all.

Design elements include color, accessibility, user experience, usability, forms, font and typography selections, file sizes, pages designed for mobile access, and relative widths for elements. Below are four of the most important elements, with my recommendations and also additional resources for exploring each of them on your own.

Color

Color is an important part of web design and has the power to conjure up feelings or influence the emotions of the user. The psychology of color has long been studied, and proves that the colors on a web page, just like the color of a dress, tie, bulletin board, or classroom wall, can affect the user response. You don't have to be totally pixel-perfect as every browser, mobile device, tablet, and electronic reader will render your web documents with slight variations, so it is not always a bad thing as long as the site is still usable.

Several resources take a deeper dive into the use of colors and how they influence observer responses, including:

Use of forms

Forms are great for obtaining information about your users, especially for online sales and marketing, but sometimes forms on websites can be rather long and exhausting. As a rule, you will typically want to keep your forms to the bare essentials, the shorter and simpler the form the better. Take a look at the EEHarbor Registration form at right; it is simple, short, and to the point. Some resources and inspiration for keeping your forms short, simple, and sweet:

File size

File size is one of those areas that seems to get some folks really fired up; some argue that smaller is better, others say that up to 2MB or larger is okay. There is a wide range of web development standards in organizations. As a rule, I think the smaller file size is better; it improves load and page response times and helps keep the user glued to your stuff. Some ways to improve load and response times include:
  • making fewer HTTP requests
  • creating an expires header
  • putting CSS scripts at the top and JavaScript at the bottom of the page
  • making the CSS and JavaScript external
  • reducing DNS lookups
  • avoiding redirects
  • removing duplicate scripts

Here are several resources for diving into more details for managing web file sizes:

Liquid layout

Liquid layouts should be the norm, as fixed-width designs are hard to resize especially depending on the size of toolbars, sidebars, screen resolution, and mobile viewing requirements. You want to give the users the best view possible given the size of the available real estate. There are some valid reasons for sticking with a fixed-width design, but these are typically utilized in special cases. Typically liquid layout designs are best since they are based on percentages, and they flex depending on the window size and the available device or browser. Here are several resources on the subject:

Do you have any tried and true web design elements that are always in your web developer tool chest? Let me know with your comments.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

4 comments
Dampflok
Dampflok

At normal reading distance the arc of the visual field is only a few inches about the width of a well-designed column of text, or about 12 words per line. (Lynch and Horton: Web Style Guide Basic Design Principles for Creating Website) That was also the rule for the academic journal that I used to copy edit and typeset. With today's wide screens the effect of long lines is to slow reading and reduce retention rates. Most of my web pages are limited to a width of just under 800px with remaining space using a soft patterned background as I find that easy to read/follow. I try to keep pages physically small where possible as I see from my stats that I still have quite a few readers viewing at 800x600 and 20% at 1024 width. Also, I note that (in one of my subdomains) about 5% of my visitors are still on dial-up. My feeling is that it is still important to look after the minorities.

ancientprogrammer
ancientprogrammer

To understand why, try running your average liquid layout on a mobile device, especially an iPad or Android tablet. Flip the orientation back and forth and try to do a pinch-zoom then watch the ensuing usability trainwreck. Most liquid CSS layouts aren't able to handle this smoothly. For a bonus round, try displaying the liquid layout on a large resolution screen like a internet enabled HDTV or a wide monitor. Once again, things usually go bad. Sure, there are ways to handle this where it will work better but still most of these screw up pinch-zoom, something that will certainly anger mobile users although probably not quite as much as forcing them into a dumbed down reduced functionality 'mobile' site.

Garrett Williams
Garrett Williams

Wide screens are the reason I'm designing a fixed-width site and using a large low-contrast background to take care of the excess width. Being low contrast will lower the file size, and there are other ways to keep it low which I'll be using. MTV does this and their backgrounds are only around 100kbs. Sometimes smaller. I might even have a script that detects screen size so it chooses a smaller background for smaller screens.

Richard Turpin
Richard Turpin

I couldn't have put it better myself Ancientprogrammer But a lot of programmers are hooked up on liquid layouts

Editor's Picks