Category: Web design

Simon Collison – We Are The Explorers from Build on Vimeo.

Today I launched a new website The Right Year for Children, which is part of a year-long campaign to highlight children’s rights in England.

I was approached by the committee as I have previously worked with one of their members. The campaign involves a coalition of children’s charities (Save the Children, UNICEF, CRAE, Action for Children and many more) but they had no funding….so I agreed to the work for two reasons: firstly, donating my time and skills for a good cause is something I try to do at least once a year and secondly, at my day job we get 1 day per year to volunteer for a charitable cause.

So the challenge was to plan, design and build a site in one day which is the kind of mountain I enjoy climbing. Including talking with the campaign team, building the html/css and fighting with WordPress, I think the whole project came together nicely in the 1 day I was afforded. It is worth noting that the budget and time constraints meant that while a bunch of stuff wasn’t possible in the time we had, these restrictions also greatly helped speed the project up as it decided some aspects for us.

I have given myself the task earlier in the year to get to grips with WordPress  and this project has helped me identity some sticking points with the CMS platform that I can tackle in the new year.

So I hope the site is well received and if I can find the time will try and make it responsive to mobile devices….

The Right Year for Children

One of my web heroes Jonathan Snook recently released a website about organising CSS:

I’ve long lost count of how many web sites I’ve built. You’d think after having built a few hundred of them I’d have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

I have long tried to grapple with the same problem and after a week or so really think this idea and website has legs. Below is a cut down version for quick reference, read and then head over to Scalable and Modular Architecture for CSS.

The four types of categories are:

1. Base
2. Layout
3. Module
4. State

1. Base styles are the defaults that we set. They’re almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that where ever this element is on the page, it should look like this.

 Examples of Base Styles

html, body, form { margin: 0; padding: 0; }

input[type=text] { border: 1px solid #999; }

a { color: #039; }

a:hover { color: #03C; }

2. Layout styles divide the page into sections. Layouts hold all your modules together

Examples of Layout Styles

#header, #article, #footer {    width: 960px;   margin: auto;}

.l-header {    float: left; }

3. Modules are the reusable, modular parts of our design. They are the navigation, callouts, the sidebar sections, and the product list and so on.

This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

4. State styles are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive?

.s-error {    color: #F00;    background-color: #FEE; }

 Grouping properties  

1. Box – display, float, position, left, top, height, width and so on.
2. Border- border-image, and border-radius.
3. Background
4. Text – font-family, font-size, text-transform, letter-spacing etc
5. Other

Remember when using the .slidetoggle feature of jquery that you need to set the element that you wish to start hidden e.g. a div called ‘map’ to display:none or else the div will start visible.

Also if using multiple toggles remember to give each a unique set of names (unless you know how to properly code and this can be done in a cleaner fashion.

Dear future self, this will save you 12hrs of head scratching.