Home / Websites / Rules to Better Websites - Layout And Formatting

Rules to Better Websites - Layout And Formatting

Hold on a second! How would you like to view this content?
Just the title! A brief blurb! Gimme everything!
  1. 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.
    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.

  2. How to use SSW style in RadHtmlControl?

    Do you know how to apply style to image, figure..etc?

    Let's take the "AvoidReplyToAllWhenBcc" page as example.

    First, the reason to cause the style issue is the style doesn’t apply to right place. Below is the html code after you adjust the figure manually (sorry, still not right ). Please look at the highlight part, 
    • the “ms-rteCustom-ImageArea” style doesn’t apply to <img> tag, but wrapped by <span> with “ms-rteCustom-ImageArea” style;  
    • there is no style apply to figure;

    <span class="ms-rteCustom-YellowBorderBox">We have a program called <a href="http://rules.ssw.com.au/WebSites/RulesToBetterWebsitesLayout">
            SSW LookOut! for Outlook</a> to check for this rule.
            <br />
            <br />
           <span class="ms-rteCustom-ImageArea">
                <img style="border-bottom: 0px solid; border-left: 0px solid; border-top: 0px solid;
                    border-right: 0px solid;" border="0" alt="Lookout Reply All BCC Warning" src="http://rules.ssw.com.au/WebSites/RulesToBetterWebsitesLayout" />
                <br />
           </span><b>
                <br />
                Figure: SSW LookOut! for Outlook warns you if you accidentally 'Reply All' when
                you have been BCC'ed  </b> </span>

    1.  Not sure how user inputs the  content into this page. Anyway, here is the right way to add content via Telerik Editor. Please read below example of how I redo this part in Telerik Editor without changing the code manually
    Copy content in notepad
    Figure:Copy content in the notepad2. Delete the current content from Telerik for a new start;

    3. Copy the first sentence from notepad and paste into Telerik Editor in the page; (please avoid copying straightly from web page and pasting them here, it will copy the all tags as well. it might affect the styles which can’t apply correctly )
    Start copying content over
    Figure: Start copying content over4. Insert the image
    Insert an image
    Figure: Add a link to text5. Add an image
    Insert an image
    Figure: Inser an image6. Press “enter” key to start a new row, then copy the figure from notepad to the Telerik editor area
    Add figure
    Figure: Add figure7. Apply image style to the image by click on the image, then choose a style from “Apply CSS Class” dropdown list
    Apply style to the image
    Figure: Apply style to the image

    8. Apply style to the figure
    Apply style to the image
    Figure: Apply style to the figure9.Apply the yellow box
    Apply style to the figure
    Figure: Apply yellow border box to the content10. Check in the changes, then you will have - "dada.."
    Right stlye in use
    Figure: Right style in use

  3. Do you make sure that all your tags are well formed ?

    Do you know how to form HTML/XML tags on webpages?
    We need to make sure that all HTML/XML tags which open once, must be closed properly.

    <div>
    <p>Hello HTML</p>
    </div>
    Figure: Good Example

    <breakfast_menu>
    <food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>two eggs</description>
    <calories>950</calories>
    </food>
    </breakfast_menu>
    Figure: Good Example
    <div>
    <p>Hello HTML  
    </div>
    Figure: Bad Example
    <breakfast_menu>
    <food>
    <name>Homestyle Breakfast
    <price>$6.95
    <description>two eggs
    <calories>950
    </food>
    </breakfast_menu>
    Figure: Bad Example
  4. HTML/CSS - Do you know how to create spaces in a web page?

    There are many scenarios where you need some extra space in a web page. No matter which one you are at, CSS is the answer.

    Sometimes the first thing that comes to the developer mind is to use the "break line" tag (<br />) or the ASCII character code for "space" (&#160;) to create these extra spaces. It's wrong. CSS is the way to go. You can use both "margin" or "padding" CSS properties to get the result you want.

    <ul>
    <li>&#160;&#160;&#160;List item</li>
    </ul>
    Figure: Bad Example - Using the "space" ASCII character to create a padding on that list
    <ul>
    <li>List item</li>
    </ul>
    <br />
    <br />
    <br />
    Figure: Bad Example - Using the <br /> tag to create a space at the bottom of that list
    ul {margin-bottom:15px;}
    ul li {padding-left:10px;}
    Figure: Good Example - Using CSS to add a margin at the bottom of the list a the padding on the left side of each list item

    Tip: You might be not familiar with editing a CSS file. In this case, contact a designer. He/She will be more than happy to help you.

  5. Do you know how to use named anchor links?

    The attribute "name" allows you to link to specific places within the page, via the <a> tag.

    This is especially useful in long pages that can be separated into sections. You can create a named anchor in each of these section headings to provide "jump-to" functionality. In other words, you can have a different URL for each piece of content on the same page.

    <h2><a name="get-started"></a>Get Started</h2> Figure: This is how you add an anchor name to an specific section of your page. Note it doesn't have the hash mark and the anchor tag is empty

    You now have a custom URL that points to the specific section of the page. It is the page URL followed by the hash mark and the name you chose:

    http://www.yourpage.com#get-started Figure: This is how your custom URL will look like

    You can use this new URL to point users to that specific section of your page.

    To create a link to your anchor named section inside the same page, simply add a new "href" anchor tag - now with a hash mark followed by the name you chose:

    <a href="#get-started">Go to Get Started section</a> Figure: This is how you add a *link* to that anchor name you created inside the same page. Remember to add the hash mark

    Tip #1: Use the hash mark only to go to the top of a page. 
    E.g. <a href="#">&Go to top</a>

    Tip #2: Some browsers consider capitalization for anchor names (E.g. Firefox). Always check your links and anchor names are identical, matching the capitalization.

  6. Do you know FONT tags are no longer used?

    The <font> tag is supported in all major browsers, however it is deprecated since HTML 4. Read more at w3schools.com.

    <font>Some text</font>
    Figure: Bad Example - Using deprecated HTML tag
    <span>Some text</span>
    <p>Some text</p>
    Figure: Good Example - Using <p> or <span> for texts

    Tip: Use CSS to define the font, size, and color of text.

    We have the programs SSW Code Auditor and SSW Link Auditor to check for this rule.

  7. Do you use spelling and grammar checker to make your web content professional?

    Spelling errors give a bad impression, whether you are reading a website or an email. Some common spelling errors are very easy to avoid. Use Microsoft Word Spelling & Grammar Checker to prevent future mistakes.

    These are some examples of common spelling mistakes that you can fix:

    • thankyou -> thank you
    • recieve -> receive
    • paremeter -> parameter
    • definate -> definite
    • seperate -> separate
  8. Do you use "list" tags for lists only?

    The HTML list tags <ul> and <ol> should be used for unordered and ordered lists only.

    Tip: If your list tag (<ul> or <ol>) doesn't have a list item (<li>) inside it, then it's not a list. Consider using another HTML tag (E.g. <p>).

    <ul> A normal text </ul>
    Figure: Bad Example - Using the <ul> for a text

    ><li>A list item</li></ul>

    <ol><li>A list item</li></ol>

    Figure: Good Example - Using the <ul> and <ol> for lists
  9. 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.

    Figure: Bad example - what will happen for the poor user that forgot his password?
    Figure: Good example - users have an option if they forget their password​
  10. Authentication - Do you have a 'Logout' short cut next to the user name ?

    ​ Although most of the sites have a 'Log o​ff' 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
    ​​
  11. 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 Web Form
  12. Authentication - Do you have a 'Sign me in automatically' checkbox?

    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: 'S​tay signed in' 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.

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

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

  14. Authentication - Do you use email address instead of user name?

    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.

    "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, Ph.D. and Principal at Nielsen Norman Group

    Figure: Bad example - users have to remember which username applies to this particular website
    Figure: Good example - users will always remember their primary email address​
  15. 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 author’s email, 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 with more information about the author​.

  16. 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
  17. 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 normally ​over used.

    Footnote #1: It is clear that Flash has been quite successful in the past - the penetration of its run time is 99% on PCs, however because of the fact iPhone and iPad dont run it and the growth of HTML 5, Flash is now considered an old technology. 

    Footnote #2: The development of Silverlight has been discontinued as ​of 2012 due to the poor acceptance of Silverlight and restrictions Microsoft imposed on its utility. 

  18. Do you check your website is multi-browser compatible?

    You should design a website to look good when being viewed in the latest version of Internet Explorer, Mozilla Firefox and Google Chrome 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 IE or Mozilla and Chrome is the most used browser nowadays. 

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

    You must test your website on these three major browsers, though, because that there will be more differences and problems than you would think. The typical things that you will need to fix are:

    • Menus 
    • Dynamic HTML 
    • VB Script

    You should be able to fix all formatting and layout bugs editing the CSS file.

    browser-usage.jpg
    Figure: Browsers statistics in 2014 – Know​ more in W3C Browser Stats​
  19. Do you design your web pages to work on mobile/tablets screens (AKA Responsive web design)?

    You may be nicely equipped with a 21" monitor running at a resolution of 1920x1440px at work, but in a business travel or meeting people will only have their mobile phone or tablet.

    Your website should work nicely on screens that vary from a mobile/tablet to a large PC monitor.

    Responsive Design
    Figure: Good example - A modern website adapts to different screens

    Know more at Responsive Web Design: What It Is and How To Use It.

    Go beyond responsive design

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

    This is 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"
    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 Teamviewer.com
    Figure: Great Example - Team Viewer also has a good banana
  21. 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
  22. Do you help the user to enter a URL field?

    Most developers seem to validate a URL and tell the user what they have done wrong only after the error happens. URL fields should show how the users must enter it.

    Error message 'Cannot save record'
    Figure: Bad example - U​sing 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
    Figure: 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.'
    Figure: Good example - User immediately knows the format expected
  23. Do you include the number of results in drop down list?

    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
  24. Do you know how to arrange forms?

    There are two ways of arranging labels and inputs on an html form, but each should be used in a specific scenario.​

    When arranging labels and inputs on your html form, align labels next to the inputs on medium and large displays. ​

    Figure: Labels besides their respective inputs on regular displays

    When arranging labels and inputs on your html form, align labels above inputs on small and extra-small displays.

    Figure: Labels above their respective input on smaller displays

    Bootstrap makes this easy. Read Do you use the css class "form horizontal" to arrange your fields and labels? to know more.

    ​​
  25. 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. sIFR
    3. Font stacking​
    4. Google Fonts​​​
    5. Self-hosting​
    6. Webfont services

    ​​Each method mentioned above has their disadvantages. We discourage #1 - Images are bad for Google juice and cannot be selected;​ and #2 - sFIR uses old technology based on nearly dead Flash.

    For more information on the differences between the other methods read: The best way to serve fonts to your website.


  26. 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, and​ different color. But the most important thing is to make it obvious that they are different.

    Partial differences make 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.

  27. Do you know not to use bold ( or ) tags inside headings?

    You should avoid any extra tag in your heading text, because is unnecessary. You can ​do all the styling via CSS.
  28. Do you know table tags should not specify the width?

    The table tag selector “width” is considered an inline styling, which should be avoided. In the cases you really need to specify the table width you should do it via the ​CSS file. 

  29. Do you make it easy to your users to 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 ​
    Add 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 collaborating ​information between personal information management programs like Microsoft Outlook, Mozilla Calendar, Mac OS 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.​

  30. Do you not have height/width in an tag?

    The <img> tag of HTML has 2 attributes - height and width - but any image resizing should ​be done via CSS. 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 caused by inline​ height/width ratio that doesn't match

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

  31. Do you show the progress and the total file size on downloads?

    When a user downloads a file from your site, they should see a progress bar along with the total size and estimated time, this way they will see the size of the download increasing and will 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
  32. Do you use "< Back" instead of "< Previous" or other variations?

    According to http://msdn.microsoft.com/en-us/library/ms997609.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.
  33. Do you use DOCTYPE without any reference?

    Since HTML5, DOCTYPE no longer requires a reference to a DTD. Back in HTML 4.01, The DTD links were used in to specify the rules for the markup language (Transitional, Strict, Frameset etc) so that the browsers render the content correctly. It’s no longer necessary.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Figure: Bad Example – XXX

    <!DOCTYPE html>

    Figure: Good Example – XXX

    For more information, go to HTML !DOCTYPE Declaration on w3schools.com​​

  34. Do you use Hyperlinks instead of JavaScript to open pages?

    If possible you should always use hyperlinks to open new pages on your site instead of using JavaScript.

    ​There are two good reasons for avoiding JavaScript-powered links:

    1. Copying and pasting sections of the site to an email or a document will maintain the clickable links
    2. There's an (ever-decreasing) chance a user won't have JavaScript enabled and won't be able to click the link

    <div onclick="window.open('mynewpage.html');">Open a new page</div>​

    Figure: Bad Example - This link can't be clicked on if you paste it into an email​ or if JavaScript is off

    <a href="mynewpage.html">Open a new page</a>

    Figure: Good Example - This link can still be clicked on when pasted and when JavaScript is turned off​
  35. Do you use icons in web pages to enforce the text meaning?

    ​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

    Related Rule​

    There is a​ similar rule for WinForm application - Do you use green tick, red cross and spinning icon to show the status?

  36. 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 Project under the ASP.NET Controls Section listed as ComboBox Control for ASP.NET.

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

  37. Do your page URL’s use dashes between words?

    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. Dashes between words: rules-to-better-website-layouts.aspx - This option appears to be most common and Craig Bailey​'s  preferred way
    2. ​Capitalize each word (Title Case): RulesToBetterWebsiteLayouts.aspx
    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

    More info​

    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.

  38. Figures - Do you add useful and concise 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'?

  39. Figures - 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
  40. Figures - 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
    flower
    Figure: Good example - Here we have a picture (could be a screen capture) which avoids a thousand words

    What else can you do?

  41. Figures - Do you use the right HTML/CSS code to add the useful figure/caption?

    Most developers (even WordPress) put the image and the caption in a DIV tag. The figure is just a paragraph.
    <div>
    <img alt=""/>
    <p>Figure: Caption</p>
    </div>
    
    Figure: Bad Example

    Instead, use a figure under the image, using a DL. A DL is a HTML tag that stands for ‘Definition List’. It contains a DT which is the item in the list – in our case an image. A DD (the description of the item). This structure gives the image and the figure, semantic meaning.

    <dl>
    <dt><img alt=""/></dt>
    <dd>Figure: Caption</dd>
    </dl>
    
    Figure: Good Example​ ​​
  42. Forms - Do you indicate which fields are required and validate them?

    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).​

  43. Forms - Do you know when to use links and when to use buttons?

    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
  44. 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 affects page loading and can also cause problems in printing, wasting natural resources.

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

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

    Some have said 800 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).

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

    As we know portable devices like tablets and mobile phones are being more and more used as reading devices, however printing web pages is still often necessary. 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.

    ​​A print.css file 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 advertising, background, menus, animations etc.
  46. Search Results - Do you always give more information when searching don’t find anything?

    When you ring up a company and ask “do you sell boxes?” it is not expected to hear them say “no” and hang up. They should answer the question and suggestion something, for example: “No, but we sell plastic containers, would you like that instead?” ​

    Websites should do the same by giving more information instead of just say “404 – page not found” or “your search did not match anything”. It can be a simple “Try one of these instead” giving a number of links. ​

    Figure: Good example - If you don’t match anything on Amazon, it gives you some other choices to click on
  47. 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.

  48. 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
    ​​