New web design for Dixons Hummer Hire in Dundalk. Fairly simple website promoting their stretch H2 Hummer. Nothing fancy just pure CSS & XHTML design with some asp includes. My accessibility tester likes it & hopefully a little SEO will impress Google enough to avoid Adwords early on…..Anyway, we might just take it out for a spin to celebrate the websites launch

Most web designers limit their treatment of logos regarding accessability to adding the ALT atribute.

<a href=”index.html”><img src=”my-logo.gif” alt=”Home” /></a>

With this method most screen readers will tell a visually impared user that there is a link which is an image described as ‘Home’.

What we want to do is to simply tell the ‘screen reader/visually impared’ user that there is a link called home. This can easily be done using a little HTML & CSS.

null

First i created my logo

Then we start by creating a blank HTML & CSS file. For this tutorial i’ve called these accessable-header.html & styles.css, and attach the CSS file by adding the following code to the head section of the HTML file.

<link href="styles.css" rel="stylesheet" type="text/css" />

In the HTML file create a simple text link like below:

<a title="Home" href="index.html">Home</a>

null

You should now have the something like the above image. Next we need to add the logo image. To do this we’ll use CSS. Give the link an id called say ‘logo’.

<a title="Home" id="logo" href="index.html">Home</a>

Next, go to your CSS file and create a style for the link with an ID of ‘logo’.

a#logo{}

We now need to add the image as a background so we set this in the CSS:

a#logo{
background:url(my-logo.gif)
}

null

As you can see above, we can see only a small portion of the logo image behind the text. The link needs to expand to the dimensions of the background image.

To do this, first we set the width & height.

a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
}

But this not enough, we also need to set the ‘display’ property with a value of ‘block’:

null

So now we’re getting closer except that the original ‘Home’ text is still displayed infront of the image. Next we need to move it off the background by using the ‘line-height’ property:

null

a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
display:block;
line-height:350px;
}
Now we’ve moved it off the logo, we need to remove it altogether. To do this we’ll hide everything belonging to the link called ‘logo’ that is outside that link. This can be done by setting the ‘overflow’ property to ‘hidden’.

Web Designers use a few different ways to create rollover images, usually for buttons. The most popular techniques use javascript to preload the hover image or ‘over state’ however pure CSS is a better more efficient technique. Alot of people however only get it half right.

a{
background:(my-image.jpg);
}

a:hover{
background:(my-image2.jpg);
}

The problem here is that when the image is rolled over the second image still needs to be downloaded from the server. The user will usually experience an unsightly delay between the rollover action and the appearance of the replacement image. Visit hosting.digiweb.ie for an example.

Why people use javascript is to preload the second image in the browser so when its called it instantly appears. CSS alone cant preload a second image from the server but there is a clever work around.

Above we have our 2 images. The left one is the link with the right one being the the rollover. We need these two images loaded with the page but using CSS alone this is not possible. Each image is 240px by 160px.

To get around this we create an image 240px wide by 320px high. Twice the size of the original and place toe 2 images, one on top of the other inside it creating the image below.

null

So now for the HTML. Its fairly simple, just a basic link.

<a href="portrait.html" title="portrait">protrait</a>

CSS Bit.First we need to define the links style. We’ll set the width & height to 240 x 160 and the background as image1.jpg

a{background:url(my-image.jpg);
width:240px;
height:160px;
}

This leaves us with a text link with a small piece of the imahe as the background. The width & height atributes are not being used. To activate these we need to add display:block

Next we need to remove or hide the ‘Portraits’ text. To do this we add line-height:999px

This moves the text 999px down the screen. The problem now is that the text is displayed way down the screen. to hide this we need to add another piece of code: overflow:hidden. This hides everything thats outside the 240px by 160px box.

He claims its a “CSS & Flash Website Design Gallery for Web Designers and Websites from Ireland and Northern Ireland” & that to be included “The website must have an Irish relation (i.e. website or designer based in Ireland or Northern Ireland)”. I’m actually surprised that nobody’s done this before. It should be a good source of inspiration for Irish designers & it would be great if a community could spring up around it maybe in the form of a forum.

It does look very similar to www.bestwebgallery.com but i suppose there’s not alot you can or want to do with a gallery without distracting from the content. All the same, as long as it displays good designs i’ll continue to visit and hopefully submit a few of my own.

+++++++++++++++++++++++++++++++++++++++++++++++++++++
PLEASE NOTE: This technique has been updated & streamlined for HTML5.Click here for the updated post
+++++++++++++++++++++++++++++++++++++++++++++++++++++

Ideally we want the situation above, where the footer naturally rests on the bottom of the browser irrespective of the amount of content on the page. In a nutshell, you need to set the height of a container layer or div to 100% and create a content div and a footer div within this.

The content div’s height is also set at 100%. This will push the footer off the bottom of the page, immediately below the fold. Lets say you want the footer to be 100px high.

Now set the bottom padding of the content div to 100px. This will create empty space at the bottom of the div for the footer to fit into. Finally, set the top margin of the footer to -100px. This will move the footer up into the 100px space you created with the contents bottom padding.

There’s a new Google Analytics App for the iPhone available on iTunes from yesterday. Its keenly priced at €1.59 and displays a graph of visits and other dashboard metrics. It has support for all the websites in your account or all attached to your particular email address. Set up is pretty simple. After installation go to Settings -> myAnalytics on your iPhone and add in your Google Analytics account email address, password and choose your date range (year, month, fortnight, week, day) and your done.

The only down side I can see so far is that it seems to download all the information from Google before displaying the data. As i’ve about 40 profiles in my account, this takes alot of time. The ability to choose which account you want to view before downloading the data would help speed up the app alot.

Version 1.1 is already in development and promises to contain graphs for all the basic dashboard site usage metrics. Sounds good but i’d much rather see data for other metrics like content, traffic sources and keywords.

I’ve recently completed a website design fo Dundalk pub, Good Time Charlies. It contains a dynamic photo gallery, again using the ‘Lightbox‘ script and an updatable events section. This was written in asp with the back end developed by Krishnan Nair, an Indian work colleague. visit the site @ www.goodtimecharlies.ie

I’ve had my eye on the iphone for a while now but was put off as Google Analytics is limited due to the absence of Adobe Flash. Unable to resist anymore (and the €99 price tag with an upgrade from o2) i took the plunge and got the 8G model.

To use the app (which is just a web page for now) browse to http://analytics.ebiene.de/ on your iphone and select settings. Enter your Google account username & password and also the account ID of the analytics account you want to view. This can be found in the URL of the specific account as seen below.

Google Analytics Account ID

You can also specify multiple accounts by separating the ID’s with a comma.