What does a web page typically contain that is the formatting instructions for displaying Web pages?

Web Design & Development I

Índice Show

DOCTYPE: Defining your version of HTML
Document Structure
Content (Container) Tags
HTML5 Semantic Tags
Empty (Non-Container) Tags
Tip #1 - Use prefixes
Tip #2 - Give bad and good examples
Tip #3 - Bold your captions
Tip #4 - Describe the actions in your captions
Tip #5 - Add titles for videos
The old way
Go beyond responsive design
Do you avoid a username enumeration attack?
Setting up Gravatar in your application
Videos are also good for SEO

Version 2.0

Student Version

The following are some facts about HTML tags (plus a few facts about XHTML tags too):

Web pages are just plain text. You can view or edit the source code using any text editor.
"Tags" provide web browsers with instructions about the web page, such as where to display images, and how the document is structured.
Tags are always enclosed in angle brackets: < >.
Tags are comprised of elements and attributes. An element is an object on a page (such as a heading, paragraph, or image), and attributes are qualities that describe that element (such as width and height).
Tags usually travel in pairs. An opening tag begins a section of page content, and a closing tag ends it. For example, to markup a section of text as a paragraph, you would open the paragraph with an opening paragraph tag <p> and close it with a closing paragraph tag </p> (closing tags always proceed the element with a /).
A few tags are called non-container tags, because they don't contain any content - they stand alone. Examples are images and line breaks. XHTML is more strict than HTML, and requires that all open tags must be closed, even if they're not container tags. Therefore, non-container tags end in />. For example, the tag for a line break is <br />. HTML does not have this same requirement, but it's a good habit to get into in case you ever need to code in XHTML.
Tags in HTML are not case sensitive, but in XHTML all tags must be in lower case. Even when coding in HTML, you should get in the habit of writing tags in lower case.
White space is ignored by web browsers. So, if you hit the space bar multiple times within a document, only one of those spaces will actually be displayed by the browser.
Tags can be nested. For example:
<div><p>This paragraph is nested inside a division</p></div>
Note that the order of nested tags is important: The container tags surrounding any content should be symmetrical.

DOCTYPE: Defining your version of HTML

Every web page must start with a DOCTYPE declaration. It has to be the very first item on the very first line of your HTML or XHTML code. This tells browsers what version of HTML the web page was coded in, which helps them to know how to process the code. Prior to HTML5, DOCTYPE declarations were long and complex. For example, here's the DOCTYPE declaration for XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

In HTML5, the DOCTYPE declaration is much simpler:

<!DOCTYPE html>

Common HTML tags are presented below, organized into four tables based on their purpose. The first table includes tags that control the overall structure of the web page. The second and third tables include tags that mark up the majority of web page content. Container tags (those that contain content) are presented in the second table, and non-container tags (those that stand alone) are presented in the third table. The final table contains tags that are used in markup of HTML tables, which are covered in Module 5 of this unit.

Document Structure

Opening Tag	Closing Tag	Description
<html>	</html>	Opens and closes an HTML document
<head>	</head>	The first of two main sections of an HTML document. The <head> section is used to provide information about the document for use primarily by search engines and browsers.
<title>	</title>	The title of document. This element is nested inside the <head> section. In HTML5, this is the only required tag other than the DOCTYPE declaration.
<body>	</body>	The second of two main sections of an HTML document. The <body> section contains all the content of the web page.

Content (Container) Tags

Opening Tag	Closing Tag	Description
<h1> to <h6>	</h1>to</h6>	Headings. H1 is the main heading, H2 is secondary, etc.
<p>	</p>	Paragraph
<div>	</div>	A container for a block of content
<span>	</span>	A container for in-line content, such as content inside a paragraph.
<em>	</em>	Gives the contained text emphasis (usually as italics).
<strong>	</strong>	Makes the contained text bold.
<a href = "document location">	</a>	Link
<ol>	</ol>	Ordered (numbered) list
<ul>	</ul>	Unordered (bulleted) list
<li>	</li>	List item, must be nested inside a list element such as a <ol> or <ul>
<!--	-->	Comment. Anything between these tags is not displayed on the screen. This is useful for making notes to yourself or to others who may view the source code of the web page.

