Archive for the ‘Tutorials’ Category

Web 2.0 how-to design guide

Sunday, October 14th, 2007

In this tutorial, I describe various common graphic design elements in modern web (“2.0”) design style.

I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs.

It follows on from my Current Style article, and analyses in greater depth the design features of the current “Web 2.0” design style.

http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm

Print stylesheet – the definitive guide

Saturday, August 11th, 2007

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we’re left with web pages that frustratingly don’t properly print on to paper.

It’s remarkable that so few websites use print stylesheets as:

  • Print stylesheets enormously improve usability, especially for pages with a lot of content (such as this one!)
  • They’re phenomenally quick and easy to set

http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml

A CSS styled table

Saturday, April 28th, 2007

by Veerle

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/

Bring on the tables

Saturday, April 28th, 2007

Something that often seems to confuse people that are new to CSS-based layouts is the use of tables. I’ve seen plenty of cases where people interpret “avoid using tables for layout” as “don’t use tables at all”. It’s important to remember that tables are still perfectly fine to use – if used correctly.

Yes, do your best to avoid using tables for layout, but for tabular data, tables are what you should use. I’d like to talk about how tables should be used when marking up tabular data. There’s a lot more to tables in HTML and XHTML than just rows and cells. Much more. Especially if you want to make them accessible.

More…

Improving Your Process: Site Planning Guides

Thursday, April 19th, 2007

Sometimes improving your process not only helps yourself, it can benefit your clients as well. Using your time more effectively allows a client to receive more time and effort from you focused on enhancing the project as opposed to spending time resolving miscommunication.

More…

Transparent custom corners and borders, version 2

Thursday, April 19th, 2007

Thanks to Roger Johansson at www.456bereastreet.com for this:

It’s been almost a year and a half since I posted Transparent custom corners and borders, a technique for creating custom corners and borders with optional alpha transparency. The technique is based on a combination of CSS and JavaScript, and gives you a lot of flexibility when creating rounded corners or special borders.

More…

Alt text is an alternative, not a tooltip

Thursday, April 19th, 2007

It seems like there is a bit of confusion among many web developers and browser vendors surrounding the use of the alt attribute to provide alternative text for images and other non-textual elements.

In alt as a tooltip, Anne van Kesteren points to a document on the Channel9 Wiki site that contains feedback about Internet Explorer Programming Bugs. The alt attribute (yes, It’s alt attribute, not alt tag) and how it is displayed by Internet Explorer is discussed in the “Browser Behavior” section. Several people point out that Internet Explorer is wrong in displaying alternative text as a tooltip while also displaying the image.

More…

Efficient CSS with shorthand properties

Thursday, April 19th, 2007

One of the reasons for using CSS to layout websites is to reduce the amount of HTML sent to site visitors. To avoid just moving the bloat from HTML to CSS, you should try to keep the size of your CSS files down as well, and I thought I’d explain my favourite CSS efficiency trick: shorthand properties. Most people know about and use some shorthand, but many don’t make full use of these space saving properties.

More…

Using the title Attribute

Thursday, April 19th, 2007

Author: Gez Lemon:

The title attribute is intended to provide supplementary information about an element; for example, it might be used to provide extra information about the target of a link. Although the User Agent Accessibility Guidelines (UAAG) requires access to all content, current user agents provide very poor access to title text information, and what access they do provide is typically inaccessible for people with disabilities.

More…

Avoid 404

Thursday, April 19th, 2007

Another appropriate title for this post could be “fix it before you break it”. Although a proper written 404 page can help you out it is better if you redirect a user to a new location (301) or return him a page that says that the page did exist, but will never return (410). The problem is that a lot of web companies start completely over when building a new web site and do not really look at the existing site. The result is that once a new site has been released, the old links are rendered outdated and now return a 404.

More…