Computer Tips & Tutorials

In my wanderings around the web today, I came across another site I wanted to share – Web Design+ — Tips and advice on web standards development by Harry Roberts, an 18 year old web developer from the UK states:

Welcome to Web Design+. This is, in no particular order, an amalgamation of web-standards solutions for common web development issues and problems - a way to tackle development in the cleanest, most accessible and semantic way possible. By using Web Design+, the aim is to standardise practices throughout an organization; from accessibility to hacks, Web Design+ covers the best ways to tackle a variety of dev problems.

The idea of Web Design+ is not to force techniques and methods onto developers, but to offer the best known ways of getting round problems, and generally better coding and developing standards in terms of accessibility, maintainability, usability and longevity.

Most of the tips here I have picked up along the way and have been of massive help to me - though I wish I had learn them all right away, which is why I’ve decided to collate them all for use by up-and-coming developers.

He starts with:

!DOCTYPE

The correct !DOCTYPE depends on the project. If you are starting a new project use the Strict !DOCTYPE, if you are appending or modifying an existing project use the Transitional !DOCTYPE.

Markup

• The fundamental aspect of a maintainable project is well structured and semantic markup. Proper indentation, semantic ID and class names and valid markup all lead to better code.
• Validating you markup is not required BUT it is certainly advisable. Valid code will eliminate the majority of broken layouts and visual discrepancies, making cross browser compatibility much simpler.
• It is important to use semantic and relevant names for ID and class attributes. As a general rule, only use a class if it is likely to appear more than once, and IDs for unique items such as container <div>s.
• It’s always a good idea to define a series of generic class names in each new project that will be used frequently to achieve mundane tasks.
• CSS Resets are the topic of much debate. They are used to create a level playing field across different browsers in one go.
• Diagnostic CSS is incredibly useful during the build phase as it allows you to visually recognise errors in your markup as you build.
• It is a good idea to have a preset list of generic classes in your stylesheets to carry out repetitive styling.

Navigation

Designers and developers wrongly categorise navigation and menus as being one and the same. Navigation is a means of navigating an entire site, whether that be through the main menu, sidebar links, breadcrumbs or content links. A menu however (which is often incorrectly referred to as the ‘navigation’ or simply ‘nav’) is the main body of links often located at the top of a document, and is usually consistent throughout the whole site.

Links

• Phrases and naming – Never use phrases such as ‘Click Here’ for link text. ‘Click Here’ means very little to someone using a screen reader.
• Attributes - Links come with several ‘obvious’ and widely used attributes such as href=”" and title=”". The former meaning ‘hypertext reference’ and the latter being a title used to describe the link’s function/behaviour.
• Fragment Identifiers – It’s possible to use IDs and anchors to link to specific parts of a page (used extensively here), these are known as fragment identifiers. This is a valid means of navigation, especially in one page websites.

Images

• Embedding in a Page – If the image serves no informational/content purpose to the page it should be added using CSS as a background image. If however it is a product page, where a product is described with an accompanying image,then insert the image into your html code.
• Attributes - The <img> tag comes with several specific attributes, the most important (and mandatory) of which being the alt=”…” attribute.

Divs

<div>s are the building blocks of CSS developed sites but should not be heavily overused.

Forms

He covers only the most relevant in terms of accessibility and semantics.

Type

Whenever styling text on the web, it is advisable to use ems - a relative measure defined as “A unit of measurement used in typesetting, approximately the width of the letter “m”". Font sizing on the web is extremely flexible, but anything smaller than 10px is generally too small to read comfortably.

Read Web Design+ — Tips and advice on web standards developmentcomplete with many examples and the style rules you will need.

Today is the last day for you to purchase the Migrating from FrontPage to Expression Web EBook at the low price of $22.00. Regular price is $29.

If you are moving from using FrontPage as your web editor to Expression Web, then this is the book for you. Our EBook will help you achieve your dream of an easy maintenance, trouble free, standards compliant website. Included with the EBook are Expression queries to help you with the cleanup process and seven free templates to get up started. Techniques and tools to make the cleanup process easier will be covered. Access details for the companion web site which includes some CSS lessons and the f ree templates is included in the eBook.

Don’t delay – get your copy of Migrating from FrontPage to Expression Web for the low price of $22.

Today is also the last day to obtain Expression Web 2.0 from the Microsoft online store at half price.  Buy  Expression Web 2 Upgrade for $49.95. Offer good for US purchases only.

I’ve noticed recently that many of the techniques used by top designers are actually quite simple. It’s how these simple elements are pieced together that makes a design brilliant. Today we’ll be looking at the first one of these highly effective, yet strikingly simple design methods with the use of CSS borders.

Borders have a lot more impact than most people realize. They can make a design look miles better with only minutes of work. The little characteristics like weight, style, and color have big effects on either drawing elements out or making them fit into the background.

Read Five Minute Upgrade – Using CSS Borders for Emphasis by Zach Dunn and try out some of his suggestions on your own site.

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork!

The book contains articles with code sections, images, illustrations and links to the original articles on woork.You can choose to download The Woork Handbook in pdf format or read it online.

