9 simple design doubts * 1 x

10
June
2007

illab.jpgThe web world is in continuous evolution, except this blog. (a little pause where has been excluded my almost constantly update page on del.icio.us).

In this post and three following ones I’d like to tell you about some little design doubts I had making two extra-work sites, with related solution links-equipped.

First site is called “The Lab of the Central Scrutinizer – also called “The Whitezone” – where I, Marco Rosella, collect the experiments made in my weblogs”:

1) How to order in the best way some of the post of own blog? – Creating a brand new blog that suggest again the same posts (“always recycle“) in a “collection of-” format.
In web design blogosphere, that receive a big support by the social bookmarking site, is very important to remember that in the best cases 1 write the post, 50 comment it, 500 suggest it, 5000 read it. Who benefit of this are obviously the person who write (from here: “But why not make something new? Instead of linking to a few articles every day, write one. Instead of showcasing and discussing the latest designs, design something. You’ve got this absolutely batty opportunity of instant global publishing. Publish! The world is your oyster!“) but also who suggest collecting the ‘most quantity’ (sometimes on be satisfied by a number or an “how to” in the title of the post – but is obvius that if a script or a tutorial doesn’t works it will not be suggested again) of interesting posts to links.
One time there was the trend of the big lists like Handbook or Veerle’s Interesting Links (two years ago I try with ‘the collection’), now obtain a certain success the sites with feed like MiniAjax or Smashing Magazine, and obviously the gallerie’s army.

2) How to create a template in little time? – Betting on black and white, the single column, and updating the phrase “I love minimal!” in “Web design is 95% typography“.
In fact the typography, but mainly the layout (sometimes the typography alone can define the layout) will constitute the scaffold of every web site and must be study quite in depth. I found a good starting poin in the slide of two talks by Mark Boulton at the SXSW: “Web Typography Sucks” (I, my friend Antonio and a nice newyorker knew at the hotel lost it because we got off at the wrong bus stop; I said to the others “Now the people will go out from there saying ‘One of the best talk I attend in my life!’”. Sadly, I was right.) with Richard Rutter, and “Grids Are Good” with Khoi Vinh.
I will reuse the same layout, adding a column on the right, for the redesign of this blog ready for the 2012. (we are leaders of tomorrow). To make the text aligned with the header and the footer, I used and unpopular text-align: justify; this article on Digital Web Magazine, however, say this:

You are probably already familiar with the text-align property, but you may not have thought about using the justify value. There are few cases when it’s useful; however, when using narrow, newspaper-like columns, it can greatly improve the flow of your text and help define the layout and overall design of your pages.

3) Is possible to insert, with rollover effect, 2 links with ‘image replacement’ in the same <h1>? - Years and years of navigation on web teach us that, in most cases, the title in the top-left of the page is linked to the homepage of the site.
The title could be a simple text, or substitued by an image; in both cases I used an HTML code like this:


<div id="header">
<h1><a href="http://example.com">Titolo sito</a></h1>
</div>

where I inserted an h1 in a div “header”, and inside it the linked text.

To replace the text with an image with CSS I used the image replacement tecnique Accessible Image Replacement by Mike Rundle :


h1 a {
    display: block;
    width: larghezza immagine;
    height: altezza immagine;
    background: url(immagine.jpg) no-repeat;
    text-indent: -9000px;
}

The inline element <a> will become block-level, so the dimensions can be set: these will be equal to the one of the image, inserted as background of <a>, while the text will be hide translated outside of the browser’s visible area.
To the link could be added a rollover effect using the Fast CSS Rollover technique:


h1 a:hover {
        background: url(immagine.jpg) no-repeat bottom;
}

The h1 of the title of the Lab that I had in mind contained instead two links inside:
The Lab of the weblog Central Scrutinizer.

Instead, the subtitle with only two linked word :
(also called “The Whitezone“)

Translated in HTML code:

<div id="header">
<h1>The <a id="logolab" href="http://lab.centralscrutinizer.it">Lab</a> of the weblog 
<a id="logocentral" href="http://www.centralscrutinizer.it/en">Central Scrutinizer</a>
</h1>
<h2>(also called "<a id="logowhite" href="http://lab.centralscrutinizer.it">The Whitezone</a>")</h2>

In the CSS I made the header position: relative in the way to become the reference for the three links which I assigned position:absolute, and moved these with top and left properties inside the header div. (a similar example is explained in this post by Andy Clarke on 24ways.)
headerlab.gif

In the end, for the three links I used the image replacement and the rollover as in the example above inserting as background the images logocentral, logolab e logowhite.


a#logocentral { 
	position: absolute;
	top: 47px;
	left: 0px;
	z-index: 5;
	width: 129px;
	height: 72px;
	background: url(images/logocentral.jpg) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logocentral:hover{ 
	background: url(images/logocentral.jpg) no-repeat scroll bottom;
}

a#logolab { 
	position: absolute;
	top: 6px;
	left: 150px;
	z-index: 1;
	width: 183px;
	height: 110px;
	background: url(images/logolab.png) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logolab:hover{ 
	background: url(images/logolab.png) no-repeat scroll bottom;
}

a#logowhite { 
	position: absolute;
	top: 117px;
	left: 5px;
	z-index: 10;
	width: 348px;
	height: 57px;
	background: url(images/logowhite.jpg) no-repeat scroll;
	overflow: hidden;
	text-indent: -9000px;
}

a#logowhite:hover{ 
	background: url(images/logowhite.jpg) no-repeat scroll bottom;
}

See you! ->(1 – continue…)

17 comments:

Leave a Reply


Here's the list of topics.