Aren’t they the same thing?

After being shot down by an over enthusiastic designer for calling a typeface a font to a client over the phone this particular developer would now disagree. You see to Joe Bloggs A type and a Font are the same thing, to a developer it’s like saying a Gerbil and a Hamster are the same thing. To them they’re both a small, furry and sometimes smelly caged pet. A designer of the other hand is a little pickier when it comes to detail, after all they are trained to look at the smallest details. He would say to the developer..

“A Gerbil is nothing like a Hamster, Hamsters for a start like to live alone and seem to wake up when you go to sleep. Gerbils on the other hand are the complete opposite, they are happiest in groups and love being active, chewing and gnawing at the bars till you play with them.”

So yes, fonts and typefaces are technically different though relate to the same thing.

What is a typeface?

Think of a typeface as the ‘design’ of the design of the alphabet, the shape of the letters that make up the typestyle. The letters, numbers, and symbols that make up a design of type. So when you say “Arial” or “Garamond” you’re talking about a set of letters in a specific style, a ‘typeface’.

What is a font?

Think of a font as the digital file that contains/describes the typeface. Think of the font as a little piece of software that tells the computer and printer how to display and print the typeface.

Adobe’s type glossary description

According to Adobe’s type glossary: “A font is one weight, width, and style of a typeface. Before scalable type, there was little distinction between the terms font, face, and family. Font and face still tend to be used interchangeably, although the term face is usually more correct. A typeface is the letters, numbers, and symbols that make up a design of type. A typeface is often part of a type family of coordinated designs. The individual typefaces are named after the family and are also specified with a designation, such as italic, bold or condensed.

F*** you designer snob!

Next time you encounter a stuck up designer who likes to take every opportunity to correct you on design related jargon, just think, here’s one small dollop of typography info to counter his attacks. I’d be so blunt as to knowingly misdescribe the font/typeface then counter his verbal nonsense with your new found knowledge.

Time to brush up on your typefaces

Check this out…Typeface Periodic Table

What’s your favorite Typeface and why?

Now if you don’t comment below we’re going to presume it’s Comic Sans and you wouldn’t want that would you?

Photoshop files (PSDs) can be huge in file size, especially if you are working on a large format high resolution file. Here’s a quick tip that can save you valuable HD space, anywhere between 10% – 90%, simply by turning off layer previews when you save.

Before you save

It’s best to organise your layers in groups and delete any unwanted layers before you save. This isn’t a crucial step but it can drastically reduce the size of the PSD when saved. To do this header on over to the layers palette, click the icon in the top right corner and click ‘Delete Hidden Layers’ (shown below).

Turn layers off

Now that your layers are tidy and organised it makes this next step easier. To the left of each layer you should be able to see an icon of an eye (shown bottom left image), simply click on each eye icon to hide the layers (shown bottom right image).

Compare file sizes

In theory the PSD with layers hidden should be smaller in file size than the same file but with layers shown. The graphic below is an illustration showing the same PSD with and without layers shown. In this case the file with layers hidden is over 50% smaller in file size than the same file showing the layers.

Is it right for you?

In most cases yes. Personally I use the approach on backup versions of a design only. I tend to keep the layers in an active working copy shown for speed. If I get to version filename-01F however, I’ll use this approach in all previous files, A through to E. Finally once the project is finished I will ZIP up the folder, after erasing all unnecessary layers and archive them away. On one project alone I ran through 13 PSD versions and saved a total of 2.3GB in disk space with this technique.

If you have any questions please feel free to leave them in the comments below, I’d be more than happy to answer them.

This set of points is designed to help you critique a design, specifically for ecommerce websites, to make them perform at their optimum, to help with usability and inevitably increase sales and conversions. Each point may or may not be relevant to the design you are working on so use them purely as a guide and point for discussion. Time and budgets may also play a part in the design process so all these points may not be actionable.

13 reasons why your online store will fail + Solutions

Does your design pass each of these common ecommerce mistakes? If not then you have room for improvement and the potential to make it perform better.

Lack of detailed product information

Write as much information about your product as possible. Include sizes, weights, shapes, colours, everything you can. Put yourself in your customers shoes, what information would you want to know about your product. Try to answer the questions yours visitors may have. Remember this unique, detailed information also has an SEO benefit so the more you can write the better.

Only one product image

Upload as many detailed product shots as you can. You can convert a new visitor to a customer simply through quality product shots. Consider having your products professionally shot, this will improve confidence in quality and service in your customers and make your business look more professional.

Long and confusing checkout process

