Some designers have argued that IE6 is such an old browser now that we should drop support for it and completely disregard any testing or bug fixing to ensure that IE6 users are actually able to use the website. These designers have taken the assumption that if the page doesn’t display correctly then they’ll automatically realise that they need to upgrade and will happily start using IE8, Firefox or Google Chrome.

In an ideal world this would be the solution and we could all go on creating websites without bug fixing for IE6 and start using HTML5 and CSS3 without considering older browsers but sadly this isn’t the case and probably never will be.

Can we force people to upgrade?

Some designers have suggested that a message could be placed on the site which informs users that they need to upgrade in order to use the site but as this video shows, many people don’t even know what a web browser is and presumably see the “e” icon on their desktop as the internet.

If you run a site like Google, Facebook, Ebay or Youtube then you might get away with this kind of strategy but if you’re not lucky enough to be in this position then all you’ll end up doing is sending these users to your competition who have taken the time to fully support IE6.

Why are people still using IE6?

There’s a couple of reasons why people are still using IE6. The first is that people who bought PC’s and laptops until 2007 would have already had IE6 installed on their machine with Windows XP and as they don’t know any better will keep using it until they upgrade their PC which will presumably come with Windows 7 and IE8.

The other set of people are employees of corporate companies who don’t have the opportunity to choose what software they use while they’re at work. These companies control the software on a network level and force their employees to use IE6, usually because they know that their internal applications will continue to work whereas there’s an element of risk in them using more modern browsers especially when their applications have been built without web standards in mind and in some cases predate IE6.

How many people use IE6?

This is the question that doesn’t quite have a black and white answer as the number of IE6 users in the world is actually irrelevant when it comes to building websites. What does matter though is how many people are visiting your website using IE6.

You’ll tend to find that technology based websites have a lot less IE6 users than more mainstream websites. For example, this website has around 2% of visitors using IE6 whereas most of my other websites which are targeted at none technical people receive around 5%.

If your website is targeted at a non-technical audience or corporate employees then you’ll probably find that this number is even higher so the number of visitors to your website using IE6 is probably somewhere within the region of 1%-10%. This is why it’s important to use an analytics package like Google Analytics so that you understand your audience.

Should you still be supporting IE6?

As frustrating as it is, in my personal opinion web designers should still be supporting IE6 while the number of visitors is substantial.

I also take the attitude that even though your client may not know about IE6, what happens when they proudly show one of their relatives their new website only to find out it appears broken to them? Where does this leave your reputation?

How do you build a website for IE6?

Once you get used to catering for IE6 then it really doesn’t take all that much longer to ensure that a website works in IE6. It can be troublesome at times but once you understand IE6’s bugs and fixes then you can implement the most common fixes as you’re working.

I’m also a fan of Progressive enhancement so as long as the site is usable and content doesn’t appear out of place in IE6 then I wouldn’t worry too much about the site being pixel perfect as long as it is accessible and usable then you’ve achieved your objective.

Summary

A lot of designers in the community have already dropped support for IE6 and are refusing to develop for the old browser but personally I think it’s too early and a little irresponsible to disregard it completely without even considering the target audience of a website.

If a web designer doesn’t have any idea how many people will be visiting a website using IE6 how is it possible that they can blindly decide that they won’t support it? If there is evidence that by dropping support for IE6 that your client won’t lose business then that is perfectly acceptable but if that’s not the case then I’d always suggest supporting IE6.

What do you think? Are you still supporting IE6 when building websites or has the time come that you no longer even bother to test how your pages render in Internet Explorer 6 and if so why?

I’m not sure at this stage how many users they’ve rolled the latest version out to. I know plenty of people who are still seeing the old version so for the benefit of everyone, here’s a screenshot.

Design

The one thing that I initially wanted to see was how much of the redesign is a reaction to Microsoft launching Bing.com last year? I headed over to the Bing.com search results and was a little shocked at how much of a rip off Google had done of the Bing search results.

I’m neither anti-Google or anti-Microsoft so this point isn’t at all politically motivated but Google have pretty much replicated the format of Bing.com and if the boot was on the other foot I’m sure people would be making a big deal of it.

