Skip to main content
Web Design
Exware > Blog Topics > Web Design

Items tagged with Web Design

Website Style Guide, Part 4 - Writing Style

posted on Oct 27, 2017

Our 4th and last installment of our style guide series will touch on the things covered by regular style guides: how to write for your audience. Your language style choices will help to define your “voice”. Keeping it consistent will help to convey professionalism and authority.

There are many things you might want to decide on a set of standards to use for, such as:

Spelling: Are you using American, Canadian, or British English spelling conventions? Make sure your work computers are configured with the correct language choices, so that their built-in spell checkers will give you consistent results.

Abbreviations: Do you include periods or not? (For example, USA or U.S.A.) Some abbreviations have multiple variants; which ones are preferred on your site? (For example, USA vs US.) Pay particular attention to the abbreviations that are commonly used in your field.

Numbers: Numbers, especially larger ones, can be written numerous ways. For example, “one thousand” vs “1,000” vs “1000” (or even“1.000” in some European styles). Style recommendations on this point sometimes change depending on the size of the number. For example, numbers below 20 should be written out, but higher numbers should be numeric. Also consider whether ordinals should be spelled out or abbreviated, such as “fifth” or “5th”—or even “5th” if you want to get fancy. Should you write #1, or Number 1, or No. 1?

Locations and Addresses: Should states and provinces be spelled out, or abbreviated? If abbreviated, should you use standard two-letter postal abbreviations? How should phone numbers be written, especially when area codes are included?

Jargon: Some terms are not widely understood outside their specialized fields. Try to avoid jargon in areas that may be outside your audience's regular experience. At the same time, have a list of approved jargon that they should be comfortable with, and feel free to make use of it if it helps to make your writing more concise.

