Design

Content Strategy Within The Design Process





 



 


The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative Knol on content strategy defines it as follows:

Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.

This definition is a great place to start. Although the discipline has clearly evolved, this breakdown of its scope makes perfect sense. The aspects of content strategy that matter most to Web designers in this definition are design (obviously!), development, presentation and production. In this article, we’ll concentrate on the relationship between content strategy and design in creating, organizing and displaying Web copy.

As a writer and content strategist myself, I’ve worked with designers in all of these areas and find the creative process highly enriching. I’ve been fortunate enough to work with designers who are quick to challenge ideas that are unclear or unsound, who are brilliant at creating striking visual representations of even the most complex concepts. A lively interplay between design and content is not only fun, but is how spectacular results are achieved. This is why content strategy should matter a great deal to designers.

What Is Content Strategy, And Why Should A Designer Care?

Content strategy is the glue that holds a project together. When content strategy is ambiguous or absent, don’t be surprised if you end up with the Internet equivalent of Ishtar. When content strategy is in place and in its proper place, we’re on our way to producing beautiful and effective results.

Language
Slide from The Language of Interfaces by Des Traynor.

While wrapping one’s head around content strategy might be difficult, the thing that makes it work is very simple: good communication. Sometimes a project moves along like a sports car on a superhighway. Other times, the road is so full of bumps and potholes that it’s a wonder we ever reach our destination. As we explore the relationship between content strategy and design, I’ll detail how I keep the channels of communication open and go over the workflow processes that I’ve used to support that effort. I hope that sharing my experiences (both positive and negative) will help you contribute to and manage projects more effectively and deliver better products to clients.

How To Get Started: The First Step Is The Longest

Project manager: We need a landing page for client X.

Designer: I can’t start the design until I see some content.

Writer: I can’t start writing until I see a design.

You may find this dialogue amusing… until it happens to you! At our firm, we find that the best way to get past such a standoff is to write first. This is because content strategy, at a fundamental level, frames a project for the designer. As a content strategist, my job is to articulate the why, where, who, what and how of the content:

  • Why is it important to convey this message? This speaks to purpose.
  • Where on the website should the message appear? This speaks to context.
  • Who is the audience? This speaks to the precision of the message.
  • What are we trying to say? This speaks to clarity.
  • How do we convey and sequence the information for maximum impact? This speaks to persuasiveness.

Bringing it down to a more detailed level, let’s consider a landing page. A content strategist will determine such things as the following:

  • Audience
    Is the audience sophisticated? Down to earth? College-level? Predominately male? Female? Etc.
  • Word count
    Some pitches scream for long copy, while others must be stripped to the bare minimum. SEO might factor into the equation as well.
  • Messaging priorities
    What is the most important point to convey? The least important? What needs to be said first (the hook)? What needs to be said just leading up to the call to action?
  • Call to action
    What will the precise wording be? What emotional and intellectual factors will motivate the visitor to click through?

Clear direction on these points not only helps the writer write, but helps the designer with layout, color palettes and image selection. When we start with words, we produce designs that are more reflective of the product’s purpose.

Landing pages are a great place to try this workflow, because in terms of content strategy, they are less complex than many other types of Web pages. A product category page, on the other hand, might have a less obvious purpose or multiple purposes, considerably greater word counts, more (and more involved) messaging points, and a variety of SEO considerations, all of which would affect its design.

Quick Tips for Getting Started

  • Make sure someone is specifically responsible for content strategy. If strategic responsibility is vague, your final product will be, too.
  • Slow down! Everybody, me included, is eager to dive headfirst into a new project. But “ready-aim-fireâ€� is not a winning content strategy. Make sure everyone is on the same page conceptually before cranking out work.
  • If content strategy falls on your shoulders as a designer, cultivate an understanding of the discipline. Resources are listed at the end of this article to help you.
  • Make sure designers and writers understand what their roles are — and are not. There’s no need for writers to tell designers how to design, or for designers to tell writers how to write.

Perfecting The Process: Break Up Those Bottlenecks

Project manager: How are things coming along?

Developer: I’m waiting on design.

Designer: I’m waiting on content.

Writer: I’m waiting on project management.

Web development projects in particular involve a lot of moving parts, with potential bottlenecks everywhere. The graphic below describes our Web development process, with an emphasis on the design and content components. Chances are, whether you are freelancing or at an agency, at least parts of this should look familiar:

Design & Content Process
Link: Larger version (Image credit: Chris Depa, Straight North)

The process is by no means perfect, but it is continually improving. In the next section, we’ll look at the many types of content-design difficulties you might experience.

To help our designers lay out text for wireframes and designs, we utilize content templates based on various word counts. These templates also incorporate best practices for typography and SEO. When the designer drops the template into a wireframe, it looks like this:

Content in wireframe
SEO content template in a wireframe.

The use of content templates not only takes a lot of guesswork out of the designer’s job, but also speeds up client reviews. When clients are able to see what the content will roughly look like in the allotted space, they tend to be more comfortable with the word counts and the placement of text on the page.

Communication can be streamlined using project management software. We use Basecamp, which is a popular system, but many other good ones are available. If you’re a freelancer, getting clients to work on your preferred project management platform can be an uphill battle, to say the least. Still, I encourage you to try; my experience in managing projects via email has been dismal, and many freelance designers I know express the same frustration.

The big advantage of a project management system is that it provides a single place for team members to manage tasks and interact. Internal reviews of design templates is one good example. The project manager can collect feedback from everyone in one place, and each participant can see what others have said and respond to it. Consolidating this information prevents the gaps and miscommunication that can occur when projects are managed through multiple email exchanges. Designers can see all of the feedback in one place — and only one place. This is a big time-saver.