HTML5 Semantic Tags

HTML5 introduced several new tags called semantic tags. These tags were designed to communicate the function of blocks of content that were common on many web pages. Prior to HTML5, developers just used <div> tags for all blocks.

Opening Tag	Closing Tag	Description
<header>	</header>	Contains introductory content for a page (e.g., a banner), or a section of a page.
<nav>	</nav>	Contains navigation content, such as a website navigation menu.
<main>	</main>	Contains the main content of the web page.
<aside>	</aside>	Contains content that is tangentially related to the main content of the page (often this is presented in a sidebar).
<footer>	</footer>	Contains the footer of a page, or of a section of a page. Typically the footer contains information about the content, such as the author and a copyright statement.

Empty (Non-Container) Tags

Tables

Opening Tag	Closing Tag	Sample Attributes	Description
<table>	</table>		Adds a table
<tr>	</tr>		Table row (start & end).
<th>	</th>	scope="row" scope="col"	When creating a table to display data, use this tag to differentiate the first row or column of cells as heading cells for all the other cells in the same column or row. Browsers typically display this element bold and centered within the table cell. The scope attribute defines whether this is a row header or column header.
<td>	</td>		Table data cell.
		colspan="number"	Use with <th> or <td> elements. Spans cells across multiple columns.
		rowspan="number"	Use with <th> or <td> elements. Spans cells across multiple rows.

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.

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:

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

Figure: Great Example - Team Viewer also has a good banana

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

Read more

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.

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.

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

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

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.

Read more

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"

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)
Figure: An exception to the rule - an "Update" button inside the datagrid would look inconsistent
Figure: Bad Example - The "sign in" hyperlink should be a button

Figure: Good Example - This is a perfect example of how a good sign in screen should look
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"

Read more

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.

Read more

When you add an image to a website or application, it is so useful to add a figure underneath it to describe your image.

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.

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

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

Tip #1 - Use prefixes

Prefix your caption with "Figure: ", "Video: ", or "Code: " for example.

Tip #2 - Give bad and good examples

When possible, use "bad" and "good" examples to clearly explain Dos and don'ts. At SSW we always show the bad example first, then the good example. You will see samples of this in the next tips below.

Tip #3 - Bold your captions

Figure: Caption not bolded

Figure: Caption is bolded

Tip #4 - Describe the actions in your captions

Especially for screenshots, it is a good idea to have your figure describe the action the user would take:

[image]
Figure: This is the screen

Figure: Bad example - Vague caption description

[image]
Figure: On the screen, choose the execution method

Figure: Good example - Clear caption description

Tip #5 - Add titles for videos

When embedding videos from others, include the video title as the caption. This helps:
- Giving a brief text explanation of the video
- Getting some extra Google Juice
- Serving as a reminder in case that video ever gets removed by its owner
If you have them, prefix with "Video: [Title] " instead of "Figure: ".

[video]
Figure: In this video, Gary talks about how to search on Outlook

Figure: Bad example - Using "Figure:" for a video caption

[video]
Video: How to search on Outlook by Gary

Figure: Good example - Using "Video: [Title]" for a video caption
When you add an image to a website or application, it is so useful to add a figure underneath it to describe your image.

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.

Read more

The best way to emphasize your point is to show the pain first, and then the solution. Use "Bad example" and "Good example" with crosses and ticks, respectively, in the captions.

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

Figure: Bad example - Kid not in his seat

Then show the solution by giving a good example as the result, making them feel released.

Figure: Good example - Kid in his seat

The best way to emphasize your point is to show the pain first, and then the solution. Use "Bad example" and "Good example" with crosses and ticks, respectively, in the captions.

Read more

Most developers put the image and the caption in a DIV tag, where the figure is just a paragraph - this is not correct.
<div> <img alt=""> <p>Figure: Caption</p> </div>
Instead, you should use <figure> and <figcaption> as per https://www.w3schools.com/TAGS/tag_figcaption.asp. This structure gives semantic meaning to the image and figure:
<figure> <img src="image.jpg" alt="image"></img src="image.jpg" alt="image"> <figcaption>Figure: Caption</figcaption> </figure>
The old way