Make this important stage as simple as possible and remove any unneccessary obsticles to allow the customer complete their order with minimum distractions. If you have a multi step checkout process then consider streamlining this down to maybe one or two pages. At this stage you have them searching in their purses for their payment card, the last thing you want to do is lose them now through a complicated long drawn out payment process.

Hiding contact information

Consider displaying your contact information in a prominent place. The header is an ideal place as this is a place that typically stays the same throughout the site. Show your phone number and a link to a contact page with a contact form on it. Give them every reason to think you will look after them in case they have any questions. Customer loyalty and return business is the foundation of a successful ecommerce shop.

Requiring an account to order

Allow them to purchase your products without an account but highlight the benefits of creating an account prominently. Selling products in the most important part of your business, making them signup yields further benefits for your business but should always be optional as to allow the transaction to complete, as quickly and as easily as possible.

Inadequate search

A comprehensive search tool is imperative for shops with hundreds of products and sections. Searches allow a visitor to by-pass the lengthy manual search and allows them to see the products they are interested in. If your search doesn’t work or is limited then it may be doing more harm than good.

Poor customer service options

Build confidence and a lasting relationship with your customers by supporting their needs. Be upfront with contact details and customer service option and display them prominently throughout the website. After service support helps eliminate bad press and improves your businesses reputation as being a quality, trust worthy etailer.

Tiny product images

Your product images should be big enough to catch the eye and of high quality to provide the visitor with a good interpretation of the product.

Poor shopping basket design

A good shopping basket should allow a customer to purchase a product quickly and easily while maximising on upselling related products. Keep it clean and clear. Allow users to add multiple items, edit the quantities and remove any unwanted items. It should do all this while staying transparent to the visitors eye. Without a well thought out design a sale and the potential of repeat business may be lost.

Lack of payment options

Consider implementing more than one payment option on your shop. Users who find that their desired payment method isn’t accepted will not in most scenarios continue with the purchase. By accepting as many payment options as you can increases your catchment and inevitably sales. It may be a little extra work for you but in today’s highly competitive online marketplace every advantage helps. The same goes with your competitors, if your don’t support a users payment method then you could potentially steal the sale.

Not including related products

Related products are crucial when trying to upsell. A pair of trousers maybe land you a sale, but my recommending a belt, a t-shirt, a pair of shoes and a jacket, that sale could really be boosted by this lucrative upselling method. Related products have two obvious places where you can implement them, firstly on a product specific page and secondly in a users shopping basket once an item has been added.

Confusing navigation

Your websites navigation should be clear, well structured and fixed. Be clear as to what you call each link and don’t be too creative with the language. If a section of your shop sells trousers then call it trousers, if it contains disposable barbeques then call it what it is. Devise a clear site structure that is clear and removes as many levels as possible. Remember the three click rule, make sure every product page can be reached within 3 clicks or less, failing this may render the shopping confused and frustrated.

Put focus on products

Ecommerce sites should focus on professional, crisp and well presented product imagery. Forget about designing fancy headers with bright graphics and this will detract the users eye away from your products. Keep the structure light, clean and clear and focus your efforts on presenting your products effectively in your online shop window. Conventional shop windows are filled with the latest products and intices a walker-by into the shop. The same principle should be applied online with a strong product line or offer to lead the visitor through into your website.

Many design blogs are full of helpful howto guides and tutorials on using Photoshop Illustrator, Flash, etc. This is great if you have a design in mind that you wish to accomplish. But how do you actually design something?

Design concepts explained

The design concepts explained series aims to explain various processes of design. If you’re itching to use those Photoshop tutorials but are stuck for inspiration, if you wish to find out what a ‘designer’ actually does, or if you are a seasoned pro who wants to refresh their memory, then read on!

Affordance

This week we focus on the concept of Affordance. Designers in many different specialties use it, but we mainly concentrate on its use in graphic design, user interface design and game design.

The term ‘Affordance’ has a strong basis in psychology. It describes the understanding of how we interact with an object. To see this process in action, imagine a two-year-old child with a pile of shapes and a hollow box with silhouettes of those shapes cut into it. To play the game, the child must fit the correct shapes through the correct holes. This seemingly fun game is actually a trick – it’s not there to entertain, but to educate. It’s teaching the child how objects interact with other objects, and helps build on their understanding of how the world works.

Affordance in game design

So how is this concept used in design? The game ‘Chronicles of Riddick’ manipulates our understanding of a real-world object to give us a clue of how to interact with the main menu.

Thanks to toy designers tricking us into learning during our childhood, we can understand that this cube has six sides and when an option is selected, it rotates to display different options. Our understanding of how this object works in the real world allows us to use this menu intuitively.

Affordance in iPhone apps

