Archive for the ‘Web Design’ 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.

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

Google Ranking Factors – SEO Checklist

Saturday, August 11th, 2007

There are “over 100 SEO factors” that Google uses to rank pages in the Google search results (SERPs). What are the search engine optimization rules?
Here is the speculation – educated guesses by SEO webmasters on top webmaster forums. Should you wish to achieve a high ranking, the various confirmed and suspected Google Search Engine Optimization (SEO) Rules are listed below.

CSS Layouts

Saturday, August 11th, 2007

These CSS Layout offers full Grade-A browser support. That means that these CSS Layout will look and behave the same in internet browsers like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS layout has been optimized to give you the best possible search engine results. Use these CSS Layout anywhere you wish. It is perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layout to optimize your Web Development workflow. These CSS Layouts are done in Pure CSS, not tables.

How to Create Great HTML Emails with CSS

Friday, August 10th, 2007

By Christian MacAuley

HTML emails are widely used for all kinds of professional correspondence. Beyond email newsletters they’re used for all sorts of application-generated messages, such as receipts and confirmations. Styled messages have lots of appeal for marketers, designers and consumers — but for coders, it’s a real headache to create them properly.

CSS Float Theory: Things You Should Know

Friday, August 3rd, 2007

The concept of floats is probably one of the most unintuitive concepts in CSS. Floats are often misunderstood and blamed for floating all the context around it, causing readability and usability problems. However, the reason for these problems isn’t the theory itself, but the way the theory is interpreted – by developers and browsers.

Free CSS Layouts And Templates

Sunday, July 29th, 2007

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

Design: Layout (A List Apart articles)

Sunday, July 29th, 2007

Web page layouts: ways and means and meaning. Grids and rules; columns fixed, liquid, and elastic. Size, color, and contrast. To center or not to center. Layout and genre. Print paradigms and new media approaches. Let the web be the web. (36 articles)

CSS – Creating Liquid Layouts with Negative Margins

Sunday, July 29th, 2007

by Ryan Brill another great ‘A List Apart’ tutorial:

I was recently confronted with the task of creating a two-column liquid layout with a header and footer in which the content needed to come before the sidebar in the source code. I took opportunity to demonstrate an under-used aspect of CSS: negative margins. Negative margins allow us to push the content area away from the sides of the browser, leaving room for the sidebar.

CSS Positioning – Relatively Absolute by The Autistic Cuckoo

Sunday, July 29th, 2007

Web design usually means something more than just fonts, colours and graphical elements. It also implies some sort of layout. A web designer has three available tools for creating a layout:

  • tables,
  • floats,
  • positioning.

Layout tables belong in the last millennium. Floats are often the best solution, especially when you don’t know in advance which column will be the longest. Older browsers, and Internet Explorer, aren’t too good at dealing with floats, though. Besides, that’s a separate topic.

Positioning is perhaps one of the most misunderstood parts of CSS 2. Let us look a little closer at how it works