Maybe as a designer, I’m being a bit overly sensitive and most people won’t notice but the links in the top left, top right, logo placement, search box, filters and search results are all in exactly the same positions. I would have expected Google to have come up with something a bit more ground-breaking and original. It’s entirely possible that both companies invested heavily in usability testing and this was the design that both came up independently of each other and it’s just a huge coincidence that they look the same?

However, after the initial disappointment of there not being anything new in terms of the design, I was pleasantly impressed by the new Google interface…

Search Results Layout

The search results format is the usual tried and tested method of sponsored results at the top with organic’s underneath and further sponsored links down the right. Google obviously saw no reason to change what is obviously proving to be a successful method of presenting search results.

Location Specific

Google have introduced a new “Auto-detect Location” feature below the search box which should default to your current location but is also easy to customise by entering a postcode or other location which is a nice feature if you’re looking for local search results.

Filters

The big improvement from Google though which none of their current competition can rival is the filters in the left column. Now it couldn’t be easier to view blogs, images, books, news, videos, maps, social media updates and discussions. But not only that, you can now also view results that are time specific so viewing results from the past 24 hours, week, month or year is easy if you’re looking for information that can easily date.

How will the new Google design effect SEO?

It’s probably safe to say that the Google algorithm itself hasn’t changed all that much so continue to write good, original content and market it in the same way that you always have for the search engines. However, there is definitely more emphasis now on new content so it’s probably never been more important to make sure that you keep providing fresh and useful content for your website to ensure that you’re at the forefront of any time dependent search.

What do you think to the new Google search results?

Google Chrome Extensions

Firebug Lite 1.3.0

Firebug for Google Chrome isn’t quite up to a par with the Firefox version but the beta version isn’t that far off. I’ve also not found a way to see the line number in the CSS which would be really useful but it’s certainly not a reason for me to continue using Firefox anymore.

Pendule

The Firefox Web Developer Toolbar was one of the first extensions I used for Firefox and was a great tool for debugging problems. I don’t use it as much since the release of Firebug but it still has some useful features. Pendule for Google Chrome does replicate some of these features and especially useful is the ability to switch off images and CSS so this is another must have tool for any web designer using Chrome.

Resolution Test

Unfortunately one of the things missing from Pendule is the ability to resize the browser window to a specific size at the click of a button. However, the Resolution Test extension makes that easy and also allows you to launch a number of browser window sizes in separate windows which is a pretty nice feature.

Webpage Screenshot

I was using Fireshot within Firefox to quickly take screenshots but the Webpage Screenshot extension provides the same functionality for Google Chrome and in my opinion is a little more usable.

Xmarks Bookmarks Sync

I previously used Xmarks within Firefox so having this available in Chrome was a bonus. Xmarks simply allows you to synchronise bookmarks across different computers and different browsers which is very useful if you want to bookmark something at work and then have it available on your home PC or laptop.

Chromed Bird

I’ve been using Tweet Deck for most of my Twitter updates but having this available quickly and easily from within my web browser is extremely handy.

ChromeMilk

I use Remember the Milk as a daily task list. I’ve previously been using the desktop app but having an extension within the browser itself is a little time saver. You’ll need to register for free on the Remember the Milk website but if managing your tasks across different PCs or mobile devices would be useful for you then this is definitely something to consider.

Eye Dropper

The Eye Dropper extension is a simple colour picker which allows you to select any area on a web page to see what colour is being used.

Lorem Ipsum

Most designers will use latin text within an initial design before the content has been written and this simple extension quickly launches a new tab containing latin text. You can specify number of words per paragraph and number of paragraphs very easily to quickly create that placeholder text.

Google Mail Checker

This extension adds a little icon to the toolbar which notifies you if you have any email in your gmail account. Clicking it will jump to your gmail tab if you already have gmail open or will launch a new tab if you don’t, simple but a little bit of a time saver for checking your email.

Chrome SEO

Useful little tool for viewing number of pages indexed by the major search engines, number of backlinks, traffic, bookmarks on social media sites and few other useful snippets of information. Obviously it’s not the total solution to SEO but a nice summary of information.