Would you like to be able to add a rounded corner box to your web page to display news items, sales items or just about anything but dread the thought of trying to create the corners with your graphics program? Never fear, help is close by.

• RoundedCornr – This generator will allow you to create basic rounded corners, rounded corners with gradients, rounded corners with borders
• curvyCorners – curvyCorners is a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.
• CSS Round – Creates a text page with round corner. You can define your own options : Radius value, Round color, Background color, Text color and size of round content you want. After generating the corners, you will get the 4 corners iamges, the html and css code in a ZIP file.
• Corner Shop – Once you have entered your chosen values, click Create Graphics. The four images, CSS code, and HTML code are generated that you can use to make your own rounded-corner boxes.

If you need a place to select some of the colors to use, check out Colour Lovers or Adobe Kuler. If you have a site where you are using rounded corners, send me the url of your site. I would love to give some real life examples.

Examples: Rounded Corner Boxes

Lists are a perfect way to display content and information in a very easy to scan, easy to read method. List are found on blogs to list posts, comments, and links. Lists are used on web pages within the content area as well as used as menus.

So what makes a list “good?” Is it the color? Spacing? Background? Style? In truth, it is a mixture of all of these things. Without one element, a list may suffer in terms of usability and aesthetics.

Lists are simple in their form – simply putting one excerpt or one line of text below another. If your lists become overly complicated or lose their simplicity, you will have lost the essence of the list and will lose your visitors’ interest as well. . . . .There are thousands of ways to customize a list using varying typographic elements, colors, spaces, images, icons and more.

There are plenty of examples given of various lists on various sites. The items he mentions are:

• Color - can be used to help draw readers’ eyes to information that may be most relevant to them
• Spacing -  The effective use of white space is also a critical element of a list when it comes to legibility, scannability, and down-right good looks.
• Dividers - While white space can easily double as a divider, it never hurts to have some sort of visual element to help separate items in a list.
• Typography - Typographic changes can make all of the difference in the world when it comes to being able to quickly and efficiently scan a list. Using a bold or bright title helps each list item stand out in a crowd.
• Icons - The final element to take in consideration when designing your lists is the inclusion of icons or images with each list item. Icons can be aesthetically appealing, add visual cues to readers, and help distinguish each list item from one another.

You can read How To Design The Perfect List in its entirety with many examples of various lists on various sites and some sample code for lists.

You can see some of the techniques explained in the article in use on the left navigation menu at Expression Web Tutorials and Templates.

Additional Resources recommended include:

• 5 Ways to Set Your Unordered Lists Apart
• Using CSS And Unordered Lists To Do Just About Anything
• Ordered And Unordered Lists

Accessify
A verb: to make accessible

I’ve written about Accessify.com in the past and when I paid the site a visit today, I discovered it had had a face lift. Accessify provides a collection of accessibility tools and goodies just for you which include:

• Skip Navigation Builder – Skip navigation links are very useful for keyboard-only users. This may be people who are completely blind and using a screen reader, but can also be used by people with poor vision or mobility problems.
• jQuery Function Builder – Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.
• List-O-Matic – Generate CSS-styled navigation menus based on list items.
• The new accessibility screencasts section, demonstrating accessible techniques in action (as well as video examples of how to use some of this site’s tools).
• Quick Page Accessibility Test – a favelet-based page check tool.
• Accessible Table Builder – Create an accessible table using scope, header and id attributes using a wizard to guide you through the process.
• Accessible Form Builder – Quickly create a form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
• Pop-up Window Generator – Create pop-up windows that are accessible and search engine-friendly.
• Form Element Generator – Lets you easily build individual form elements that are accessible (requires JavaScript to work).

So pop on over for a visit and give the various tools a try. I just finished playing with the List-O-Matic Menu Builder which allows both horizontal and vertical menus.

If you would like to have a set of F REE web forms styled using CSS, head on over to CSS Globe to download the set of five that are by Alen Grakalic. He says:

In this collection I used my typical form markup. I always use FIELDSET and LEGEND elements although I sometimes hide them. I find FIELDSET element to be very useful in presentation, because I have an extra element without jeopardizing semantics. i.e. I can combine FORM and FIELDSET to achieve double backgrounds, or use them for vertical “sliding-door” as I did in my first example.

So go ahead over and collect you set of CSSG Collections: Web Forms and sign up for his RSS Feed at the same time.You could combine these layouts with the email form script offered by James Huggins.

Expression Web 2 Upgrade from Microsoft is available for half price $49.95 until January 29th. If you have money left after the hoiday spending, stop by the Microsoft Online Store and take advantage of this special offer. Unfortunately the offer is for the US only.

So if you are a long time FrontPage user and want to upgrade, now is the time to do it.

If you are using the RootsWeb guestbook, you already know that it does not validate. And it does not matter if you are using an HTML or XHTML doctype. Would you like to know to remedy that? Follow this step-by-step tutorials for both creating and validating your RootsWeb Guestbook.

You can also make your Rootsweb guestbook accessible by following the tutorial Making the Guest Book Accessible.