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.

Please feel free to bookmark this page and use it whenever you need a quick reference for any HTML escape characters.

Keith has put together an ie.css3.js file which allows Internet Explorer to identify CSS3 pseudo selectors and render any style rules defined within them. You simply need to include his ie.css.js and the DOMAssistant JavaScript file within the head of your pages for it to work.

Supported Selectors

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• :only-child
• :first-of-type
• :only-of-type
• :empty

There are some limitations which Keith Clark explains on the ie-css.js website but it does look very promising.

It’ll be interesting to see how Keith continues to develop ie-css3.js as there are lots of other aspects of CSS3 which a lot of web developers are crying out for (rounded corners and multiple background being among my top priorities).

My only reservation is really from an accessibility point of view as developers need to be careful that they’re not excluding any users who don’t have JavaScript available from viewing the design of a web page. If it’s used in such a way that it can be done as progressive enhancement though then I’m all for it and along with the HTML5 JavaScript file we might actually start being able to make use of CSS3 and HTML5 before Microsoft catch up with the other standards compliant browsers.

Logo

I was always a fan of Dangermouse as a kid so to add a bit of fun to the logo, I decided to base the lettering on his logo. I wanted to make sure that the branding of the logo was still recognisable to my existing clients though so the font for the actual text is consistent with the logo that I’ve been using on letterheads and invoices so that it would be easy to establish that the site is still run by the same person.

Branding and Design

The design is based on an existing wordpress theme but I’ve taken apart the CSS and completely restyled the site so that it’s unique. I’ve also continued to use the green style which existed on my old site to try and retain some of the brand so that it hopefully still feels familiar to my regular visitors.

Content

The content itself was the main area that I really wanted to focus on as a lot of emphasis was previously put on the blog and articles which I got a lot of great feedback from but I wanted to give a lot more exposure to the work I do and the services that I provide.

The blog will still be the area that I update most frequently and I already have a list of articles and guides that I’ll be adding over the coming months, so that area of the site will continue to grow and hopefully continue to be a success and useful resource to other web designers and developers in the community.

Summary

The aim of the redesign was mainly to ensure that the site looked professional to any potential clients but it was also important to me that I didn’t lose any existing people that enjoy reading the articles on a regular basis. Of course, over the coming weeks I’ll be keeping an eye on the site’s analytics to see how people are using the new site compared to the old one and I’ll be looking forward to any feedback.

The deal met by Microsoft means that during a Windows update from March of next year onwards for XP, Vista and Windows 7 machines, a ballot screen will be shown to users with a selection of 12 browsers to choose from.

The five most popular browsers, Internet Explorer, Firefox, Opera, Safari and Google Chrome, will appear in a random order. A further 7 browsers, AOL, Maxthon, K-Meleon, Flock, Avant, Sleipner and Slim will also be shown but in less prominent positions.

This list of browsers will be updated at least every six months depending how popular the software is and the ruling will remain in effect for at least the next five years. If Microsoft don’t abide by these terms then they could be fined up to 10% of yearly global turnover.

Opinion

Craig Buckler on Sitepoint isn’t sure about the idea:

Whilst I’m pleased users will be educated about alternatives, I’m not convinced the ballot screen will have a major impact on browser market share. A choice of 12 options will be confusing for many novices. Those making an uninformed or random choice will still have a 50:50 chance of opting for an IE-based browser!

Whilst I agree with Craig’s view that giving the majority of users this choice is likely to be overwhelming especially as the majority of the public don’t know what a web browser is, I do think it’s a step in the right direction albeit a long overdue change which may have come too late.

Sadly I don’t think much will change in terms of browser market share because of this move. I’d expect the majority of users to recognise the Internet Explorer icon that they’re so familiar with clicking on to open a web page and to stick with what they know on this ballot screen. I’ve tried introducing people to Firefox in the past and in a lot of cases it’s been a resounding failure as it’s unfamiliar due to people on the whole being negative to change so even if users are curious about the other options, I think this move is unlikely to swing a lot of people over to the better browsers.

Summary

People who understand web browsers are already in the know as to what makes a good web standard browser that is moving the web forward with HTML5 and CSS3 and are already using a Mozilla or Webkit browser. The majority of people though are still using Internet Explorer and this move is only going to create confusion for them as they won’t have any idea what different features are available within the 12 browsers on offer.

It’s a good idea to put pressure on Microsoft but the focus needs to be more heavily on them improving their own web browser and getting it up to the same standard as Safari and Firefox (or to adopt the Webkit engine) rather than this quick fix which in reality isn’t likely to have much impact at all.

IE8 was released in March 2009 and was a big step forward and a welcome addition to the browser market for most web developers due to its better support of web standards and CSS2.1 support. However, there was also a lot of frustration that Microsoft were launching a browser that even on its day of release was still some way behind Firefox, Opera and Safari browsers.