For some internal sites, we still use the old way to place images: Using <dl> , <dt> (which is the item in the list – in our case an image), and <dd> for a caption.
<dl class="badImage"> OR <dl class="goodImage"> <dt><img src="image.jpg" alt="Image"></dt> <dd>Figure: Caption</dd> </dl>
Figure: Old way example

Most developers put the image and the caption in a DIV tag, where the figure is just a paragraph - this is not correct.

Read more

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

Read more

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.

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.

Read more

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 800 pixels wide.

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

Read more

You may be nicely equipped with a 4k monitor at work, but many people will access your content via their mobile phone or tablet.

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

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

Google has a web tool to test how mobile-friendly your site is.

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

You may be nicely equipped with a 4k monitor at work, but many people will access your content via their mobile phone or tablet.

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

Read more

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.

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"
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:

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

Note: Generally, the action buttons should be aligned to the right.
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.

Read more

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

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.

Read more

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

Figure: Good example - users can enter their email to get a new password

Do you avoid a username enumeration attack?

This practice also opens up the risk of "username enumeration" where an entire collection of usernames or email addresses can be validated for existence on the website simply by batching requests and looking at the responses. You can read more on Troy Hunt's blog post. You should always aim to not disclose if a user is registered with your site or not.

Figure: Bad example - Displaying information that a user does not exist?

Good example - You should always aim to not disclose if a user is registered with your site or not

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.

Read more

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.

Figure: 'Remember me' checkbox in a Web Form

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.

Read more

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.

Figure: 'Stay signed in' checkbox is available

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

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.

Read more

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.

Figure: Bad example - Only has a 'Log Off' operation in the submenu

Figure: Good example - Has a 'Logout' short cut next to the user name

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.

Read more

Every website out there has a page that 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.

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.
Figure: The header of SSW results screen - filter, number of results found, search criteria and time taken

Figure: Good example - The footer of SSW product order listing page has the hyperlinks for pages 1 to 10 centered

Figure: Google's classic search results
Every website out there has a page that 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.

Read more

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.

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.

Read more

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 don’t 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.
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:

Read more

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" "https://www.w3.org/TR/html4/strict.dtd">
Figure: Bad example – Old reference in DOCTYPE
<!DOCTYPE html>
Figure: Good example – HTML 5 DOCTYPE declaration

For more information, see HTML !DOCTYPE Declaration on w3schools.com.

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.

Read more

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.

Figure: Bad Example - You can't tell the number of results

Figure: Good Example - The number of results is clearly displayed

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.

Read more

According to Design Specifications and Guidelines - User Assistance, the commands for navigating through a wizard should be "< Back" and "Next >".

When your site needs a link to iterate backward 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 consistency on your pages.
Below is an example of a Good "< Back" link versus some Bad variations.

Figure: This is Bad because it says "Previous" instead of "Back"

Figure: This is bad because it has too many "<"s or it has no space between the "<" and the "Back"

Figure: A Good example of a "< Back" link
Read more

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 combo rather than a normal combo or text boxes. A good implementation of predictive-text combos will also perform a type-ahead effect, providing the user with a richer experience.

Also, predictive text boxes 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.

Figure: Bad Example - Using a Textbox and Combo to enter list data

Figure: Good Example - Predictive-Text combo with Type Ahead

Figure: Good Example - Predictive-Text combo with and without validation

Figure: Best Example - Google search

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 combo rather than a normal combo or text boxes. A good implementation of predictive-text combos will also perform a type-ahead effect, providing the user with a richer experience.

Read more

HTML5 introduced a whole slew of new type properties for forms. Gone are the days of just using type="text" for every field in a form (barring buttons and checkboxes).

Although most of these don't do anything on desktop, on mobile devices they bring up the correct keyboard. As we move into a more mobile digital age, small things like the proper numerical keyboard or a keyboard with a quick ".com" becomes increasingly important.

<label for="phone">Phone</label>: <input type="text" name="phone"></input>

Figure: Bad Example – This field is using a text type and shows a standard keyboard on mobile

<label for="phone">Phone</label>: <input type="tel" name="phone"></input>

Figure: Good Example – This field is using the correct field type and shows the keypad on mobile

Here is a table of some useful input types and what they do:

