web

Does your website make these mistakes? – The ultimate website checklist

| JDriver

How They Hurt Your Site And What To Do About Them

Designing a site that meets only your needs / wants

It is perfectly understandable that you’re excited about your new site and all that you want it to do. However, the users of your site (i.e. your customers) are the people who will be spending their time there. It’s important to address their needs.

Is the purpose of your site instantly clear?

Any visitor, no matter how computer literate they may, or may not be, needs to be able to understand what the site is about, and what your business does within a few seconds of arriving at your website.

What is your sites focal point?

Every site should have a focal point. One thing that your visitors should see. This could be a request to sign-up for a free trial, the benefits of your service etc.

The site doesn’t look professional

A clean, contemporary design, free of errors (and one which takes note of the items in this list) will help your site look professional, and help instill a sense of trust in your visitors.

The web pages take too long to load

People expect to be able to access the information that they’re looking for quickly. The load time of your pages can make your visitors give up waiting and head elsewhere. A number of factors will affect loading time – the server it’s hosted on, large images, poor website coding, and plugins, amongst other things.

Having too much content on the home page / the home page is too long

Consider the homepage as a portal to the rest of the site. It should provide people with some key information, and make it easy to find what they’re looking for. Ideally, the home page shouldn’t be more than around two screen heights. Obviously this depends on the screen resolution of your visitor, so aim for the lowest common denominator.

Scan-reading the page doesn’t provide the visitor with the content they’re after, or tell them what the page is about

People are used to quickly scanning a web page, trying to find the information they’re after, or checking that the page will be of use to them. Arrange your content appropriately by using headings and lists.

Does disabling images or CSS styling render your site unusable?

This is especially important to visitors with disabilities such as blindness, where they may access the web with a screen reader. Not only that, a website which works without CSS and images is likely to be very search engine-friendly and properly coded.

Does disabling JavaScript break the site?

JavaScript should give added functionality and not be required in order to view a site. Some people choose to browse with it disabled.

Put things where people expect them

As the web has developed, there are certain things that people expect, such as the company logo will be at the top-left and clicking it will take you back to the home page, menu items will be at the top or on the left, and so on. Following conventions will mean that users can easily navigate your site.

Only use items which are necessary

Think carefully about everything that you add to your pages. If they’re not conveying an important message, or providing something useful, have a think if you could live without it.

Does your site use a lot of Flash?

Flash is now well and truly on its way out. It will continue to hang around for some time, as online games and similar, but when it comes to building websites out of Flash, it’s over. Flash is not very user-friendly, search engines don’t like it, and neither do mobile devices.

Don’t use splash pages

Splash pages are also a really bad idea. Like Flash, they’re bad for usability and search engines. They tend to drive your visitors away.

Sites should be tested on numerous devices, web browsers, screen sizes and mobile devices

