Tag Archive for 'Interface Design'

Page 2 of 3

Taming Adobe colour settings for your web browser

*Some artwork I'm working on*

*Some artwork I'm working on*


If you – like me – are having problems reproducing identical colours between Photoshop and your web browser this post provides a solution.

This post does not concern itself with best practices for printing techniques and managing CMYK colour palettes. I’m primarily a web designer, so settings for print don’t concern me. That said, if you are a print designer you’d still benefit from reading this article, especially if you haven’t come across the term sRGB before.

The history of CSS resets


Sound foundation ensures sane development.

Nate Koechley

Reading and scanning on the web are not the same thing

Users read left-to-right. Users scan top-to-bottom. This is why it makes sense to left-justify menu labels (list items) and headings.

Jakob Nielsen


… borrowing of a style, typically used elsewhere, as the basis for a design. This may be done for purely aesthetic reasons as a method to present information in a certain way, but often it is done to borrow characteristics that are associated with the appropriate source. Establishing such a connection may add credibility to the design or cause it to be viewed in a certain way.

Gavin Ambrose & Paul Harris

All you need to know about web typography in two posts

I hand these links over to other designers and developers time, after time, after time:

  1. http://24ways.org/2006/compose-to-a-vertical-rhythm
  2. http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4

Essentially they contain all you need to know about web typography. Timeless articles.

99 (CSS) problems, but liquid ain’t one

Experiments with liquid CSS layouts

Experiments with liquid CSS layouts

We all know liquid is important, right? (Doctors recommend 1.5-3 litres per day :P)

Some of you may have been fooled into thinking liquid and elastic layouts died as soon as browsers deployed native zoom a few years back. I’ll assume you understand – with a fair degree of knowledge – the technical and usability ramifications of implementing fixed-width, liquid, and elastic web layouts. If not, then the following should briefly clear the haze:

Fixed-width layout

Dimensions have a fixed-width pixel (px) measurement.

Creating triangles with CSS


Random background images with CSS background-size

So you want to display background images on your website?.. Coincidence – me too! Firstly why not pause for a second and refresh this web page for a while and appreciate the lovely photography :P

Mac OSX, Safari 5.0 screenshot

Mac OSX, Safari 5.0 screenshot

If you’ve tried background images (unsuccessfully) in the past, no doubt you’ve come unstuck with a few of the same sorts of dilemmas as I have: the first culprit being content vs. image legibility, and the second being each image’s responsiveness to the viewport (will the image tile or stretch?; in which case you have to start thinking about tessellation accuracy and file size etc.).

Responsive Web Design


CSS fluid images