Mini Google Maps

This probably shouldn’t really make it onto a useful extension for web developers but I find it useful so thought I’d share it anyway. It’s basically just a mini version of Google Maps that pops up from your toolbar which you can use to look at a location or get directions from one place to another. Again it’s not a huge time saver but having a little icon that you can click to quickly launch Google Maps without even having to launch a new tab is pretty cool.

PageRank

Any good SEO expert will tell you that purely chasing PageRank isn’t a good SEO strategy but it’s still something that I like to have at hand. This extension simply provides a small bar that provides PageRank information.

Summary

I’m sure that there’s many more extensions that can provide value to web designers so please feel free to share any other ones that I’ve missed off the list in the comments below.

I’d also be interested to hear if you’ve switched to Google Chrome or your reasons for using your current browser?

If you’re a developer then you can download the IE9 test drive package below:

• Internet Explorer 9 Test Drive

At the moment this is a very early version of IE9 and as such does not include the interface but it does include the new rendering engine which includes improved HTML5 and CSS3 support plus a new Microsoft JavaScript engine.

According to reports, Microsoft will be releasing other preview builds every eight weeks but as yet no time frame has been announced for the final release of IE9 which is frustrating.

It’s great news that IE9 will finally support CSS3 but I am a little concerned that they appear to be simply adopting border-radius without any prefix as if it’s their decision to decide the CSS3 specification. Mozilla and Webkit both have prefixes until the standards have been defined so why should IE9 be any different?

I think this sets a dangerous precedent where other browsers may have to follow what IE9 has done purely because they have the market share and less knowledgable web designers have implemented CSS3 specifically for IE9 without testing on other browsers.

It’s good to see that Microsoft are continuing to improve the browser but is still frustrating that it takes so long for them to implement new features and release a browser that they seem to be playing catch up with the Safari and Firefox browsers continuously.

However, those who are new to the game should remember that web design isn’t about you. It’s about the end user. Unlike penning a song, or painting a picture, which can give pleasure to the artist irrespective of the quality of the end-product, web design is all about the end product. And if you’re going to upload it to the World Wide Web (why wouldn’t you, after all…), it has to look good and offer something useful to the user.

With that in mind, you have to first establish who is likely to visit your site. Or more importantly, who you want to visit your site.

The thing with the internet is, it’s global. Anyone from London to Lahore can access your carefully crafted pages, and with almost two billion internet users across the globe, you probably can’t cater for all cultural palettes…but you can certainly make your site as widely appealing as possible.

Our culture affects the way we see the physical world. And the virtual world often uses metaphors to replicate the physical world, that’s why websites use familiar points of reference, such as menus, checkouts, shopping trolleys, buttons. If a screen’s display was made from ones and zeroes only the geekiest of geeks would ever bother to surf the cyber highway.

So how do you build a website that’s compatible with a cacophony of cultures? Well, let’s start with the very basics.

Cultural Sensitivity

A lady with liberal clothing may be acceptable to western audiences, but it may be well wide of the mark in appealing to the tastes in more conservative cultures. So it’s best to avoid any potentially divisive content, whether it’s sexual, religious, gender, age or nationality. We can hear the groans of ‘boorrriingg’ already, but if you want a professional site, you have to be professional.

Don’t be a Flash in the Pan…

So you have 20Mbps fibre-optic broadband, excellent, you can probably download music and stream video like turning on a tap. Unfortunately, many countries in Africa, Asia, South America and even the Middle East don’t yet have high-speed internet, meaning you should go-easy on the heavy graphics and bandwidth-consuming Flash animations. Surfers in more developing regions might hang around for 10 minutes for an image to load…but they probably won’t.

That doesn’t mean you build text-only websites. All it means is you give the user the option of your flashy, bells-and-whistles pages and a simple HTML version. Everyone’s a winner.

Colour Surround

Web designers, like anyone, will have their favourite colours. They may play around with different combinations before arriving at something they’re happy with. But remember, it’s not what the web designer thinks that counts…it’s what the end user thinks that counts.

