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.

New sites are popping up all over using very simple techniques to create very effective, modern looking designs. And why are these techniques proving so successful? Well one of the biggest reasons is they are used so heavily nowadays on designs for Apple products, namely iPad and iPhone.

That’s right, Noise, Grooves and Text Shadows are such a winning combination because they highlight depth, and pixel perfect accuracy, simply because each of them use a single pixel width or height to create the desired effect, and you can’t get much more accurate than that…Well, unless you are designing for iPhone 4, in which case you have to use a bit of maths to calculate how wide a pixel actually is on screen, as the new screens use a higher resolution than that of superman’s vision!

So for this tutorial we will be sticking with the standard 72DPI.

These techniques have become bread and butter to the every day UI designer and will be commonly seen on a load of websites and applications, possibly to many you say? Well maybe, but being able to perfect these simple steps and techniques means when the right project comes along, you to can easily implement a modern look to your site designs.

So, that’s the intro out the way! Now I thought I would cover off each of the above for mentioned items and display how they can be used and combined.

The Desired Outcome.

Basic setup, open up Photoshop and create a blank image, any size will do for playing around with this, I used 500px x 250px. Throw in a gradient, here I used (#848ea2 top and #5b687f bottom) and we are ready to go!

Technique 1 – Noise

Easy-peasy this one, just don’t over do it! Noise can be produced very simply in Photoshop by navigating to ‘Filter’ > ‘Noise’ > ‘Add Noise’

For this example I set the noise to 1%, Distribution to Gaussian and made the whole thing monochrome to keep away from the multicolours!

Technique 2 – Grooves

Two ways to create grooves, either with images, or with borders in CSS, depending on where you are using them and how often they are to be repeated. I would suggest using a background image for main header breaks or title breaks, and borders for items such as list breaks or repeating items.

a) Create a Groove in HTML

This is best used for repeating elements stacked either next to or on top of each other, and can only really be used with more than 2 items or you will lose the effect. For this, all we need to do is add a border-top and border-bottom to our elements, one light and one dark to create the groove effect.

So, using the colours we are using in this example, your code would look something like this:


ul{
border-top: #3d495f 1px solid;
border-bottom: #8895ac 1px solid;
}
ul li{
border-top: #8895ac 1px solid;
border-bottom: #3d495f 1px solid;
}
 


You will notice that the colours have been reversed from the List to the List item, this is so we can apply the grooved look to the first and last element. You must also make sure you have no margin on your list items and no margin or padding on your list. That easy!

b) Create Grooves with Background Images

This is still a light weight solution and very simple to create, better suited for individual items and one which I would suggest using for this example.

For our horizontal groove we need to create a 1px wide by 2px high image, which can be saved as a 2 colour gif to keep the weight to a minimum.

Selecting your shades here are quite important as they need to be balanced. If your groove uses to heavy highlight and not enough low-light, or visa verse, you can easily loose the effect of the groove and your line will look more like a 1.5 pixel badly aliased cutout.

For the visual we simply stretch this 1px wide image to the width of our canvas like so.

When zoomed out you will see our groove stands out nicely and offers a decent amount of depth. Both the highs and lows can be picked out nicely. For this example I used the colours: #8895ac for the highlight (bottom) and #3d495f for the low light (top).

Technique 3 – Text Shadow

Text shadows are being brought in through CSS3, and even though not fully supported over all browsers, this CSS3 technique alters the look of the element so subtly that when viewed in none supported browsers, the fallback and degradation effect is pretty minimal, it is worth the risk of using it.

If you are concerned about your CSS being valid, which you have every right to,  then you can always create a secondary CSS file for your CSS3 elements.

So we choose a font for our header and copy, for this we are using a web safe font ‘Times New Roman’ but with the range of font replacement techniques available this could easily be applied to a none web safe font also.

We will set our header font size to 70px and center the text, and our paragraph will be set to 18px with a line height of 22px. Both will have a colour of #0f1727 which is quite dark but, we need to keep our contrast up as the same applies with colours on text shadows as it does when creating the groove, to little difference and you will not notice the effect, to much and it will become unreadable, as demonstrated below.

So the left item does not include any text shadow, the center image has text shadow of white which is to vivid, and the image on the right has the finalised colour which was chosen as #8895ac.