CSS3 is the next big thing for front end designers and developers as it will make simple things like rounded corners and multiple background images much easier to accomplish without additional HTML or JavaScript workarounds. But despite Firefox and Safari showing initiative and creating support for these CSS3 features, in reality they’re unusable until the market leader (Internet Explorer) decides to implement them.

So it’s welcome news that Internet Explorer 9 will finally support CSS3.

For more information please have a read over on the Blogs.MSDN website.

Summary

Once again, it’s good to see that Microsoft are developing their browser and focusing on what the web development community want but the Internet Explorer browser seems to be falling further and further behind the other browsers with every release. What Internet Explorer are working on now is already available in Firefox and Safari so by the time IE9 finally hits the shelves (which I wouldn’t expect to be any time soon), the other browsers could be a couple of years ahead in terms of development.

How long will we have to wait for HTML5 video and audio support? CSS3 transformations? Instead of trying to catch up with the other browsers, has the time come where Microsoft should simply use the Webkit engine used by Safari and Google Chrome? What do you think?

The Design

We wanted the design to be clean and simple but with a modern feel. The design had to be in keeping with the existing brand and be easy to use within document branding so it was important to consider that the design needed to be flexible.

The Content Management System

The PilotBean website uses the PilotSite Content Management System which is a web based content management system that has been developed to enable non-technical users to create, update and manage their websites using a WYSIWYG editor.

The HTML/CSS

PilotBean.com has been built using semantic XHTML and validates to the W3C Strict guidelines. It’s also using web standards to ensure cross browser compatibility and uses CSS for presentation.

The website also endeavours to conform to Double-A of the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines 2.0. and is compatible with all major web browsers including Firefox, Opera, Safari, Google Chrome and Internet Explorer 6, 7 and 8.

Search Engines

The site has been built so that it’s search engine friendly but simply setting up a search engine friendly site isn’t always enough especially in a competitive industry so we’ve also conducted some keyword research to give each section as good a chance as possible to rank well in the search engines.

We also thought it would be a good idea to build a web development resources section which contains useful advice to other people in the industry.

I’ll also be adding to this section with a complete beginners guide to HTML and CSS whilst others at the company will be contributing with useful articles on JavaScript, .net and other web related topics so please keep an eye on that section if you’re interested in other aspects of web development.

Summary

The PilotBean website is still a work in progress (as I believe all websites should be) and will continue to grow and expand over the coming months but the foundations are now in place for us to build upon.

Please feel free to leave any comments below (or contact PilotBean directly via the website) if you have any thoughts about the site or if you have any suggestions as to how it could be improved or any additions you’d like to see.

The following two links demonstrate a working version and also a zip file so you can download everything you need to get this working.

• IE rounded corners demo
• ie-rounded-corners.zip

The HTML is pretty straight forward and uses the code from another article – HTML5 tutorial: Getting Started.

In order to get the rounded corners working in IE you’ll need JQuery and the JQuery corner script both of which are included in the above zip file which I’ve then referenced from the HTML.

<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.corner.js"></script>

Next you’ll simply need to tell the browser which corners you want to be rounded.

<script>
$("#container").corner();
$("section").corner();
$("aside").corner();
$("#main-navigation a").corner("top 5px");
</script>

If you’re familiar with CSS at all then you should be able to easily see how this is applied using JavaScript as we’re simply using the element, ID or class within the quotes to target that part of the HTML.

Summary

And that’s all there is to it. You can create all kinds of rounded corner effects as shown on the rounded corners demo site. Up until now, I’ve always created rounded corners using this method but seeing the simplicity of this Jquery solution, I am tempted to switch for Internet Explorer at least and rely on CSS3 for Webkit and Mozilla browsers.

What do you think? Are you still using images for rounded corner solutions or are the JavaScript and CSS3 methods becoming much more wide spread in the development community?

Up until recently I’ve been using my Rounded corners with one image method which does cut down on the amount of HTML and images required but when dealing with a lot of rounded corners the CSS can become a bit of a handful. But CSS2.1 didn’t have any alternatives so this was really the best solution to the rounded corners problem.

However, with CSS3 we can create rounded corners with a little bit of CSS.

#container {
width: 840px;
margin: 20px auto;
background: #fff;
padding: 30px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

This does currently only work in Mozilla and Webkit browsers (Firefox, Safari and Google Chrome) but does show the advantages of CSS3 which will be a huge welcome once Internet Explorer supports some of its features.

And here’s a quick example of how this could be put into practice:

• Rounded CSS Corners Example

As you should see, it works nicely in Safari, Firefox and partly in Google Chrome (which doesn’t seem to support the top rounded corners on the tabs) but also doesn’t break in Internet Explorer. When used correctly CSS3 can be used to progressively enhance a design but still be accessible within browsers which don’t support it.

For those people that want it to look identical in all browsers though, there are work arounds and you could apply the rounded corners to Internet Explorer using JavaScript which I’ll cover in my next tutorial.

Summary

So what do you think? Will you start using rounded CSS corners within your own work and client work at the moment or is Internet Explorer holding you back? Please feel free to leave any comments below.