A sense of style
This entry was posted on March 8, 2008
How important is it as a web designer / developer to develop a unique sense of style? I’ve always worked hard to not follow a style, but it seems my efforts have been in vain! In my quest to be different, I actually just result in producing the same work. However, I’m not entirely sure that’s a completely bad thing.
You always create very clean and spacious designs that are generally minimalistic with a set color scheme. I like your style because it’s quite unique from the normal stuff out there. They are different because 95% of personal sites are all “i like the mall n’ lip gloss n’ boys” kind of stuff with ugly celeb blends, teeny text, and all that crap. Either that or they are obviously overdone by someone trying to do too much all at once, like every “Web 2.0″ graphic imaginable. You design stuff to the point, without any question. It makes a visitor appreciate, and focus on, the content more when it’s that way, in my opinion.
That’s something the very kind Melissa told me, and it really got me thinking. Is this “style” I’ve developed something I’ve deliberately worked on, or is it just a result of what I have been working on? Either way, it seems a style has developed inside my work. I agree with everything Melissa has said, even if I don’t always recognise it in my own work. I think it’s a style that has developed subconsciously.
I don’t mind admitting that I’m not the best when it comes to working with graphics / images. This, I think, leads me to focus more on the usability side of things. I love creating layouts that use as few images as possible, and I get really obsessive over my markup, making sure it’s as semantic as possible so that the site still ‘makes sense’ when the layout can’t be seen for whatever reason.
Do you have a style that shows in your work? Can you recognise styles in other people’s works?
12 lovely people have commented
A not-so-secret secret
This entry was posted on January 4, 2008
My new rainbow-coloured navigation has gone down very well with lots of lovely comments, even several people admitting to visiting Calm Banana just to play with the navigation. Hey, if it brings in visitors, why not? 
As a thank you for all the kind words, I’m going to show you how I built my navigation.
It starts with a basic unordered list.
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">extras</a></li>
<li><a href="#">domain</a></li>
<li><a href="#">links</a></li>
</ul>
To distinguish this unordered list from other unordered list I’m going to use on the site, I’ve wrapped it in a div tag with an id of “navigation”. Also, because each link is going to have a different background colour on the hover, I’m going to assign an id to each list-item.
<div id="navigation">
<ul>
<li id="home"><a href="#">home</a></li>
<li id="about"><a href="#">about</a></li>
<li id="extras"><a href="#">extras</a></li>
<li id="domain"><a href="#">domain</a></li>
<li id="links"><a href="#">links</a></li>
</ul>
</div>
And that’s it as far as structure and HTML is concerned. Nothing else is needed; well, apart from the urls for the links, but they’re not really relevant to this tutorial.
Now we just need to concentrate on the CSS needed to make the navigation more aesthetically pleasing.
#navigation {
margin:0 auto;
width:750px;
}
This centres the navigation and assigns it a width of 750 pixels, which is the width of my layout.
#navigation ul {
list-style-type:none;
padding-left:0;
}
This part removes bullets point, and resets the padding on the left of the unordered list to 0. Although I have the “global reset” (* {margin:0;padding:0;}) at the top of my stylesheet, I’ve had problems in the past with browsers still applying padding to the left of unordered lists. This deals with that.
For those of you not fully familiar with CSS, the “#navigation ul” means “every ul tag that is inside a containing element with an id of navigation”.
#navigation ul li {
display:inline;
}
This part changes the display of the list-items (inside a ul inside a containing element with an id of navigation) from “block” to “inline”, and has the effect of making the list-items appear next to each other as if they were a sentence.
Next we have the most complicated part - styling the actual links.
#navigation ul li a {
display:block;
float:left;
width:150px;
text-align:center;
height:2em;
line-height:2em;
color:#FFF;
background:#333;
text-decoration:none;
font-size:120%;
}
This intimidating piece of markup refers to all links inside list-items inside unordered lists inside containing elements with the id of navigation. Ids are (or at least should be if you do it properly) unique to each page. I only have one navigation.
display:block changes the display of the links from “inline” to “block”, which is the opposite of what we did earlier with the list-items. I did this because I want the links to be clickable in as large an area as possible. I don’t just want the text to be clickable.
If we didn’t have float:left, the links would display how a typical unordered list appears. In other words, they would be on top of each other. That’s not the intention at all, so we float them to the left and they pop back up onto one line again.
width:150px tells the browser that the links should all be 150 pixels wide. There are five links, and I want them evenly distributed. The full width of the navigation is 750 pixels, so 750 divided by five is 150.
text-align:center centres the text inside each link.
height:2em lets the browser know how tall each link should be, and line-height:2em makes sure the text inside the link is vertically-aligned to the middle.
color:#FFF and background:#333 sets the colour of the text to white and the background of each link to dark grey.
text-decoration:none gets rid of the awkward underline under each text. Underlines are good as they help distinguish the link from regular text, but with the navigation there is no regular text, and an underline is not needed to show the visitor that these are in fact clickable links.
font-size:120% makes the text in the links 120% bigger than the text in the surrounding element, which in this case is the body. It’s just there to make the links even more obvious.
That deals with most of the presentational aspects of the links, so now there’s only one more thing to sort out - what do we want to happen when a mouse hovers over a link?
We want rainbow colours!
If you’re familiar with CSS, you should be away of the :hover pseudo-selector. Do you also remember that we assigned a unique ID to each list-item? That allows us to do this:
#home a:hover {
background:#C91212;
}
With regards to each link inside a containing element with an id of home, when you hover over it, the background will change from #333 to #C91212. Because there is only one “home”, and there is only one link inside it, we know exactly what’s going to happen.
Here’s the CSS to change the hovers on the other links:
#about a:hover {
background:#ED7321;
}
#extras a:hover {
background:#F2C64E;
}
#domain a:hover {
background:#67BF24;
}
#links a:hover {
background:#3C73C7;
}
And that’s it. When I first put together this navigation, I’d neglected the “display:inline” for the #navigation ul li, which led to a very perculiar staircase effect in IE6 and IE7.
Any questions?
12 lovely people have commented
·
