Designing for the web can be tricky. Unlike print media, where your only design constraint is the size of the canvas you're working on, the web requires that whatever you design align with the constraints of the technology powering that environment. That means that if you are to achieve a design that is both scalable and compliant, pay attention to the following 3 technical tips.
#1) Employ Vertical ScalabilityFirst, ask yourself this: "Will this website be subject to edits post-launch?" If your answer is Yes, you'll want to pay particular attention to vertical scalability.
Unlike print, where your final deliverable is often fixed in dimensions and/or size, the web demands flexibility in both. When designing a template for the web, be sure to include a vertical "coupler"--a horizontal chunk spanning the width of the design that is conducive to replication down the page. This coupler is how a design made for a website 768px high can scale to a webpage needing 1000px of height. If you're still unsure whether or not your design is vertically scalable, ask yourself these questions: "What will happen to my design if the client doubles the amount of content on the page? Will that break my template as I have designed it?" If your answer is Yes, then you have not designed a scalable website and you'll likely be hearing back from the client with complaints--and rightly so.
Design your website in such a way that content can be added or removed without compromising its structure or requiring continuous support from the designer.
#2) Appreciate HTML (Use Web-Friendly Fonts)If you do NOT use web-friendly fonts in your design, you're setting the client up for disappointment and yourself up for failure . Here's why: unless you plan on having your entire website developed as a series of giant, static, images (NOT RECOMMENDED), HTML text will need to be used to recreate the copy you designed in your original mockup. The benefits of using HTML text are too numerous to count, but a few of the big ones include:
- Search Engine Friendliness - search engines, the middleman between your site and an online audience of millions, cannot read text that is presented as an image. Therefore, if you expect engines like Google, Yahoo! or Bing to index your Novelty T-Shirt site for relevant terms, you had better ensure that you have offered them text talking about "novelty t-shirts" in a format they can understand (HTML).
- Scalability - If the site you've designed is going to undergo change and updating post-launch, having copy represented in HTML will ensure the easiest and most efficient means of doing so. Whenever textual elements of your design are represented as images (instead of using HTML and web-friendly fonts) you have set the requirement that if the client needs to alter this text in any way, he/she must first contact you to do so. If this is how you want the client/designer relationship to be, then you are in a fine position. Otherwise, empower your clients by making them rely as little as possible on design aptitude when managing their site.
A comprehensive list of web-friendly fonts can be found here:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html. Use these whenever possible.
#3) Specify Copy StylesWhen designing a website, it is important to exercise consistency. Visitors to your site want to consume information in as easy and efficient a means as possible, and that means introducing an intuitive set of rules for presenting your content and then adhering to them.
To keep things simple and straightforward, imagine you only have 5 ways of presenting copy throughout the site. Those 5 ways include:
- Titles (Header 1)
- Section Titles (Header 2)
- Subsection Titles (Header 3)
- Standard body copy (Paragraph)
- Hyperlinks
An example of a site which has done an excellent job of creating a predictable user-experience in regards to copy styles is Wikipedia. Consider the following example of
Henry VIII's Wikipedia entry.
At the top of the page, "Henry VIII of England" is presented in the largest of fonts (Header 1).
If you scan past the intro and Table of Contents, you'll notice the first Section Title ("Early years: 1491-1509) which is presented in a slightly smaller font (Header 2), but still larger than the Standard body copy (Paragraph). Scanning even further down, you'll notice the Subsection title of "Death of Arthur" which is presented in even smaller copy still, but this time it's been emboldened (Header 3).
Lastly, everywhere on the page hyperlinks are denoted in blue, with an underline added upon hover.
Granted, Wikipedia is an online encyclopedia and isn't the most exciting of examples, but the concept of utilizing consistency for an enjoyable user experience is a sound one and whether its plain-Jane information you're serving up like Wikipedia or the latest
designer shoes, visitors will respond best to consistency and predictability.
Look out Brad Pitt.
