CK Services

Ever since Steve Jobs launched Apple iPad last night, the tech world has been falling over itself (including me) to comment on this new piece of technology.
Now I have to admit that I’m an Apple convert – two years ago I was one of the typical Apple naysayers who swore by Windows. What changed? Well I had the fortune to be able to use one of the all-in-one iMacs just after they were first launched. I was forced into using it, I’ll admit, but after a couple of hours of fumbling and cursing, I began to like it. Before I knew it, I’d bought one, soon followed by a second.
Next came the iPhone, typical of Apple’s products, with its fantastic intuitive touch screen interface, bright screen, and huge range of apps. I was impressed, but felt that a bigger screen would be handy. But of course you don’t want your phone to be any bigger than the iPhone currently is.

The Apple iPad - showing e-mail app

But back to the iPad. Many websites are already going on at length about its size, weight, lack of multitasking ability, lack of camera/video and lack of a physical keyboard. But, for goodness sake, it’s still a giant leap forward. When you compare it to Windows-based similar offerings, it’s a Microsoft smasher!

I think you have to look at the other upsides too:
1. Apple claims up to 10 hours battery life. How many Laptops/Netbooks do you know offering that?
2. I’d rather carry one of these into a client presentation session than a Windows (or Linux) laptop or netbook.
3. No physical keyboard or mouse means less clutter to carry around with you.
4. A clear and bright screen – if it’s anything like that on the iMac or iPhone, it’ll be fantastic
5. It’s not made by Microsoft.

And those are just a few. I think there are many more advantages and disadvantages, but I think I’ll reserve final judgement until I actually get my hands on one.

This is an interesting article, and something we designers come across day after day:

http://graphicdesignblender.com/the-biggest-myth-of-graphic-and-web-design

Golden rules that EVERY web designer should obey when creating websites: http://www.ocularharmony.com/more-than-good-design/

Here’s a link to ‘37 ways to promote your website’, a very informative article!
We perform all of these 37 actions on every website we build, at no extra cost, or recommend those which you need to action yourself, as the business owner.

Click here to read the 37 actions

As part of my work, I analyse existing websites developed by other people. These websites are often (though not always) greater than 3 years old. However, it constantly amazes me how many new websites continue to use old HTML/Javascript methods for creating buttons with rollovers. There IS a better way!

The method I learned several years ago doesn’t use Javascript. Instead, it uses pure CSS to create the buttons and the rollovers – all that is needed is a little knowledge of CSS and how the background property can be used on various elements.

When I create a website, I invariably create my menus as unordered lists. I’m going to show you how this is done, and how elegant menus can be created in this way.

I’ll be using my company’s website (which I created) at http://www.ck-services.co.uk as an example in this tutorial.

STEP 1: The HTML
First, you need to set-up the menu in the HTML.
In the HTML, I did it this way:

<div id="nav">
	<ul>
		<li id="home_button"><a href="/index.php"><span class="hide">Home</span></a></li>
		<li id="about_button"><a href="/about.php"><span class="hide">About</span></a></li>
		<li id="services_button"><a href="/services.php"><span class="hide">Services</span></a></li>
		<li id="clients_button"><a href="/clients.php"><span class="hide">Clients</span></a></li>
		<li id="blog_button"><a href="/blog/"><span class="hide">Blog</span></a></li>
		<li id="contact_button"><a href="/contact.php"><span class="hide">Contact</span></a></li>
	</ul>
</div>

I chose to use <ul> and <li> for Accessibility purposes, but you could equally use <div> tags in place of the <ul> and <li> tags.

Notice also the use of <span class=”hide”>Contact</span>. We’ll come to this later, in the CSS.

I set up a containing div with an ID of “nav”, then created the menu as an unordered list within the div.
I then created the list items, each with a unique ID. This is so we can apply a specific background to each list item. We’ll come back to this later, in the CSS.

STEP 2: Creating your buttons
Now you need to create your buttons in Photoshop or whatever graphics package you prefer to use. For each button, you need to create an ‘off’ state and an ‘on/rollover’ state.

On our website, the buttons are very simple – each of the buttons is black, and rolls over to blue. I created the graphic in Photoshop as follows:

As you can see, the ‘off’ state of the button is in the top half of the graphic. The ‘on/rollover’ state is in the bottom half.
So this is going to be the background for the list item with id=”home”.

Once we have all of our buttons ready, we can move onto the CSS.

STEP 3: The CSS

Here’s the CSS for the UL and LIs belonging to the enclosing DIV ID=”nav”:

#nav ul { list-style:none; }
#nav ul li { float: left; }


And for each DIV:

#home_button a { float: left; display:inline; width: 69px; height: 40px; margin: 0; background: url(../images/home_b.gif) no-repeat; background-position: 0 0; }
#home_button a:hover { background-position: 0 -40px; }


What this basically does is set the background of the A tag within the LI with ID=”home” to the graphic I showed you above. It also sets the position of the background image to its top-left corner.
Then the a:hover rule tells it to change the position of the background-image to the top-left corner of the rollover part of the graphic.

Here’s how we work this out:
We use Photoshop to work out the coordinates. We know that we’ll always be aligning to the left of the background image, so we only need the top coordinate.

I use the marquee tool to measure the height from the top of the graphic to the top of the rollover section. This height gives me the ‘top’ coordinate for the a:hover’s background:

We also used <span class=”hide”>Contact</span> inside each of the <li> tags above. I set up a class in the CSS called .hide which hides the button’s text from view. This is so the text doesn’t show up over the button, which can look messy if you’ve flattened the text onto the graphic itself, as I have.
The code I used to do this is simply:

.hide { display: none; }

STEP 4: Testing
Now go back to your page (having saved the HTML and CSS documents of course, and refresh it. You should see that the ‘home’ button is showing the black part of the button graphic only.
When you roll over the button, it should turn blue – that is, it should display the blue part of the button graphic.

Repeat for each of the buttons you wish to create.

That *should* be it. If it doesn’t work for you, check the div IDs match what you’ve set in the CSS, and check you have the co-ordinates of the rollover part of the graphic.

Good luck!

In accordance with my own advice (see ‘The importance of up-to-date content’), we’ve updated our website to provide more information about our services. Some of our clients felt we would benefit from expanding slightly on the services we offer, so this is what we’ve done.