According to Patrick McNeil, there are 10 Web Design Elements that you Shouldn’t Overlook. They are:
- Links
- Forms
- Button Behavior
- Form Validation
- Status Messages: Errors, Warnings, Confirmations, etc.
- Extending the Background on Larger Screens
- Base HTML Elements
- Website Emails
- Page Stretching
- Animations: Pop-ups, Tooltips, Transitions, etc.
Designers who keep the above elements in mind, plan and design for them, will come out further ahead. Aside from keeping the developers guessing, it gives the designer more control over the design of the finer details. You’ll be creating a higher quality product, and in the long run, you’ll also reduce the cost of production. Let’s take a look at the above elements in more detail.
Links
Include the following states for ALL links on your website:
- Normal - default state of a link
- Visited - link whose target HAS been visited
- Active - link being clicked by user
- Hover - when user mouses over link
Forms
Two of the most important considerations when laying out a form are:
- Form label - description of the forms purpose
- Input fields and labels - plan for how these fields will be styled and oriented relative to the fields (inside box, above, left, etc.)
Button Behavior
The four states of a button are:
- Default - default state of a button
- Hover - when user mouses over the button
- Click - button that HAS been clicked
- Disabled - typically used for a validation process
Form Validation
This is the critical point where the website communicates the user requirements and errors in a form. There are three things to consider:
- Required Fields - these fields should be clearly indicated (usually by asterisk).
- Real-time Validation - informs the user of any problems with the data they entered
- Post-back Validation - happens after the user submitted the form
Status Messages: Errors, Warnings, Confirmations, etc.
Users typically need feedback after performing actions on websites. Be sure to consider actions that a user might go through on your website and plan for the messages that will need to be communicated.
Extending the Background on Larger Screens
If you’re not using a simple background for your website, e.g. solid color, then you need to think about how your site will look on larger screens. If you’re using an image or pattern/textured background, and you’ve designed it to a 960 pixel width, be sure to design and communicate with the developer what it will look like beyond the 960 pixel width. Does the image fade? Does it extend? etc.
Base HTML Elements
For copy-heavy websites, the design and styling of base HTML elements are fundamental and should not be overlooked. Here are the base elements to always plan for:
- Paragraphs
- Headings 1 through 6
- Unordered and Ordered Lists
- Tabular Data
- Form Fields
- Images
- Bold and Italicized text
Website Emails
Carefully review the contents of the website at the planning stage to look for any emails that might be sent. Some of the most common are:
- Mailing list sign-up confirmation
- Registration confirmation
- Form-completion confirmation (e.g. contact form)
- Order verification after a purchase
Page Stretching
How will the design of your website “stretch” to accommodate additional content? Preparing alternate versions of a layout with much more content can be extremely helpful in demonstrating how to plan for such a scenario.
Animations: Pop-ups, Tooltips, Transitions, etc.
Each of these animated elements has a distinct visual style that must be accommodated all on its own. Some of the most common places animations show up are in:
- Tooltips - those pop-ups when users mouse over elements.
- Image rotators - slideshow transitions and styles.
- Lightbox - you can style not only the lightbox itself, but also the transition to it.
The below content has been taken from HTML Dog. More tutorials, techniques and examples can be found here.
CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document. Styles have a format of ‘property: value’ and most properties can be applied to most HTML tags.
Applying CSS
There are three ways to apply CSS to HTML: In-line, internal, and external. Even though the best-practice approach is to have the HTML be a stand-alone document, below is a brief explanation of each.
In-line
In-line styles are put straight into the HTML tags using the style attribute and look like this:
This will make that specific paragraph red.
Internal
Embedded, or internal, styles are used for the whole page. Inside the head element, the style tags surround all of the styles for the page.
This will make all of the paragraphs in the page red and all of the links blue.
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like this:
If this file is saved as “style.css” in the same directory as your HTML page, then it can be linked to in the HTML like this:
Selectors, Properties, and Values
Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. For our purposes we will be concentrating on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific type of element.
For each selector there are “properties” inside curly brackets, which simply take the form of words such as color, font-weight or background-color.
A value is given to the property following a colon (NOT an “equals” sign) and semi-colons separate the properties.
This will apply the given values to the font-size and color properties to the body selector.
When this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 14 pixels in size and navy in color.
Lengths and Percentages
There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties, and it is worth familiarizing yourself with these before continuing.
- px (such as font-size: 12px) is the unit for pixels.
- em (such as font-size: 2em) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.
- pt (such as font-size: 12pt) is the unit for points, for measurements typically in printed media.
- % (such as width: 80%) is the unit for percentages.
Color
The following values to specify red can all produce the same result with the following:
- red
- rgb(255,0,0)
- rgb(100%,0%,0%)
- #ff0000
- #f00
Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.
Text
You can alter the size and shape of the text on a web page with a range of properties. They include:
font-family: this is the font itself, such as Times New Roman, Arial, or Verdana.
font-size: the size of the font
font-weight: this states whether the text is bold or not. Most commonly this is used as font-weight: bold or font-weight: normal but other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800 or 900.
font-style: this states whether the text is italic or not. It can be font-style: italic or font-style: normal.
text-decoration: this states whether the text has got a line running under, over, or through it. This property is usually used to decorate links and you can specify no underline with text-decoration: none.
text-transform: this will change the case of the text.
- text-transform: capitalize turns the first letter of every word into uppercase.
- text-transform: uppercase turns everything into uppercase.
- text-transform: lowercase turns everything into lowercase.
- text-transform: none I’ll leave for you to work out.
letter-spacing: properties are for spacing between letters or words. The value can be a length or normal.
line-height: property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font.
text-align: property will align the text inside an element to left, right, center, or justify.
text-indent: property will indent the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.
Margins and Padding
margin and padding are the two most commonly used properties for spacing out elements. A margin is the space outside something, whereas padding is the space inside something.
This leaves a 20-pixel width space around the secondary header and the header itself is fat from the 40-pixel width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you can use.
Putting It All Together
The code below covers all of the CSS methods in this section. If you save this as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things.
Background Images
Used in a very different way to the img HTML element, CSS background images are a powerful way to add detailed presentation to a page. To jump in at the deep end, the shorthand property background can deal with all of the basic background image manipulation aspects. The properties include:
background-color: which we have come across before.
background-image: which is the location of the image itself.
background-repeat: which is how the image repeats itself. Its value can be:
- repeat: the equivalent of a “tile” effect across the whole background
- repeat-y: repeating on the y-axis, above and below
- repeat-x: repeating on the x-axis, side-by-side
- no-repeat: which shows just one instance of the image
background-position: which can be top, center, bottom, left, right, a length, or a percentage, or any sensible combination, such as top right.
Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results.
Further reading:
Technical Web Typography: Guidelines and Techniques
The Future Of CSS Typography
References:
- http://www.htmldog.com/guides/css/beginner/
- http://www.htmldog.com/guides/css/beginner/selectors/
- http://www.htmldog.com/guides/css/beginner/colors/
- http://www.htmldog.com/guides/css/beginner/text/
- http://www.htmldog.com/guides/css/intermediate/backgroundimages/
