In the previous episodes we’ve created a creative/technical brief, mocked-up design in Photoshop and decided on proper markup for the category cloud. Finally, we turn our design into web page element with some nifty CSS.

For those of you who better understand from live examples, here’s a little treat for you. If you’re beginner in CSS, read on. Continue reading »

In the previous episodes we’ve created a creative/technical brief and then mocked-up design in Photoshop. The next step in a process is creating solid XHTML markup. Let’s open it up with a question:

How to markup category cloud?

There are two simple approaches that usually comes to mind at first: a paragraph and an unordered list.

If we use paragraph with links, we wouldn’t probably miss it in terms of the default presentation across the range of User Agents. The thing is — if one is marking-up a ‘cloud’, it’s natural that all the links are inline, one after another.

— Let me think about it! Yea, I will just set text-alignment: center to that paragraph and I’m done. Great!

Continue reading »

In the previous episode we’ve created a creative/technical brief. In this article we are going to use that document to design the category cloud area. For all busy readers, here is the final result:

The process

Most of the time, you’d want to first scribble some sketches, the old school way — pencil and paper. Yes, another Moleskine sucker.

As you can see, it all comes down to some quick ideas and metaphors in order to get rid of the noise. This way you can rapidly test proximity, contrast and alignment and set the overall look-and-feel.

Before I fired-up Photoshop, I knew I was going to have a dialogue between two characters on a window, carelessly enjoying the force of the nature. As a contrast, I planed another character who’s experience wouldn’t be so pleasant and optimistic. Continue reading »

We want to keep this simple. The example scenery is a fictitious blog with jokes and funny videos. Furthermore, the build part of the series will be based on the WordPress theme template, so you’d feel more comfortable following the code.

Setup the context

In this series, we are about to design and style the tag cloud for a sidebar.
You’ve already seen those. If not, see the live example (bottom right).

Additionally, we are going to reuse some common HTML snippets to add a little spice to interface design. More on that in the next episodes. Continue reading »

Anything is recyclable, so is your HTML markup. Claim the right to do it with nature-, eco-, environmental-friendly style sheets! (use whichever buzzword).

Buckle up, ‘cause we are introducing Environmental friendly CSS, a four article series, that aims to shift any novice and CSS expert alike — into ecologically aware client-side developer. The series is based on a real-world web site, developed as we speak.

The first article is expected this Thursday morning CET, and the others over the next three weeks. Here is the series overview:

1. Prepare your content and interface copy

   Think about the context, the content, the real users, accessibility and search engines.

2. Visually design information elements and user interface

   Go wild in your graphic editor to lead the eyes around the layout.

3. Mark it up!

   Create sound and solid markup, with accessibility in mind — without looking into the visual mockup.

4. Create bullet-proof, eco-friendly CSS

   Use CSS skills to recycle accessibility-related markup into visually attractive hints.

For all the fans out there: we are going to disclosure Director’s Special at the end of the series.