Let’s use a different example, this time from an iPhone application. In just a few seconds of seeing this interface, we intuitively know how to turn each setting on and off. This interface has been designed to afford pushing and afford switching to manipulate the controls, without any instruction to the user.

Affordance in web design

Affordance is used abundantly in web design. Perhaps it is used a little too much, especially when it comes to those 3D buttons! Below are a few examples used on well-known, popular websites.

Summary

Before seeking out the Photoshop tutorials on how to make buttons with bezels, tutorials on how to use gradients to give the appearance of 3D buttons, or guides on how to make those shiny reflective round buttons that look lickable, remember to ask yourself “why use affordance?”

The examples shown above help users understand how to interact with the interface. At the end of the day, design is all about the user and these concepts should be used for their advantage, and not clutter, complicate or hinder the interface.

Further reading

Book (link to Amazon UK): Interaction design beyond human-computer interaction
This book covers many aspects of interaction design, of which affordance is a small part. A recommended read for anyone involved in interaction design.

Video (link to iTunesU): RWTH Aachen University, Designing Interactive Systems
These videos give a strong introduction into interaction design and cover many concepts, of which affordance is one of them.

We’ve all seen them. “5 ways to cut your toenails”, “10 things that will bore you silly”. What are they? List posts, link bait style.

Here’s the concept. You take a subject or topic. Devise several tips or points on sed subject, then hit <ol>. But you need to stop right now! These things are beginning to grate on me, and many other users. Twitter is becoming overrun with these low quality, rhythmical posts. I figured the best way to convince you would be with another link-bait post. A bit of irony should prove my point.

1. Every topic is covered 5 times now

Such has become the popularity and laziness of bloggers, you’ll often find that every new blog post they write is a list post. And because of the large amount of blogs / bloggers most topics have been covered at-least 2 or 3 times. Ever heard of saturation? Take the subject “Free wordpress designs”. From memory there must be 100’s of these posts around the web, and only a handful are half-decent.

2. They never really live up to expectation

The most enticing thing about a list post is usually the title. But then that’s it. The rest of the posts contain little meaty content, just lots of poor quality content. Ok, granted, some content, such as designs and perhaps link round-ups might work well with list style posts, but founding your blog based upon lists is a bad idea. A user could feel short changed, and never return. Not good!

3. They stop been interesting or effective

Because there’s sooo many, they are getting old quick. And often this means that they become dis-interesting, and actually turn away customers. So if your going to use them, then do it sparingly. Very sparingly.

4. They don’t encourage positive comments

Its been my experience that list posts often encourage, even if by accident negative comments. People disagree often with something that isn’t explained as well as it could if it had its very own article. Plus, because your writing a huge list, you don’t focus on every point as well as possible, and so possibly you may even be wrong. Make sure what your saying is correct!

5. Little to no long term value

If you write a list post, you’ll probably notice that initial buzz quickly wears off. A proper, interesting article, well written with insightful content will gain much more recognition and value as a ‘genuinely’ useful post.

I hope this post has dissuaded you from using so many list posts! Yes, ok I admit, writing a more traditional blog post requires a little more effort, it needs to flow better and you need to keep yourself much more in line as you write to stop wandering off topic, but a well written post will be equally if not more readable than a list post. So stop, and just write normally! Please, I beg you, because I cant take any more meaningless content.

I’ve had my iphone just two months and the left hand side of the iphone has stopped working, and is completely unresponsive to touch. So on the touch screen keyboard letters Q, W, A, numbers 1, 2 and character ‘-’ are unselectable. I have restored to the original setting twice but this hasn’t fixed the issue. The firmware is up to date and the screen has been cleaned to eliminate grease and dirty as being a factor of the malfunction. After a search on Google a few forum threads didn’t give me a clear indication as to the problems origin, whether it could be a hardware or software related.

02 or Apple’s problem?

Do I take my faulty iphone to either an Apple store or my local 02 store? I received a mixed response when asking friends so I decided to see if I could gain any further info from the Apple website. I found this section on the Apple site that proved little help. A few help screens appeared while browsing through the section but no real solution was found. I found their Online Service Assistant help hard to fathom so I logged off and gave up. With experience of resellers I presumed that going to 02 would be a waste of time as I’m sure the words “sorry sir, you need to enquire with Apple as it’s a hardware issue, not a network or sim issue” would be spoken.

Now Apple stores aren’t aplenty in northern England, the closest store to where I live is Sheffield at the MeadowHall shopping centre, some 55 miles away! Not exactly a hop skip and a jump away, but I decided to make the trip under the hope the phone could be fixed there and then, saving me the hassle of being phoneless for a few days.

