A whole new look

I have been working at Guerilla now since July 2008 and for most of that time we have been keen to re-design the Guerilla website. Well, we have finally managed to find the time to do it, and this is it!

The website re-design was driven off the back of a full re-brand for Guerilla, so there was a necessity to sync up the newly formed brand with the agencies online media. We worked long hard hours to complete the site on deadline and we are very proud of the result.

We have taken the random theme of the brand and carried this through so the website appears differently every time you revisit, we have brought the diversity in through the news and blog pages, right through to the contact us page and meet the team section.

Feel free to leave a comment on the new website and let us know what you think.

I was asked:

1: Where did you get the inspiration for your site’s style?
2: How do you test your sites for accessibility?
3: What tools or techniques do you use to make sure your sites get built to good standards?

I answered very thoroughly as there was a chance I would not get featured.

Anyway I was told if I get in I would get a PDF version of the mag and a copy sent through the post. So I waited…a month went bye and the new copy of .Net came out (Issue 182) I stood in the shop, searching through this magazine for what must have been like 30 minutes…I nearly got kicked out! I looked under every section, searching for a line, a word, even a mention…But nothing. I still bought it and had my wife run through it a couple of times to check I hadn’t missed it, but no, I didn’t get my feature…Gutted.

Anyway, a few days ago I got a text from a friend saying…

Hey, saw your feature in .Net magazine, am very jealous!

It was in Issue 183! Woohoo! Straight out to the shops to buy it, and there I am! My very own quarter page spread!

“I even have a quote!”

Now for all you big successful agencies this is not such a big thing, but it is my first feature and I am ecstatic!

I am in along side some very special websites which are certainly worth a mention: www.hype.com.br / www.jasmax.co.nz / niketo.ru so I am chuffed to bits!

Thank you .Net! If anyone fancies taking a look it’s in issue 183 pg61 in the gallery section. (You don’t have to buy it but don’t tell them that!)

There are so many nice lightweight Javascript frameworks now a days, mootools, jquery, scriptaculous to name a few, that allow us to do so many nice effects that once were only possible with Flash. Fading buttons, gallerys, slides and so on can now all be achieved by a much more accessible route.

Now I know Flash has been pushing for accessibility, but it can never really give you the content benefits that a Javascript or plain XHTML/HTML built site can. This only leads to adding noscript tags and making your website code all messy.

One thing Flash can give you is a damn good looking website! But I have to say, this can only been achieved by some extremely talented designers.

I have gathered together a few websites below which I have found and bookmarked over the recent months which really made me go WOW!.

So why not give them a tickle and see what you think! But remember to download Flash Player!

Saizen Media

Original Source

Galaicofolia

Axiom

Ian Wharton

Maria Filo

Eco Zoo

Carona Beach

Oasim

I would like to start making this a regular feature, maybe monthly. So if you like what you see and dont have the time to troll around the net searching for well designed websites to nosey at, make sure to keep in touch via my RSS Feed on this link.The following sites can be found on various web design galleries, mainly CSS Remix, Design Shack and CSS Drive.

Turbo Milk

Web Designer Wall

Volll

Authentic Style

Culture Code

Eton Digital

Legendary Aircraft

Meomi Cloud House

MochiAds

New Concept

Résumé Girl

Now everyone has their own techniques on implementing images into a design of a web site, whether it be a background image, logo, or portfolio piece, all of which need to contribute a degree of information.

Let us first of all tackle the static image.

Everyone in the web design/development community knows that when implementing images to a site you need to have a piece of descriptive text attached to that image, aka the ‘alt’ tag, this is very useful incase the viewer browsing your site has their images turned off, or if they are visually impaired and using a screen reader.

So quite simply your image code would be something like this:

<img src="branded07_img.jpg" alt="Branded 07 Image" />

And then of course you would add your style alignement, etc etc.

Now how about Images that portray important information about your site…

This was of course my very embarrassing and amateur mistake, which im not afraid to admit as I learned a lot from it.

In a particular site which I had designed, I had been implementing images used in logos and even site navigation using background images applied by css.

Now this is a great technique for making your site visually lovely, but it wrecks your site when images are turned off as there is no alt tag to display!

Example:

My technique for showing images used to be by using css, with a block element and a background-image. If I wanted the image to react on hover then I would duplicate the image with a different look, either colour or shade etc, then change the background-position property on hover. This works really well as you get no delay when hovering as the image is already loaded up.

<style>
a, a:visited{
background: url('images/b07_test_link.jpg') no-repeat top left;
display: block;
width: 440px;
height: 50px;
}
a:hover{
background-position: bottom left;
}
</style>


The problem arises when you turn your images off, there is nothing there! And for an image which portrays important site info like site navigation or logos, this is a real bummer.

The Answer:

Well I messed around with a few solutions and came up with what I think is a pretty good fix!

Instead of using a background image, we instead, have our div or a tag displayed as a block, as before, but this time with a little thing called overflow:hidden; applied.

Now what this does is it means we can still have our rollover image with hover reaction, but instead of pulling the image in from a background image, we actually insert the image into the html as an img tag. we then position the img using css and with our wrapper set to overflow hidden, the result is pretty much the same! Although this time, the img description is there for all to see if images are switched off.
<html>
<head>
<style>
a, a:visited, a:hover{
display: block;
overflow: hidden
width: 440px;
height: 50px;
}
a img{
margin: 0;
}
a img:hover{
margin: -50px 0 0 0;
}
</style>
<head />
<body>
<img src="branded07_img.jpg" alt="Branded 07 Image" />
<body />
<html />


Slght issue with this in < IE6 but nothing to serious, the hover state does not seem to react for some reason, still working on that one!

The Conclusion:

Images are a great way to portray information, but make sure that imortant site information always has an alt backup, try to keep navigation to only background images with text to display the wording, and your logo is your brand, if someone has images switched off and you dont have your logo description on, they may aswell be on ebay!

GAWDS Here I come!