Type	What
Color	This is a color picker. This is not supported on mobile or in all browsers.
Date	This brings up the date picker on mobile
Datetime-local	This brings up a date-time picker on mobile
Email	This adds ".com" and "@" to the keyboard on mobile
File	Use then when you want a button to upload files. This will also allow users to upload from their mobile device’s photo library.
Month	This brings up a month and year picker on mobile
Number	This displays as a number selector on desktop and can be set with upper and lower limits. However, it does not work on mobile yet.
Password	This masks the characters and should be used for any privacy sensitive information
Range	This will show a slider control and works on mobile
Search	This should be used to define search fields
Tel	This brings up the number pad on mobile
Time	This brings up the time picker on mobile
URL	This adds ".com" to the keyboard on mobile

The <font> tag is supported in all major browsers, however it is deprecated since HTML 4... so it should not be used. Learn more at w3schools.com.

Figure: Bad example - Using deprecated HTML <font> tag

<p>My brother has <span style="color:blue">blue</span> eyes.</p>

Figure: Good example - Using <p> for texts and <span> for texts' variations

Tip: The best practice is to CSS classes to define the font family, size, and color.

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

The <font> tag is supported in all major browsers, however it is deprecated since HTML 4... so it should not be used. Learn more at w3schools.com.

Read more

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.
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
Read more

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.

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?"

Read more

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.

More detailed information about this rule can be found in this article: Reset and Cancel Buttons.

Figure: The "Reset" button isn't useful at all
We have a program called SSW CodeAuditor to check for this rule.

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

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.

Read more

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.

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

Figure: Good example - percent complete, time left, total size and a progress bar are all shown

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.

Read more

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

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.

Read more

You should avoid any extra style tags in your heading text, because it is unnecessary and generates inconsistency.

Figure: Bad example – bold tags being used within header tags.

Figure: Good example – all styling is being done through CSS.

Tip: You can do all the styling via CSS.

You should avoid any extra style tags in your heading text, because it is unnecessary and generates inconsistency.

Figure: Bad example – bold tags being used within header tags.

Figure: Good example – all styling is being done through CSS.

Read more

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.

Figure: Bad Example - Using pre code tags and having lines exceed screen size

Figure: Good Example - Using pre code tags and having lines not exceed screen size

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.

Read more

Do you display dates on your website formatted in a human friendly manner?

Figure: Bad - detailed date formatting is difficult to read

Figure: Good - humanized date formatting is easy to read

Do you display dates on your website formatted in a human friendly manner?

Read more

Use a consistent format when writting addresses.

The structure should follow: Number, Street Name, City, State (abbreviation) Postal Code, Country
- Beware of the commas positioning (inexisting between State and Postal Code)
- Don't use dashes, slashes, or bars to separate the elements (OK if it is in the Street Name part)
- Country is not always necessary depending on the audience
- If you have enough space, it is OK to write it in 2 lines
- We're in Australia and this should work for most countries' addresses, but some specific locations might have different address structures that won't allow following this rule
Level 1, 81-91 Military Rd | Neutral Bay - NSW, 2089 Australia

Figure: Bad example - SSW main office address not following the standard address formatting

Level 1/81-91 Military Rd, Neutral Bay, NSW 2089, Australia

Figure: Good example - SSW main office address following the standard address formatting
Use a consistent format when writting addresses.

The structure should follow: Number, Street Name, City, State (abbreviation) Postal Code, Country
- Beware of the commas positioning (inexisting between State and Postal Code)
- Don't use dashes, slashes, or bars to separate the elements (OK if it is in the Street Name part)
- Country is not always necessary depending on the audience
- If you have enough space, it is OK to write it in 2 lines
- We're in Australia and this should work for most countries' addresses, but some specific locations might have different address structures that won't allow following this rule
Read more

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.

Figure: Bad example - 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.

Figure: Bad example - The user has a good chance of entering the URL in the incorrect format

Figure: Good example - User immediately knows the format expected

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.

Read more

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>

</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

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" ( ) 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.

Figure: Bad Example - Using the "space" ASCII character to create a padding on that list

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, they will be more than happy to help you.

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.

You should design a website to look good when being viewed in Google Chrome, Mozilla Firefox, the latest version of Edge and Safari 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 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 in every single browser, except for Google Chrome.

