Bathcamp #29

Bathcamp stage

It’s all design.

Curated by Alan Colville with speakers:

Richard Caddick of cxpartners: The Value Of Imagination

Joe Leach of cxpartners: Form Design

Jon Waring of 3Sixty: Designing measureable and meaningful websites

Alistapart 342: A Pixel Identity Crisis

A Pixel Identity Crisis: Now that hardware is changing and pixel densities are growing, pixels are struggling to find relevance as the stable unit they once were. Browser zooming is one thing and has been covered on QuirksMode. But what is a pixel on high resolution devices today? Why does the 640px × 960px iPhone 4 claim to be 320px × 480px in the browser? The truth is that there are two different definitions of pixels: they can be the smallest unit a screen can support (a hardware pixel) or a pixel can be based on an optically consistent unit called a “reference pixel.”

Project: The Right Year for Children site

Screengrab, ry4c webiste

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

Scalable and Modular Architecture for CSS

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

Enabling webgl in Firefox

Earlier today I was attempting to view an example of 3D in the browser that makes use of webgl but the browser kept insisting webgl wasn’t enabled.

Initial web searches indicate that webgl, which is used to get the 3D working should be running on Firefox (im using 6.0.2) but it clearly was not!


To enable webgl simply type “about:config” into the browser address, promise to be care and then type “webgl” into the filter at the top.  The second option should be “webgl.force-enable” and you’ll need to double-click the value of false changing it to TRUE.

Reload the 3D example page and you should now be up and running.

Jquery – .slidetoggle()

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.

Making Firefox mine – extensions and such

Whenever I use another computers browser it is always setup in a unique way, and mine is no different.

Though I have opera, chrome and safari I always come back to ye ole faithful Firefire. I like it naturally because I am used to it, and I got used to it due to some handy extensions that I probably use daily. I thought i’d list them as you may also find them of use:

  1. Firebug. THE must have extension if you are in anyway curious about what is under the hood of any website you come across. This beauty lets you select any page element and reveal the coding secrets behind. Better still, you can make changes and see live previews before your very eyes.
  2. ScreenGrab! I collect website screengrabs of sites that catch my eye and for keeping an archive of old designs before I update.
  3. Colorzilla. A really quick way to grab all the colours you find that you just have to have.
  4. Web developer toolbar. The ruler for measuring gaps between elements is worth the download alone.
  5. Open Attribute. The ultra fast way to get Creative Commons license details in the correct format at the click of a button.