CSS is amazing

One of the things I am working on is creating websites for nonprofits. In the past, I used CSS a little for changing background colors, fonts, etc because I saw it somewhere but I had no idea what it was capable of. (For anyone who hasn't heard of it, CSS can be used to create designs for HTML pages. It allows one design file to be used for multiple pages in a website so that changing the font all across a site, for example, does not require changing each page in the site.)

The CSS Zen Garden project provides a webpage for designers to create CSS designs for, which are then posted online. Each of the designs use the same HTML code (so they have the same content) - the only difference is the CSS (including images) design. Of the hundreds of designs posted online, here are a few examples that I liked and think show a good variety of designs: Museum, Pretty in Pink, Obsequience, contemporary nouveau, and Garden Party. Isn't this cool?

PS The reason I am using HTML+CSS for a site vs. one of the CMSs is that some sites don't need to have user logins and have rather static content. But I imagine the CMSs can be customized with CSS...how is that done? I will probably be using the Plone CMS in the future.

Here are some more resources for CSS learning ( css and basic html can be the way to go for simple nonprofits).

Good site to learn the basics, easy to follow: http://www.cssbasics.com/

Also, Open Source Web Design - oswd.org is a great website to get free templates that are purely css based and then you can modify them anyway you want. I used this to learn css also, but in a backwards sort of way. And zen garden.

When you're looking at pages, like on zen garden and you're like - uhhh, how the hell did they do that.... - Firefox has an extension called Aardvark that when you turn it on, you can see the different divs and ids and classes and so on. http://karmatics.com/aardvark/

And for menus - if you're too lazy or time constrained for a fancy menu but want one:

http://www.cssplay.co.uk/menus/index.html

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

thanks for all the great info Lauren!

I know that Drupal uses stylesheets quite liberally (for example, our blogging pages use a file called drupal.css for the main part of the page and another small bit of CSS for the editor portion). It'd be fun to dig into it a bit more, and I know that Ben, Danielle, and Aliya could probably use some CSS help on the site.

Glad to hear that you're doing a page using just HTML+CSS. A site I'm working on does the same thing, and I was feeling self-conscious about it.... 8-)

--John

simple site ...creators?... unite. silly simple site sophisticates unite? simple site supporters solidify? ...

Morgan (a VISTA with our project last year) recommended this

"It cuts A LOT of the work out of generating menus, buttons, navigation and fancy 'bells and whistles' for creating webpages

http://www.xtort.net/scripts/scripts.php

 morgan sully"

 

cheryl jerozal's Recent Field Reports

It's not enough to be good...

The Washington Post got a world-famous violinist to play (unannounced) in a DC metro station to see what would happen. …read more

Shortsightedness

Have you ever done something quick and dirty even though doing things "the right way" would only take a little more time? Maybe you didn't have a little more time? Of course. Haven't we all? Here's an example. Recently, I was creating a conference registration form for a client on her Plone-based site. Ideally, the client would have created and maintained the registration form herself, since the tool we were using has a graphical form creation interface. However, the documentation for the tool we were using was out of date. I thought about updating the documentation at that time and then helping the client through it, but that would have required a lot more time than just setting up the form myself. Also, I was going to be out of town shortly (for the NTEN conference) and the client wanted to start accepting conference registrations as soon as possible. In the circumstances, it seemed a reasonable solution for me to create the form, so I did. Many form tweaks later, I think I have spent more time on updating the form than it would have taken to update the documentation, which could have helped others besides just this client. …read more

Open Source Development and "Barrier to Entry"

Last week I had the opportunity to participate in my first "sprint". In a sprint, a bunch of people get together and work on an open source project for a few days. In my two days (and one night :p) of sprinting, I learned a lot, met some awesome people, and contributed to the start of a project. I highly recommend sprinting to anyone who gets a chance to do it. However, one thing I noticed when sprinting was the difficulty of getting to a point where you can make progress on a project. For example, before you could work on my project, you had to download and install particular versions of six different tools. And then you had configure your system properly (set environment variables and run scripts and such). …read more

A quick note on usability

Am I the only one who doesn't necessarily always fill out online forms from top to bottom? The way some forms are designed makes it seem so. For example, visit the free Basecamp account signup page. At the time of this blog post, if you fill in item 3 and then fill in item 2 with something different (and then click in a new field to have the change to item 2 "sink in"), what you have entered for item 3 is replaced. …read more