Of course you can’t develop colour schemes to suit everyone, it is entirely subjective. As a general guideline, light-coloured backgrounds, in conjunction with dark text, have proven to be the most popular and universally liked colours for internet users, and it’s certainly the easiest to read.

But you can of course play about with different colours to find something that is visually appealing and accessible to the eyes. However, it’s worth noting that different colours can mean different things in different countries.

Whilst black is the colour of ‘death’ in western society, many eastern cultures use white to denote this. Similarly, red denotes ‘danger’ or ‘love’ in most western countries, but it means ‘purity’ in India.

Orange has religious connotations for Protestants in Northern Ireland…and whatever you do, don’t put a picture of a green hat on your website. In China it means a man’s wife is cheating on him.

Use Unicode

Even if you don’t have any immediate plans to appeal to international audiences, you may in the future. For that reason, you’re best designing your website in Unicode.

UTF-8 is a variable-length character encoding for Unicode that is compatible with over 90 scripts (written languages…) and 100,000 characters. Unicode has been adopted by most of the industry’s big players, including Apple, Microsoft, IBM, Oracle, and is compatible with all the common browsers and operating systems.

Using UTF-8 means you will be able to use characters from many non-English alphabets knowing that they’ll almost certainly be displayed properly at the user’s end.

Speaking in Tongues

A visually appealing website is great…but it’s the content that’ll make people come back. Well over a third of the global online population is in Asia, and China alone has 30% more internet users than the US.

Moreover, only a quarter of the world’s population speak English, 94% of whom do so as a second language. Language is key to globalisation and it’s one of the last remaining barriers in creating a true global marketplace.

Even if you plan an English-only website, the various English dialects around the world are different enough to consider how you write your text. If you want to appeal to UK, US, Canadian and Australian demographics, you’re best going easy on the culture-specific references that someone in Manchester might understand, but someone in Massachusetts won’t. This includes watching what slang and colloquialisms you use.

If you’re translating your website, bear in mind the French in France, Belgium, Switzerland and Canada is decidedly different. And the Spanish in Spain isn’t quite the same as the Spanish in Latin America. You have to consider the dialectal differences between your target markets, even if they share the same language.

The golden rule of web design is you must consider the end user at every turn. And with almost two billion potential users, you sure have a lot of people to consider!

Qualifications

If you’re naturally gifted in one specifc area then qualifications might not be as important but for most people being able to demonstrate on a CV that you’ve got what it takes to dedicate yourself for a period of time to succeed will certainly be required to impress any potential employer or client.

I always had an interested in Art during school but apart from being drawn to Graphics, I had no idea what I’d actually like to do for a living so after passing GCSEs and A Levels I specialised in an Art course at college which gave me exposure to Graphic Design, Fine Art, Photography and even Pottery and Fashion. After this I decided that Graphic Design was definitely the area that I enjoyed most and did a further year at College in a specialised computer aided art and design course which had a variety of modules on Illustration, Animation, Graphic Design, 3D, Web Design and Logo Design.

Building a Portfolio

The most difficult thing when first starting out is building a portfolio that will impress potential clients and employers. Without a portfolio it’s unlikely that you’ll land a job but how do you build a portfolio without a job? College or University work will certainly help but you might also want to consider doing some work for a local charity who don’t have a website. You might have some family or friends who run their own business that you could build a website for? There’s plenty of independant electricians and plumbers that don’t have websites who I’m sure would be happy to have a website built for them cheaply so that may also be an option.

Any work that can demonstrate to a potential employer that you have what it takes will help you land that first job or client so as tempting as it is to make money, your aim should be to build your portfolio to a stage where it will impress in your job applications.

Personal Projects

It also helps if you have a few personal projects to show that you have a genuine interest in the work you do and that it’s not simply a job. A portfolio and blog like this very one you’re reading is a great start but also think about other hobbies and interests you have which would make a good website. For example, this could be a website for a certain type of music you like, a sport team you support or holiday destination you like to visit.

When I was in college I set up United Online which is still going strong today. Your personal projects don’t have to be huge websites but can be helpful in demonstrating to future clients that you have the creativity and desire to create websites that you’re proud of.

Specialise

