I came across a fairly old article on Web typography (by Eric Meyer) this morning that I found pretty interesting and thought I would share some of my feelings on the subject matter.

Up to this point I’ve been doing things completely different. To ensure consistency through the layout, I set a base font size of ‘x’ pixels on the body tag. Any element in the page that requires a different height gets sized accordingly:

body {
font: normal 13px/19px Arial, Helvetica, sans-serif;
} 

h1 {
font-size: 20px; line-height: 23px;
}

This method works, but it is hardly convenient. Each time I need to change the font size (or add in a new rule that has a varying font size), I need to update the line-height to ‘match’.

Generally, using a line-height that is 3 pixels larger than the actual size of the font seems to be a good practice to follow.

Now, thanks to this tip by Eric Meyer, using a unitless line-height will really simplify things within the style sheet. So, instead of basing a fixed-sized line-height, as I did in the past (and as shown in the CSS snippet above), I can just do the following:

body {
font: normal 13px/1.46 Arial, Helvetica, sans-serif;
}

What does this mean (in case you were to lazy to read Eric’s article!)?

Simply put, I take the size of the font and multiply it by a value (in this case 1.46) to produce the desired line-height (19 pixels).

What about different-sized fonts that are used throughout the page? They will take care of themselves – no need to manually assign an ‘extra’ line-height value to them. The multiplier (1.46) that is defined on the body tag will take care of this for you.

A pretty cool tip – one that I wished I had known a long time ago!

• 0 Comments
• Tags: Eric Meyer, font-size, line-height, pixels, unitless, units

Talk about starting the new year with a bang! Here are at iStudio, we are absolutely pumped to announce that we have joined with High Road Communications.

“We are thrilled to share that today, iStudio is joining High Road Communications. We are merging into one company, under the High Road Communications brand, bringing to reality a fully integrated communications agency, with best-in-class PR, social media and digital services.”

Source: istudio.ca

Read more about this announcement on iStudio’s blog, or check out a short video which gives more details on this announcement on the High Road web site’s home page.

On a personal level, I couldn’t be happier with this news as I think of all the exciting work and projects that will come as a result of this. This year – and the future – are truly going to rock!

Happy New Year – indeed!

• 0 Comments
• Tags: High Road Communications

In the days leading up to the Christmas break I was involved in creating a WPMU-powered WordPress blog for one of our clients. This was the first time we (iStudio) or I had used this product, so as you might expect there were a few growing pains that were encountered along the way. Since I spent so much time trying to fix them, I thought it would be a good idea to document a couple of the more annoying ones.

WPML and Kubrick – a story of hate

My common practice when creating a WordPress theme is to take the default one – Kubrick – and customize it to suit the requirements of the project it is for. All went well until I installed the multilingual plugin of choice, WPML. Not only did the language switching fail, but the page would go all 404 on me unless I inserted a trailing slash (‘/’) at the end of the URL. Hardly ideal.

The solution – and please don’t ask how I came to this because its not good memory – was to delete everything (except the junk about widgets at the top) in the function.php file. Once I did that, everything magically worked. I say magically becuase I really have no clue what was causing the error to occur within the functions.php file. As long as it works, that’s good enough for me.

Customize plugin, save, and….uh, it’s gone!

This issue occurred with two or three plugins that I had to use for this project. The problem happened when making any customization to the plugin via the dashboard. For example, WP-Polls has a number of options that can be configured from the WordPress dashboard. However, when I went to save my changes, the form would kick me back to the main ‘parent’ blog of WPMU, and not the ‘child’ blog that I had been configuring the plugin on. This was actually an easy one to fix, but because of my bleary-eyed and brain-dead state it frustrated me over the course of a weekend (and no, I didn’t spend an entire weekend trying to fix it – just a few minutes at a time before I would quit and mutter a few ‘cheerful’ words).

I solved this problem by just changing the target URL of the form’s action attribute. In the cases where the plugin was failing, it was always due to the URL pointing to the main wp-admin folder, and not the actual wp-admin folder for the blog being customized. I updated the target and we had ourselves a winner.

• 0 Comments
• Tags: Kubrick, plugin, theme, WP-Polls, WPMU

Last last week the iStudio team launched a redesign of the Robertson Partners Web site.

Robertson Partners was founded by the Partners of Ottawa’s leading executive search firm,Odgers Berndtson. Three decades of experience in executive search has given us an informed perspective on what organizations are seeking in executive level job candidates, and how hiring decisions are ultimately made

As has been our practice for most of the year, the site was built on the Sitefinity CMS framework and we were able to accomplish all the required functionality with only minor customization of the existing controls.

• 0 Comments
• Tags: CMS, Sitefinity

During the early hours of Sunday morning, the Sun Life team launched a new redesign of their Sun Life Financial Canada home page, as well as redesign to their Careers and About us sections.

A good number of us at iStudio were involved in this project – from the design and templates to content restructuring – working closely with both the Business and ECS (technical) teams at Sun Life.

Among the new features that the sites boasts are:

• Rotating graphical billboards that highlight key areas of the SLF Canada Web site.
• The use of a tabbed content area on the home page that direct users (individuals, plan members, advisors, etc.) to pages within the site.
• The ability to save a page within the site using a feature that persists on each page called My Links. My Links comes with a set of default links that can be customized by the user.

• 0 Comments