10 tips to make your web site easier to code

We’ve been doing a fair bit of web development for other firms recently. While it’s not an area of the business that I originally set out to expand, we’re good at it and it’s generally profitable, so I can see us continue to sub contract to other agencies and design shops. Generally, these projects go quite smoothly, especially if the other firm is well versed in design for the internet.

Sometimes though, we work with non-design agencies or companies that specialize in print who want to have us develop their web site for them from a layout they have created. This can be a frustrating experience for our team, because often the considerations we take for granted are unknown to someone not used to working in the medium.

Here are a few tips for easing the transition from napkin sketch/PDF/Powerpoint document to a full-fledged website:

  1. Layout your website at actual resolution in Photoshop or Fireworks. It makes it so much easier to translate the design into XHTML/CSS, even if we’re using ems or % as base measurements. Giving us a PSD that is 6,000 pixels wide makes it much more unwieldy and difficult to use.
  2. Similar to #1, although InDesign is a phenomenal program, it’s not meant for doing web layouts. The reasons are two-fold, it’s going to cost more for us to translate your layout especially if it’s complex and when clients receive InDesign files at high res and they blow up the layout, they have unrealistic expectations when it comes to image quality.
  3. Don’t forget, we’re still pretty typographically limited on the web. Helvetica, Verdana, Georgia and Trebuchet MS are pretty much the only fonts you should be specifying for type elements. There are tools like siFR available, but they can be a real hassle to implement and don’t work everywhere.
  4. You need at least some text on your homepage. A giant Flash animation or logo splash screen is a pretty out-moded method of site design. It offers visitors nothing and will ensure your site gets passed over by search engines.
  5. Ensure that you consider navigational issues that might come up. For example, once visitors to your site have navigated to an interior page, make certain that there are indicators as to where they are and a way other than the back button to get out of it.
  6. I tell my NSCAD students this all the time–it’s difficult to build a site that doesn’t align to a grid.
  7. Proper Planning Prevents Piss Poor Performance. Always start with an Information Architecture. Trying to add new categories to the main navigation after everything has been made because the client doesn’t know where the new section fits could have been foreseen with a sitemap.
  8. Elements we take for granted in print design can be difficult to accommodate on the web. Although we can add drop shadows and rounded corners to every box, it’s going to cost much more and won’t work the same in every browser.
  9. Your site will look different in older browsers like IE6. This browser is seven years old and doesn’t properly support web standards. Soon, we’ll give up support for it entirely.
  10. These days, it’s not enough to just be online. Ensure that you’ve planned for social media features and frequent blog updates and that your client is prepared to devote some time to this. The dividends can be enormous, but don’t underestimate the time commitment.

What would you add?

Previously posted on

Other Posts

Reimagine Your Manufacturing Brand Online: An Introductory Guide


Designing Manufacturing Websites for Everyone & Avoiding Accessibility Lawsuits

Blind person using computer with braille keyboard

21 Tips for Creating a High-Performing International Manufacturing Website

tips for international manufacturing websites

Designing Websites for Multiple Buyer Personas

group of people using devices

You are using an outdated browser. Things may not appear as intended. We recommend updating your browser to the latest version.