There’s nothing wrong with knowing a little bit of everything, infact understanding how Design, PHP, ASP.net, Java, JavaScript, HTML, CSS, Search Engine Optimisation and Online Marketing work is definitely a good thing but spreading yourself too thinly across a number of different areas without being an expert in one single area or a group of areas could actually make it more difficult for you to find employment.

Most web design firms will have a team of people who are experts in their own field. Typically this will usually involve:

• Web Designers (Design, HTML, CSS)
• Web Developers (Programming languages and usually database knowledge)
• Marketing (variety of areas including SEO, Social Media)

Some companies will specialise even further and have a Designer who creates the Photoshop mockup, someone to create HTML/CSS, someone to create the database structure and environment, someone to write the programming code and then someone to test the website or application. So being able to demonstrate that you know everything about a ONE single specific area can be key to landing that first job.

Your First Job

There’s nothing wrong with aiming high and if you do land the perfect job to start with then fantastic but in order to get some experience in the industry you may have to settle for a job that wouldn’t be your first choice. However, you should treat your first job as a stepping stone to bigger and better things and an opportunity to build your portfolio so that should be your main priority when looking for your first job.

When I’d finished college, I applied for every web design job that was in my area (within about a 25 mile radius of my home) and I was fortunate to land my first job with an up and coming web development firm during the dot com boom in early 2000. The pay wasn’t great but they worked with some great international clients which was perfect for building up a portfolio which I’d be able to demonstrate to potential employers in the future.

The point is that your first job should be all about gaining experience so don’t choose your first job purely based on pay alone. I know it can be tempting when straight out of college to go for that job that pays the most but think of the first job as a stepping stone to get you where you want to be 5 or 10 years from now.

Gaining Further Experience

Once you’ve got some good experience and established a decent portfolio you should start to find that it’s much easier to find other work. If you’ve been working in a particular niche industry then you might find that it would be worthwhile to move to a company where the work would vary slightly and you could gain experience in another area but at this stage you’ll probably have started to build up your own ideas and established yourself what you want your next step to be.

I stayed in my first job for five years and was extremely grateful to them for giving me an opportunity but felt it was time to try my hand at something else. The next two years I spent working for a computer game development company and took on the role of managing their website and the design for their internal applications. Following this, I spent a year working for an e-commerce company who had a number of websites specialising in the garden industry. I’m now with PilotBean which for me is the ideal job working for a company who believe in web standards and accessibility who also have the variety of clients to keep projects interesting.

Working as a Freelancer

Becoming a freelance web designer will certainly appeal to a lot of people. Being able to work hours that suit you and work on projects that you decide that you want to work on has its advantages but I’d always recommend getting experience within a company first to fully understand how a project works within a team environment and so that your skills develop alongside similar people.

However, working for yourself also has the disadvantage that you’ll be solely responsible for paying any bills. If you don’t get the work then you don’t get paid so it’s important to consider that risk and I’d certainly look at building up some savings from a regular full time job before taking the plunge into the freelance world.

Personally, I like the security of a fulltime job so that I know my bills will get paid but also take on freelance projects in the evening and weekends when I have some spare time. I know a lot of web designers that do this as a stepping stone before becoming taking the step into becoming a fulltime freelancer as it reduces the risk and helps you to see build a client base so this might also be an option to you.

Summary

Are you looking to get into the web design industry? Are you considering taking the next step and becoming a freelance web designer or are you already in the industry and would like to share your experience? Please feel free to leave your comments or questions below.

To make this process slightly easier, I’ve put together a collection of blank browser windows for Firefox, Internet Explorer, Google Chrome, Opera and Safari at 800×600 and 1024×768 which are now available to download.

• Download Browser Windows (.zip)

Within the above zip file, you’ll find two PSDs, 1024×768.psd and 800×600.psd. These are fairly self explanatory and then within each document are five layers, one for each of the browser windows at that resolution. Simply hide or delete the layers that you don’t want to use and you’re ready to go.

Google drop support for IE6

