pinterest

Alex Jones

I lead teams at the intersection of strategy and design. Autodidact. Polymath. Barbecue acolyte. I start fires (the good kind).

web design

Design Inspiration – Part One

A while back I set up a folder in my bookmarks to store links to sites that I feel are good sources of design inspiration. Some are merely beautiful in their own right, others are the portfolios of designers and design companies who produce amazing work for their clients. On those days when I struggle for direction and vision I spend some time visiting these sites, letting go of the constraints of my current project to immerse myself in the new visual experiences the sites provide. I focus on the details of a particular part of the design, a texture, a shadow or a subtle curve and take that idea to heart, becoming the starting point for my own design inspiration. It is amazing how a small piece of someone else’s work can spark my creativity, ultimately leading to a design that looks nothing like the first. Hopefully these sites will prove helpful to others stuck in the design doldrums.

This is the first entry in my design inspiration series, please see parts two, three and four for further inspiration.

Lorem Ipsum Generators

The recent introduction of the re-fortified, and extremely useful Lorem Ipsum Generator 2 is a good reason to post the other two text generators that reside in my bookmarks.

Using lorem ipsum text in a mock-up is extremely useful as it provides you with as much text as you need to simulate the final layout, while avoiding the distractions of proofing content – well, once you get past the jokes (“It’s all Greek to me”, “I don’t speak Latin” etc.)

CSS Methodology

I’ve been trading e-mails with a colleague for the last few days and he asked if there are any CSS methodologies available. While I have practices that I consistently follow, I do not know of any that are wide-spread or commonly accepted as the best way to set up and maintain style sheets. So, I sent an e-mail to the CSS-D list to gather the feedback of other designers and developers. Below is the e-mail I sent sans-introduction which you just read.

So, does anyone know of a good methodology already in existence? If not, anyone interested in assisting me as I begin to document and revise one?

In case there aren’t any, here are a some of the practices I follow. Please feel free to let me know of poor decisions in my methods, and suggest new ones!

Style Sheet Organization

  • Classes, IDs and elements are listed in alphabetical order unless otherwise noted. The properties of each class, element and ID are in alphabetical order as well. So the “acronym” tag comes before the “body” tag which comes before the “price” ID in the stylesheet. I find this makes it much easier for me and other developers to locate specific items within the stylesheet quickly.
  • The link pseudo-classes are grouped together, but do not follow the alphabetical organization within that grouping as some browsers will use the last pseudo-class listed, even if the more accurate one is listed earlier. Rather annoying.
  • When possible, elements should be grouped if they have a common attribute, or set of attributes. An example would be to assign the same font to the “body”, “p”, “input” and “td”:

    body, input, p, td {
    font: small Georgia, Garamond, "Times New Roman", serif;
    }
  • When possible descendant styles should be used to cut down on the code in the style sheets. Below is an example of applying a specific style to an input element within a form with an element that has been assigned the “Purchase” class. Example:

    .Purchase form input {
    border: 1px solid #654819;
    height: 18px;
    }

Style Naming Convention

  • Classes and IDs use mixed case to make them easier to read. In the HTML 4.01 spec, classes and IDs are case sensitive; though some browsers do not recognize the fact. Elements are left in lower case. I know this one may end up being controversial as naming conventions often tend to be
  • Do not start an ID or class with a digit or use underscores as they may not work in all browsers.
  • Classes and IDS should never be an adjective or infer placement as a future redesign may not place the item in the same spot, or use the same background color. So, instead of using an ID of “TopBox”, use an ID specific to its contents, perhaps “GlobalNav”.