Book an appointment at the Genius Bar before you go!

This is something I didn’t do! I arrived at around 11am and just managed to get a slot for 3pm even though the store was quite. Come 3pm when I returned the some store was heaving! Any later than 11am and I would have had a wasted trip. Booking an appointment online is quick and easy…

Visit the Genius Bar Apple page

Select the store you wish to visit then click ‘Reserve’.

Select user type

I picked Guest, I’d suggest the same.

Fill in details

A simple process…

Select Genius Bar

First big technical support button

Select iphone

Choose an available date/time

This will save you alot of time…

Once complete, you should get an email notification. Once instore you’ll notice your name will be displayed on screens above the bar around the time of your appointment.

A quick diagnosis

The Apple store is so busy, the Apple Geniuses only have a short amount of time to make a judgement call on the fault. Typically if they suspect it’s a software issue, either iphone related or network/sim related they’ll attempt to resolve the issue. If they suspect it’s a hardware issue, like they did with my iphone then you’re in with a great chance of being given a brand new iphone as long as it’s in warranty. This happened to me, I described the fault, demonstrated the issue and with 5 minutes I had a new iphone. The old iphone was wiped in front of me of all it’s data (they ask me if I’d backed it up first, which I had) and replaced with a new iphone. Viola! Sorted!

In summary

If your iphone encounters issues, do the following:

1. Turn it off and on again
2. Let the battery run down below 20% then recharge
3. Backup data immediately by syncing with your Mac itunes
4. Try a full restore through itunes (takes up to 20mins)
5. Remove then insert the sim, cleaning any obvious dirt and dust particles
6. Check battery connection for any dirt or damage
7. Recoil whether it has encountered direct sunlight, extreme temperatures, water contact, impact damage etc etc

If you’re still encountering issues I would strongly suggest booking in an appointment with an Apple Genius at an Apple store as they could resolve the issue the same day. If you have obvious hardware issues like me you’re in with a chance of getting a new iphone all together.

Remember, look after it, get a protective case and consider an AppleCare extended warranty once the standard 12 month warranty expires.

Internet Explorer could be affecting how your clients websites are displayed…… and I’m not just talking about IE6! IE8 has finally thrown it’s hat into the ring and is a reinforced weapon in Microsoft’s fight to maintain their prominent market share in web browser usage. Web professionals, like you and I, code new sites to cater for the Ogre better known as IE6. Using hacks and fixes to make the website display as desired. We get these sites signed off by the client, the site goes live and we get paid. Now here’s something to think about… Do you support future versions of browsers?

The scenario

You build a site pre IE8, launch it without any issues and the client is singing your praises. Then one day out of the blue they call you up and complain the website is broken in IE8! What do you say? The question is do you support their website through future releases of web browsers? If you haven’t stated you don’t then you could be liable to fixing it, especially if you stated in your initial pitch that their website will work cross browser.

The effect

Now 10 clients call you up and demand the same fixes as in scenario A, and they don’t want to pay extra, I’d say your screwed! Big agencies have potentially hundreds of clients, all with the possibility of calling up and causing chaos. They typically are covered legally as their initial specification is water tight and covers future browser releases and support.

The solution

By being efficient and actively taking the first move to combat this issue you can save yourself a few sleepless nights. Make the first move and contact all of your clients detailing the news of this latest browser and the potential effect it could have on their website. A letter or email from you makes the client feel protected online and serves as a reputation booster for your company. Being proactive and offering the answer to some potentially bad news that is yet to occur can really solidify the relationship between you and your client. Within the email you can start with simple facts, like:

With UK usage estimated to be around 65%, Internet Explorer is by far the most popular tool used to browse websites – including yours! But beware, big changes are afoot. In reaction to customer demand, or perhaps just off their own back on this occasion, Microsoft have recently launched a new, upgraded Internet Explorer Version 8 (IE8).

new browser implications:

This new browser brings with it resolutions to issues Microsoft were aware of e.g. malicious viruses and the like, but it also brings with it potential compatibility issues affecting the viewing of websites. The main concern for many e-businesses is that the way the new upgraded version of Internet Explorer interprets their website has changed so that it won’t be completely “backward compatible”. In other words, it’s likely to have formatting implications for anyone with a website developed prior to the launch of IE8. Whilst we always build websites that are compatible across all major browsers (both current and older versions), this new development may mean that your web pages do not display correctly when viewed using Internet Explorer 8.

Then your solution:

As a valued customer and as part of our commitment to you, we’re offering to conduct a full IE8 compatibility audit on your website.

Now set your price:

