Here is Episode 1 of our Designer Hangout where we talked about Design Processes. We’ve noted discussion topic changes in the player if you want to skip around. If you weren’t able to join us for this one, don’t worry, we’ll be hosting more of them.
The first Big Name Designer Hangout will be Dec 16th from 2PM to 3PM Central (8PM to 9PM GMT).
We'd like to know what you want to chat about. Head on over to our Google+ post and check out some ideas and suggestions for topics.
Hope you can make it!
Starting in December, we'll be hosting some Designer and Developer Hangouts.
The first Big Name Developer Hangout is on December 2nd from 9pm to 10PM GMT and open to anyone that wants to stop by. So grab your webcam (or just a headset) and join us for a mostly on-topic discussion.
The topic for our initial Developer Hangout is: Walking the Line Between Performance and Ease of Development
Some potential areas of discussion include:
Add our Google+ page to your circles to get more information about future hangouts.
We'll be announcing the Designer Hangout shortly!
We're big fans of HTML5 Boilerplate. It's a great starter and the project is constantly being refined. The latest version now incorporates Normalize.css in the main style sheet. This refreshed file no longer includes the classic CSS reset or a myriad of default styles. What's left is a very lean and sexy style sheet.
What is Normalize.css? From the authors at the Normalize.css project:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
The new HTML5 Boilerplate style.css file is now much lighter and is documented very well. Currently, this updated version is only available via the GitHub repository and the developers are looking for feedback on the latest commit at their Google Group.
We're excited to try out the updated boilerplate. Anyone worked with the new files yet?
Deconstructing a design is a fantastic way to discover new ways of overcoming design challenges. When I encounter a unique approach to web design, the first thing I do is open up Firebug and break down what went into creating the effect.
Sometimes I find it was a clever combination of CSS and JavaScript and other times it's a graphic that has done a lot of the work. When it's the latter, I can only make assumptions as to how it was accomplished. I hate that feeling.
That's why I was interested to see Campaign Monitor's release of their Designer Email Templates a while back. Not only did they offer downloads of the HTML template, but they also included the original layered Photoshop docs. These documents give you a view of the techniques that were used to create those little touches that make a design really work.
Copy on the web needs to be legible, accessible and consistent. No one wants to have to labor over copy. Our goal as designers is to get users through the content as quickly and efficiently as possible.
At Big Name, I'm always looking for ways to improve the typography for our sites. Here are some of the things I do to keep the content easy on the eyes.
Setting the body font-size to a percentage ensures that your type will scale properly even if the user has altered the browser's default text size. This can't be accomplished with pixels or points as they are fixed-sized units.
I set the body font-size to 100% or greater. Some say this is too large, but I believe it creates highly readable text – especially when paired with a proper line-height.
When set to 100%, the browser will use its default setting for displaying text, normally 16-pixels. This is the equivalent to the standard print size of 12-points. 16px = 1em = 100% = 12pt
The alternative to setting a percentage is using EMs. Yes, the scalability is there, but IE 6/7 will disproportionately interpret the EM. This causes the size to be way larger or smaller when using the "Largest" or "Smallest" text-size settings, for example.
Why not just rely on the browser's "zoom" feature? Zoom increases the size of everything on the page, not just the text. This can make other elements on the page look nasty. Not to mention, high resolution devices like the iPhone and some Android phones now sport super-high resolutions that make 12-pixel fonts tough to read.
Yes, I know we just set the entire document to a percentage. You can obviously continue using percentages, but I prefer the EM because it's a true typographic unit and because it's the W3C recommended measure.
Regardless of your choice, remember that relative values like percentages and EMs are inherited and will cascade in a document. For example, setting an ordered list size to 1.5em and a list item to 1.5em will cause the text to be displayed at 1.5 x 1.5.
Be consistent with your font sizes by composing on a scale and utilizing an EM calculator. If you're coming from the pixel world, try starting with http://pxtoem.com/". This will help you come up with a set of default styles based on a default body font size.
Pixels EMs Percent Points
----------------------------------
6px 0.333em 33.3% 5pt
7px 0.389em 38.9% 5pt
8px 0.444em 44.4% 6pt
9px 0.5em 50% 7pt
10px 0.556em 55.6% 8pt
11px 0.611em 61.1% 8pt
12px 0.667em 66.7% 9pt
13px 0.722em 72.2% 10pt
14px 0.778em 77.8% 11pt
15px 0.833em 83.3% 11pt
16px 0.889em 88.9% 12pt
17px 0.944em 94.4% 13pt
--------------------------------
18px 1em 100% 14pt
--------------------------------
19px 1.056em 105.6% 14pt
20px 1.111em 111.1% 15pt
21px 1.167em 116.7% 16pt
22px 1.222em 122.2% 17pt
23px 1.278em 127.8% 17pt
24px 1.333em 133.3% 18pt
Note: As mentioned above, IE will mishandle the EM if a user sets their text-size "larger" or "smaller". However, once the body font-size is set as a percentage, IE won't continue adding the values of an EM cascade.
Measure refers to the width of a body of type – or more precisely, the number of characters in a single line of a column of text. According to The Elements of Typographic Style:
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.
We're able to read with ease when our eyes encounter line measures in this range. But trying to keep an ideal character-per-line count of 66 characters can be challenging on the web.
Liquid and elastic layouts can help address issues of text and browser resizing, but your design needs are going to influence your overall approach.
Here, I've used a pixel width for my columns (at the time of this writing) in order to retain control over the line length. It will throw off the measure when text is resized, but this layout presents an ideal line width to the vast majority of my audience.