Quick Tips for the Creative Process

  • Make sure someone is specifically responsible for project management.
  • Whether or not your process is sophisticated, get it down in writing and in front of all team members before the project starts. This really helps to align expectations and keep communication flowing.
  • Meet at regular intervals to discuss status and problems. Hold yourself and others accountable.
  • Get approvals along the way, rather than dump the completed project in the client’s lap. Having clients sign off on a few pages of content and one or two templates really helps to align the creative process with client expectations, and it reduces the risk of those massive overhauls at the tail end that demolish budgets and blow deadlines.
  • Writers and designers should discuss issues as quickly, openly and thoroughly as possible.

Conflict Resolution: Why Can’t We All Just Get Along?

Designer: All these words are boring me.

Writer: All these images are confusing me.

Project manager: All these arguments are killing me.

No matter how clear the strategy, no matter how smooth the process, design and content will conflict somewhere along the line in almost every project. In fact, if creative tension is absent, it may well indicate that the project is in serious trouble. Here are the issues I run into on a fairly regular basis, as well as ideas for getting past them.

Making Room for SEO Content

Big chunks of content are bothersome to designers; even as a writer, I worry about high word counts turning off some of our audience. However, when SEO considerations demand a lot of words on a page, there are ways to make everyone happy:

  1. Tabs are a nifty way to hide text.
    Tabs allow you to keep the page tight vertically. Even more importantly, they enable visitors to easily find the information they need — and ignore what they don’t need. Below is a tabbed product area in the Apple Store.
    Apple Tabs
    The Apple Store
  2. Keep SEO content below the fold.
    This is a compromise, because an SEO strategist would prefer optimized content to appear above the fold. However, if a website is to have any hope of converting traffic brought in by SEO, then visitors need to see appealing design, not a 300-word block of text.
    SEO below the fold
    The Movies Now landing page.
  3. Step up creativity on non-SEO pages.
    For many websites, the pages that are most important to SEO have to do with products and services, where conveying features and benefits is needed more than wowing visitors with design. Conversely, pages on which awesome design matters most are often unimportant for SEO: “About,� bio and customer service pages, for example.
    Carsonified Team Pages
    Carsonified’s team pages.

Clarity vs. Creativity

We fight this battle over what I call “design contentâ€� all the time — primarily with navigation labels, home-page headers and call-to-action blocks. At a fundamental level, it is a battle over the question, “Which wins over the hearts and minds of visitors more: awesome design or straightforward information?â€�

Navigation
Making the labels for navigation straightforward is a fairly established best practice. Predictability is important: if visitors are looking for your “About� page, and they finally stumble on it by clicking on “Be Amazed,� then the emotion you will have elicited is irritation, not adoration. Be as creative as you want with the look and feel of the labels, but to maximize the user experience, the text and positioning of the labels must be as vanilla as possible.

Interface
For insight on how to achieve clarity, read “The Language of Interfaces.�

Design of the header on the home page
Rotating header images and other types of animation are rather in vogue these days, and they’re a good way to convey a thumbnail sketch of a firm’s capabilities and value proposition. Content must convey information, but the header must work on an emotional level to be effective. Writers must take a back seat to designers! The Ben the Bodyguard home page (below) starts to build a connection using a comic character and storyline. This is different than most sites that simply talk about feature after feature.

Ben the Bodyguard
The design should tell a story. (Ben the Bodyguard)

Call-to-action blocks
Before all else, make sure your website’s pages even have calls to action, because this is your opportunity to lead visitors to the logical next step. A call to action could be as simple as a text link, such as “Learn more about our Chicago SEO services.� Generally more effective for conversion would be a design element that functions almost as a miniature landing page.

Much like landing pages, the wording of the call-to-action phrase must be crystal clear and be completely relevant to the page to which you are taking visitors. Yet impeccable wording is not enough: the design of the content block must be captivating, and the text laid out in a way that makes it eminently readable.

Designers can get rather snarly when I tell them their design for a call to action needs five more words: it might force them to rethink the entire design. Many times, though, a discussion with the designer will make us realize that we don’t actually need those extra five words; in fact, we’ll sometimes hit on a way to reduce the word count. The creative interplay mentioned earlier makes a huge difference in this all-important area of conversion optimization.

Calls to action
Calls to action require excellent design and content.

Quick Tips for Conflict Resolution

  1. Keep the lines of communication open between all team members and the client.
  2. Select a project manager with great communication skills and an objective point of view.
  3. Stay focused on the purpose of the design: is it to persuade, motivate, inform or something else? Creative disagreements should never be theoretical; they should always be grounded in what will increase the real-world effectiveness of the work at hand.

Long-Winded Writers Vs. Lofty-Minded Designers

One thing I run up against continually is my own tendency to say too much and a designer’s tendency to say too little. Ask a writer what time it is, and they’ll tell you how to make a clock. Ask a designer what time it is, and they’ll give you a stylized image of a pendulum. Neither answer is particularly helpful!

These opposing mentalities pose challenges in Web design. Does an image alone convey enough information about a product’s key benefit? Will the length of a 200-word explanation of that benefit deter people from reading it? How intuitive can we expect visitors to be? How patient?

This is when having a process that encourages communication between team members makes a difference. I wish I had a secret formula for resolving conflict, but I don’t. I know of only two ways to balance design and content philosophies, and one of them is to talk it out as a team. As I said, communication is at the heart of an effective content strategy, and we have to resist the temptation that some of us have to withdraw into a shell when we encounter confrontation.

The other way to resolve conflicts — astoundingly underused, in my experience — is to get feedback from target users. Simply showing people a Web page and then asking for their key takeaways will tell you just about all you need to know about how effective you’ve been in getting the point across. Our opinion of our own work will always be subjective. Furthermore, because we’re emotionally invested is what we’ve created, discussing its flaws calmly and collectedly is difficult. Users are the ultimate judge of any creative effort, so why not take subjectivity and emotion out of the equation by going directly to the source?