Different devices will display your website differently. It’s a fact which drives designers and developers mad. What works on one, may not work on another. The trick is to create something which works across the board without the use of hacks (code which isn’t compliant, but tells the different devices or browsers to display something a little differently. Fortunately, it’s not important to have every device display your website exactly the same. Responsive design, where the site automatically adjusts to fit the screen is the way forward.

Is the site fixed-width or completely fluid?

This also ties in with the point about responsive design above. With the wide array of screen resolution that your site will be subject to, fixed-width (where the width of your site will not change no matter what), or fully fluid (where the site will always take up the entire width of the browser) can cause display and usability issues for your visitors.

Sounds or video plays automatically when the page loads

The intrusion can really irk your customers. You may be able to get away with it if you’re a musician or film-maker so that you can showcase your work, but even then I’d strongly advise against it. Some people (myself included) will open up numerous pages one after another so that I can then go and flick through them at leisure. If a video starts playing in one of the open tabs, it’s an annoyance trying to find the right one and close it.

iFrames should be avoided where possible

This comes back to usability, but it also causes display issues where your site will resize responsively, but the iFrames won’t. There are some instances where it can’t really be helped though.

Pop-ups should only be used in very special circumstances

Pop-ups will annoy your visitors no end. In fact, I can’t think of an instance where a pop-up would provide something which couldn’t be better done another way. Nothing should interrupt the visitor without an exceptional reason, and I’m sorry to say, asking them if they’re sure they want to leave your site, or asking them to hand over their email address before they’ve even had a chance to view the page, isn’t going to win you friends.

Has right-click been disabled?

People right-click for a number of reasons, opening pages in new tabs, copying a URL and similar. If someone is determined to copy an image you don’t want them to, there’s not much that can be done. They’ll always find a way. Better to keep your site user-friendly.

Keep links consistent

Keeping your styling consistent helps aid navigation as users can quickly and easily identify what’s a link, and what isn’t.

Too much, or too little white-space

Good use of white-space makes your site easy to read. Your calls-to-action will stand out, and users will be able to find what they’re looking for.

Too much text, or too little

People tend to skim-read web pages, so any copy you have should be relevant and necessary.

Only links should be underlined

Underlined text on a webpage has become synonymous with links, so it should only be used if something is a link. Inline advertisements should be double-underlined.

Check for broken links and missing pages

Coming across dead links is frustrating. Not an issue if it happens once, but can grate on you if you find many. Exacerbated by an unhelpful 404 page.

Your logo, images and other content should be professionally made

Well produced elements make your site look more credible.

Your logo should link back to the homepage

It’s expected and is quite often the first method people will use to navigate to the homepage even if there is a ‘home’ link.

Links should be short and descriptive

People like to know where they’re being taken so that there’s no nasty surprises.

Images should be optimised

Images can often have large file sizes. Compressing them suitably can mean that they will load quickly, yet the quality will still be high. Of course, you sometimes want to provide high-quality images.

Graphics shouldn’t be used for text

Not using images to display text means that your site is accessible to those with screen readers and similar. Also, search engines can’t read images.

Animated GIFs are distracting

They also have a tendency to look very cheap and put added strain on your server and visitors bandwidth.

Visitors should always know where they are within your site

Not much of an issue for very small sites, but as it grows, it can become rather confusing. Mystery Meat Navigation should also be avoided (MMN is navigation which uses obscure text or abstract images to identify links.)

Does your content entice people to return?

You want people to keep coming back to your site, time and time again. The key is to provide great content, making it engaging, useful, readable and adding fresh content frequently. Copy that was written for print will need to be edited for the web.

Ensure that lines of text are not too long, or too short

Lines which are too long long or short quickly become tiresome to read. Ideally you’re aiming for between 7 and 13.

You should have dark text on a light background

The reverse can be quite hard on the eyes after a while, and a low contrast can also be bothersome.

Use external CSS style sheets

CSS is now the recognised way to style a website, and using it an an external page, not inline. It makes it easier to maintain the site, not to mention doing your visitors a few favours, such as reducing load time.

Do you have a search feature?

Extremely helpful for visitors to be able to search your site for what they’re looking for

Check to see that your website code is valid

Adhering to W3C standards will have a number of benefits. Users are less likely to encounter errors, and your site stands a better chance of displaying the same across all platforms (With the exception of Internet Explorer, but I have high hopes that IE10 will finally fall in line and render sites in the same manner as the other major browsers).

Do you use tracking code?

Inserting tracking code, most probably Google’s, will give you invaluable feedback about how people use your site. Analysing it will provide incredible insight and flag up potential issues. No need to stop with Google though, ClickHeat will actually show you where people are clicking on your site.

Ensure the date is on time-sensitive articles

Some people don’t like doing this as they don’t want people to know that they haven’t added any new content in a while, however, it can be frustrating to read something only to discover that it’s out of date. Update articles if the content isn’t timeless. For events and such like, give the full date with day of the week. It lets people mentally check if they’re able to make it.

Check to see that your website code is valid

Adhering to W3C standards will have a number of benefits. Users are less likely to encounter errors, and your site stands a better chance of displaying the same across all platforms (With the exception of Internet Explorer, but I have high hopes that IE10 will finally fall in line and render sites in the same manner as the other major browsers).

Is the language suitable for your audience?

Language style should be for the readability of a teenager, though that isn’t all that useful as I’ve know some that are highly articulate, while others are borderline illiterate. And there’s no mention of where on the teenage scale you should be aiming. However, make it easy to read, avoid jargon and acronyms, unless you’re sure that your audience is specialised and will be fully aware of the meanings. You should still ensure that each acronym is explained the first time it is introduced into an article. Or you could use a tooltip.

Special characters should be encoded

Although browsers are now much better at handling ampersands and other special characters, they can still display incorrectly for some users.i.e. use ‘&‘ instead of ‘&’ in your code to display the ampersand.

Don’t use hit counters

People consider them to be very 1990’s, however, there could be special instance where it would be useful to know, or an involved part of your overall website strategy, such as fund-raising.

Provide your contact information

…and make sure it’s clear and easy to find. This will help instill trust. Give people different options too. Physical address, landline number, contact form and email address. To stop spammers, it may be reasonable to not display your email, instead relying on a contact form, or maybe displaying it as an image. Though you’ll still need a way for people who cannot see your images to email you.

Avoid the long con

I’m referring to those sites which have a tall sales-pitch style of homepage, or those that make you click through a number of pages in order. It makes you product appear to be snake oil.

Ensure the correct file format has been used for the right purpose

JPEGs for photos, or PNGs. GIF for small images which don’t require transparency. Yes, GIFs do offer transparency, but the transparent parts can only be on or off, giving jagged edges.

Avoid table-based layouts

DIVs are the way to layout your future-ready website. Easy to control, and much easier to maintain.

So is that all?

Not by a mile. There’s always things which can be improved, and it seems that there’s no such thing as the perfect site. They’re all flawed in some way. All you can do it strive to make it better, and I guarantee that it’ll be worth it in the long-run. I hope that you’ve found it useful, and if you have any tips, please share them.

Have an ecommerce website? Then maybe you should check out (geddit?) how to increase conversions.

Design, Web and Print Glossary, Terms, Definitions – L

| JDriver

L

Leading – The vertical space between lines of text.

Loupe – A magnifying glass, often shaped as an upturned cup with the lens at the top, used for examining slides or checking the detail of printed material.

Lossless – Any saving / compression method which retains all the quality of the original, no data is lost.

Lossy – A method where some data (detail) is lost to varying degrees depending on how much compression is applied.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – K

| JDriver

K

Kerning – refers to the spacing between any two particular letters. For instance, ‘AV’ has a closer kerning than some other combinations to give visual balance.

KISS – “Keep It Simple, Stupid”, a useful phrase to remind creatives to make sure that they’re not over-complicating a concept. Carefully considered but simple ideas are the most effective.

Kiss-Cut – A type of cut which just ‘kisses’ the paper. A notable use is in the production of self-adhesive stickers where the stickers are cut to shape, leaving the peel-away backing intact.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – J

| JDriver

J

Java – Not to be confused with JavaScript, this is a programming language which allows small programs to be downloaded onto computers and run.

JavaScript – Is a scripting language which adds interactivity to web pages. Effects such as drop-down menus, roll-overs and slideshows are typically written with JavaScript.

JPEG or JPG – An image file format. Extremely common, many web graphics use this format, as do digital cameras.

jQuery – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – I

| JDriver

I

Idea – The same as concept.

Imposition (Pagination) – The process of arranging pages ready for printing. Although we read items in numerical order, a different order needs to be applied depending on how the item is to be printed.

Indirect Visual – An image or graphic that is somewhat related to the headline, either directly or indirectly. Used to convey mood and feeling.

Interface (User Interface) – Either on a web page, mobile phone, or any other interface which a user interacts with.

Interruptive Methods – This refers to web advertising that interrupts the user by using tricks like pop-ups, animated banners etc. Web users find these extremely annoying.

Interstitials – As Interruptive Methods, these are unsolicited web pages that appear to user before they can access the page they wanted to see.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – H

| JDriver

H

Headline Twist – A technique often used by comedians, whereby they lead users thought down one trail, only to reveal an unexpected punchline. In marketing, this can be either humorous or serious.

Hex / Hexadecimal – A numbering system which uses the numbers 0 – 9 and the letters A – F. This system is used to define colours for use on the web, pre-fixed with # to mark it a colour. #000000 is black, #ffffff is white.

HTML – Abbreviation of HyperText Markup Language. The fundamental coding used to develop web pages.

Hickey – A mark, blotch or other artefact left on a printed item. An error usually created by foreign matter affecting the print run.

Hyperlink (or Link) – A clickable element that directs the user to another web page, or part on the same page.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – G

| JDriver

G

Gerunds – These are words which end in “ing”. You should avoid having too many of these close together.

Ghosting – Whereby elements in the background are visible through foreground elements. Sometimes this occurs as an undesired effect when printing.

Gif – An image file designed specifically for the web. It allows transparency, and can also be animated. It typically has a low number of colours and small file size.

Glow – Can provide a similar effect to a drop-shadow, this will provide a glowing edge either on the inside or outside of a shape.

Gradient – A gradient defines with subtle blending from one colour to another.

Grid – A method which is used to layout content either for print or web. Well thought-out grids are based upon mathematical formula.

Guerilla – Usually followed by “advertising” or “marketing”, this applies to ambient media, often using people, stunts and props to create innovative campaigns.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – C

| JDriver

C

Call To Action – On a website or in other marketing media, a ‘call-to-action’ is something which encourages the customers to perform an action e.g. request a brochure.

Campaign – A series or marketing efforts.

Cap Height – In typography, this is the distance from the baseline to the top of the capital letters.

Caption – Copy which accompanies a photo, illustration etc. Descriptive text.

CGI – An external application that is executed by a HTTP server in response to an action you perform in a Web browser, such as clicking a link, image, or another interactive element of a Web page.

Character – This to refers to any symbol, such as a letter, number, punctuation.

CMYK – This is a colour mode used for printing materials: Cyan, Magenta, Yellow and BlacK. The colour amounts are expressed as percentages – meaning a total of 400% is possible, though this can cause issues when printing as the material being printed onto can become over-saturated.

Cliché – Any phrase, visual or idea that’s now trite and hackneyed.

Collate – The act of organising paper into it’s final order, ready for binding.

Colour Channel – Each channel represents one level of color in the image; for example, RGB has three color channels, while CMYK has four. When all the channels are printed together, they produce the entire range of colours in the image.

Comb Bind – A bind using a flexible plastic comb that is curled.

Comparative Advertising – Any ad or campaign that directly or indirectly compares itself to one or more competing brands.

Compression – Refers to the method of ‘compressing’ files, most commonly images and videos, in order to make the file sizes smaller. Compression will reduce quality, so it’s a bit of an art to compress something correctly.

Comps / Comprehensives – Drafts of a piece of work.

Concepts – The concept is the deeper thought behind an ad or strategy.

Contrast and Contradiction – When a headline or other headline conflicts or contradicts the visual, creating tension and surprise.

Contrasting Pair / Headline Twist – Where a strap-line or slogan uses contrasting terms. e.g. Argos’ “Famous names at unheard of prices.”

Copy – Apart from its more obvious meaning, being a duplicate of something, it refers to written text.

Creative Process – A term that encompasses stages that are undertaken as part of a project.

Creep – Refers to the middle pages of a document extending outwards slightly of the outer-most pages.

Crop Marks – Small guidelines which are exported on printed material to indicate where they should be trimmed as part of the print-finishing processes.

Cropping – Cutting out the required part of an image, discarding the rest.

Cure – To allow inks, varnishes and other coatings to dry properly.

Cut Back – A technique in either TV or Radio where after the ‘action’ was interrupted by, for instance a voice over, then cuts back to the action briefly.

Cutting Die – The plate, usually custom ordered, that is used to cut materials.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – B

| JDriver

B

Balance – A term used to describe the aesthetic or harmony of elements, whether they are photos, art or copy, within a layout or design.

Balloon – Anything that encircles copy / text.

Banner (Web) – A web-based advert, either static, animated or interactive.

Baseline – In typography, this refers to the imaginary line upon which sits the text. Rounded items will actually sit just below this line to give balance as visually, a letter with a rounded bottom will appear to sit slightly higher than it actually does.

Below The Line – Marketing that is direct, such as Direct Mailers.

Bezier line – A path defined by the position of the four control points that are located at the ends of the tangents of the vertices. The length and angle of the tangents describe how a path deviates from linear between its vertices.

Bible Paper – A lightweight, yet reasonably strong paper of the sort typically used in bibles.

Bind – Most frequently refers to books, but can include any printed material where the sheets are bound by string, wire, glue, or other method.

Bitmap – A graphics mode where the resulting image is constructed of pixels (as opposed to vectors).

Bleed – In printing, the bleed refers to an area that ‘bleeds’ over the edge of the document area. This is done so that background colours / images and so on will not have have white borders due to minor error margins that can occur when trimming printed objects.

Blind Image – This refers to an image that is embossed, de-bossed, stamped or watermark that is created through creating the image as part of the papers texture and not using inks or foils.

Blocking – This is when printed sheets (usually freshly printed) stick together, resulting in damage when they are separated.

Blow-Up – An enlargement of an image.

Blurb – A brief description that is found on the back of book jackets. They are designed to entice the reader.

BMP – Windows bitmap file format. It ‘lossless’, meaning uncompressed so that image quality is preserved. Its use is dwindling as there are better options available.

Body – In print or on the web, this refers to the main text area.

Borrowed Interest – A technique of using something already famous to help sell a product or service. Examples are celebrity endorsements and give-aways.

Brand (Branding) – The brand is what sets a product apart from its competitors. The idea of the brand transcends the physical properties of the product and incorporates a great deal of other elements.

Brand Loyalty – This is the trusting relationship that customers feel towards a particular brand and the reasons why they like it.

Bronzing – An effect which is created by dusting wet ink with a metallic powder.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z

Design, Web and Print Glossary, Terms, Definitions – A

| JDriver

As a designer, I need to know a lot of jargon as I deal with printers, web developers etc. etc. Although I try not to use it when speaking to clients, it can occasionally slip out.

No matter what you do, we all have a tendency to use our industry jargon when speaking to others. Here, I present a glossary of design / web / print terms for your personal edification.

A

A (Paper Sizes) – ISO paper sizes. Each is double the size of the one before it. A4 is the most common size, used for letterheads etc. A4 is twice the size of A5, half the size of A3.

Above The Line – Traditional, non-direct advertising of print, TV and radio.

Acetate – A transparent sheet, such as used on OHP’s or as a protective cover for bound documents.

Acid Free Paper – A paper type that resists discolouration and deterioration as a result of age.

Adobe – Adobe is the company behind a range of professional design software e.g Photoshop, Illustrator.

Acrobat – Another piece of Adobe software. Acrobat is used to create and view PDF files.

Achromatic – This refers to ‘non-colours, that is black, grey and white.

Agate – A type size that is 5&#frac12; points.

Air (Print) – A term used to describe large, blank areas in design layout. More commonly called ‘white-space’.

Air (Software) – Software for developers to produce, stand-alone applications across various platforms and devices.

Airbrush – A compressed air tool that uses a fine mist of either paint or ink, usually used to touch up images. Also sometimes used to refer to the digitally touching up of photographs.

Alley – The space between columns of a layout.

Aliasing – spatial aliasing, which shows as visible pixelation – a blocky or jagged effect that is usually apparent on lines which are not quite horizontal or vertical.

Alignment – The position of text and items in a layout. Can refer to either vertical or horizontal alignment.

Ambient Media – This refers to non-traditional forms of media. It can either be a new technique or using existing forms in new and innovative ways.

Analogy and Visual Metaphor – These use something to represent something else. The analogy campares a similar item to help explain something. A metaphor is the use of a word or phrase to imply characteristics, e.g. Fox = sly / cunning.

Animated Gif – A bitmap-based format specifically designed for use on the web. It supports a low number of colours (256) and can contain a number of .gif images that can be viewed as an animation. The use of animated gifs has fallen out of favour.

Anti-Alias – A method of blending the edges of an object to to jagged edges.

Anti-Aliasing – Most commonly seen as an option on computer display settings, where fonts are smoothed to remove jagged edges and aid readability.

Arms – The elements of letters that branch out of the stem of a letter, for example ‘Y’.

Artwork – Refers to any graphics, layouts, photographs etc.

Acender – In typography, the ascender is anything that appears above the x-hight of the font. b, d, f, h, k, l and t all have ascenders.

Aspect Ratio – Ration of a screen, monitor, video etc. Older TV’s were 4:3, widescreen is typically 16:9.

Alpha-Channel – An 8-bit channel that is available in some file formats. .PNG is commonly used on the web as the alpha-channel allows transparency saved in an image. JPEG does not allow this and GIF only allows transparency to be on or off, so there is no partial or semi-transparency allowed, resulting in jagged edges.

A  |  B  |  C  |  D  |  E  |  F  |  G  |  H  |  I  |  J  |  K  |  L  |  M
N  |  O  |  P  |  Q  |  R  |  S  |  T  |  U  |  V  |  W  |  X  |  Y  |  Z