Design

Target Safari and Chrome with specific css

Sometimes you need to apply CSS rules to deal with Webkit browsers such as Safari and Chrome. One example: sometimes non-standard fonts rendered using @font-face or an embed service such as Typekit or Google webfonts display thinner than on other browsers.

You can deal with this using a media query:

@media screen and (-webkit-min-device-pixel-ratio:0) {
   body { font-weight: 400; }
}

Thanks to phrappe.com for this useful tidbit!

Programs to help you build your website from scratch

This is actually an email response I sent to a friend who was asking about this sort of thing. It kind of complements Richard’s blog post below.


There are a number of programs out there to make the life of people designing websites much easier. Choosing the right one depends on what kind of website you want – so you need to ak yourself the following questions:

1. Are you designing a completely new site, or are you putting a new
design to an already existing site?

2. Is your site big (greater than 30 pages) or small (less than 30
pages)

3. Do you see the site as a project that will take a finite amount of
time (15-20 pages and then stop) or will it be an ongoing project and
pages will be added as time goes on?

For small, finite sites we recommend using a very easy to use design program called Dreamweaver, which is expensive. There are also free equivalents of Dreamweaver which Richard mentioned in his blog post.

However, these programs can be a little inefficient if you want to add
lots and lots of content very quickly – there are specialised programs called Content Management Systems that handle this much better – for
example the Plone program used to manage content on this very site (there are also other programs like WordPress (used primarily for personal sites and blogs), Alfresco and Drupal. The only problem is sites using Content Management Systems often start out looking not quite the way you envisioned them (and perhaps even a little ugly). With some technical expertise you can also make these sites as beautiful as Dreamwaever sites, but it will take longer to learn, especially if the people you have in mind to work on the project have no computer experience.

How Viewers read a web page

Interesting blog entry about how viewers read a screen. What I learned from Eye Tracking Using an eye tracking programme the video plots how people scan across a screen. Often people go quickly from one thing to the next. There is little evidence of people actually reading the text. Most people are scanning for a subheading or picture that interests them.

See also Pro Blogger

What people look at:

  • Headings
  • pictures (including thumbnail
  • Buttons and Menus
  • Lists are popular – blocks of text aren’t.

A useful idea discussed in a previous blog entry is the idea of "don’t make me think " Users of a website don’t want to have to work anything out, they certainly don’t have time to read instructions. (I think even contributors to websites are a bit like this as well)

An interesting comment that Seth Godin made is that if a website is a little different it catches peoples attention.