So applying all these techniques together we end up with a very nice, modern looking snapshot of what a full web page could look like.

All I would say is do not over use these techniques, as much as they are popular at the moment, they do become quite repetitive and should only really be used on extremely relevant projects, not just for the sake of using them.

So that’s a wrap! Hope you enjoyed this little tutorial, go now and make some Noise, get Groovy and be sure you leave a Shadow!

To kick things off I will list out my daily bookmarks and sites I visit in order, along with a rough estimate of time spent on each site, then hopefully get some feedback through comments on other peoples daily routines!

My average day I generally visit the following websites:

1. Best Web Gallery

Ever since I was featured in the Best Web Gallery back in 2008, I have made it my first port of call every day to visit the site, take a look at all the new website submissions and play my part in commenting and joining in with the sometimes quite heated discussions on design practices and techniques.

I am also a massive fan of Nick La and his work at NDesign Studio and Web Designer Wall.

Time: I would say on average I spend about 5-10 minutes on this site depending on how many new submissions there are.

2. Apple / Apple Store

Yes yes I am part of that gravy train of Apple fan boys, although I would consider myself tame in comparison to some people I know! I do regularly check the Apple Store, mainly the refurb section as I am keen to grab a bargain.

At this stage I find myself drifting away from my browser and into the iTunes app store, generally having to pull my self away from spending more money on the latest tunes! I am a big listener of music when I work so always having new tracks to listen to is a productive measure in my opinion!

Time: I would estimate about 10-15 minutes here, depending on if I saunter off to the iTunes app store or not!

3. BBC Technology News

I think this should be a daily stop for any techno bod, the BBC technology pad is a great place to find out about new releases in the latest technology, social media news and new digital movements. You can sign up to the BBC Technology feed here. I also then skip around the sport section and latest general news stories to keep up with whats going on in the world.

Time: If there are stories of serious interest here I can be on for around 20-30minutes reading, but usually I would say about 5 minutes is average.

4. Rightmove

Kind of an odd one this one! but for the last 5 months my wife and I have been ‘trying’ to sell our house, so it is now part of my routine to log in to Rightmove and take a look around any new houses that have been added in the last day or so. It is a little addictive house hunting! and our favourite list is getting larger and larger by the day!!

Anyone want to buy a house?! Just give me a shout, I know a great little pad in the North East of England!

Time: Generally about 2-3 minutes, quick search in our price bracket, print off or save details then move on.

5. CSS Remix

CSS Remix is a site that I have visited regularly for a few years now. I have been a little disappointed of late not to see many new submissions, but I am still an avid daily visitor as not only do I enjoy checking out the new submissions, but I also like to see how many overall visits my site is getting.

Time: Lately around 30 seconds as there have not been any new submissions, but usually around 5 minutes.

6. Google Analytics

At this point, I am feeling a little more in work mode and open up Analytics for my daily checks on all my sites to see how they are performing.

I would recommend this step to anyone designing or building websites, always keep an eye on your Analytics, whatever method you use to check them, as it is invaluable information, and can seriously help you keep clients happy via on going maintenance or gather new business via improving and targeting areas lacking in performance on your sites.

Time: I spend a decent amount of time here a day, usually around 20-30 minutes, unless we are looking at online marketing campaigns and I am actively tracking certain sites.

7. Twitter

Well, I was a little bit of a slow burner on Twitter, I only actually got my twitter link on to my site last year!

As the guys at Twitter release more and more features I am finding myself spending more time on Twitter on a daily basis, especially now with Twitter in my iPhone I am sometimes tweeting before I even get out of bed in the morning!

You can follow me on Twitter @branded07

Time: 20-30 minutes a day is about right for my daily Twitterage! Not taking into account wandering off to different linked sites.

8. Facebook

Aah Facebook, I don’t know about you but for me, I am not spending as much time on Facebook as I used to, especially on a daily basis. I do still log in to keep up with the chat, but not nearly as much as I did in the hype days.

I don’t doubt that it has become such a large part of peoples lives but for me it is so ‘common place’ now that I am not really interested anymore. I walked past an internet pod the other day in our local mall, and a teenage girl was sat with what must have been 20 friend chats open on her screen, she was there when we arrived to shop, and was still there 3 hours later when we left.

