The trick navigation of Mark Boulton

 code, Shoulders of giants  Comments Off on The trick navigation of Mark Boulton
Apr 042011

I was reading an article on Mark Boulton’s website, the first time I’ve visited it since the redesign. The article, A Richer Canvas, was interesting but that’s not what this blog post is about.

The website is very minimal, with typography the focus. The navigation is in a sidebar on the right and just simple, grey text. Until you mouse over the sidebar. When you do, all the links turn from grey to green. It’s a really effective technique and quite eye-catching. It’s simple, but elegant, and not something I’ve seen before.

Now all I need to do is work out how he did it and then steal the idea.

*** Update ***

I gave it a go, and it’s very easy. Took me 15 minutes to find out how he did it and then code my own (very rough) example: Trick navigation example.

All you need to do is apply a hover pseudo-class to a div, and target each anchor within that div (see code in comment below). That way the anchor changes when you hover over the div, not the anchor. Use some CSS3 transitions to add a little easing and that’s it.

Five things I learnt in week six

 Lists  Comments Off on Five things I learnt in week six
Nov 102010

Five things I learnt in Week Six

  1. I’ve finally got the hang of semantic class names/IDs. Don’t use names which describe how an element is presented (.red, #nav-left). Instead use names which give the element meaning (.warning, #sub-nav).
  2. Always write a print style sheet. It shouldn’t take very long, and it adds an extra layer of functionality (and polish) to your website.
  3. Use uneven padding to to centre the separators when styling navigation. I’m not sure why this works, but it does.
  4. Don’t avoid selectors just because older browsers don’t understand them. Using an adjacent sibling selector is the best way to remove the border from the last item in a navigation list. All that will happen in older browsers is that the border won’t be removed and I can live with that.
  5. Always ask ‘What happens if..?’ The best way of making your designs bulletproof.

Pinning down the process

 Coursework  Comments Off on Pinning down the process
Nov 092010

Pinning down the Process

Rather than making a start on the specifics of the project this week, I decided to spend some time pinning down my own design and development process. Although this process reflects the way that I already work this is the first time I’ve taken the opportunity to really think about what I do, and why.

I am, fundamentally, a scatterbrain. If I want to be organised and methodical I really have to work at it. In my previous life as an English student I tended to be all over the place. My essays would be a series of unconnected paragraphs, notes, quotations and references which would miraculously come together ten minutes before they were due in. This worked fine for me at the time but it’s not an approach that would work in any other situation and certainly not in web design. I can only imagine the look on the face of a client if, the day before their website launched, I presented them with a seemingly unrelated collection of sketches, paperwork and broken code and a promise that ‘it will all come together in the end.’ Continue reading »

Baseline grid

 code  Comments Off on Baseline grid
Oct 232010

A few of us were having a discussion about using a baseline grid during the break on Wednesday afternoon, and I said I’d post a link to an example with the grid showing. So, here it is:

It’s based on Richard Rutter’s article Compose to a Vertical Rhythm which was published on 24 Ways several years ago. Continue reading »

The top five things I learnt in week four

 Coursework, Lists  Comments Off on The top five things I learnt in week four
Oct 232010
  1. Putting an image in a paragraph will help with layout and CSS. I’ve always put images outside of paragraphs before, but putting it at the start of a paragraph will ensure that it fits nicely into the document. It also means that first child selctor rules (like h1+p) will work fine even if the image needs to appear immediately under the parent element.
  2. Alpha transparency can be used now! It’s well supported by modern browsers and although it might look ugly in older browsers, it shouldn’t break your website. Continue reading »

The top five things I learnt in week three

 Coursework, Lists  Comments Off on The top five things I learnt in week three
Oct 152010
  1. Google weights words which come at the start of the title tag. Put the most important information, usually the page title, first.
  2. Keeping things semantically correct requires a bit of thought. <i> and <b> are not semantically correct because they describe appearance rather than meaning. If something needs to be italicised because it’s a convention and not for emphasis – like the name of an author – a better way to do it is to create a class that can be styled in CSS and then apply it using a <span> tag. Then, if someone later decides that the names of authors need to be bold instead of italic, all you need to do is update the CSS and not go through every page of your site replacing <i> with <b>. Continue reading »