Resources

  • The New Rules of Marketing and PR, David Meerman Scott
    Explains content strategy better than anything I’ve read. The third edition was published in July 2011.
  • “Content Strategy,â€� Google Knol
    For a thorough overview of content strategy and links to books, blogs and other resources, check out this fantastic Knol.
  • “Call to Action Buttons: Examples and Best Practices,â€� Jacob Gube
    To promote creative compatibility, designers and writers alike should study this Smashing Magazine article.
  • “Top Ten Mistakes of Web Management,â€� Jakob Nielsen
    For insight into design-related project management, read this post by the brilliant Web usability expert Jakob Nielsen.

(al) (fi)


© Brad Shorr for Smashing Magazine, 2011.


The difference between width:auto and width:100%

When adapting a layout for different viewport widths (a.k.a. responsive design) or media (like print), it’s common to reset any float and width values on major layout blocks to linearise their display.

Unfloating a floated element is as simple as specifying float:none. Width doesn’t seem to be quite as straightforward – lately I’ve come across several cases where people use width:100% to undo explicitly specified widths when they should be using width:auto instead. So here’s a brief explanation of the difference.

Read full post

Posted in , .

Copyright © Roger Johansson



40 Beautiful Free HTML5 & CSS3 Templates


  

Over the last few years there has been great collections of quality free HTML & CSS templates published on Noupe such as 50 Free High-Quality and “New� (X)HTML/CSS Templates (2009) and 40+ Elegant Free CSS/(X)HTML Templates (2010).

There have been some great free templates released over the last year so we thought it would be appropriate to share some of these great new designs with you all. In web development, it’s important to move with the times and embrace the latest changes. As such, all of the templates listed in this article were designed using HTML5 and CSS3; both of which will help future proof your website and make them more accessible.

The Templates

1. HTML5 Theme

A minimal looking grey and pink design that comes packaged with an Ajax powered PHP contact form.

HTML5 Theme

Info & Download | Demo

2. OWMX-1

A beautiful clean two column design that would be perfect for a blog.

OWMX-1

Info & Download

3. DesignStudio

A grunge styled website that is suitable for a portfolio or a blog.

DesignStudio

Info & Download | Demo

4. SilverBlog

A great looking clean blog template that has been also ported to WordPress.

SilverBlog

Info & Download | Demo

5. Clean Red

A clean HTML5 powered template that could be used for a portfolio or blog. The download includes the original Photoshop PSD file.

Clean Red

Info & Download | Demo

6. CoffeeCols

A magazine style template that features rounded corners and comes packaged with an inner template too.

CoffeeCols

Info & Download | Demo

7. Design Company Website

A beautiful corporate style website that features its own gallery page. It also supports custom fonts.

 Design Company Website

Info & Download

8. Minimalism

A simple corporate style design that has beautiful typography.

Minimalism

Info & Download | Demo

9. Serenity

A one column template that features an image slider on the home page.

Serenity

Info & Download | Demo

10. Vibrant Professional Web Design

A bright and colourful corporate style template.

Vibrant Professional Web Design

Info & Download

11. DaFrontPage

A news style magazine template that has a 3 column layout.

DaFrontPage

Info & Download | Demo

12. High Five

A beautiful free template that could be used for a blog or portfolio website. The original Photoshop PSD file is included in the download file.

High Five

Info & Download | Demo

13. Business Project

A black and green corporate style template that features a jQuery slider on the home page.

Business Project

Info & Download | Demo

14. Single-Page Portfolio

A fantastic single-page portfolio template that comes packaged with the original Photoshop PSD files.

Single-Page Portfolio

Info & Download | Demo

15. Studio One

Another great template from CSS Heaven, this corporate style template features a jQuery slider on the home page and includes a portfolio section.

Studio One

Info & Download | Demo

16. Memoir

A Japanese inspired free template that would be perfect for a personal blog.

Memoir

Info & Download | Demo

17. Simple Style 7

A fixed width 5 page template that uses Google fonts.

Simple Style 7

Info & Download | Demo

18. Night Club

A well designed template that was created specifically for night clubs. The photoshop PSD file can be downloaded if you sign up to the TemplateMonster newsletter.

Night Club

Info & Download | Demo

19. Small Business

A small business template that also includes an about and services page.

Small Business

Info & Download | Demo

20. Cooking Site

A tremendous recipe template that has a featured post slider on the home page.

Cooking Site

Info & Download | Demo

21. VividPhoto

A beautiful photography template from Pritesh Gupta that allows visitors to browse images at the bottom of the page.

VividPhoto

Info & Download | Demo

22. Shinra

A fresh corporate style that uses Google fonts and comes with contact, gallery and portfolio templates.

Shinra

Info & Download | Demo

23. One Page Portfolio

A simple backwards compatible one page portfolio template.

One Page Portfolio

Info & Download | Demo

24. ArchiteXture

A simple 2 column template that would be suitable for a small business website.

ArchiteXture

Info & Download | Demo

25. ElegantPress

A clean template that’s packed full of features. It includes a jQuery slider on the home page, built in contact form, lightbox for images, jQuery gallery and a jQuery portfolio.

ElegantPress

Info & Download | Demo

26. SocialStream

A useful template for social media fans that allows you to display a live stream of your Facebook or Twitter activity.

SocialStream

Info & Download | Demo

27. OnlineSolutions

A 3 column orange template that is suitable for a business website.

OnlineSolutions

Info & Download | Demo

28. Touch The Future

An elegant free template design that includes a tutorial that explains how the theme was designed.

Touch The Future

Info & Download | Demo