For a fee of £xx plus VAT we will thoroughly test your site in IE8 and along with fixing any minor issues, we’ll provide a report detailing any changes that need to be made to ensure it works with the new version.

Finish with a clear call to action:

If you’d like further details or for us to audit your site, then please reply to this email and a member of our team will contact you.

The outcome

Being proactive in this scenario has enabled your business to overcome a common issue and could save you many hours of tedious work that could be unpaid.

New browsers typically thorough up a set of new issues can can learnt and used time and time again in an efficient manner. You can also fix multiple websites in one go and earn some extra revenue. The third important thing is that you’re communicating with your clients. Dormant accounts could be revitalised and further work could generated through simple being proactive and protecting both yours and your client’s business interests.

For further information about IE8 visit Microsoft.com.

Mark Bowley wrote an interesting post on PSDTuts about the basics of Typography. I think it’s a great read and I think you should take 20 minutes out of your day to read it.

Included in the post are summaries of the following typographical terms:

• Typeface or font?
• Typeface classifications
• Anatomy
• Glyphs
• Kerning and Tracking
• Alignment
• Measure
• Leading
• Ligatures
• Hyphenation
• Hyphens, En-dashes and Em-dashes
• Grids
• Rag
• Widows and Orphans

The article has a few illustrations that clearly explain the jargon used to explain certain typographical elements, such as the anatomy of type shown below.

Full credit and copyright of images to PSDTuts, read full article here: Read more

SEO fundamentally starts at the development stage of every website. Semantic code and SEO related structuring of the site’s source code will make you a favorite amongst the SEO collective in the department next door whilst equipping the website with the tools needed to battle the deadly SERPs. Here are 13 SEO tips for every developer and his dog/penguin.

Unique META tags

All META tags, keywords, description, and most specifically tile – must be unique on each page and describe the content on the page. Wordpress users should consider the ‘All in One SEO‘ plugin that will take care of all this for you.

Canonical URLs

Use a consistent URL scheme across the site – don’t mix http://domain.com with http://www.domain.com/ and never use a link to index.php or index.php?page=home. In the latter three cases, a link back to the web root is preferential eg. http://www.domain.com. Wordpress users should consider Yoasts plugin called Canonical URL’s for Wordpress.

Search friendly URLs and absolute URLs

Using URL rewriting, create URLs that make sense to the human eye, eg. http://www.domain.com/products/sofas/big-brown-sofa.html. NOTE: NEVER use underscores in URLs orfor file naming, always use hyphens. Use absolute links throughout the site eg. include the http://www.domain.com in every A HREF. When linking to a page, as opposed to an index, always suffix “.html” onto the URL. All URLs should end with “/” or “.html”.

Proper use of H1 tags

The H1 should be the main heading of the page, semantically proceeded by H2, H3 etc. Do not use H1 for the logo, use an alternative tag. Your H1 should also be reflected in the META Title of the page.

Logo naming

Don’t name your logo image Logo.jpg. Instead name it something relevant to the site – for example for a jewellery site, name it jewellery.jpg

NoFollow links

The rel=”nofollow” attribute prevents search engines from leaking page rank to useless pages, for example, for terms and conditions, privacy policy and in most cases contact pages (unless they include a physical address for example).

XML Sitemap

There is a Google sitemap generator available that will create an XML sitemap and update it on the fly, informing Google of any new pages. All sites should contain an XML sitemap as well as a XHTML one. Show both sitemaps in the footer like this:

Contact | Privacy | Terms | Sitemap (XML Version)

Wordpress users should consider the Google XML Sitemap plugin.

Images with ALT attributes

All images should have ALT attributes, primarily to describe the image for screenreaders, but they can have an SEO benefit by including site keywords.

301 redirects

Especially important when redeveloping an old site – ensure old URLs are 301 back to the homepage. A 301 redirect tells search engines “This content has moved permanently”.

Don’t use frames

We’re sure you don’t use them.. do you? Well don’t because amongst other things the content within a frame isn’t accessible to search engines. Same applies to iframes.

Check for W3C compliance

This is part of best practic and has a positive benefit for SEO.

Don’t call links page “links”

This has negative connotations to link farms, reciprocal linking etc. Instead, use a term like “Resources”, “Related Sites” etc. You should preferably come up with a term which is unique to the site, whilst still describing the page accurately.

Keep CSS and JS external

The less clutter there is in the page, the less markup search engines have to sift through. Also, avoid inline styles and inline javascript for the same reason.

Here you go, a stellar assortment of CSS related links for you to reference. If you’re a CSS beginner or even a CSS guru we’re sure there is something here for everyone, enjoy!

The CSS Box Model

CSS linky link craziness