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.

A very short post about Apps

 Content Management, Thoughts  Comments Off on A very short post about Apps
Mar 252011
 

I was reading a blog post by Ethan Marcotte today and he neatly summed up one of the points I was trying to make in my (slightly rambling) presentation the other day:

“But let’s say that your project—or more specifically, your audience—is better served by a mobile-/tablet-/$DEVICE-specific experience. Heck, I’ve worked on a number of projects that benefitted from that approach: where a separate mobile site was needed, and where a responsive approach would’ve been less than ideal. That decision wasn’t driven by any “mobile vs. desktop” mindset, though: it was dictated by research, by our content strategy, and by studying the needs of that site’s particular audience.”

Apps are fine, websites are fine but context is everything and the audience is king. I’ll be writing up my presentation soon.

Three examples of bad colour schemes

 Coursework  Comments Off on Three examples of bad colour schemes
Oct 242010
 

Note: All three websites have been tested using the Colorblind Web Page Filter. The Channel Five webisite and the Reading Borough Council website were not badly affected, however the colours on the Valvona and Crolla website became quite indistinct. Despite this there was enough texture on the web page to prevent the site becoming unusable.

Channel 5Visit the Channel Five website

‘News, entertainment, sport and drama from Channel Five.’

www.five.tv

The Channel Five website seems to be lacking a coherent colour scheme.  The black and blue of the main logo work reasonably well together as do the content areas underneath the banner highlighting the different channels. 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 »

The top five things I learnt at university this week

 Lists  Comments Off on The top five things I learnt at university this week
Oct 072010
 

My colleagues are interested in what I’m learning so I thought using my blog was a good way of keeping my thoughts organised. I definitely learnt more than five things yesterday, but these are the ones that really stuck…

  1. Specifying image sizes tells the browser how big the image is going to be and asks it to display the page accordingly. I did know this once but I haven’t been doing it recently. Time to start!
  2. Using  “/” in relative links tells the browser to go to the root to look for the document and using “../” tells the browser to go up one level and look for the document. I never fully understood the distinction before. Continue reading »