SSW Rules to Better Websites - Graphics

Do you keep developers away from anything related to design or look and feel?

Developers should never do design work. A bad design can be dangerous for the project. It's the web designer responsibility to create the overall look and feel of the website and define anything related layout, typography, colour selection, branding and overall consistency. The designer is also responsible for any image processing, web optimisation and browser/platform testing of the website.

Figure: Bad design can be dangerous!

Where appropriate do you use text rather than images?

Thousands of hours go into designing fancy graphics. While the graphical impression a website has an impact, the benefits of using text far outweigh those for using images. Using text rather than images has multiple advantages:

• easier to read - especially if a client machine doesn't have the required plug-ins
• download faster - a users patience extends to about 7 seconds.
• easier to update - a simple find and replace, and you don't need to worry about image size distortion
• are able to be found by search engines - if people don't get to your site, what's the point of it being there?

<h1>Welcome to My Page</h1>

Figure: Good example - this text can be easily rendered by the browser and recognized by search engine

<img src="Images/Heading_Welcome.gif">

Figure: Bad example - using image for text header

Do you know how to save your graphics in the right format?

If you've ever wondered why the formats of graphics on the web are different from each other, you're not alone. With GIFs, JPGs, and PNGs, it's hard to know which format you should use in a particular situation. Don’t simply add an image that looks alright for you, it is very important to know the advantages and disadvantages of each format so you can create better web pages. Read below to know how to save the correct format. If you are still not sure, ask a designer for help.

Do you know when should I use gif?

Line art graphics and anything with a limited number of colours but well defined shapes (logos, simple illustrations, screenshots etc), must be saved in GIF format.

Figure: Bad Example - this graphic is line art, but has mistakenly been saved as a JPEG. It loses definition (look closely - see the "bubble" effect?) and is 4.1kB

Figure: Good Example - the same graphic, saved as a GIF, is 2.75kB with much cleaner shapes.

Figure: Bad Screenshot Example - this JPEG is 35kB.

Figure: Good Screenshot Example - the same screenshot saved as a GIF has cleaner edges and is only 17kB.

Do you know when should I use png?

PNG is an alternative to GIF, heavily endorsed by some circles, mainly because of its open source and non-commercial nature. It does have some technical advantages, but complete support of the format isn't very widespread yet (Internet Explorer, for example, doesn't have a complete implementation).

PNG boasts:

• Alpha blending (8 bit transparency map support)
• Unlimited and limited colour palettes. This makes it a good alternative to BMP.
• Multiple CRCs so that file integrity can be checked without viewing

In our experience, however, it doesn't have enough of a file size improvement to make switching a must for all web use.

Do you know when should I use jpeg?

In line with the statement above, all photographs should be stored in JPEG format. JPEG is a lossy format - it rationalises the quality of the image by averaging out the colours in segments of the image that it defines. To see an example of this working, try lowering the quality of a JPEG to minimum quality.

Figure: Bad Example - this photo should not be a GIF - it has too many colours to fit into the 256 colour limit that GIF has, and the result is dithered. File size: 24kB

Figure: Good Example - the same graphic, saved as a JPEG, is 4.4kB.

Do you avoid BMPs for the Internet at all times?

Never use bitmap images (.BMP format) on your website or in emails. BMP is an uncompressed format, and typically has an unlimited colour palette. This results in unneccessarily large file sizes, which makes it unsuitable for Internet use.

As an alternative, the most ideal format for Internet-ready lossless images is PNG. Its features are described above in the section Do you store line art for the web in GIF format?

We have a program called SSW Code Auditor to check for this rule.

Do you use image styles to ensure great looking content?

Many people will simply "plonk" an image onto a web page in between or next to a block of text. This interrupts the flow of the page and gives a disjointed, unprofessional impression.

A good technique to "blend" your images into the layout and avoid this is to add a drop shadow using CSS. This image style will be consistent and easy to be used by any person who might edit the website content.

Figure: Bad Example - The image does not look like part of the layout; it looks like it was simply "plonked" onto the page

Figure: Good Example - The rounded edges and drop shadow make the image look like part of the paragraph, rather than a separate unrelated item.

Do you avoid having unreadable screenshot galleries?

Many sites have screenshot galleries that offer a list of all the screens within an application, and an option to enlarge them. There's just one problem: you can't see what they contain!