This is probably the most significant piece of news and is likely to spell the end for Internet Explorer 6. From 1st March 2010, Google Apps (like Gmail and Google Docs) will no longer support IE6 which might finally force businesses to upgrade their out of date version of Internet Explorer. However, I wouldn’t expect Google Apps to suddenly stop working from 1st March as it’s more likely that any new functionality or Apps simply won’t be tested for IE6 so there’s no guarantee that they’ll continue to work.

Does this mean that all websites should now drop support for IE6? In my opinion there’s no fixed answer for this as it depends entirely on your audience. If you currently get 10%-15% of your visitors using IE6 then how would it affect your business if these users went to a competitor who did support IE6? Would your design agency use another freelancer or company if you no longer create code that works in IE6?

I think that these questions need asking on a case by case basis to determine whether you should consider Internet Explorer 6. Hopefully Google’s move will encourage users to upgrade and over the next year we’ll all be able to drop support for it but for the time being I’d be a little cautious about following Google’s lead blindly.

Google Chrome 4.0 Released

Google Chrome has been around for a while now and with the release of version 4.0, Google have made some significant improvements.

Improved HTML5 support, full ACID3 support and the addition of extensions are just some of the areas that they’ve made improvements but for me personally, I’m sticking with Firefox.

This isn’t to say that it’s not a good browser. For family and non-technical friends, I’d highly recommend that they switch from an IE browser to Google Chrome as it’s fast and easy to use however, the extensions for Firefox still means that it’s the number one browser for the majority of web developers (I can’t remember how we used to manage before Firebug came along.)

Microsoft Released Emergency Patch for IE

Microsoft received plenty of bad publicity at the end of January as a flaw was discovered within Internet Explorer which allowed Google’s Gmail to be targeted. The French and German governments even got involved and recommended that users stop using Internet Explorer.

Microsoft Security Response center released the following statement:

Given the significant level of attention this issue has generated, confusion about what customers can do to protect themselves and the escalating threat environment Microsoft will release a security update out-of-band for this vulnerability.

Personally I don’t think this will have much impact on Microsoft’s share of the browser market as the majority of people who would have heard this news would be people in the industry who know better than to use Internet Explorer anyway so the average IE user will continue to use it regardless of any security concerns.

Firefox 3.6 Released

I’ve not had chance to have a play around with Firefox 3.6 yet but the news that gradients and multiple backgrounds are now supported through CSS3 is fantastic. Speed and stability should also be improved which has probably been my only real complaint about the browser recently and is one of the reasons I tend to use Google Chrome when purely browsing the web so I’ll be keeping my fingers crossed that things should have improved in that department too.

Summary

So what does all this news mean? At the moment probably nothing instant in terms of browser market share but I would expect Internet Explorer 6 to suffer a significant amount over the next year and it will be interesting to see what these users end up opting for. Google Chrome will probably continue to see an increase in market share due to the volume of users it gets via Google Apps but you’d also expect IE8 to continue to take the majority of users from IE6 as businesses upgrade their employees systems.

How do you think the browsers will fair in 2010? Will Microsoft bow to public pressure and start to push their browser forward in an attempt to keep up with Firefox and Safari? Can Opera come back into the battle? Please feel free to leave any comments below.

What is an em?

Firstly for anyone that hasn’t used ems before, here’s the definition:

An em is a unit of measurement in the field of typography. This unit defines the proportion of the letter width and height with respect to the point size of the current font. Originally the unit was derived from the width of the capital “M” in a particular typeface. This unit is not defined in terms of any specific typeface, and thus is the same for all fonts at a given point size. So, 1 em in a 16 point typeface is 16 points.

Using ems to set the font size

There’s many ways that you can use ems. Personally, I prefer to set the font size so that all HTML elements within the page are consistent and use 10px throughout a website using the following code:

body, select, input, textarea {
font: 0.625em/1.4 tahoma, verdana, arial, helvetica, sans-serif;
}

This is just the starting point though to reset the font size to a consistent level. The 1.4 sets the line-height and following on from that is the font-family which will change depending on the project but the one thing that is consistent is the 0.625em regardless of the website I’m working with.

By doing this, it allows me to easily set font sizes for other elements and containers within the site. For example, if I want to set a font size to 12px then I can do so by declaring an em size of 1.2em; If I want 9px, then it’s 0.9em and so on.

