Web Design Do’s and Don’ts

Tips for Web Design and Development – some Do’s and Don’ts

As programmers, we work with designers all the time to create the look that our clients desire, and there are certain designs that take a lot more time and effort to program perfectly in all browsers than others.  We have compiled a programmer’s wish list of do’s and don’ts for our designers to follow in order to give the best, most cost effective and up-to-date designs over to programming.

DO

• Use web-safe fonts wherever possible: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  The only areas where it’s OK to NOT use web-safe fonts are where images will intentionally be used to display text.  ie. logos, slide shows, image captions, etc…
• Design for 1024 x 768 screen resolution.  The generally accepted width of a design optimized for this resolution would be 966px wide.
• Design a page footer area with room for additional navigation, copyright, and credits for the development company.
• Provide “examples” in the design for any dynamic functionality. ie: drop down menus, mouse rollovers, hover states, etc…
• Design for easy reading with expandable fonts – Make your backgrounds as light as possible. If  the client insists on a background image, restrict it to the side, out of the way of the text, and make it very light
• Be conscious of laptop and wide screens – most computer screens are wider than they are tall, so it makes sense to keep text line length short and put navigation on the left or drop-down from the top of the screen.
• Include contact information on header and footer
• Use graphics resolution not greater than 96 dpi which works well on both windows and MAC machines
• Use reduced color palettes to keep essential graphics (especially any in navigation) under 10K.
• Use recurring visual elements for consistency – and make sure that you can reproduce all graphics. You might need another one of the same kind, so be sure to write down all the effects and the parameters used to create graphics.
• Use borders and white space and don’t cram your design to the edges

DON’T

• Use rounded corners on design elements unless absolutely necessary for the design.
• Use gradients excessively or otherwise develop an “image intensive” design.
• Crop the design at the absolute right/left and bottom edges.  Leave a good amount of blank space on the left/right and bottom of the design to show the developer how the web site (and backgrounds) will function as the browser is maximized and/or resized.
• Just convert print media for use on the web.
• Style input buttons (on forms) wherever possible.  Using the browser’s default gray input buttons is a web standard.
• Don’t OVER Design a huge header.  Remember that if visitors have to scroll to get to the  content on the web page, the header is far too large.

Additional Do’s  and Don’ts For Ecommerce Web Sites

DO

• Provide an area on the header or left nav bar for the following links:  Login, View Cart.  These links need to appear on every page of the web site.
• Try to accommodate a vertical left or right hand navigation bar for the cart’s product catalog.  This can be in addition to a main navigation bar, or part of the main nav bar if the main nav is vertical.
• Provide an area for a “Search” input box and associated submit button.  This should also appear on every page of the web site.

DON’T

• Use a background color on the “content area” of the cart that’s anything other than WHITE, unless the client has specified otherwise.  Integrating most carts into a design that’s not white increases hours.
• Develop a narrow “content area.”  Ecommerce web sites generally need to utilize a nice wide area of the design in order to accommodate the checkout process.  Leave at least 600px of horizontal space for the ecommerce pages to “live.”

And finally, please remember that web design is an art, and what we say here may not be what your client wants. Don’t take our word for it.  There is no real “best practice or standard” for web design, and this list is constructed for the purpose of creating cost effective, user friendly web pages that are easy to program and work in all current browsers.   In all cases, designers should please the client, and it is the programmer’s job to make the design work.