For me, that is now the direction Facebook has gone, entertaining the younger generation, unless you are looking at it from a commercial aspect. Obviously from this point of view, Facebook becomes another beast all together. This post is from a personal angle, and I am beginning to find value in actually ‘seeing’ my friends again, when I have the time that is!

Saying that, if you want to buddy up, here is a link to my Facebook profile!

Time: 5 minutes max, personal time.

9. Linkedin

I pop on to Linkedin daily to search for new connections and check my recommendations. At the moment, I am extremely busy so finding new business, although nice and always welcome, is coming second to my on going work. I would love to get connected so please feel free to view my Linkedin profile and throw me an invite to connect!

Time: 5 minutes for checking and updates.

10. Smashing Mag

Ok so I have done the social thing, I am now back in web design mode and looking around for more inspiration, I turn to Smashing Mag.

I have been reading Smashing Magazine daily now for the last couple of years and I am always amazed at the great and diverse level of content available for web designers. I generally integrate items I find of interest on Smashing Mag and retweet them on Twitter. Visit Smashing Magazine here.

Time: I can spend 10 minutes a day easily on this site

11. Gizmodo

Similarly to Smashing Mag, I use Gizmodo as a great resource for Technology news.

I also find it a great way to get some banter from other techno bods on the articles posted and read other peoples views on what is hot and whats not.

Time: I would say around 15 minutes a day is spent reading Gizmodo articles.

12. Apple Movie Trailers

I love films, and I am an avid cinema goer. It has become a weekly excursion for my wife and I, we even own an Odeon Premiere card, which I treat with more care than my bank card!

So I love to visit the apple movie trailer site to check out the new releases and teasers of up and coming films. I think tonight it is Sex and the City 2 night… but it looks like I am going to be ill this evening and unable to attend.

Time: About 2 minutes on the site excluding actually watching the trailers or reading the synopsis.

13. The CSS Awards

Since Branded07 won site of the month back in December 2009 I have been visiting the CSS Awards site as it is a great resource for inspiration.

It has a very dedicated judging panel, of which a random selection judge the submissions on design, creativity, usability and content, ranked out of 10. These then get placed and chosen from the daily submissions to win the monthly award and finally an overall site of the year.

It is really interesting to see how others rate the level of your work and it is nice to see how different popular sites get ranked.

Time: I usually spend about 5 minutes on this site as there is only 1 new submission a day gets ranked and placed on the site.

14. Dribbble

No, this is not my weak attempt at getting a Dribbble invite! That’s next week…

Dribbble has been brought to fruition by Dan Cederholm from Simplebits and Rich Thornett who have put together a great site made up of top designers, developers and creatives showcasing small screen shots of designs, projects and applications they are working on.

It uses an invite process to be a part of the Dribbble community in order to keep up standards of design work available on the site. It is a fantastic resource for getting an insight into what new designs could be released and what people are working on.

Time: I spend about 5-10 minutes a day on Dribbble checking out the new snapshots and responses.

Then after all that, it is down to work! So that my friends is what I do on a regular daily basis. It is amazing how I find time to do anything else! So I would love to hear your daily web paths and routines, maybe I can pick up a few new ones for my trails!

Happy Tapper design only

I was delighted to work on my first iPhone app website design, I know I know, a long time coming! Hopefully this will be the first of many as there is something nice and subtly challenging about keeping up with the high standard and trends of all the great iPhone app sites out there.

I am overall happy with the final result and the client was delighted!

Happy Tapper detail

Happy Tapper subpage

I will be posting a link to the site once its live so keep an eye out!

This technique of image replacement can be found on a range of websites including the Apple website and Web Designer Wall, and it has a range of benefits, mainly loading time and reduction of file size.

Using the image replacement technique is very handy when each link is unique. If you notice on the Hull Digital website, each link on the navigation has its own unique background on rollover. It can be used if each link has the same interactive states but I would advice using CSS more in this case. So here is a short tutorial on how to create an accessible based navigation similar to the Hull Digital website.

All the files used in this tutorial can be found here: Download
You can view the final navigation here: Final Navigation Demo

1. Start with your sprite.

First of the whole navigation is drawn from 1 single image. This reduces the load time required and also avoids any delay on mouse over by actually loading in a new separate image.

Here is what your image would look like.

So once this image has been uploaded we need to set up the XHTML and to do this we use a standard un-ordered list with an ID.