29. FreshIdeas

A simple black and yellow 2 column template.

FreshIdeas

Info & Download | Demo

30. Restaurant

Beautiful typography and a good looking jQuery slider on the home page make this a great template for a restaurant website.

Restaurant

Info & Download | Demo

31. HTML5 Admin Template

An advanced HTML5 admin template that can be used for creating a feature rich dashboard for your admin area.

HTML5 Admin Template

Info & Download | Demo

32. HTML5 Admin

Another great HTML powered admin template that can be used as a template for your own project.

HTML5 Admin

Info & Download | Demo

33. 52framework

Includes a simple HTML5 page, feature full HTML5 page and form, grid and CSS frameworks.

52framework

Info & Download | Demo

34. One-Page Template

A great looking blue one page template that uses jQuery to slide to different sections of the page.

One-Page Template

Info & Download | Demo

35. Lifebook

A simple yet fun blogging template that features rounded corners.

Lifebook

Info & Download | Demo

36. PKE Meter

Create your own iPhone app website using this useful free template. The HTML5 code and graphical design are explained in full to help you understand the template better.

PKE Meter

Info & Download | Demo

37. HTML5 Starter Pack

Contains photoshop designs, reusable CSS classes, javascript and more to help you create your own HTML5 powered website.

HTML5 Starter Pack

Info & Download

38. HTML5 template

A simple HTML template that comes in one column, two column and three column variations.

HTML5 template

Info & Download | Demo

39. Nova

An HTML5 template that comes with 5 page templates, featured post slider, contact form and an image and video gallery.

Nova

Info & Download | Demo

40. Kroft

Includes 6 background images, 6 page templates, homepage slideshow and social media integration. The photoshop PSD file can also be downloaded.

Kroft

Info & Download | Demo

In Closing

That just about finishes things off, but before we go, we wanted to get ask for your feedback. Hopefully you found something in the collection that got you excited. If so, what was it? What’s your favourite HTML5 and CSS3 powered template, even if it wasn’t included in this list? Feel free to use the comment section to fill us in.

(rb)


The Perfect Paragraph





 



 


In this article, I’d like to reacquaint you with the humble workhorse of communication that is the paragraph. Paragraphs are everywhere. In fact, at the high risk of stating the obvious, you are reading one now. Despite their ubiquity, we frequently neglect their presentation. This is a mistake. Here, we’ll refer to some time-honored typesetting conventions, with an emphasis on readability, and offer guidance on adapting them effectively for devices and screens. We’ll see that the ability to embed fonts with @font-face is not by itself a solution to all of our typographic challenges.

A Web Of Words

In 1992, Tim Berners-Lee circulated a document titled “HTML Tags,� which outlined just 20 tags, many of which are now obsolete or have taken other forms. The first surviving tag to be defined in the document, after the crucial anchor tag, is the paragraph tag. It wasn’t until 1993 that a discussion emerged on the proposed image tag.

Bursting with imagery, motion, interaction and distraction though it is, today’s World Wide Web is still primarily a conduit for textual information. In HTML5, the focus on writing and authorship is more pronounced than ever. It’s evident in the very way that new elements such as article and aside are named. HTML5 asks us to treat the HTML document more as… well, a document.

It’s not just the specifications that are changing, either. Much has been made of permutations to Google’s algorithms, which are beginning to favor better written, more authoritative content (and making work for the growing content strategy industry). Google’s bots are now charged with asking questions like, “Was the article edited well, or does it appear sloppy or hastily produced?� and “Does this article provide a complete or comprehensive description of the topic?,� the sorts of questions one might expect to be posed by an earnest college professor.

This increased support for quality writing, allied with the book-like convenience and tactility of smartphones and tablets, means there has never been a better time for reading online. The remaining task is to make the writing itself a joy to read.

What Is The Perfect Paragraph?

As designers, we are frequently and incorrectly reminded that our job is to “make things pretty.â€� We are indeed designers — not artists — and there is no place for formalism in good design. Web design has a function, and that function is to communicate the message for which the Web page was conceived. The medium is not the message.

Never is this principle more pertinent than when dealing with type, the bread and butter of Web-borne communication. A well-set paragraph of text is not supposed to wow the reader; the wowing should be left to the idea or observation for which the paragraph is a vehicle. In fact, the perfect paragraph is unassuming to the point of near invisibility. That is not to say that the appearance of your text should have no appeal at all. On the contrary: well-balanced, comfortably read typography is a thing of beauty; it’s just not the arresting sort of beauty that might distract you from reading.

Archaic Typographic Implements
(Image: Marcin Wichary)

As a young industry that champions innovation and rates its practitioners based on their ability to apprehend (sorry, “grokâ€�) the continual emergence of new technologies, frameworks, protocols and data models, we are not particularly familiar with tradition. However, the practice of arranging type for optimal pleasure and comfort is a centuries-old discipline. As long ago as 1927, the noted typographer Jan Tschichold spoke of the typesetting “methods and rules upon which it is impossible to improveâ€� — a set of rules it would be foolish to ignore.

So, please put your canvas element and data visualization API to one side just for a short while. We are about to spend a little time brushing up on our typesetting skills. It’s called “hypertext,� after all.

Setting Your Paragraphs

The Typeface

Your choice of font is important, but the kind of “family� you choose is project-specific, and we won’t discuss it here except to make one point: the conventional wisdom among Web designers that only sans-serif fonts are suitable for body text is just a rule of thumb. Although serif fonts, with their greater complexity, may tend to be less effective at small sizes, there are many other factors to consider. A diminutive x-height, for example, could impair the readability of a font from either camp. Some serif fonts are highly legible and attractive for paragraph text if they are set properly. Matthew Carter’s screen-sympathetic Georgia is a case in point.

