Tag Archives: Development

Creating CSS layouts with the 960 Grid System

Put up your hand if you like spending hours creating CSS layouts. Or not…

There are not many aspects of web design that take more time and involve so many frustratingly small calculations than getting everything pixel-perfect in a CSS-based layout. Starting right at the sketches of a design on paper or in Photoshop, there are decisions that have to be made that can affect the CSS code you’ll have to write later. A new system called the 960 Grid System is here to help.

I just stumbled upon the 960 site while looking through del.icio.us/popular one day, and noticed something that jumped out at me right away:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

I recently started a couple designs, including this blog, which were designed for 1024 x 768 resolution, however at the time, I arbitrarily chose to have a width of 900 for my design. I wish now, that I had read about the 960 Grid System beforehand. Tonight I downloaded the zip file and opened it up to see what it was all about.

There are 2 variants of the 960 Grid System: A 12-column layout and a 16-column layout. Each variant starts by dividing 960 pixels into either 12 or 16 columns with exactly 10 pixels of padding in between each column. After dividing into small columns, you can then arrange boxes that are multiples of the column widths. It’s sort of hard to explain in words so take a look at the demo page that is set up at 960.gs.

The 960 package includes everything you need to get you started. Begin with a printable PDF that you can use to sketch out your design by hand, divided into either 12 or 16 columns. Once you’ve sketched out your design on paper, you can use a template designed for Photoshop, Fireworks, OmniGraffle or Visio to create your digital design. Finally, once you’ve sliced up your image, you can use the pre-made CSS styles to create your layouts. In your HTML, all you have to do is create a container div and assign a class of either “container_12” or “container_16”. Then you simply use the numbered grid elements along with clearing divs to make layouts. The whole system is pretty simple, and it makes a lot of sense.

Note: I’m not a big fan of the underscores used in the class names, however these days, it’ll be a rare occurrence if a browser chokes on the underscores. For me, it’s just a matter of good code.

I’m very glad to have found this system. I will definitely be using it in the future. I believe that it will be a huge aid for designing layouts and then converting to CSS. No more arbitrary column widths or painful margin, padding and width calculations in CSS. Hoorah!

Pre-approved accounts using OpenID

I recently read Simon Willison’s article called Six cool things you can build with OpenID and became very interested in the concept of “pre-approving” user accounts by using OpenID.

For those not familiar with OpenID, I will give a short introduction, although it’s explained in slightly more detail on the OpenID How-it-works page. OpenID is a way of indentifying yourself by using a unique URI, similar to how web sites have unique URIs that you can visit. As an example, I could make my OpenID “www.chrisinch.com”. Then, if your blog was OpenID-enabled, and I wanted to leave a comment for you, I would simply enter my OpenID URI “www.chrisinch.com” into your form. I would then go through some steps to confirm that I was the owner of my OpenID, and once I had done so, I would be allowed to post comments on your blog, without having to register with you. I can use my OpenID on any OpenID-enabled site in exactly the same way.

Traditionally, web applications require you to register for an account before you can begin performing actions using your account. When you create a new account, you typically have to validate your account by email, and once approved, a database entry is created and your account can be used. An example will make this concept clearer:

Let’s say I own a photo gallery, where I like to upload photos from events I attend. Recently I travelled with some friends to somewhere hot (wouldn’t that be nice?) and lots of people were taking photos while on vacation. Now that I’m back at home, I would like to allow the people I travelled with to upload photos to my photo gallery. Prior to OpenID, the best I could do was ask each of them to register for an account at my site and once registered (and a user row created in my database) I could then give each user permission to upload their photos to my gallery. Even if I know that Bob usually chooses the username “bob” when registering at web sites, there are several reasons why I can’t create that account for him ahead of time. What if there is someone already registered with that name, or what if Bob doesn’t want people to know his real name?

If my site is OpenID-enabled, and I happen to know Bob’s OpenID, “openid.bob.com”, then I am able to create and preapprove his user account before he even visits my gallery site giving him permission to upload photos right away. I can do this because I know that no one else can log in as “openid.bob.com”. I can pre-approve Bob for an account on my site and begin performing actions on his account all before he logs in for the first time. Perhaps I want to write him a custom welcome message or tag him in photos I’ve uploaded. It’s all possible thanks to pre-approval using OpenID.

This concept of creating user accounts before the users actually visit your site has plenty of uses. It has obvious uses for social networking. I believe that viral marketing will thrive with this concept. My friends will feel more pressure to start using a web site if I have already added information to their account. Is this a good thing or bad?

Another idea that I will present in closing: If more sites embrace OpenID, then perhaps we will also start seeing data shared between sites. Two sites that I frequent are Amazon.ca and HomeDepot.ca. Maybe one day, the two sites will share information about me (with my permission of course) and Amazon will suggest books on the subject of my recent purchase at Home Depot.

New Category: SEO

I’ve added a new category, that I will start filling with things I’ve learned over the years on the topic of Search Engine Optimization.

SEO is a mysterious subject that seems to baffle a lot of web developers and designers. There are no magic formulas or special code that you can add to your site to make it instantly popular. There are several steps that you can take as a developer, designer and site owner to improve your ranking in search engines. This new category will discuss techniques that will help you and your web site.

More to come soon…

George Street Naturopathic Medicine

I don’t always post when I launch a new site, however I decided that perhaps I would start posting links to new sites when I launch them. I appreciate feedback on the design and coding of the site.

The site was designed for my good friend Joanna Thiessen. George Street Naturopathic Medicine is a naturopathic health centre in Waterloo, Ontario.

I was asked to create a design using the idea of an old house and something traditional rather than flashy and modern. Greens and browns were requested for the main colours of the site.

After coming up with a mock-up design in Photoshop, I sliced it up and created the HTML and CSS. You may want to have a look at the source of this site. A couple things that I’m somewhat proud of:

  • As on most of my sites, I’ve replaced the h1 title with an image, yet ensured that it’s still readable by search engines and screen readers.
  • The pageTop1 div is what I use to display the photo in the top right corner. I’ve designed it this way so that this image is easily substituted, or dropped completely, without any effect on the rest of the design.
  • I used an address tag to display the address under the logo at the top. As more devices are able to browse the web, and with more software like Google Maps I’m sure that address tags will provide more useful information than a p tag or regular div.

I appreciate any comments or suggestions you may have for me regarding this site.