BaseHQ Web Design
Just launched a website to promote my web design and graphic design business in Dundalk Co.Louth. The website contains some examples of my work & more will be added shortly…..
Insurance Assessors in Dundalk Co. Louth
Just launched a new website for Stephen O’Connor of OCAD Insurance Assessors in Dundalk, Co. Louth. These guys represent you when making a claim to your insurance company and will ensure that you get the best deal possible. Very handy service in the current cold spell. Visit them at www.ocad.ie
Slush Frozen Drinks
Website design for Slush, suppliers of slush (frozen drinks) machines & their syrup / flavourings. Not a whole lot you can say except thats its a basic brochure website written in XHTML & CSS.
Website design for Dixons Hummer Hire
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 
How Web Users make Decisions
How do web users make decisions on what link to click on or what page to browse to. The answer has to do with the consequences of your actions and a shortage of time.
Why do website users make the decisions they do? What makes them click on certain links & what is the thought process behind those decisions? When a user lands on a particular page, they are presented with various options, usually in the form of links. So, what makes them choose one over another?
The answer has to do with how different types of people make decisions in different types of situations. Many nieve web designers build sites presuming that users land on the homepage, read all the text, look at all the links & then make an informed decision on what link to click on or what page to go to next. This is how most people in high pressure jobs (where their decisions have great consequence) make decisions, eg. a businessman or politician.
The reality is quite different. To understand the decision-making process we must look at how people in high pressure situations make critical life or death decisions under pressure of time. People like airline pilots & firemen don’t make decisions in the conventional way. You would presume that a fireman arriving at the scene of a fire would weigh up all the options open to him, analyse each possible course of action, then decide on the action with least danger & most chance of success. Especially as the consequences of their actions can be the difference between life and death.
In fact, the truth is alot more shocking….
As the fireman is under alot of pressure and time is running out he must act quickly. He doesn’t have time to analyse all possible courses of action. Instead, he looks at the situation with focus on his goal (eg. rescue the people in the burning building), then, he scans the first possible solution that pops into his head for any potential pit-falls. If he finds one, he then quickly comes up with option 2 and scans that one.
The process is repeated until he finds a solution that has acceptable risk and a good chance of success. This is the course of action he takes even though a better option may be available if only he took the time to work it out. As the consequences of his decisions are so serious we would expect him to take his time, but time is not a resource available to him.
Web users on the other time are more similar to the pilot or fireman than to the politician or businessman. Although the almost always have time, they are impatient and always in a hurry. When presented with a page they quickly scan the page for what they are looking for and if they find something like a link that remotely resembles a related image or phrase they’ll click on it. regardless of weather its a close match or not.
This is basically increased risk taking and because the consequences of their actions are so small it doesn’t bother them that they’ve made a mistake & clicked a wrong link. They can simply hit the back button and start again.
So, like the fireman their actions are under pressure of time & they both are subject to the consequence of their actions. However web-users actions suffer little or no adverse consequence and are therefore fickle & restless in their browsing.
Dundalk Insurance & Mortgage Brokers
I just launched a new site for my good mate Chris Malone, www.maloneinsurance.ie
They not only do insurance but also mortgages & property valuations.
Cheap logo designs
Web & graphic designers out there wont like to see this but there’s now a very good way for potential clients to get their hands on high quality cheap logo designs.
Logo Tournament is a new & novel way to introduce companies to a large group of graphic designers, each of who will submit many logo versions of the brief you provided.
You simply fill out their questionaire, specifing your requirements and the amount your willing to pay (the prize). Minimum fee is $250. Designers then submit their interpretations and you choose the winner. They guarantee a minimum of 30 designs or your money back.
All winning designs are fully legally owned by you and are industry standard vector files. Some of the winning designs can be seen in their portfolio.
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’.
a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
display:block;
line-height:350px;
overflow:hidden;
}
null
A perfect accessable logo added to your website.
HTML:
<a title="Home" id="logo" href="index.html">Home</a>
CSS:
a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
display:block;
line-height:350px;
overflow: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
a{
background:url(my-image.jpg);
width:240px;
height:160px;
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.
a#portraits{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}
Next we need to specify the rollover. What we do is position the background image 160px higher when the mouse is over the link. We can do this with one line of code.
a:hover{
background:url(my-image.jpg) bottom
}
And there you go. View the finished link here.
Here’s the code:
CSS
a{
background:url(my-image.jpg);
width:240px;
height:160px;
display:block;
line-height:999px;
overflow:hidden;
}
a:hover{
background:url(my-image.jpg) bottom;
}
HTML
<a id="portraits" title="portraits" href="#">Portraits</a>;
Talented Belfast Designer Lee Munroe has recently launched a Web Design Gallery to showcase Irish talent @ www.webdesignire.com
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.