Typographic Anatomy
X-height is the distance between the baseline and midline — a measure of lowercase character height. (Image: adactio)

Having dispensed with the subject of preference, let’s cover some important technical issues relating to one’s choice of typeface.

The first thing to consider when choosing a Web font (read: @font-face font) is the breadth of the family. Does the font include all of the necessary bold, italic (or even better, semi-bold and bold-italic) styles? One style is fine for headings, but paragraphs need greater variety. Without these variations at your disposal, not only will your text look insipid, but the lack of proper emphasis will make your writing difficult to follow.

bitstream
I personally don’t like Bitstream, but it is fully functional for paragraph text

With the full gamut of stylistic variations at your disposal, you will not have to rely on the unsatisfactory “faux� styles that are applied to a regular font when font-style: italic or font-weight: bold is called. Typefaces are not designed to be contorted in this way. Using the proper styles provided by a family like Bitstream (above) will make your typography not only more attractive but more accessible: dedicated italic glyphs have a much clearer intent than text that is simply “leaned over a bit.�

The trick is to make sure that the declaration of, for example, font-style: italic requests the italic resource rather than triggers the faux style. It should be as effortless as using a system font family such as Georgia. This is probably best explained, like so many things, in commented code. For brevity, we’ll set up just a regular font and an italic (not bold) style variation.

@font-face {
   font-family: 'MyWebfont';  /* Change this to whatever you like. */
   src: url('mywebfont-regular.ttf') format('truetype');  /* The "regular" font resource. */
   font-style: normal;  /* Associates values of "normal" with this resource. */
   font-weight: normal;  /* As above for weight. */
}

@font-face {
   font-family: 'MyWebfont';  /* Importantly, the same as in the above block; the family name. */
   src: url('mywebfont-italic.ttf') format('truetype');
   font-style: italic;  /* Associates values of "italic" with this resource. */
   font-weight: normal;  /* ... It's not a bold-italic font style. */
}

body {
   font-family:'MyWebfont', georgia, serif;  /* Provides a system font fallback. */
}

em {
   font-style: italic;  /* If @font-face is supported, the italic Web font is used. If not, the italic Georgia style is lifted from the user's computer. Either way, a faux style is not allowed to creep in. */
}

Our second typeface consideration relates to rendering. Some fonts, replete with beautiful glyphs and exceptional kerning as they may be, simply don’t render very well at small sizes. You will have noticed that embedded fonts are often reserved for headings, while system fonts (such as Verdana here) are relied on for body text.

One of the advantages of Verdana is that it is a “well-hinted� font. Delta hinting is the provision of information within a font that specifically enhances the way it renders at small sizes on screen. The smaller the font, the fewer the pixels that make up individual glyphs, requiring intelligent reconfiguration to keep the font legible. It’s an art that should be familiar to any Web designer who’s ever tried to make tiny icons comprehensible.

Hinting is a tricky and time-consuming process, and not many Web fonts are hinted comprehensively. Note the congealed upper portion of the bowl in the lowercase “b� in the otherwise impressive Crimson font, for instance. This small unfortunate glitch is distracting and slightly detracts from a comfortable reading experience. The effect is illustrated below and can be seen in context as a demo.

Unsatisfactory Hinting
Slightly unsatisfactory hinting for the Crimson Roman style. I love Crimson all the same.

The good news is that, as font embedding becomes more commonplace, font designers are increasingly taking care of rendering and are supplying ever better hinting instructions. Typekit itself has even intervened by manually re-hinting popular fonts such as Museo. Your best bet is to view on-page demonstrations of the fonts you are considering, to see how well they turn out. Save time by avoiding, sight unseen, any fonts with the words “thin� or “narrow� in their names.

Font Size and Measure

As a recent Smashing Magazine article compellingly attests, you put serious pressure on readability by venturing below a 16-pixel font size for paragraph text. All popular browsers render text at 16 pixels by default. This is a good enough indication (given the notorious tendency among browser makers to disagree) that 16 pixels is a clear standard. What’s more, the standard is given credence by an equivalent convention in print typography, as the article points out.

We often express 16px as 100% in the declaration block for the body in our CSS reset style sheets. This makes perfect sense, because it is like saying, “100% the same as the browser would have chosen for you.â€� If you want the paragraph text to be bigger than 16 pixels, just edit this value in the body block using a percentage value that equates to a “whole pixel.â€� Why whole pixels? Two reasons. First, whole numbers are less ungainly and are easier to use as multipliers in style sheets. Secondly, browsers tend to round “sub-pixelâ€� values differently, giving inconsistent results. An 18-pixel font size expressed as a percentage is 112.5% (1.125 × 16).

Normalizing the size of default text (or “paragraph text,� if you’re being good and semantic) in such a way is extremely important because it sets us up to use ems as a multiplier for the size of surrounding headings and other textual elements. For instance, to render an h3 heading at 1.5 times the font size of the paragraph, we should give it the value of 1.5em. Because ems (pronounced as in “Emma,� not E.M. Forster) are relative units, they change according to the default font size. This makes it much easier to maintain style sheets and, more pertinently, ensures that the perceived importance of headings is not increased or diminished by adjusting the size of the paragraph text.

An illustration of optimal line length, or measure

The “measure� is the number of characters in a line of text. Choosing a comfortable measure is important for usability, because if lines are too long, then scanning back to find the start of the next line can be awkward. Without conscious effort, the reader might miss or reread lines. In The Elements of Typographic Style, Robert Bringhurst puts a good measure at somewhere between 45 and 75 characters. It is the main reason why we use the max-width property when designing elastic layouts.

Whatever your page’s ideal maximum width, it is likely much narrower than what you are used to seeing. According to an in-depth study of typographic design patterns published on Smashing Magazine, the average website exhibits a measure of 88.74 characters, far exceeding the optimal range.