You must test your website on the 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 by editing the CSS file.

Figure: Browsers statistics in 2020 – Know more in W3C Browser Stats

Note: If a browser represents less than 2% of your website views in Analytics, then you shouldn't bother.

E.g. Google archived this link - https://code.google.com/archive/p/html5-js/ - which was used as an HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries. Since IE represents a small percentage of views it can be removed instead of updated to a new working shim.

When a user looks at a search result, they expect to see a list of items to look into. If there are no results, don't give them noisy text because it can be taken as a search result. An icon also can be understood as a broken page. Your "no results" page should be clean.

Figure: Bad example - The list of "suggestions" is just noise and can confuse the user

Figure: Bad example - Having an icon implies that an error happened which is not the case

Figure: Good example - Plain and clean screen

Figure: Good example - Plain and clean screen on mobile

Note: In case the message you're showing is a "pass" or "fail, it is recommended to use an icon as per Do you use icons to enforce the text meaning?

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.

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

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

Figure: Good Example - Using the <ul> and <ol> for lists

To keep profile management simple and make it easier for users to have a consistent experience across applications, you should use Gravatar for showing profile images in your application.

Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog.

Setting up Gravatar in your application

It is simple to set up and if you are developing an MVC application, there are even several Nuget packages to make your life easier. The GravatarHelper is recommended.

@Html.GravatarImage("", 80, new { Title = "My Gravatar", Alt = "Gravatar" })

Also, check out the Gravatar API documentation for all the options available.

The below short video shows how to get up and running with Gravatar in your ASP.NET MVC application.

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:

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

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

Figure: Good Example - This link can still be clicked on when pasted and when JavaScript is turned off

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:

Dashes between words: **rules-to-better-website-layouts.aspx ** [RECOMMENDED] This option appears to be most common and Craig Bailey's preferred way
Capitalize each word (Title Case): RulesToBetterWebsiteLayouts.aspx
Upper case for appropriate words: RulestoBetterWebsiteLayouts.aspx
Underscores between words: rules_to_better_website_layouts.aspx
Lower case for all words: rulestobetterwebsitelayouts.aspx

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

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.

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 on the 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.

Consistency across your similar pages (such as standards pages in this case) is very important and should be made easy to implement.

Guidelines and standards for the SSW website pages can be found at SSW Web Design References .

A stylesheet file (.CSS) should be used to dictate how the fonts, headings, tables, captions and everything else on your HTML should be displayed.

This makes your site very easy to maintain. If you ever want to change the entire look and feel you should only have to change one file.

We have a rule on using relevant words on links. How to make sure people will know which words are links and what the links are after printing a page?

As a good practice, you should use CSS to print the URL's next to each link when printing:

@media print { a[href]:after { content: " (" attr(href) ")"; } }

In specific cases, like on breadcrumbs and logo, you don't want these URL's, so you should override the style:

@media print { .breadcrumba[href]:after { content: none; }

Figure: Good example - printing links on the content but avoiding it on obvious places, like the logo and bradcrumbs

When you embed a YouTube video it will increase your page size from 500kbs to 1.5Mb or more, depending on how many videos are embedded on the page.

Figure: A side by side comparison – everyone wants less requests and a smaller page size

Figure: Bad example - Don’t add embed code directly from YouTube. For more details read "A Better Method for Embedding YouTube Videos on your Website"

Figure: Bad example – The evil HTML code

There is a clever, lightweight way to embed a YouTube video, which Google itself practices on their Google+ pages which reduce it to 15kbs.All you have to do is, whenever you need to embed a video to a page, add the below tag instead of the YouTube video embed code. (Remember to replace VIDEO_ID with actual ID of the YouTube video)

Figure: Good example – The good HTML code

Note: This script needs to be added at the end of the document:

..and this needs to be added in the CSS:

"Adaptive placeholders" are form labels that become into placeholders and vice-versa, depending on which fields have been filled or not. It gives your website a great UX.

It's also a nice way to save space and achieve a neat visual appearance. Using this method users can easily to tell which field has been filled in and which data has been entered.

Figure: Bad Example - Having both label and placeholders can be repetitive and dull

Figure: Good Example - Using placeholders