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

For more updated rules go to Rules to Better Websites - Layout And Formatting on rules.ssw.com.au. All these rules will be moved there soon.

  1. 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
  2. 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
  3. 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.

  4. 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.
  5. 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.

  6. Do you use correct symbols for apostrophes?

    "'" 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 "'" 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 '
    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: Good Example - use '
    We have a program called SSW Link Auditor to check for this rule. We offer a rule sample page for demo scan.
  7. 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

  8. 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.

  9. 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.

  10. 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>
  11. 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
  12. 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
  13. 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
  14. 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.
  15. 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.
  16. 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.

  17. 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.

  18. 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

  19. 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
  20. 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.

  21. 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
  22. 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?