Leading and Vertical Rhythm

Glyphs made from lead
(Image: andrechinn)

Leading (pronounced “ledding�) is the spacing between consecutive lines of text. Leading has a similar impact on readability as “measure,� because it helps to define and demarcate the rows of glyphs that one must traverse from left to right and back again. The trick with leading is to avoid adding too much: text with lines that are too far apart appears fragmented, and the intent of a judicious use of leading is undone by a negative result.

In mechanical typesetting, leading was set by inserting strips of lead metal (hence the pronunciation) between lines. In CSS, the line-height property is the tool we use, and exposure to it is much less likely to make you go mad.

Instead of accounting for space between lines, as with leading, line-height is a vertical measure of the whole line — including the text itself and any spacing to follow. There are three ways to set it: the wrong way, the redundant way and the right way.

The wrong way to set line-height is in pixels. By introducing an absolute value, we would undo all of the good work from the previous section. As the font-size increases (either in the style sheet or the user’s browser settings), the line-height would persist. This produces an interesting effect:

An illustration of optimal line length, or measure
Absolute and relative values do not mix.

So, should we use the same em multipliers that we saw in the last section? This is the redundant way. Although the method would work, providing an em unit is not necessary. Rather, a value of 1.5 for the line-height that is 1.5 times that of the font size will suffice. The line-height property belongs to an exclusive club of CSS properties that accept unit-less numeric values.

p {
   font-size:; /* Silence is golden; implicity 1em. */
   line-height: 1.5;
}

The attentive among you will have noticed that so far I have only mentioned font sizes that are even numbers. The reason is that I favor a line height of 1.5. So, a font size of 18 pixels means lines with a height of 27 pixels or, if you prefer, lead strips that are 9 pixels thick. Using even numbers is another bid to maintain whole pixel values — I know that any even number multiplied by 1.5 will result in a whole number. A line-height stated in whole pixels is particularly important, because it is the key value used to achieve “vertical rhythm.â€�

a vertical rhythm illustration
All components on the page should have a height divisible by the height of one line of paragraph text.

Maintaining vertical rhythm (or composing to a baseline grid) is the practice of making sure that the height of each textual element on the page (including lists, headings and block quotes) is divisible by a common number. This common number (the single beat in a series of musical bars, if you will) is typically derived from the height of one paragraph line. You should be able to see by now why an impossible value like 26.5 pixels would be a mistake for such an integral measure.

The benefits of vertical rhythm to readability are much subtler than those of hinting, measure or leading, but they are still important. Vertical rhythm gives the page decorum. Because we have made sure so far that all of our measurements are co-dependent and relative, altering the font size for the body (all the way up at the top of the cascade) will not damage the page’s vertical rhythm.

It is worth noting that, although a line height of 1.5 is fairly dependable, not all fonts are made equal. Fonts with a tall x-height or long descenders might benefit from more generous, separative leading. When basic readability is at stake, adopting a more complex vertical rhythm algorithm is worth it.

Word Spacing and Justification

Without intervention, paragraph text on Web pages is set “ragged right� (text-align: left in CSS): the start of each line is flush with the left margin, but the lengths of the lines vary, giving an uneven “ragged� effect on the right side. If you’re like me, you prefer the tidiness of full justification (illustrated below). But implementing justification without impairing readability is not as straightforward in HTML as it is by using desktop-publishing software.

justified
Fully justified text necessitates, arguably, a narrower measure than text set ragged right.

The problem with justified text in HTML (text-align: justify) is word spacing. In print media (such as newspapers), hyphenation is used to break up long words. This results in more components (words or part words) per line, thus improving distribution and curbing aggressive word spacing. Browsers do not hyphenate automatically, and the soft hyphen (­) is implemented inconsistently. Besides, imagine having to manually insert ­ all the way through your copy. CSS3’s text-justify property, which aims to give us more control over text-align: justify, could ease the problem by enabling inter-character distribution. Bizarrely, it is currently available only with Internet Explorer.

Hyphenator
Hyphenator.js

Thankfully, Firefox and Safari now support the CSS3 property hyphens, which can automatically insert hyphens much as you would manually with ­. In fact, you can revert to manual hyphenation in a document set to hyphens: auto by using the hyphens: manual override. Browser prefixes are required, but Lea Verou can help you with that.

Until the other browsers catch up, a consistent cross-browser solution is currently possible only with JavaScript. Hyphenator.js is a powerful tool that takes a library of syllabic patterns specific to each language and uses them to dynamically insert soft hyphens in the correct places. It is a bit pricey (two scripts at a total of 72 KB uncompressed just for the English implementation), but it does work. Its effect is shown in the first screenshot for this section.

Finishing Touches (Styling Contextually)

Now that we have dealt with the important business of sizing, setting and distributing our paragraphs compellingly, you may wish to apply a few small enhancements and decorations for the purpose of signposting the document. These nuances concern only certain paragraphs, and choosing which paragraphs to set off is a question of context. With the help of special selectors and combinators, we are able to target specific paragraphs depending on where they appear on the page, making sure that the difference in their design is consistent with their intended role and meaning.

Indent
Paragraphs separated with a margin (such as margin: 0 0 1.5em;) do not require indentation. With paragraphs, margins and indentation serve the same purpose.

Let’s use indentation as an introductory example. Although less common in Web typography than in print, indenting the first line of each paragraph is a conventional method of grouping paragraphs into chunks of information. In terms of rhythm, it is also a sort of punctuation: the reader is invited to pause briefly before each paragraph. Because no indentation is required for the first paragraph — why pause before we’ve even started? — we should exclude this paragraph from our CSS rule. Using the adjacent sibling combinator, we are able to target only paragraphs with a preceding paragraph, and so the convention that has been familiar to book typography over the centuries is ably reproduced.