2. The Markup

<ul id="global-nav" >
<li><a href="./">Home</a></li>
<li><a href="./about">About</a></li>
<li><a href="./contact">Contact</a></li>
</ul>

We must then give each list item an ID. This is not ideal, especially not for an ever expanding CMS driven site. But I would not recommend this technique on a dynamic or expanding menu bar anyway. This technique is ideal for smaller static sites, or menus that will not change.

So, our markup now looks something like this:

<ul id="global-nav" >
<li><a href="./" id="gn-home" >Home</a></li>
<li><a href="./about" id="gn-about" >About</a></li>
<li><a href="./contact" id="gn-contact" >Contact</a></li>
</ul>

Now we have our markup we need to figure out how we are going to insert our image. There are many different ways of doing this. The easiest is to display each element as a block element, add the image as a background image and nudge the text out of the way using either padding or a negative text-indent through CSS. This works and works well, however it is not particularly accessible.

You see, if a user has their images switched off on their browser, there will be no text to display, therefore making the navigation inaccessible.

So to counter this we must play around with an empty span which we embed within the <a href> element. Again, empty code tags not great! But to achieve the desired effect it is really the best and most effective way before looking at CSS3.

So our markup ends up looking like this.

<ul id="global-nav" >
<li><a href="./" id="gn-home" >Home<span></span></a></li>
<li><a href="./about" id="gn-about" >About<span></span></a></li>
<li><a href="./contact" id="gn-contact" >Contact<span></span></a></li>
</ul>

And that’s it! Pretty clean huh? Well obviously other than the empty span!

Anyway, lets move on to styling this bad boy.

3. The Style.

Ok, now we have our markup and our image, all we have to do is style it. We firstly need to make sure all the links sit in-line rather than top to bottom, we then need to make sure they are set as block elements so we can actually see the background image, and finally we need to sort out positioning so we can play around with our span.

So, for the initial styling. We need to add a background to the main page to allow the images to blend in, I have chosen a simple noise texture for this example. All image files can be found in the download or in use on the demo page.

body{
background:url('images/BG-main.jpg');
}

We then set up the un-ordered list with ID ‘global-nav’ with a set height and width. This allows us to clear any content beneath as we will be using floats on our blocked list objects.

#global-nav{
display:block;
height:33px;
list-style:none;
}

We then need to look at the standard list item. We won’t look at styling sizes and particulars yet as this will be done with the specific IDs. We can also within this single tag add some global styling to the links and the spans as they will all warrant the same style.

#global-nav li, #global-nav li a, #global-nav li a span{
float:left;
height:33px;
}

We now need to make sure our hyperlink has a relative position. We do this because we are going to position our span absolutely over our hyperlink, effectively masking the text behind with the image.

#global-nav li a{
position:relative;
text-align:center;
}

Now we position the span. As we have added a relative position to the surrounding hyperlink and set specific sizes, add an absolutely positioned element within this will be simple and cross browser compatible. We also at this stage include our sprite which will apply the background image to each span on a single load.

#global-nav li a span{
position:absolute;
top:0;
left:0;
background:url('images/BG-global-nav.jpg') no-repeat left top;
}

Now as each of our hyperlinks are different, they all need individually styled elements applied to them. So for this next step we apply two styles, one to the hyperlink itself and one to the span.

#global-nav li a#gn-home, #global-nav li a#gn-home span{
width:102px;
}
#global-nav li a#gn-about, #global-nav li a#gn-about span{
width:109px;
}
#global-nav li a#gn-contact, #global-nav li a#gn-contact span{
width:135px;
}

As you can see from this code we have applied a width to each span and hyperlink to define the exact widths for each item.

So if you check your build at the moment, you should see everything taking shape, but each link will have the ‘Home’ image visible. This is because we need to do our final step which is to position each item according to the size of the link. This is where a bit of simple maths comes in!

Take the image below as a guide for your sizes. The space around the sprite has been increased so the guides can be visible.

Once you have worked out the widths of your navigation elements, it is then a simple case of applying a minus value each time you add a link. Within the style this looks like the following:

#global-nav li a#gn-home span{
background-position:left top;
}
#global-nav li a#gn-about span{
background-position:-102px top;
}
#global-nav li a#gn-contact span{
background-position:-211px top;
}