Figure: Bad Example. The contents of the screenshots are difficult to make out

What we suggest as an alternative is to have one large image (and possibly a list of descriptions) to allow users to have a large screenshot to view right from the get go. This might look something like:

Figure: Good Example. This is more intuitive. Navigation can be handled by loading the images on the fly with JavaScript if need be.

Our Code Auditor User Guide provide a good example for this rule.

Do you know how to use balloons in screenshots for instructions?

Learn more about using balloons in screenshots...

Do you make sure your website doesn't have duplicate images?

Image files are outside the realm of most database developers mind sets. So I've seen many very messy websites that have duplicate images all over the place. You only need an image in one place in your web site. The rule is that if it is used once, it goes in the associated directory - e.g. /ssw/Company/Images OR if it is used more than once, the image is moved to the root images directory - e.g. /ssw/Images. One of benefits of avoiding duplicate images is speed up web surfing for your users.

Do you prefix your images appropriately?

It is important to sensibly name your images. We don't use "img" (in the same way we don't use "tbl" for tables).

However, for special types of images we do include a prefix.

Figure: Correctly named images

Do you add width and height properties to images in user controls?

Framework pages (i.e., user controls and common layout files) should have width and height properties specified for all images that are used. This means that the page's layout will be rendered correctly while loading and when the user has images turned off in their browser.

<img src="TopBar_Row1_Col2.gif" width="86" height="20" />

Figure: Good - User controls contains width and height properties

<img src="TopBar_Row1_Col2.gif" />

Figure: Bad - User controls does not contain width and height properties

We have a program called SSW Code Auditor to check for this rule.

Do you exclude width and height properties from image references in content?

In the case of content (unlike a site's framework files), specifying the width and height properties for images on your web pages can sometimes turn out to be more trouble than it's worth, particularly if the image is likely to be changed a few times.

As a result, we have made a rule that content pages should not have the image dimensions specified in HTML.

We do have one exception to this rule: any HTML content that is to be sent out via email, as Outlook blocks images by default and renders them as placeholders with very lengthy alternate text. As a result, the page is invariably stretched to widths that make the contents of the message somewhat unreadable.

<img src="MyPic.gif">

Figure: Good - Exclude width and height properties for content images

<img src="MyPic.gif" width="93" height="25">

Figure: Bad - Including the width and height properties for content images

We have a program called SSW Code Auditor to check for this rule.

Do you have a favicon in your webpage?

What's a favicon?

A Favicon is a small image file included on nearly all professional developed sites. The Favicon reflects the look and feel of the web site or the organizations logo.

Figure: Good Example - Using the favicon gives your website a very professional look and feel.

Figure: Bad Example

Which formats we can use?

The format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.

How to implement the favicon?

1. Copy your company's favicon to the root of the site
2. Add the yellow code between the <HEAD> tags in your MasterPage.master (or regular HTML/ASPX page)

For more information about the shortcut icon, check out msdn.microsoft.com

We have a program called SSW Code Auditor to check for this rule.

Do you know not to include toolbar and taskbar junk in screenshots?

Screenshots are a very important part of websites these days. Be careful to avoid unnecessary toolbars and taskbars in screen shots.

Figure: Bad example as the taskbar and the google toolbar have been captured

Figure: Good example - the taskbar and google toolbar have been hidden before capturing the screenshot

Tips:

1. Use a region screen shot if appropriate (however the URL is generally helpful in most browser screen shots)
2. Go full screen eg. F11 in Internet Explorer, then <Alt>+<Print>
3. Always have the 'Auto-hide the taskbar' option checked
   

   

   Figure: Always have the 'Auto-hide the taskbar' option checked so you do be screen shots

Do you use image sprites to reduce HTTP requests?

A sprite is an image that has all of your other images inside of it, so if your sprite has 5 images, you’d be getting rid of 4 HTTP requests and speeding your site’s loading time up by the time for each of those 4 requests?latency. You will use CSS selectors for each link to display only a portion of the image sprite - effectively showing just the image you need.

The benefits to use CSS image sprites are:

• to save bandwidth
• to reduce HTTP server requests
• to speed up page load times

Ensure that the file size of your master image isn't a greater versus the sum of its pieces.

Figure: Good example - one image contains all the icons and CSS selectors make the browser display only the part you need

Figure: Bad example - four images, one for each icon