p + p {
   text-indent: 1.5em  /* I like to keep the indentation length equal to the line height. */
}

In the next example, I have combined the adjacent sibling combinator with the :first-letter pseudo-class to create a pronounced introductory glyph or “elevated cap�:

h1 + p:first-letter {
   font-size: 2em;
   line-height: 0;  /* The line-height must be adjusted to compensate for the increased font size, otherwise the leading for the overall line is disrupted. I find that any values below 0.4 work. */
}

Example of an elevated cap

The beauty of adding these refinements (many more of which are demonstrated by Jon Tan, including “drop caps� and “outdents�) contextually is that they are activated only when semantically meaningful and appropriate. For instance, our :first-letter style above is appropriate only for introductory copy. Because the introductory paragraph is always (in this particular schema) preceded by an h1 heading, we have a way to bind its style to its particular role in the document’s flow. In other words, we can honor its meaning through its design.

As long as we rigorously adhere to semantic HTML, we can employ many nuances that are impervious to both the rearrangement of the page itself and the introduction of dynamic content.

Conclusion

Library isle
(Image: primatage)

Walking down an aisle in a library, I no more than glance at the vast majority of books shelved on either side of me. Only a madman would suggest that my disregard of these books should sanction their pages being torn out. Nonetheless, because research has shown that visitors don’t read the average Web page in full, and because the “success� of a page is more easily measured by user action than cognition, we are often encouraged to marginalize our writing in favor of visual signifiers or action cues.

Sure, most people will “bounce� your content, but if you really have something to say, don’t alienate the people who are willing to give your writing a chance. Good typography does justice to your words, and good wording does justice to your ideas. If readers are comfortable reading your type, then they will more likely be comfortable with what you are writing about.


© Heydon Pickering for Smashing Magazine, 2011.


How to Find Your Individual Design Voice


  

In the design world, volumes have been written advising the newbs, and those with some established street cred, on the ins and outs of being a top shelf designer, and many of these posts will either be focused on or at least include a brief mention of finding your own voice. Your individual style that will give your work that unique and distinctive edge most crave. However, in stark contrast, there is actually very little offered or written on how to achieve this. Only mentions of its importance. Enter this post.

Hopefully this discussion will help you dissect your design approach to find your own voice that lays in wait beneath it. The voice that will aid your work in standing out from the others in the field who have flare and flash, but not individuality. Too often we fall victim to the trends in the community and begin following them without even attempting to make them our own. To inject our own flavor. Because, in all honesty, we have never really given it a try. Schools, businesses, anyone that offers to teach you design tend to only build you a framework, but so many of us forget that we are supposed to fill in the rest.

Here are some tips that we hope will help.

Step 1: Learn the History

Oddly enough, learning the history of the design field is actually taking a step in the right direction. If you want to get a rough and tumble introduction into the ins and outs, ups and downs of the design world, then look into its history. The beginnings of it all, the evolutions of the field and its practices is a fantastic place to gain that insight. Watch as the dominating themes grow and change over the years, shaping the field and pushing its progress.

Taking this sort of grand overview of the entire field and its history is also a great way to see where the field has failed to progress. What areas it needs to have people pushing the envelopes, as it were.

Resources

Design is History is a wonderful site to explore the field of design.

Interactive Design History Timeline is a unique and fun way to get an overview of the design up through the 1950’s.

Step 2: Learn the Basics

The learning doesn’t end there (it actually never does). The basics also need a little attention during this phase of your development. Learn the various design principles and the essential elements that all work together to breathe life into your work. There are fundamental rules that are used to guide the field and that designers are expected to know. And that we are expected to follow, to some extent. Some designers feel like they can skip over the basics, but that is a huge underestimation of all that they can teach you about design.

One of the main lessons that we need to take away from the basics is the communicative properties that these fundamentals possess. When we learn about these building blocks of design, it gives us the ability to use those blocks to their fullest potential regardless of our adherence to all of the underlying rules as we understand them. It effectively empowers us to be able to break the rules that guide our work.

Resources

Principles of Design is an in depth look at the fundamental and guiding principles that govern the field.

The Lost Principles of Design is a useful post from Fuel Your Creativity that examines these design basics.

Step 3: Forget Everything You’ve Learned

Once we have gotten all of the history and basics down, have learned all of the ways that our designs communicate with the viewers, and have an understanding of the rules, comes a fairly key step in developing a unique style and voice of our own. We have to forget everything that we have learned. Throw out the rulebook that we have been depending on, before it becomes something of a crutch that keeps us from daring into more innovative waters. Don’t mistake what we are saying, it is important to have this foundation, or framework in place. But too often we allow these basics to confine our creativity. To limit our potential as it boxes us in.

If we are going to find our own voice in the design world then we have to break out of the box and think for ourselves. The box is comfortable, sure. Full of all of the familiar, but that is not necessarily the way forward. That is more often than not, the way to stagnation as we play it safe. So on this journey we have to first build the framework before we effectively tear it down and rebuild it as we see fit. But without knowing how it all fit together in the first place, we might find it difficult to make it come together for us as we craft our own style.

Resources

CSS Drive Gallery – Unconventional Designs category has a slew of sites that you can check out to see the ways that some have broken out of the box.

Awwwards | The CSS Website Awards is a site dedicated to finding and featuring inspired, original designs.

CSSelite – Unique CSS Gallery is another CSS gallery site with a section that is dedicated to unique styles.

Step 4: Question Everything

Inspiration is a wonderful thing, and is something of a staple of the design process, but we have to remember that when we look at other designs, we need to be dissecting them. Digesting the piece and questioning every aspect and element of it. Design is, for all intents and purposes, strategic and artistic problem solving. Though there are those who might argue with that (especially the artistic part of the equation).