Writing Style: What is the likely reading level of your audience? Should you write in first or third person (“I” vs “we”) or avoid personal pronouns entirely? Should you avoid passive sentence constructions and vague attributions (such as “It is felt that...”)? Should you use a conversational tone, or a more formal tone? Should contractions be spelled out fully (such as “cannot” vs “can't”)?

Credits, Footnotes, and Captions: How do you give credit to sources? As a byline before the article, or a footnote after the article? Do you credit image sources in the image caption, or the article footnote?

Linkiness: Do you link often or very little? A “linky” website will try to link relevant terms (such as organization names) to their websites. This helpful for readers who want to find more information without having to pay a visit to Google, but it also risks diverting them away from your website. If you do not want to divert your readers in mid-article, you can place the relevant links in a “More Info” section in your footnotes.

While you may need to come up with a few standards and rules that are particular to your organization and website, very often you can simply defer to one of the industry-standard style guides that are used in the publishing industry. Here are some samples to get you started:

Tagged as: Web Design

Website Style Guide, Part 3 - HTML

posted on Oct 12, 2017

In our third style guide, we will look at some HTML formatting issues that commonly arise, and how to deal with them in a consistent and user-friendly fashion.

Links

Try to be consistent about using “open in a new window” - for example, only use it on links that leave your site. Inconsistency with this feature creates a confusing navigational experience for your visitors.

Links can be made to look like buttons, but the extra padding and spacing around buttons means they don't work well embedded in paragraphs or other blocks of text. Only use this effect on short links that are on their own line, like this:

Register now

Link anchors (the text that you actually click on) should be descriptive of the link destination. Do this:

download the brochure

not this:

click here to download the brochure

It is a good idea to avoid “click here” language in general.

Images

Avoid using high-resolution images, which are very slow to download. Upload images to your photo albums, and choose the recommended resizing options.

Pay attention to the aspect ratio and orientation of the image and its intended placement. For example, portrait (vertically-oriented) images don’t work well in horizontal carousels, and elongated images don’t work well as thumbnails, especially if the latter are usually square on your site.

Tables and Floats

Use tables for presenting tabular data, not for laying things out side-by-side. Use caution with tables, because the more columns you add, the less well the table will work on small screens like mobile devices.

“Floats” are things like images and sidebars that are moved to the left or right so that they are displayed side-by-side with other content. When inserting images, you have an option to align the image left or right, which accomplishes this effect. But beware of over-using this layout effect. It only works well on larger screens like desktop computers that have lots of horizontal display room. On smaller mobile screens, there is no room to move things to one side, and the results could be unpredictable or sloppy. Getting floats to work well on all types of display can be a complicated problem that may require a graphic designer.

Importing Text

When pasting formatted text into your website, you might end up copying a bunch of styles that are not compatible with your own design. Use the “clear formatting” tool to wipe these foreign styles clean so that your own design can assert itself.

Email Addresses

Do not insert email addresses directly into a public page, as it makes it easy for spammers to get new addresses to send to. If you want to make a MailTo hyperlink (that opens a compose email window when you click it), use the MailTo applet, which will disguise the email address.

If you just want to post an email address somewhere and don’t want it to be clickable, a simple trick is to write it out without the @ character, for example: your-name AT gmail.com. The reader must replace the “AT” with a @ character, which is a mild inconvenience. If you don’t want to burden your readers with that inconvenience, use the MailTo applet instead.

If you are putting MailTo links onto private (eg. member-only) pages, it is safer to just make a regular MailTo link, because spambots cannot read those pages.

Tagged as: Web Design

Website Style Guide, Part 2 - Text

posted on Sep 29, 2017
The special characters tool gives you access to punctuation marks that might not be easy to type.

In our second style guide, we will cover the subject of the text itself.

There are some formatting styles that cannot be automatically applied using CSS, and only come into play as you type. Keeping consistent on these points will help to convey a sense of neatness and professionalism.

Headings

Try to use a consistent headline case. For example:

  • Our new website won an award (sentence case)
  • Our New Website Won an Award (title case: important words capitalized)
  • Our New Website Won An Award (capitalized)
  • OUR NEW WEBSITE WON AN AWARD (uppercase)

CSS settings can help with some of these (all-caps, or capitalized, for example). But if you follow a different convention, you will have to do your heading capitalization manually.

Try to use heading numbers consistently. HTML headings run from H1 to H6—these are not simply sizes as you might think, but sub-section levels. In other words, h1 is a document title, h2 is a section heading, h3 is a sub-section heading, and so on. When adding events and articles, the title will usually automatically be turned into an h1, so you should stick to h2 and h3 in your text. This may help to visualize it:

This is the main title (h1)

1. This is a section heading (h2)

1.1 This is a sub-section (h3)

2. Another section (back to h2!)

2.1 Another sub-section (h3 again)

There should not normally be more than one h1 heading on any given page—and you usually don’t need to provide it, since in many cases, the CMS automatically converts your title to an h1 heading.

Do not start your articles with a heading, because that heading goes right under the article title, which means you would have two headings in a row. It is rare to use h4 and lower unless you are writing a very long and complex document with many sub-sub-sections. If your article is not too long, avoid the use of headings altogether, since your title is probably adequate.

Alignment

Your website styles already define how to align, justify, and center text in your headings, paragraphs, and elsewhere. Generally speaking, avoid use of text alignment tools unless you absolutely need to achieve an irregular effect.

Use the blockquote tag if you want to pull out a section of text with altered margins, such as a quotation or excerpt. Here is a blockquote example:

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.

–Antoine de Saint-Exupery

If you need to line up individual characters on different lines, you will need to use a monospaced font. Or, use the preformatted tag, which accomplishes the same effect, as shown here:

YES     #####################################
NO      #######################
%       1        10        20        30        40

Punctuation

Try to be consistent in your use of punctuation conventions like smart quotes, Oxford commas, and dashes. If you are going to going to get fancy with your dashes, know the difference between hyphens (-), en-dashes (–), and em-dashes (—), and don't mix them with typist shorthand like double-dashes (--).

If you don't know how to produce the correct punctuation marks from your keyboard, the special characters tool gives you access to a variety of additional punctuation marks and other characters.

Emphasis

If you need to emphasize text, it is usually okay to use bold and italic, but try to be consistent. For example, use bold for important words, and italics for titles, quotes, or extracts.

Avoid these bad practices:

  • underlined text (it looks like links)
  • ALL CAPS (it looks like shouting, and makes you seem angry)
  • making text larger (it changes your line-heights and looks messy)
  • using coloured text, especially red (which looks like an error message)
  • using background colours (it makes your page look like an unfinished draft copy)
  • DOUBLING OR TRIPLING UP ON EMPHASIS (yikes!)
  • using headings for emphasis

    (just plain wrong!)

Pasting Text from Other Sources

Often you will have your article or text in another format, such as a PDF or Word document. The easiest way to get it into your website is to copy and paste the text into the CMS.

But when you paste formatted text, you will also be pasting the text styles of the original source document, and those might not match your own style guide. Even worse, you might end up pasting cosmetic styles like fonts and colours. The clear formatting tool in the HTML editor will help to clean out those cosmetic styles so that your own style sheet can take over, but it will not make the text itself conform to your style guide. You will have to manually proofread and correct your headings, punctuation, and other text issues.

Tagged as: Web Design

Website Style Guide, Part 1 - Visual Style

posted on Sep 6, 2017

Developing a style guide for your website will help to maintain consistency and a professional appearance as your website evolves and grows. These in turn will improve usability for your readers.

There are several different areas that your website style guide should touch on. In the next few blog posts, we will go over some of the more important ones to take into consideration, starting with Visual Style

Visual style is an aspect of your web design, involving layout, fonts, and colour choices. Visual style is often the easiest type of style to get right—you can usually nail it by following one simple rule:

DO NOTHING.

This is because your website already has built-in rules for how things should be styled. It already knows what fonts and sizes to use and where, it knows how to colour your text, headings, and links, and it automatically lays out everything according to pre-defined templates. By doing nothing at all, you allow these rules to take effect, and your web designer’s best intentions can be realized. All you need to do is decide what the functional role of your text should be. For instance, what is a heading, what is a list, and so on. In the editor, your text will be shown using a generic functional styling, but after you submit it, your website styles will take over and show you how it will appear to visitors.

Colours: In some special cases, you might find it helpful to break with the rule of not setting colours. For example, when quoting from an extensive set of rules and regulations, you may not be able to alter the formatting to highlight the passages of interest. In that case, you might choose to use colour to highlight the important words. Avoid colours that will make the highlighted text look like links.

Fonts: Your website already has its preferred fonts set up. Don’t override those settings, or your pages could end up looking like a ransom note. But there are cases where you may find it helpful to override those settings. For example, technical text (like code) often works best using a monospace font. (Note that there is a code tag in HTML that makes this easy for you.)

Layout: Be very cautious about playing with your text layout. Multi-column layouts, floating images, and other such effects will work on one type of viewer (eg. computer desktops), but not on others (eg. mobile phones). Do not even try to get text placements or line breaks exactly right, because there are a wide variety of viewing devices and they will all lay out the text in completely different ways. In the end, you may find that you are only managing how the text appears on your own screen. Best practice is to keep it simple so that those different devices can understand what purpose the text serves, and do something reasonably clean and consistent with it.

In short, follow the K.I.S.S. principle, and keep it simple! The whole point of a good graphic design is that you should not need to think about your visual style at all when making website updates.

Tagged as: Web Design

Tips for Designing CMS and Responsive Friendly Websites

posted on Sep 2, 2014

Responsive examples

Although most Content Management Systems (CMS) can handle almost any kind of design, there are other factors that should also be taken into account when coming up with a new website design:

Maintainability:
Can casual users with no technical or graphic design knowledge maintain the content easily? If content is constrained by tight boxes, complex layouts, or is strongly coupled to images, editors may not be able to easily modify the text without breaking the design's layout. If images have strict proportions, resolutions, or color requirements, then the appearance can be spoiled when they are replaced with images that do not match. A maintainable page can tolerate text and images of different sizes. It should have room to stretch and breathe no matter what the website owner might try to stuff into it.

Responsiveness:
If your website should work well with phones and mobile devices, then it must be designed accordingly. Layouts that rely strongly on columns and grids can have problems, because side-by-side presentation does not work well on tiny screens. In order to be adaptable to mobile devices, layouts must easily "re-flow" to smaller numbers of columns (and ultimately to just a single column) without changing the HTML itself.

Navigation:
Your navigation and menus should be designed to grow. Website owners can add or remove pages and even whole sections on a whim. Menus should be designed to grow or shrink automatically when this happens.

Accessibility:
Please take a moment to consider how people with visual or motor disabilities will interact with your website. Is all of the important information clearly visible as text, or is it contained in images or videos? Is navigation clean and simple, or does it require skill and accuracy with a mouse?

Tagged as: Web Design

Ten Things to Know About Website Development

posted on Jan 7, 2008

Website Development

A website is not a brochure.


...but it can certainly be made to look like one. Most first-timers to the web build their first sites as brochure websites, describing their mission and services, and providing some basic contact information. The resulting site is simple, cheap, and easy to maintain, but it may not be much more than a glorified yellow-pages ad. It certainly does not take full advantage of web technology.

A website is not a magazine.

...but it can certainly be made to look like one. The advantage of online magazines is that they contain informative articles on whatever subjects are appropriate to the site, which helps to attract viewers. The disadvantage is that they may trap you into treating your web pages as static documents that are simply read and then discarded. Web pages are much more than articles wrapped in a slick graphic design.

A website is a communication tool.

Brochures and magazines are communication tools, but they are examples of one-way communication. You push your content out to the viewer, but receive nothing back. More sophisticated websites engage in multi-way communications, which gives not only a richer user experience, but also provides the site owner with useful new data and content. Any time you encounter an online form on the web, you are dealing with a site that receives information from the user, in addition to giving information out. Furthermore, many websites are connected to databases that serve as sources of information to display (such as catalogs, event calendars, and so on). As new information appears in the database, the site automatically grows in scope.

People like free stuff.

An old web adage is that you should offer something for free. The internet is full of free information, and your website is competing against many others for the attention of users. The more barriers you place between the user and the information they would like to view, the more likely they will just go somewhere else to find it. "Free" in this sense means "freedom" just as much as it means "zero cost". For instance, users treat their privacy as having value; if you ask for their e-mail address or name before giving out your information, many users will decline unless they have no other choice. In this age of spam and viruses, one's personal e-mail address has equivalent-to-money value.

If you build it, they won't necessarily come.

Just because you are online doesn't mean visitors will automatically come to your site. Just as you cannot expect to run a booming retail outlet in the middle of nowhere, you also have to ensure that your site is well positioned to draw visitors to it. Website position is not quite as simple in concept as retail location, unfortunately. Good website marketing depends on how you expect people to find out about you. If you are expecting to draw the general public in, then search engine placement may be critical. Getting yourself indexed in appropriate web directories is also important. If you are marketing direct to customers, on the other hand, they need to know your website address, either from your published materials, email, or other means. And of course, once you get them to your website, you also have to keep them there, and possibly even entice them to return again another time.

Keeping content fresh is a big job.

For anything other than the simplest brochure websites, regular content updates are a must. Sites that require frequent or high-volume updates may absorb a lot of manpower keeping the site current. Skilled IT personell (aka. "webmasters") can help, but sometimes this can make the problem worse, since the webmaster can become a bottleneck. Often the webmaster's particular area of expertise (eg. graphic design) won't match the areas of work they get flooded with (eg. editing content, database management). More people for your web team can help, if you're lucky enough to have the budget for that. Otherwise, you should consider how a content management system can help to automate the process of updating your site.

Websites do not have to be built for public use.

Just because websites are publicly accessible on the Internet, doesn't mean they have to be build exclusively for the public. Many websites have private or members-only areas ("extranets") for more private or secure functions. These sites leverage the global reach of the Internet to give a small organization a computer network that can be accessed from anywhere. There are even many hidden sites out there that are built for single-person use; that one person gets their own private computer network tool that can be reached from anywhere in the world at near zero cost -- which is very useful for travellers.

Plan your foundation; don't get distracted by the wallpaper.

Building an interactive website can be a complex undertaking. It is analogous to building a house. You should have a blueprint that includes future forecasts as well as present undertakings. Otherwise you may find that you are not able to add that 2nd storey to your house, and will have to start all over from scratch. When you begin building your site, remember that construction is initially focussed on things like the foundation and layout. The wallpaper and paint (ie. your graphic design) are details that do not concern your construction crew, however much they may concern you as the homeowner. In the view of your contractors, you will be able to change the paint and wallpaper as much as you like once they are done, but if you get the foundation wrong, then your wallpaper plans are irrelevant.

Complex websites are software applications.

Many people view a web page as a simple document, like a page from a magazine (see above). However, if the web page has been composed from information taken from a database or a web form that the user has entered data into, then this document is not so simple. In fact, you also need special software that knows how to take all that information, and assemble it into the web page that the user actually sees. What this means is that a complex website is not really a collection of documents at all, but rather a bunch of computer programs that know how to build web pages on the fly from the content that they are provided with.

If you are managing a project to build your own such website, that means that you are not overseeing the production of documents, but rather the engineering of a software system. It would help to have some understanding of software development processes (especially issues such as developing your business logic and software testing), to better handle the issues that arise.

Pre-packaged web software systems are available that may suit your needs, but their extensibility may be limited. Feature sets may be fixed, or there may only be a specific set of add-ons available. If you need to add new functions, find out if you have to do this through the original vendor, or if you can shop around (or even do it in-house). You should also consider what sort of ongoing support is provided, and what your options are if the vendor goes out of business or stops developing the product.

Interactive websites are like icebergs.

95% of them are invisible. As mentioned above, an interactive website is primarily a software project. Software is all about function, but many newcomers to the web are distracted by websites' form (ie. the visible elements, such as graphics and text on screen). The visible elements of your website may be a very small fraction of everything that is going on there. This also means that your web developers could be making huge strides in your project, with little or no results that are visible to the end user. If you are overseeing a web development project, be sure to understand all these hidden components, so that you can tell the difference between a project that is going like gangbusters on the "back-end", and one that is stalled and in need of help.

Website Design Tips

posted on Jan 7, 2008

Web Design Tips

Is your website well organized? Is it easy to use?

The quickest way to lose a customer is to let them get lost in your site. The number one reason why someone leaves a website is that they can't find what they are looking for. It is essential to organize your site in a way that follows the theme you are trying to promote. It should be a natural choice, and users should know which link or button to click to learn more or order your product and services.

A good method for testing how easy it is to navigate your site, is to ask people who've never seen it before to go on and try to find some specific information, while you peer over their shoulder.  This can be a quick way to discover poorly designed or misleading navigation links, or problems with the site's organization.

Here are some key tips and pitfalls:

Keep it inside: 
A common mistake made by web designers is to offer a link on the first page of the site that will take people out of your site and to some other page. Ensure all third party links open in a separate window so people can easily get back to your site.

Keep it simple: 
Big scientific or technical terms will turn your audience off. What good are they if people reading your page cannot understand what it is you are trying to sell.

Keep it truthful:
Don't try to deceive your visitors.  Make sure they know what it is you are selling, promoting or giving away.

Keep it fast:
Most visitors still do not have high speed internet. Use graphics sparingly to illustrate your point or product and keep in mind that 30 seconds waiting seems like an eternity to potential customers. Keep the graphics small so the page will load quickly.

Keep it informative:
Savvy web users want information that is well presented and easy to find.

Keep it polite:
Don't ask for too much information. People do not like receiving unwanted e-mails. Make sure the visitor knows what the information they are giving is going to be used for. Do you need their date of birth? Do you need their gender? Think about the information you're asking for, and ask yourself, would I want to give this information out?

Keep it correct: 
Nothing casts doubt like a website that has spelling errors or misplaced links. Your visitors are going to wonder about doing business with you.

Keep it search engine friendly: 
Understand what technology you are using and the impact it may have on search engines and your ranking.

 

Tagged as: SEO, Web Design