So as you can see, the first link or the ‘home’ link image is positioned ‘left’ ‘top’ or ’0 0′. The next link along is then nudged to the left by the exact amount as the first link is wide, in this case 102px.

The next figure is then created by adding the first two widths together, in this case 102px + 109px = 211px. For longer navigation bars you would simply continue this trend right the way through to however many links you want on the page.

So re-checking the example you should see that each link now has the correct ‘inactive’ state applied. Now we simply need to add a hover state, and this again is really simple. We need to add the hover state to the ‘href’ rather than the ‘span’ so it will be compatible with the good old crummy IE6!

So your final addition to your CSS would look like this:
#global-nav li a#gn-home:hover span{
background-position:left bottom;
}
#global-nav li a#gn-about:hover span{
background-position:-102px bottom;
}
#global-nav li a#gn-contact:hover span{
background-position:-211px bottom;
}

All we have done here is change the value ‘top’ to the value ‘bottom’ meaning the hover over state looks visible when the user hovers over the link.

The Dreaded IE6!

There is one down side to this swift little technique and that is IE6 will not support the hover of any html element other than a link, so our neat little CSS technique just won’t cut it and you will need to pull in a little Javascript. Luckily there is a script at hand, and it is know as ‘Whatever:hover’. It can be downloaded here and it has simple installation instructions.

So that’s it! Give it a go yourself, making an accessible image based website navigation is simple! Make sure to view the fully working demo and download the files!

My journey started on the night of the 13th, I traveled down to meet all the speakers for a pre-conference dinner which was great. We got down to some techie talk over some calamari and pizzas! I must say for a very small group of people I don’t think I have ever seen more iPhones in my life!

Within the group was the keynote speaker, Rory Cellan-Jones, BBCs Technology Correspondent, Charles Arthur from The Guardian, Anand Verma from Sapient Interactive and Kai Gait from GSK. Also present was Matt Seward who won his ticket to come to the meal and conference through the HDLive competition. Matt runs a small web design agency in Leeds called Kilo75, and he was a pleasure to chat to.

After dinner we all headed back to the hotel where I spent the next 2 hours in my room pacing over my speech and making my final modifications. Then it was off to bed for a well earned rest before the big day!

8.15am came pretty sharpish, I even un-characteristically missed my breakfast! (Nerves!) We arrived at KC Stadium, the venue for the conference just on time to get setup with the AV guys who did a marvelous job throughout the day.

The conference opened with Rory’s keynote on “Digital and technology in the UK today” which was extremely enlightening. Jaan Orvet then followed, The Swede from Noded! His talk was on Noded, entitled “Don’t limit yourself – work Noded” It was an extremely interesting speech about finding the best team for particular web projects and searching outside the box. I have just downloaded a copy of his book, “Noded – The Untouchable Business” which was written along with his business partner Andreas Carlsson. I am sure it will be a very interesting read.

Charles Arthur and Mike Butcher from TechCrunch also spoke, Mike gave an interesting speech about business start-ups.

We had a break for lunch where again, I ate very little as I was first up after the break! 1.30pm arrived and it was my turn to go on. I was quite pleased with how much I actually held my nerve, (Kai may disagree!). My speech was all about how much a well designed website can influence a business and its presence on the web.

It was quite difficult to judge the audiences technical knowledge so I didn’t go to much into coding techniques and covered off more detail on good design practices. It seemed to go down really well!

After me was Kai with his talk on his on going digital battles in the pharmaceutical world, the difficulties they experienced when incorporating social media into their business due to different rules and regulations, and how relying on strong content written for search will enhance a websites rankings. Kai also mentioned that its been heard some GPs gather their medical information from Google! Which is rather worrying…

Next up was Karen Barber from Audio Boo. Karen had a few technical problems at the beginning of her talk but pulled it back marvelously once she really got into her business and booing!

And finally to round up a great day was Anand Vermas talk. I have to admit, I was totally taken back by the quality of work Sapient are producing and Anands talks was extremely inspiring. He touched on a project they are working on to close his talk involving Augmented Reality, which was pure wizardry! I am definitely going to have to get my study cap on and get myself some of that intel!

So all in all it was a thoroughly enjoyable day and a great experience. There is already now talk of HDLive10 so lets watch out for next years conference!

Video Podcasts to follow shortly! – Follow the comments and Tweets here!