As you can see from the following CSS code, creating font sizes using em values is actually just as easy as using pixels but with the advantage that they can scale regardless of the device or web browser being used:

#navigation {
font-size: 1.4em;
}
h1 {
font-size: 2.4em;
}
#content {
font-size: 1.2em;
}

What about inheriting ems

This causes the biggest confusion for a lot of web designers and is why a lot of people revert back to using pixels. Take the following example:

#content {
font-size: 1.2em;
}
#content p {
font-size: 1.1em;
}

Now, a lot of people might expect that the paragraph would display at 11px given what I explained earlier. However, ems are inherited and therefore the initial 10px would render at 12px due to the #content font value but then assuming that the paragraph is nested within the #content element, it would then be scaled to 1.1em of it’s initial value and would therefore actually appear larger than 12px.

In order to get around this I use the following chart: http://aloestudios.com/tools/emchart/ to determine which em size I need to use in order to inherit the correct font size.

So in the above example, you’d need to use the following:

#content {
font-size: 1.2em;
}
#content p {
font-size: 0.917em; /* this will render at 11px */
}

Summary

Using ems can take a little getting used to but if you want to create accessible font sizes then it really is the best solution and once you’ve got the hang of how ems are inherited they’re a powerful tool.

You can even create truly flexible websites by using ems for entire layouts so that they scale with the users default font setting but I’ll save that tutorial for another time.

Document Structure

First, here’s the structure and then I’ll explain what kind of document or graphics I place where:

• Client Name
  • Project
    • 01 – Consultancy
    • 02 – Information Architecture
    • 03 – Content
    • 04 – Branding
      • Fonts
      • Guidelines
      • Logo
    • 05 – Design
      • Graphics
      • Stock Photography
    • 06 – Code
    • 07 – Marketing
      • Email
      • SEO
      • Social Media
    • 08 – Analytics
    • 09 – Hosting

And you can get a copy of this directory structure by downloading my folder structure zip file so feel free to use it if it applies to your projects.

Root Level

At the root level, I create a folder with the name of the client so that within that folder I can organise their work by project. This might not apply to all freelancers but I do work with some design agencies or companies who have a number of different websites so this helps to keep all their work in one place.

01 – Consultancy

This folder is to keep things organised at the beginning of a project and will contain documents like the Proposal and Contract. This may vary from project to project as simple PSD to HTML/CSS work is unlikely to need a proposal.

02 – Information Architecture

In most cases this simply includes a single document which contains the structure of the website, usually in an unordered list which would represent the site map.

03 – Content

If I’m going to be responsible for adding the content then this is where it all lives until it’s added to the website. Once the Information Architecture has been defined, I’d usually create a separate folder for each section of the site to keep things organised.

04 – Branding

This is where I like to keep all the files received by the client when discussing ideas about the look and feel of the site. So any fonts, branding guidelines or logo’s that the client currently has are dropped in here.

05 – Design

This is usually the folder that contains the initial bulk of the project work by myself. The graphic folder contained within here is where any creative work that I design live (including PSD layouts or wireframes).

06 – Code

The Code folder is usually where the final deliverable lives and is where all the HTML, CSS, JavaScript and PHP is organised and turned into a full working website.

07 – Marketing

Not applicable to all projects but occasionally there is a further requirement from a marketing perspective. This could be in the form of HTML email newsletters, SEO work or Social Media Marketing. The SEO folder that lives within here also contains an Analysis, Keyword Research and Link Building folder to keep other documents organised within the SEO process.

08 – Analytics

I’ve not actually used this as of yet but thought it would be handy for any landing page optimisation work and documentation and am sure that it’ll be of use on future projects that I’ve got lined up.

09 – Hosting

The hosting folder is purely for documentation and contains any information regarding the clients hosting details. For example, what domains they have, when they expire, what email addresses they have registered with these accounts, billing information etc.

Summary

I’m sure that as other pieces of work arrive, there will be things that I hadn’t thought of and I’ll need to adapt the structure a little but I think this provides a good starting point for a project.

I’d be interested to hear how other people organise their documents, images and code so please feel free to post any comments below.