Through a thorough dissection of a design, we can gain a useful understanding of the reasons behind every design choice that was made in a piece. Armed with this knowledge we will be able to craft designs to fit any solution we may need. This will strengthen our design voice, so we should never stop asking questions.

Resources

Dissecting Web Design: The “App� Site is a great example of how we should begin to pick designs apart to find out ways we can learn from them.

Dissecting Web 2.0 Design is another fine example of getting into this questioning frame of mind.

Step 5: Be Weary of Trends

Trends are a powerful force in the design community, and as we set out to find our own voice we need to be able to spot those that we may be drawn to. Though it is not just about being aware of them, as much as it is that we need to beware of them. Trends are fine, and can always be beneficial to play around with and incorporate hints of from time to time. They can open up both our designs and our eyes to techniques and the like that we would have otherwise missed out on. Or worse, dismissed without mining it for potential. So we are not saying that they do not have a place, and one that can be construed as valuable in the web design world.

We just have to be careful is all. If we cannot distinguish the trends from variations on our own style, then we risk never truly being as original as we believe that we are. When we think we are breaking new ground, we are simply treading over areas that have already been covered. It takes some work to make a trend your own, as it were, and to seamlessly blend them into your style, but it can work. There are reasons trends take off, and it is usually because of the somewhat unique solutions they provide. Dissect those trends and connect with the reasons behind them and you are more likely to be able to distill bits of them into your own voice.

Just Google ‘Web Design Trends’ and you will be busy for quite a while

Step 6: Try

It may seem a bit trite, but when it comes to breaking out of the comfort zones and finding our own individual design voice, we cannot be afraid to just try. So often, we allow our fears to hold us back and prevent us from taking risks with our work. But if we never try, then we are certainly never going to find our own unique style. When we design, we should never be afraid to try something different, to explore a previously unheard of route to find the solutions we need. If we think of something to try, no matter how outlandish it may seem, give it a go. We might just find our way to something magical that we would have missed out on otherwise.

It is often hard to find a tale of someone in history who made a name for themselves in their chosen field by sitting on the proverbial benches never daring forward. We cannot be afraid of stepping into new areas and trying new things with our designs, or else we relegate ourselves to a place of near irrelevance. Design is about exploring ideas and finding those solutions that engage and mesmerize. If we cannot find new ways to keep the audiences attention held, then our work is not exactly a success. And often times the best chances we have at drawing them in, is by coming at them in a fresh new way. This tends to mean trying something different.

Resources

Tuts+ Network is a fantastic resource hub for tutorials that can help you gain more confidence in your skills so that you will go for it!

Web Designer Wall is a site where web designers can find some amazing tutorials and some trend info to be on lookout for. Great place to find new techniques and things to try.

Designers Toolbox is a valuable resource hub for designers of all flavors. When you get ready to try out your skills, this site can hook you up with some of the goods you’ll need.

Step 7: Fail

The biggest reason most of us are afraid to heed the advice just mentioned, is because of that fear we spoke of. That fear is often of failure. Which when you think about it, is really quite silly. For we tend to learn extremely well from our mistakes and our failures. If nothing else, we take away that we have what it takes to keep going and try again. But there is usually more that we end up learning from this failure. We find the incompatibility of certain elements and techniques with particular messages for instance. So failing is not something to be feared, but embraced if we are going to find our own design voice.

One way to think about it is like this. Almost every great feat of innovation that has come about, not just in design, but overall, did not work on the first try. There are often numerous failures that lead up to that one victorious moment of breakthrough. Each failure teaching a valuable lesson along the way. Pushing the innovators forward with each mistake, not setting them back as most would deem it. We also cannot discount the amount of accidental innovation that comes from failure. Wherein we stumble upon entirely new or unrelated ideas to pursue, perhaps for our current project or for a future one. So failing can take our work and style to new heights if we are not afraid of it.

Resource

How Failure Breeds Success is an amazing and inspirational article on the Businessweek Blog with examples of businesses that embraced and learned from their failures.

Step 8: The Criticism Schism

As we explore these new avenues to find a voice that feels right for us, we are going to need to get feedback from the community on our work to make the most of this growth. When the critiques start to come in, we need to recognize when criticism is genuinely constructive, and when it stems from those in the field who disagree with our breaking of the rules and daring off on a path of our own. Understand this will make some people uncomfortable, even feel challenged. Unfortunately, their criticism will generally not be that helpful to us in these cases. So it is vital that we be able to separate the two for your own sake and sanity.

It’s human nature, and the design field is subject to its whims just like every field is. When members of the design community, especially those who will always play it safe and by the rules, come across works that step outside the boundaries of what is generally thought of to be acceptable, they have a hard time seeing anything beyond those rules that have been discarded. So any innovation you hoped would engage your audience in a new way, is going to go right over their heads. Their critiques will all, possibly somewhat harshly, be connected to the principles or rules that you ignored. This can help you determine if their critiques are beneficial, or a bit biased.

Resources

21 Resources for Getting Design Feedback is a collection of wonderful places to turn for getting some honest and useful critiques of your work.

Web Design Criticism: A How-To is one from the old archives here on Smashing that will discusses how to give and in return take criticism of your designs.

The Art of the Design Critique is another great post that can help with the criticism schism aspect.

In Conclusion

So there are numerous steps that we must take to find our own unique design voice, and each of them are as important to the process as the one that precedes it. If we overlook or underestimate any of them, we undercut our journey to find our style.

Are there any steps that you feel should have been mentioned here that we left out? What was the hardest part of finding your own voice, or if you have not yet, which step do you foresee having the most difficulty with?

(rb)


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress