Skip Navigation LinksHome > SSW Standards > rules > SSW Rules to Better Websites – Layout/Formatting & Content

It was a pleasure to have you in the office again. I continue to be impressed by the quality of work and advice you provide. Mark Pigram - Contracts Online http://grosvenor.com.au
 

Do you agree with them all? Are we missing some? Email us your tips, thoughts or arguments. Let us know what you think.

Redstar Indicates important rule

SSW Rules to Better Websites – Layout/Formatting & Content

  1. Videos - Do you have a video on the homepage of products websites?
  2. Web content - Do you write in the newsreader and eye witness style?
  3. Forms - Do you indicate which fields are required and validate them?
  4. Forms - Do you know when to use links and when to use buttons?
  5. Do you have a call to action on your web pages (aka The Banana Rule)?
  6. Figure - Do you use images to reduce the words?
  7. Figure - Do you add useful figure text (aka a caption) to avoid a lot of text over images?
  8. Figure - Do you use 'Bad Example' and 'Good Example' with ticks and crosses in captions?
  9. Figure - Do you use the right HTML code to add the useful figure/caption?
  10. Do you use the right HTML/CSS code to add a message box?
  11. Do you always acknowledge your work?
  12. Printing - Do you have a print.css file so your web pages are nicely printable?
  13. Do you check your website is multi-browser compatible (tested on the main web browsers)?
  14. Do you know to go Beyond Responsive Web Design when targeting mobile devices?
  15. Do you design your web pages to work on 1024x768px (not 800x600px)?
  16. Authentication - Do you have a user friendly registration and sign in screen?
  17. Authentication - Do you use email address instead of user name?
  18. Authentication - Do you have a 'Forgot my password' link?
  19. Authentication - Do you have a 'Remember Me' checkbox?
  20. Authentication - Do you have a 'Sign me in automatically' check box?
  21. Authentication - Do you have a 'Logout' short cut?
  22. Do you have a consistent search results screen? (aka the Google Grid)
  23. Do you avoid horizontal scroll bars?
  24. Printing - Do you check for oversized Images and table?
  25. Do you know table tags should not specify the width?
  26. Do you avoid using Flash/Silverlight?
  27. Do you use DocType in Web Pages while using CSS style sheets?
  28. Do you include the number of results in your drop down list?
  29. Do you use "< Back" instead of "< Previous" or other variations? *Note: Moved to sharepoint.ssw.com.au/Standards/WebSites/RulesToBetterWebsitesLayout/Pages/UseBackLink.aspx
  30. Do you use predictive-textboxes instead of normal combo or text boxes?
  31. Can your users easily add an event to their calendar?
  32. Do you have the correct default for a URL field?
  33. Do you know how to effectively use non-standard font on your website?
  34. Do you provide enough "breathing room" around the text?
  35. Do you know it's important to make your fonts different?
  36. Do you avoid having Reset buttons on webforms?*Note: Moved to sharepoint.ssw.com.au/Standards/Websites/RulesToBetterWebsitesLayout/Pages/NoResetButton.aspx
  37. Do you use icons in web pages to indicate status directly?
  38. Do you use correct symbols for apostrophes?
  39. How do you get your rule added?
  40. Do you set the maximum width for your page?
  41. Do downloads show progress and total size?
  42. Good Forms: Do you click a label and have the focus set to the field by using <label>?
  43. Good Forms: Do you provide field hints?
  44. Good Forms: Do you provide red errors next to the field?
  45. Good Forms: Do you provide grouping using <fieldset>?
  46. Search Results - Do you always give more information under “Did not match anything”?
  47. Do you keep the same height / width ratio as the original image?
  48. Do you know not to use bold or strong tags inside Headings?
  49. Do you know not to use Times New Roman font in your site?
  50. Do your page names use Title Case?
  51. Do you use IE Web Slices to give website users regular updates?
  52. Do you know what format your content should be in? (Docs or Web pages)
  53. Do you know to use friendly URL's where you can?
  1. Videos - Do you have a video on the homepage of products websites?

    The best way to show the features of a product is creating a video. The information you are able to communicate in seconds of a video would take hundreds of words of text to explain.

    Videos are also important for services, but for products it should be in the homepage.

    Dropbox homepage
    Good Example - Dropbox homepage has no text but a video that shows nicely how it works

    Videos are also good for SEO

    By embedding videos onto your website it will help get the videos more views, which is a determinant for Google nowadays.

  2. Web content - Do you write in the newsreader and eye witness style?

    General web content should always be written as if read by a newsreader. It is objective and describes its content professionally. A good example of this is Wikipedia.

    I don't like JavaScript. I prefer jQuery because...

    Figure: Bad Example - using 1st person writing makes it sound like opinion

    jQuery is superior to JavaScript for this because...

    Figure: Good Example - using 3rd person writing makes it sound like fact

    However, when quoting a testimonial, you should use 1st person writing as if a newsreader had crossed over to an eye witness for a personal view of the topic.

    Don Bradman thought that SSW's work was fantastic!

    Figure: Bad Example - impersonal

    Don Bradman says: "I thought that SSW's work was fantastic!"

    Figure: Good Example - 1st person in this context is appropriate
  3. Forms - Do you indicate which fields are required and validate them? Important Rule

    Always indicate which fields are required. Users get frustrated when they experience a wasted trip to the server, just because they did not get an obvious indication of what was required first time around.

    Bad example of Web Sites Required Fields
    Figure: Bad example - No visual indication for required fields when a user first sees the form

    A designer will know the best way to indicate required field depending on the layout. However if you are in doubt and don’t have a designer around, a red asterisk is definitely the best option.

    Use a simple asterisk character
    Figure: Good Example - A visual indication of what fields are required (use a red asterisk if you are not a designer)

    More Information

    You should combine these visual indicators with appropriate client and server side validators to make sure that your data conforms to business requirements. Adding a RequiredFieldValidator to the above textboxes gives you data validity check with minimal coding.

    <asp:Textbox runat="Server" ID="email" />
    Figure: Bad Example - No validator used, so the user won't know the email is required
    <asp:Textbox runat="Server" ID="email"/>
        
    <asp:RequiredFieldValidator runat="Server" ControlToValidate="email" ErrorMessage="Please enter an email address"
    ID="emailReqValidator" />
    Figure: Good Example - an ASP.NET validator in use, to indicate the fields required

    Note: For ASP.NET Dynamic Data although validation is done differently (under the covers it is using a field template + the ASP.NET validator)

  4. Forms - Do you know when to use links and when to use buttons?Important Rule

    It seems nearly all web developers are confused whether they should use hyperlinks or buttons on forms. The recommendation is that whenever data is being submitted (e.g. Save, Cancel, Apply) you should use a button, otherwise use a link.

    This is because hyperlinks indicate navigation - "If I click this link, I'll be taken somewhere else".

    Whereas a button indicates that something is being processed - "When I click this, I'm agreeing that something is being submitted"

    Note: If you are using an automated link checker

    It is important you use buttons for updating or deleting data on your website. The main reason is problems will occur when you run a link checker (we run SSW Link Auditor), and you have data driven pages with "Update" or "Delete" hyperlinks. The link checker will try to go to all associated links and potentially delete a lot of data from your website database.

    But you say "My Delete links have JavaScript protection e.g. Are you sure you want to delete?". It is still no good because link checkers ignore all JavaScript validation.

    Thus, we must have:

    • Password protected areas on the website when we can update the database records via the web
    • All update ability must be via buttons, not hyperlinks (as buttons are known on the web to submit a form).

    That being said, there are a couple of exceptions to this rule.

    1. If you want the user to be able to right click and "Open in New Window"
    2. If you want a consistent design feel (and there is no confusion that the link is accepting data)
    Links Example
    Figure: An exception to the rule - an "Update" button inside the datagrid would look inconsistent
    Links Vs Button
    Figure: Bad Example - The "sign in" hyperlink should be a button
    Correct sign in
    Figure: Good Example - This is a perfect example of how a good sign in screen should look
  5. Do you have a call to action on your web pages (aka The Banana Rule)?

    If you want users to take action on the web page content, add a "banana" - something that makes it obvious what the user is supposed to do.

    For example, if your page is selling software, make it easy for your users to make a purchase. People don't have a lot of time to read your entire page and find the right link, so it is important to grab their attention by using a "banana".

    Why do we call it "banana rule"?

    How would you get a monkey pay attention to something? You could lure him by tempting him with a banana. Once we have the monkeys attention focused on the banana, he will try to get his hands on it regardless of the barriers on his way.

    Getting attention of monkey with banana
    Figure: If the monkey can see the banana, he will do whatever it takes to get it

    Here are some examples of how the "banana rule" should be applied:

    Bad use of banana in Qantas.com.au
    Figure: Bad Example – "Points+Pay"button takes the attention over "Go", which should be the "banana"
    Bad use of banana in ssw.com.au
    Figure: Bad Example - Can you see the "banana" here? There is none. The goal is to get someone to try the software by clicking on the "Try It Now" link and it isn't clear
    Good use of banana in amazon.com
    Figure: Good Example - Can you see the banana here on the Amazon page? It is the "Add to Shopping Cart" button
    Good use of banana in ssw.com.au
    Figure: Good Example - Can you see the banana here on the SSW page? It is the "Free Download" button

    So, remember most pages need a "banana" to get them to where you want them. "Bananas" are big, simple and stand out from the rest of the page

    Good use of banana in ssw.com.au
    Figure: Better Example - The banana stands out more and is placed in a more prominent position. It's OK to have two bananas if they take you to the same goal
    Good use of banana in Teamviewer.com
    Figure: Great Example - Team Viewer also has a good banana
  6. Figure - Do you use images to reduce the words?

    An image is worth a thousand words, it's true. So if you can remove text and replace with an image, do so.

    So we need a better way to present an image on our website and it should be easy enough to create a decent look.

    You then have this pretty white flower with a green stem standing on a water pond. It is beautiful.
    Figure: Bad example - Here we have text describing a flower
    Figure: Good example - Here we have a picture (could be a screen capture) which avoids a thousand words

    What else can you do?

  7. definitely

    Figure - Do you add useful and bold figure text (aka a caption) to avoid a lot of text over images?

    When you add an image to a website or application, follow the Microsoft Word standard and use "Figure: Description" to describe your images.

    It's the best way of ensuring you catch users' attention to the content of your page. When you're scanning a newspaper for interesting articles, you'll check out the pictures, read the accompanying description, and if it sounds interesting you'll go back and read the article.

    Users read websites in a similar fashion. Catch their attention with an image, and then keep it with a useful description. Don't just describe what the image is; say what it's used for in the context of the document. Look at these bad and good captions.

    Good Caption
    Figure: Good Example - Some nice useful text describing the image

    It is especially important that images serve a purpose, as opposed to images which are there solely for design.

    Read Screenshots - Do you use balloons instead of a 'Wall of Text'?

  8. Figure - Do you use 'Bad Example' and 'Good Example' with ticks and crosses in captions?

    The best way to emphasize your point is to "build" the pain first and then show the solution. So we use "Bad Example" and "Good Example" in the captions where possible.

    To do this, we give a bad example and raise users' expectation first.

    bad example
    Figure: Bad Example - kid not in his seat

    Now we can show the solution and give a good example as the result, make them feel released.

    good example
    Figure: Good Example - kid in his seat
  9. Figure: Do you use the right HTML/CSS code to add the useful figure/caption?

        <img src="Images/MonkeyWithBanana.gif" alt="Getting attention of monkey with banana" width="381" height="198" />
        <b>Figure: If the monkey can see the banana, will he do whatever it takes to get it?</b>
                        
    Figure: Bad example - because the styling needs to be done here - e.g. adding bold, adding green tick and adding grey border
        <dl class="image">
            <dt>
                <img src="Images/MonkeyWithBanana.gif" alt="Getting attention of monkey with banana" width="381" height="198" />
            </dt>
            <dd>Figure: If the monkey can see the banana, will he do whatever it takes to get it?</dd> 
        </dl>
                        
    Figure: Good example - because the CSS adds the styling - border around the image and makes the text bold (Note: SSW specific)
  10. Do you use the right HTML/CSS code to add a message box?

    Since the dawn of the Internet, user message boxes have troubled developers. Previously, developers only really had a couple of options to inform the user about some information, but now all they need to do is insert the right HTML and the message box will look nice and consistent.

    HTML Message Box
    Figure: Bad example - Javascript alerts looks bad
    HTML Message Box
    Figure: Good example - How a HTML message box should look
  11. Do you always acknowledge your work?

    Why do so many interesting pages have no owner? There are countless articles on the web that have left the reader wondering, "Who wrote this? What is their background?"

    Sometimes, the only available link is a mailto: to email the author, which doesn't say anything about them. Sure, contact info is often a good part of the biography, but it should not be the primary or only piece of data about the author.

    Different article layouts can be:

    • Articles with a column and no authors listed - Very Bad
    • Articles with authors but no link to their biographies - Bad
    • Articles with authors but only a "mailto:" link for direct email - Average
    • Articles with an acknowledgements section and a link to the biographies - Good

    Users often want to know the people behind information. Biographies and photographs of the authors help make the web a less impersonal place and increase trust. Personality and point-of-view always win over anonymity.

    So every web page or document should have an owner and include a link to their biography.

    Look at this example of article acknowledgements.

    Note: "mailto:" links should always have an icon next to them.

  12. Printing - Do you have a print.css file so your web pages are nicely printable?

    People often print web pages. As we know reading from a screen is not nearly as good (yet) as reading from paper. But in general web designers don't think about printing when putting a web site up, meaning we're left with web pages that frustratingly don't properly print on to paper. It works in the same way as a regular stylesheet, except it only gets called up when the page is printed, by setting the command media to be "print", as per below:

    <link rel="stylesheet" href="print.css" type="text/css" media="print" />
    			    

    The print.css file should have 100% width and is used to hide elements that you don't want to appear when printing a web page, such as adverts, background and animated images etc.

    Printing Areas
    Figure: The highlighted areas are set to "display:none" by the print stylesheet
  13. Do you check your website is multi-browser compatible (tested on the main web browsers)?

    Target the most used browsers by default. You should design a website to look good when being viewed in Google Chrome, IE (latest version) and Mozilla Firefox unless the client specifically requests otherwise. There are a lot of other browsers available, but it is important to consider that most other browsers are based on Chrome, IE or Firefox. Pages designed for them should be readable using these other browsers.

    Note that readable is not perfect. There may be some page elements that are less than perfect, but it's just not worth the ammount of time to fix small bugs on every single browser.

    In case of major bugs, these are the most typical things that you will need to fix:

    • JavaScript Menus
    • Dynamic HTML
    • VB Script
    Google Analytics - browsers 2009
    Figure: Different Browsers by Google Analytics showing only 4% for Google Chrome and less than 2% for Safari back in 2009. Things have changed a lot
    Google Analytics - browsers 2013
    Figure: In 2013, Google Analytics shows Google Chrome is the most used browser with 40% of the visits

    See more statistics on browser usage.

    Tip: Use Browserling to test your site on the main browsers in one click.

  14. Do you know to go Beyond Responsive Web Design when targeting mobile devices?

    Responsive Web Design is great. It lets you alter the display of a web page using CSS to better suit screens of different sizes.

    When building websites targeting mobile devices it is only part of the solution however.

    Figure: Watch the clip with Dino Esposito to find out why
  15. Do you design your web pages to work on 1024x768px (not 800x600px)?

    You may be nicely equipped with a 21" monitor running at a resolution of 1920x1440px, but we all know the base resolution we should design for is 800x600px, right? Wrong.

    The majority of our users use monitors with at least 1024x768px resolution, so you should design for that.

    Google Analytics - screen resolutions
    Figure: Screen resolutions on SSW Site by Google Analytics showing only 20% left back on 1024x768px

    Know more by reading our rule onDoes your application's interface fit in a small screen resolution?

  16. Authentication - Do you have a user friendly registration and sign in screen?

    For a web site that expects a lot of first-time visitors, it is wise to put the user registration form on the same page as the sign in dialog. This saves having the user click on another link to enter their details.

    Bad sign in Dialog
    Figure: Bad example - non-friendly sign in screen

    The image is a bad example of a dialog box because:

    • You can easily enter the correct data and click the wrong hyperlink (i.e. Join or sign in)
    • By well-established convention, buttons should be used whenever form data is to be submitted back to the server
    • The "Forgot my Password" link is ambiguous - Does it take me to a new page or do I have to enter the email address field first?
    • A button, not a link, should be used for submitting data, as links don't allow the user to hit "enter"
    Good sign in Screen 1
    Figure: Good example - friendly sign in screen for many new visitors

    For a web site that expects few first-time visitors, this is a good sign in screen, as it is clean and concise:

    Good sign in Screen 2
    Figure: Good example - friendly sign in screen for few new visitors

    Generally, the action buttons should be aligned to the right:

    non-friendly sign in screen with action button aligned to the left
    Figure: Bad example - non-friendly sign in screen with action button aligned to the left
    non-friendly sign in screen with action button aligned to the right
    Figure: Good example - friendly sign in screen with action button aligned to the right
  17. Authentication - Do you use email address instead of user name?

    I do recommend letting users enter their email address instead of a user ID: It's guaranteed to be unique and it is easy to remember.

    Jakob Nielsen, www.useit.com

    It is easier for users to remember their frequently accessed email address more so than one of their many user names. For this reason, it is best to use email address instead of user name for the sign in page.

    Figure: Bad example - users have to remember which user name applies to this particular website
    Figure: Good example - users will always remember their primary email address
  18. Authentication - Do you have a 'Forgot my password' link?

    It's easy and common for users to forget their passwords, the vital key which grants them access to the services they are eligible for. To cater for this instance, it is important to have a 'Forgot my password' link on the sign in page.

    Bad example - no 'forgot password' link
    Figure: Bad example - what will happen for the poor user that forgot his password?
    Good example - 'forgot password' link
    Figure: Good example - users have an option if they forget their password
  19. Authentication - Do you have a 'Remember Me' checkbox?

    It is always good to provide the user with an option to have their username and password remembered. Doing so means they don't have to type them again.

    Remember me checkbox
    Figure: 'Remember Me' checkbox in a Windows App
    Remember me checkbox
    Figure: 'Remember Me' checkbox in a Web Form
  20. Authentication - Do you have a 'Sign me in automatically' check box?

    When you present visitors to your site with an opportunity to sign in, you should always include an option to have that person signed in automatically.

    Sign In Automatically
    Figure: 'Sign me in automatically' checkbox is available

    This should be implemented simply by using a check box. A cookie should be stored on the user's computer so that next time they visit your site the sign in process is automatic.

  21. Authentication - Do you have a 'Logout' short cut?

    Although most of the sites have a 'Log Off' submenu, we recommend adding a short cut next to the user name, this will make the 'log Off' operation more convenient.

    Bad example - only has a 'Log Off'
    Figure: Bad example - Only has a 'Log Off' operation in the submenu
    Good example - has a 'Logout'
    Figure: Good example - Has a 'Logout' short cut next to the user name

    ASP.NET source - part of the header

    ...
    
    <% If (userName <> String.Empty) Then%>
    <div class="loggedin">Logged in as <a href=/ssw/Shop/ClientDetail.aspx><%=userName%></a>
    <strong>(<a href=/ssw/Shop/sign in.aspx?Action=Logout>Logout</a>)</strong> </div>
    <%End If%>
    ...
  22. Do you have a consistent search results screen? (aka the Google Grid)

    Every website out there has a page which displays the results of a search. I am amazed that no standard has been adopted throughout the Web as nearly every site seems to have a different way of displaying data.

    However, Google is a very good example for displaying search results. Their result pages are clear and efficient, especially for a large result set.

    Google result
    Figure: Good example – adopt Google's search result layout

    So adopt Google's search result layout and it will give new and regular users a better navigation experience. Here's our standard layout for our search function.

    Want the 'Google grid'? Then follow these rules to help users to navigate:

    1. Filters at the top (if more than one search parameter,then add a "search" button)
    2. The number of results found + how many seconds the search took to execute
    3. A statement that explains the criteria that you used for searching (or keep the criteria in the text box like google does)
    4. The number of pages found (hyperlinks centered in the middle), and these hyperlinks should be shown on the footer of the page only.
    Result Pages
    Figure: The header of SSW results screen - filter, number of results found, search criteria and time taken
    Result Pages
    Figure: Good example - The footer of SSW product order listing page has the hyperlinks for pages 1 to 10 centered
    Result Pages
    Figure: Google's classic search results

    Examples of pages that follow this rule:

  23. Do you avoid having a horizontal scroll bar?

    One of the most annoying things when you're surfing a site is to have to use a horizontal scroll bar to view all of the information. Not being able to view all the information from left to right of screen, makes the web page harder and slower to read. The Reader should find the web page easy to navigate, to make viewing the website an enjoyable experience.

    Therefore it is bad web design to use a horizontal scroll bar. When designing your site, the page text should respect the user's desire to resize the browser window and have text wrap correctly. Also, you should take into consideration the effect that different screen resolutions will have on how much can fit onto the screen.

    Bad Horizontal Scroll Bar
    Figure: Bad Example - Using pre code tags and having lines exceed screen size
    Good Horizontal Scroll Bar
    Figure: Good Example - Using pre code tags and having lines not exceed screen size
  24. Printing - Do you check for oversized images and table?

    An oversized image or table on your page can greatly reduce your page's readability and disrupt its layout. It can also cause problems in printing, waste natural resources and inflict pain and suffering.

    That's why you should limit all your images and tables to a maximum of 600 pixels wide.

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

    Some have said 600 pixels is too small, if you resized a large image you can't read the text - we think if you have an image that is large, then there must be reasons.

    1. If we are trying to show an overall layout, then it is OK for the text to be too small to see.
    2. If we are trying to show specific details - either a feature or a problem, then it is OK to crop the image so that they fit the size.

    Also, if you are resizing in Photoshop you can easily resize the image and yet put the zoom out on a part that you want the reader to read (combining both options).

  25. Do you know table tags should not specify the width?

    Table should always use its default width unless you really need to specify width, if you do need to specify width, the best place to do so would be in CSS file.

  26. Do you avoid using Flash/Silverlight?

    Public Websites done completely with Flash or Silverlight can be very eye-catching and used in the right spots can achieve way more than you can ever achieve with HTML. But beware because:

    • It does not work on an iPhone or iPad
    • Flash/Silverlight can be slow loading, especially if the visitor is not using a fast Internet connection. If your website doesn't load within 5 seconds, they're gone. (There are techniques to overcome this)
    • It is bad for search engine rankings as there is no content for search engine spiders to crawl through. (There are techniques to overcome this)
    • Navigation via the back button (and Browser History). (There are techniques to overcome this)
    • Accessibility
    • Often seen with busy designs that turn off or distract visitors. Look at the biggest ecommerce sites and you notice that none of them are Flash websites
    • In many cases it unnecessarily creates page bloat
    • You can *almost* get the same effects and functionality using jQuery, but faster and lighter
    • You get an inconsistent UI if you use it for controls such as text boxes
    • Flash and Silverlight do not support CSS, so you need to follow unfamilar concepts for re-skinning

    Finally, and saddest of all, when Flash/Silverlight is used, it is over used.

    Footnote #1: It is clear that Flash has been quite successful - the penetration of its run time is 99% on PCs.

    Footnote #2: Silverlight is catching up and nearing 80%. Microsoft could get near 100% if they included it with Windows Update.

    Footnote #3: All this is now history with iPhone and iPads. The youngsters buying these devices today will be the IT managers of tomorrow. They are not going to approve a technology that does not support something they grew up with.

  27. Do you use DocType in Web Pages while using CSS style sheets?

    If you are using CSS style sheet, by default without DOCType specified Browser will set itself to Quirks Mode, where the browser assumes you are using old fashion style sheet, and the markup may go wrong.

    How to fix?

    You will include a DOCType from W3C (they are a well known web standard provider), as a result IE6 will give a standard mode translation for your HTML and give out correct result. See a tip on W3C Don't forget to add a doctypeLeave Site

    XHTML 1.0 Strict, Transitional, Frameset
    XHTML 1.1 DTD
    Figure: Good Example - Sample DocType

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

  28. Do you include the number of results in drop down list? Redstar

    When designing your web site, it's a good idea to help your users where possible. When you use a combo box, it's very helpful to be able to see at a glance how many results can be expected.

    Combobox 2
    Figure: Bad Example - You can't tell the number of results
    Combobox 1
    Figure: Good Example - The number of results is clearly displayed
  29. Do you use "< Back" instead of "< Previous" or other variations?

    According to http://msdn.microsoft.com/en-us/library/ms816514.aspx, the commands for navigating through a wizard should be "< Back" and "Next >".

    When your site needs a link to iterate backwards through records we recommend that you use "< Back" instead of "< Previous".

    There are a few reasons for this:

    1. This is the standard used in Microsoft Installation files. MSIs are the most widely used installation package available today.
    2. Internet Explorer and several other lesser known browsers use a Back button to iterate back through webpages, so your visitors will automatically know what your "< Back" link does.
    3. It is important to keep a consistency on your pages.

    Below is an example of a Good "< Back" link versus some Bad variations.

    Good
    Figure: A Good example of a "< Back" link
    Bad
    Figure: This is Bad because it says "Previous" instead of "Back"
    Good
    Figure: This is bad because it has too many "<"s or it has no space between the "<" and the "Back"

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

    We have a program called SSW Link Auditor to check for this rule. We offer a rule sample page for demo scan.

  30. Do you use predictive-textboxes instead of normal combo or text boxes?

    When getting users to choose data from a medium-long list, or to enter data that has been predefined (such as Country names), it is a good idea to use a predictive-text combos rather than normal combo or text boxes. A good implementation of predictive-text combos will also perform a type-ahead affect, providing the user with a richer experience.

    Also, predictive textboxes can be used with validation, or without. In instances where you don't mind if users add data to your collection you can turn validation off; however, to keep your collection clean, it is recommended to use validation.

    Incorrect use of data entry tools
    Figure: Bad Example - Using a Textbox and Combo to enter list data
    Good Example of predictive textboxes
    Figure: Good Example - Predictive-Text combo with Type Ahead
    Good Example of predictive textboxes
    Figure: Good Example - Predictive-Text combo with and without validation

    To see this in action try our Predictive-Text Combos demo.

    The predictive-text combo control used in our demo can be found on The Code ProjectLeave Site under the ASP.NET Controls Section listed as ComboBox Control for ASP.NETLeave Site.

    DBCombo.NetLeave Site is another predictive-text box written in .NET that allows users to type in what they are looking for and then provides a Google SuggestLeave Site style drop down showing the matching results.

  31. Can your users easily add an event to their calendar?

    If you have a date for any event appearing on your site, you should make it as easy as possible for the user to add it to their Outlook calendar. This is why we use ICS links for all dates on our site

    Next User Group Meeting:
    Wednesday, 15 February 2006 5:45 PM
    Figure: Bad Example - User cannot add reminder
    Next User Group Meeting:
    Wednesday, 15 February 2006 5:45 PM

    Outlook Calendar Outlook reminder

    Figure: Good Example - Showing use of Calendar icon

    By clicking the calendar icon you can easily add reminder to remind you about particular event out of your busy schedule.

    You have 2 options - VCS and ICS. Both let you add appointments to your calendar. We use ICS because it allows to collaborate information between personal information management programs like Microsoft outlook, Mozilla Calendar, MacOSX etc. over the Internet, independently of differences between program vendors or operating systems, which is not allowed with VCS.

    It is always preferred to use standard icons to give user a proper idea about the file. User can quickly get the idea by just looking at the icon.

  32. Do you have the correct default for a URL field?

    Most developers seem to validate a URL and tell the user what they have done wrong after with a message box like:

    Error message 'Cannot save record'
    Figure: Bad way of using a validation message to tell the user to enter a correct URL

    The better way is to have the user avoid the error with a good default.

    image showing blank textfield
    Bad example - The user has a good chance of entering the URL in the incorrect format
    image showing a textfield pre-populated with 'http://www.'
    Good example - User immediately knows the format expected
  33. Do you know how to effectively use non-standard font on your website?

    In some cases you may need to display text content on your page with a specific font. Unfortunately web browsers don't provide an easy way to deliver rich typography without sacrificing some functionality. Common approaches include:

    1. Display the text as an image
    2. Embed the font to your page
    3. Use third party plug-ins

    Each method mentioned above has their disadvantages. #1 and #3 won't produce accessible content and #2 only works best in older version of IE.

    A group of designers and web developers has developed sIFR, a method of inserting text rendered in typeface of your choice. This works by using a combination of JavaScript, CSS and Flash to produce fully accessible text content whilst maintaining a rich typeface presentation.

    Embed font - bad example
    Figure: Bad Example - Font Embedding doesn't produce the same result in different browsers
    Embed font - good example
    Figure: Good Example - A rich typeface that we can select, copy and paste
  34. Do you provide enough "breathing room" around the text?

    The main objective is to provide enough "breathing room" around the text. This will enable user to easily shift their focus on a specific area of a page. This is quite a common technique in print design but lately made its way to web design as one of many distinguishing “Web 2.0” styles.

    Figure: Bad Example - The textboxes and "grouping" box creates a clustered feel
    Sufficient breathing room
    Figure: Good Example - Sufficient breathing room makes it easier for the user to focus on an a specific area
  35. Do you know it's important to make your fonts different?

    If your styles are going to be different, then make it obvious that they are different. Don't be timid about it! This is a great time to be daring!

    "Different" can mean many things: different font family, different style, different size, different color. But the most important thing is to make it obvious that they are different.

    Partial differences is when people get confused and start asking things like "this looks a bit strange, but I don't know why. Is that intentional?"

    Compare the follow two examples:

    Figure: Bad Example - The heading and body text is very simlar, only 2px font-size difference.
    Figure: Good Example - The heading as been bolded and the content font size decreased to make it more obvious that the two are different styles.

    Picking your fonts carefully applies to all forms of design where text is involved. Unfortunately, deciding what sort of differences look good and what doesn't is extremely subjective and is a skill that gets developed overtime.

  36. Do you avoid having Reset buttons on webforms?

    Why do web pages have Reset buttons? I have been entering forms on the web for more years than I care to remember, but have never needed to click this button. The worst thing is I have accidentally hit it a few times after - I have a habit of doing 3 things at once - it happens just after I have finished entering everything and click the first button.

    The Reset button isn't useful at all
    Figure: The Reset button isn't useful at all

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

    We have a program called SSW Link Auditor to check for this rule. We offer a rule sample page for demo scan.
  37. Do you use icons in web pages to indicate status directly?

    People may not pay attention on some important words in your pages. While adding a simple and clear icon beside the words will make difference. Here are some examples:

    Figure: Icon to indicate an empty shopping cart
    Figure: Icon to warn some functionality may not work
    Figure: Icon of OK

    We have another similar rule for WinForm application - Do you use green tick, red cross and spinning icon to show the status?

    You can get SSW's ticks and crosses here.

  38. Do you use correct symbols for apostrophes?

    "&apos;" is not a valid HTML entity. It is a standard entity in XML and thus in XHTML. Browsers which does not support XHTML, like IE, will have problem to display it correctly.

    In fact, you can use "&#039;" instead of it.

    Source Code: If you can't find what you are looking for in the product documentation
    Display: If you can't find what you are looking for in the product documentation
    Figure: Bad Example - use &apos;
    Source Code: If you can&#039;t find what you are looking for in the product documentation
    Display: If you can't find what you are looking for in the product documentation
    Figure: Good Example - use &#039;
    We have a program called SSW Link Auditor to check for this rule. We offer a rule sample page for demo scan.
  39. How do you get your rule added?

    The style in a website should always be kept consistent, so it's necessary for us to have a "rule" for adding new rules.

    We follow this method to add a rule to our website:

    1. explanation of the problem
    2. sample good code
    3. sample bad code

    When we need to use image to draw attention from user, we also have rules on this:
    Do you use 'Bad Example' and 'Good Example' in captions?
    Do you add images and reduce the words?

    When we need to include code in the rule, we follow our rule as well:
    HTML tags for including source code

  40. Do you set the maximum width for your page?

    The text in a page should fit within the width for increased readability.
    This is done by setting the max-width property in the CSS.

    Figure: Bad Example - The max-width property is not set in the css

    In the above example, the max-width property is not set. So, it takes you beyond the download image

    Figure: Good Example - The max-width property is set in the css

    The max-width property is set in the css so that the download image can be easily seen.

  41. Do downloads show progress and total size?

    When a user downloads a file from your site, do they see a progress bar along with the total size and estimated time, or do they just see the size of the download slowly increasing with no way of knowing when it will finish?

    image showing download with no progress
    Figure: Bad example - there is no indication of the total size of the download or the percent complete, thus no estimate of how long left
    image showing download with progress, size, percent complete, etc
    Figure: Good example - percent complete, time left, total size and a progress bar are all shown

    The change in code to achieve this can be as little as one line of code:

    Response.AddHeader("Content-Length", file.Length.ToString())

    A full code example can be found here: http://www.xefteri.com/articles/show.cfm?id=8.

  42. Good Forms: Do you click a label and have the focus set to the field by using <label>?

    When adding input boxes to collect data, please always have a <label> tag associated with your <input> tag to link the labels with their respective edit controls. This improves accessibility and gives nice focusing stuff (when you click the label).

    <p>
        <label for="EmailAddress">Email Address</label>
        <input id="EmailAddress" type="text"/>
    </p>

    Tip: To do this in ASP.NET use the AssociatedControlID parameter on your <asp:Label /> controls.

    <p>
        <asp:Label ID="EmailLabel" runat="server" Text="Email Address" AssociatedControlID="EmailAddress"/>
        <asp:TextBox ID="EmailAddress" runat="server"/>
    </p>
  43. Forms - Do you provide field hints?

    Please provide a hints column so users know what the purpose of the data is. Don't worry if this means one column of fields with a long page. This is ok in the Web 2.0 world!

    field hints
    Figure: Field Hints
  44. Forms - Do you provide red errors next to the field?

    Too often error messages are a summary at the top or the bottom of the page. Instead please provide an error message per validation error, next to the field (and in red!).

    provide red errors next to the field
    Figure: Provide red errors next to the field
  45. Forms - Do you provide grouping using <fieldset>?

    FieldSet element allows you to group thematically related controls and labels. Grouping controls makes forms more accessible and easier for users to understand the purpose of filling the forms. See example below using "Your Details" and "Event Details".

    provide red errors next to the field
    Figure: Use FieldSet for grouping

    Here's an example of code.

    <fieldset>
        <legend>Your Details</legend>
        <p>
            <label for="FirstName">First Name: </label>
            <input id="FirstName" type="text" /><br />
            <label for="LastName">Last Name: </label>
            <input id="LastName" type="text" /><br />
            <label for="EmailAddress">Email Address: </label>
            <input id="EmailAddress" type="text" />
        </p>
    </fieldset>
    Figure: example code of fieldset

    And what the code produces is

    Figure: View of the example code
    Figure: View of the example code

    Things to remember:

    1. Wrap logical control groups in a <fieldset>.
    2. The first child of a <fieldset> must always be a <legend>.
    3. You can hide the legend using CSS if you want ( legend { display: none; } ). E.g., it's hidden in the figure 'Use FieldSet for grouping' and a heading is shown instead.
  46. Search Results - Do you always give more information under “Did not match anything”?

    When you ring up a company and ask “do you sell boxes?” it is not not expected to hear them say “no” and hang up.

    They should answer the question and suggestion something (E.g. No, but we sell plastic containers, would you like that instead?”)

    Websites are continually saying “404 – page not found” or “you search did not match anything”..... this should be avoided.

    Amazon site will give you other choices when no matched results
    Figure: Good Example – If you don’t match anything on Amazon, it gives you some other choices to click on.
  47. Do you keep the same height / width ratio as the original image?

    In img tag of HTML, there are 2 attributes - height and width. If the height / width ratio doesn't match that of original image, the image will be stretched.

    Stretched image which looks ugly
    Figure: Bad example - Stretched image which looks ugly

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

  48. Do you know not to use bold or strong tags inside Headings?

    You should avoid any extra bold tag in your heading text because is unnecessary.

  49. Do you know not to use Times New Roman font in your site?

    You should avoid using Times New Roman font to improve the readability of your pages instead use Verdana or Arial fonts

  50. Do your page names use dashes between words or Title Case?

    The text of a URL should make sense and relate to the content of the relevant page. Apart from helping with Google Juice users frequently read URL's.

    There are a few options for how you format the text of a URL. The following suggestions are in preference order:

    1. Capitalize each word (Title Case): RulesToBetterWebsiteLayouts.aspx
    2. Dashes between words: rules-to-better-website-layouts.aspx - This option appears to be most common and Craig Bailey's preferred way, but I'm always typing directly into the address bar of IE and it's unnatural to type "-"'s
    3. Upper case for appropriate words: RulestoBetterWebsiteLayouts.aspx
    4. Underscores between words: rules_to_better_website_layouts.aspx
    5. Lower case for all words: rulestobetterwebsitelayouts.aspx
  51. Do you use IE Web Slices to give website users regular updates?

    Microsoft has a great feature in Internet Explorer called Web Slices which allow users to take segments from a website and subscribe to updates from them.
    Here's an example screenshot from the calendar on our home page:

    Web Slices

    You can read more about web slices and how to implement them in Microsoft's official guide on the subject.

  52. Do you know what format your content should be in? (Docs or Web pages)

    When considering the format:

    • 99% of external content should be HTML, forms are a PDF exception
    • for knowledge workers, someone like matt wants to create the content, copy and paste images into word is miles better than using a web interface
    • creating standard pages in a wiki or a page is the same in SharePoint 2010, all pages are wiki pages
    • even a Microsoft whitepaper should be in HTML, with an option to download a PDF

    You could create a Word document and save it as HTML, but can you re-edit in Word and re-publish? Not really and the HTML output from Word is notoriously difficult to edit in the future.

    SharePoint word document
    Figure: For your SharePoint intranet, use word documents. The reason it is faster than doing web pages.
    Public site using html
    Figure: For your public site, avoid .docs and .pdfs. Use HTML web pages
  53. Do you know to use friendly URL's where you can?

    You can install the IIS URL Rewrite Module for IIS7 you can make ugly URL's much more friendly.

    Rewrite the HTML
    Figure: Rewrite both the HTML in the page and the incoming URL's to be friendly

    The caveat here is that it will only work if the URL is in the clear on the page.
    Note: This could only be done with certain links as others are postbacks as well.



Acknowledgements

Adam Cogan
Tristan Kurniawan


Benefit from our knowledge and experience!

SSW is the industry leader in Custom Software Development, Software Auditing & Developer Training.

Call us on +61 2 9953 3000 or email us for a free consultation

What does it cost? I’m not in Australia. Can you still help?