They evolved in Western Europe from the mid twelfth century. Over time a wide variety of different blackletters appeared, but four major families can be identified: Textura, Rotunda, Schwabacher and Fraktur. It’s beyond the scope of this article to go into each one, but if you look at the letter “o” in the chart below you will see the difference.

Image Credit: Wikipedia (with small change by the author)

While Gutenberg used blackletters for his bible and books, this signaled a new era in typefaces used for printing. Blackletters are difficult to read as body text and Roman and Italic faces were easier to print with movable type. For these reasons, in the 1500’s, blackletter became less popular for printing in many countries except Germany and the German speaking countries.

Gutenberg Bible Image Source: Wikipedia

Germany continued to use Blackletters until the early twentieth century. In the 1920’s it was considered to be antiquated by German designers and publishers and fell out of favor and was replaced by the “New Typography” of sans serif typefaces. In 1933 Hitler declared the new typography to be un-German and declared Fraktur to be “Volk”, i.e. the people’s font. The Nazis continued to use Fraktur extensively until 1941 when it was replace with more readable fonts. Some people associate all blackletters as Nazi fonts but this is clearly an uneducated view and wipes out several hundred years of the typefaces’ history. Check out the Eye Magazine article on the meaning of type for more on this topic.

Blackletter In Action

As already mentioned, these typefaces are not easy to read in body text so they are best used for headings, logos, posters and signs. If you’ve received a certificate, diploma or degree there is a strong chance some or all of the text was set in Blackletter. Other familiar sightings include newspaper nameplates where it may be considered the font lends gravitas to the publication.

Blackletters have more recently become associated with beer labels, heavy metal bands, gangsta’ rap and oh, Disneyland.

Corona Beer Labels

Motorhead Album Cover

Snoop Dogg Album Cover

The Disneyland Sign

Free Fonts

If you’d like to lend a medieval look to your design, there are now a huge number of free blackletter fonts available to download.

Cloister Black

Deutsche Zierschrift

Germanica

External Resources

I love typography has a nice article about Moyenage, a blackletter typeface for a modern age.

Creative Pro discusses Amador, a new blackletter font.

Typeoff have an excellent Blackletter resource page.

Related Articles:

• The Sans Serif Typeface
• The Script Typeface
• The Old Style Typeface
• The Modern Typeface
• The Big, Bold Beautiful Slab Serif
• The Decorative Typeface

Have you seen any recent designs using blackletters? Have you seen any websites using them? Are these typefaces that you would consider using in your own work?

All that will change on 16 November 2009. The board of the Internet Corporation for Assigned Names and Numbers (ICANN) has agreed a proposal that allows governments to apply for a domain name suffix using their own language and character set. The proposal was unopposed by the 15 voting members and received a standing ovation at the summit in Seoul, South Korea.

ICANN CEO Rod Beckstorm stated:

This represents one small step for ICANN but one big step for half of mankind who use non-Latin scripts, such as those in Korea, China and the Arabic-speaking world as well as across Asia, Africa, and the rest of the world.

The Chinese government are expected to be one of the first applicants and ICANN expect the new addresses to be available in early 2010. Several rules will apply:

1. Countries may only apply for one domain name suffix.
2. The suffix must represent the name of the country or an abbreviation.
3. Non-Latin versions of .com and .org will not be permitted yet, but ICANN is considering the implications further.

How long will it be before someone applies for a Klingon suffix?

Trolls may post once, occasionally or be regular offenders, but their goal is usually to be as disruptive as possible by instigating others. If you give the troll the attention they are after by reacting, they usually win, so paying little attention to them is the best way to deal with trolls.

Don’t Feed the Trolls

DFTT is a well-known acronym in the blogging world, and basically reiterates the importance of not acknowledging the troll and their comments. If you respond, you are giving them more ammunition to continue on with their disruptive behavior. When you ignore them entirely, they may eventually just go away.

But what if ignoring them just doesn’t work? If they become a habitual poster and start to disrupt conversations with your readers and essentially drive people away with their negativity, you may need to try a different tact.

Find Out What They’re All About

You can usually find out something about the troll by checking their account information for an email address, website and/or IP address. Even if the poster comments anonymously, if you keep a record of submitted comments and they have commented before, you may be able to identify them. If it’s someone who has commented normally in the past, it’s possible that they’re just having a bad day and their one comment will be the end of it.

You can also Google the troll with whatever information you have to see how they act on other outlets to get an idea if this is habitual for them or a one-time thing.

If you’re able to get an idea of what is motivating them to post inappropriately, you can make an informed decision on how to handle the situation.

Kill Them with Kindness

Trolls want you to get angry and respond defensively to their taunts. You can turn the tables on them by taking the high road and thanking them for their comment, pulling them into the conversation, and even complimenting something that they said. You will likely catch them off-guard, although they may come back and keep trying to incite you.

Block Them

If you have serial trolls commenting on your blog, you may opt to put your comments in moderation and refuse to post anything that is off-topic. Although this may be an inconvenience to your regular readers, this may be the only way to maintain the integrity of your blog.

Report Them

In the most extreme situations, if a troll escalates the situation to personal attacks, invading your privacy and excessive harassment, you may be in a position where you will need to take legal action. Keep a log of all of your interactions with the subject so you have a paper trail of the situation to use to back up your claims. This is a rare but very serious situation, and one you will want to be prepared for.

How do you deal with trolls on your blog?

Image credit: Crow Girl

I recently stumbled across the Pomodoro Technique and was immediately intrigued. Although not new (Francesco Cirillo created the technique in 1992), the Pomodoro Technique teaches us how to remove some of our anxiety around time and learn how to become more consistently productive.

The Focus of The Pomodoro Technique

According to the free ebook available for download on the web site, the goal of the Pomodoro Technique is to provide a simple process for improving productivity by:

• Alleviating anxiety
• Enhancing focus and concentration by cutting down on interruptions
• Increasing awareness of your decisions
• Boosting motivation and keeping it constant
• Bolstering the determination to achieve your goals
• Refining the estimation process, both in qualitative and quantitative terms
• Improving your work or study process
• Strengthening your determination to keep on applying yourself in the face of complex situations

Sounds like a pretty hefty goal, doesn’t it? And one that will most certainly make you more productive if you’re able to accomplish it. Let’s look at how the technique actually works.

Using The Pomodoro Technique

One of the most attractive features of the Pomodoro Technique is how simple it is. Here is a simplified 6-step process compiled from information provided on the web site and in the book:

1. Gather necessary materials: a timer, blank or lined paper (or a To Do Today template available on the website as shown below), a pencil and an eraser.
2. Choose a task to be accomplished.
3. Set your timer to 25 minutes (each 25-minute timer interval is considered a “Pomodoro”).
4. Work on the task until the timer rings and put a check on your sheet of paper in the column to the right of your task.
5. Take a 3-5 minute break.
6. Move on to the next task.

You should be able to keep on working, Pomodoro after Pomodoro, until each task is finished. Then you simply cross it out.

Helpful Tips

I definitely suggest reading through the ebook and information on the web site (there are a number of templates, cheetsheets and tools available), but here are some general tips to help you make the most of the Pomodoro Technique:

• Take a 15-30 minute break every 4 Pomodoros.
• If you finish a task while the Pomodoro is still ticking, take advantage of the opportunity to “overlearn” by using them to review your work and make improvements.
• If a task takes more than 5–7 Pomodoros to complete, break it down into smaller tasks.
• Mark interruptions on your sheet so you can track (and eliminate) them over time.
• Don’t use the Pomodoro Technique for activities you do in your free time.

Not a paper person? You can implement this technique electronically, by using a spreadsheet or database. This is the best application for me, and I can see implementing it into my current task tracking system as a timing guide. I plan to give it a try over the coming weeks.

What do you think about the Pomodoro Technique? Will you give it a try to improve your productivity?

A Brief History of Ajax

Ajax is a conceptual technique. The technologies have been available for over 10 years, but Ajax adoption became widespread after Jesse James Garrett’s article in February 2005 which described the techniques and provided a great acronym: Asynchronous JavaScript and XML.

Despite its name, Ajax does not necessarily depend on asynchronous calls, JavaScript or XML. Today, Ajax is a useful term applied to any system that communicates with a back-end web server to update content without requiring a full web page refresh (although many marketing departments confusingly refer to Ajax when describing any type of animation or interactivity!)

Most Ajax systems utilize the XMLHttpRequest object which permits programmatic server communication. It was introduced by Microsoft in March 1999 when Internet Explorer 5.0 was released. The original implementation was an ActiveX object devised specifically for the Outlook Web Access system. Most browser vendors followed Microsoft’s lead and implemented XMLHttpRequest as a native browser object.

Many of the dynamic web applications we rely on today would not be possible without Ajax techniques.

Does Eolas Have a Valid Ajax Patent?

Eolas Technologies is the company that fought Microsoft over the use of embedded browser applets, such as Flash. Eolas won that case and were awarded over $500 million in 2003. For several years, IE had to show a ridiculous alert box whenever an embedded object was encountered in the HTML.

Eolas 7,599,985 is a continuation of the original patent and has the snappy title “Distributed hypermedia method and system for automatically invoking external application providing interaction and display of embedded objects within a hypermedia document”. It was filed on 9 August 2002 and describes Ajax-like systems. Here’s an excerpt:

A system allowing user of a browser program on a computer connected to an open distributed hypermedia [web page] to access and execute an embedded programming object. The program object is embedded into a hypermedia document much like data objects.

The user may select the program object from the screen. Once selected the program executes on the user’s (client’s) computer or may execute on a remote server or additional remote computers in a distributed processing arrangement.

After launching the program object, the user is able to interact with the object as the invention provides for ongoing interprocess communication between the application object (program) and the browser program.

The present invention allows a user at a client computer connected to a network to locate, retrieve, and manipulate objects in an interactive way. The invention not only allows the user to use a hypermedia format to locate and retrieve program objects, but also allows the user to interact with an application program located at a remote computer.

Interprocess communication between the hypermedia browser and the embedded application program is ongoing after the program object has been launched. The use is able to use a vast amount of computing power beyond that which is contained in the user’s client computer.

To most developers, the Eolas claim is absurd:

• Ajax is a programming technique — not a technology.
• Eolas did not define the name ‘Ajax’ or provide technical implementation details.
• Ajax technologies and techniques existed before the patent was filed. Microsoft’s first implementation of XMLHttpRequest was developed 40 months before the Eolas patent was filed, although it took several years for developers to realize its power. Prior to XMLHttpRequest, on-page server communication was still achieved using more rudimentary techniques such as IFrames or dynamic script injections.
• Ajax has been adopted by millions of websites — can Eolas file lawsuits against them all?
• The patent is vague and could be applied to a wide range of web page interactions.

However, it has been ruled as valid by the US Patent Office on three separate occasions. If Eolas win their infringement case, there is nothing to stop them taking out a lawsuit against … everyone.

Will Common Sense Prevail?

Who knows what will happen once the lawyers become involved.

I’m no legal expert, but it appears that Eolas have filed a US patent — which does not necessarily apply worldwide. Could we see a situation where US companies hand their web development and hosting to offshore providers to avoid a lawsuit? If that’s the case, perhaps Eolas should consider their impact on the US economy?

Does Eolas have a valid Ajax patent? Is this another good reason to abolish software patents? Read the Eolas Lawsuit press release and decide for yourself.

Our latest tutorial, The Easy Way to Install PHP on Windows sees SitePoint’s own Louis Simoneau putting version 2 of Microsoft’s Web Platform Installer (Web PI) through its paces.

Louis will demonstrate how to install PHP with the Web Platform Installer, and along the way will show how conveniently this tool can pull in different open source software packages and install them for you. You’ll learn, for example, how to grab MySQL, WordPress, and Drupal, and watch the Web PI install them all automatically. And therein lies the beauty of the Web PI—you don’t have to dither around configuring stuff yourself.

Louis also gives us a heads up about some of the other cool features, such as the excellent SEO tool, which can analyze your site or application. It’ll check for broken links and provide recommendations to improve the site’s search engine friendliness and overall performance.

The Web PI also has a caching extension for IIS, which improves web server performance and makes it a serious competitor to Apache for hosting PHP applications. Take a look and see what you think.

A huge thank you to Microsoft, who are our sponsors for the multiple choice quiz for this article—if you find the article interesting, be sure to check how closely you paid attention!

Article: The Easy Way to Install PHP on Windows
Quiz: Web Platform Installer Quiz

If you’re designing and developing using Adobe products, shortcut help is now available in the shape of the free Adobe Shortcut App for Creative Suite.

This AIR app covers twelve of Adobe’s creative programs. Illustrator, Photoshop, In Design, Flash, Dreamweaver, Soundbooth, Fireworks, Contribute, After Effects, Premiere Pro, Encore and Acrobat. Click on an icon and you’ll see a full listing of shortcuts for that particular program. When you click on a shortcut you get the shortcut in a really big font size and the ability to save it as a favorite.

The search facility is excellent, you just choose your app and start to type in the shortcut you’re looking for.

For each program, a link is provided to a pdf cheat sheet which you might like to print out, but if it’s all there in the app on your desktop I’m not sure why you would print it. Save the trees, man.  Although these shortcuts are for Creative Suite 4, many of the shortcuts have not changed from older versions so it’s still useful even if you don’t have the latest versions of the programs.

One of the programs I’d love to see included in future versions is Lightroom, but as it’s not officially part of the Creative Suite it might not happen. Overall this is a great little app and genuinely useful for Adobe Users.

Pros:

Looks Great

Easy to find shortcuts

Thorough list of shortcuts

Free

Cons:

Can’t resize the window

Download the app here.

The World Wide Web Consortium (W3C) is an international community of organizations, full-time staff, and public members who work together to develop web standards and technology specifications (HTML, XML, CSS, DOM, RDFa, SOAP, SVG, semantic web, etc.).Until recently, those of a polite disposition would describe the website as functional rather than usable or attractive. The W3C hope the redesign will make the site easier to navigate and more pleasant to use.

The new site is undoubtedly an improvement. The design is clearer, far more attractive, and works on all modern browsers (as well as IE6). A flexible layout is used which switches to a “mobile view” single column when the browser viewport width is reduced below 481 pixels. It’s a nice touch, although I’m not convinced many mobile users have an urgent need to access the site?

The content is as thorough as ever, although it’s evident some pages are incomplete. The first sections I visited were browsers and authoring tools — these are of significant interest to developers, yet no content is available? It’s understandable that the site and specifications will evolve, but why provide a home page link to missing content?

Behind the scenes, the site uses XHTML 1.0 strict throughout and every page I tested passed validation. Ironically, the CSS does not validate primarily because of numerous IE6 hacks. Neither does the site pass automated accessibility validation: form controls have missing labels, there are linking issues, and descriptive meta tags are not used.

The “view: desktop, mobile, print” control at the top of the page is powered by JavaScript. Unfortunately, it lacks progressive enhancement: the control never appears if JavaScript is disabled or unavailable in your browser. That strikes me as slightly bizarre: a control which benefits mobile users will probably fail on many mobile devices?

The view control is the only JavaScript functionality I could find. So why does the site require the full jQuery library and a cookie plugin? I’ve nothing against jQuery, but a better standalone widget code could have been developed which was a fraction of the download size and supported more browsers.

Perhaps I’m being a little overly-critical, but shouldn’t the W3C lead by example? I like their new site, but it would be better if the developers had followed the guidelines they were publishing.

What do you think of the new W3C site? Should they fix the validation and accessibility problems? Or are they simply using the hacks and shortcuts many web developers use on a daily basis?

Links:

• http://www.w3.org/
• W3C home page XHTML 1.0 validation report
• W3C home page CSS validation report
• Progressive enhancement techniques: HTML, CSS and JavaScript
• The W3C Want Your Feedback

By understanding and addressing your clients’ needs, you will be able to:

• Strengthen relationships with your clients
• Ensure client satisfaction
• Become a valued (and irreplaceable) partner for your clients
• Create a more satisfying work environment
• Align yourself for new opportunities with current clients and increase the possibility of referrals

Getting to Know Your Clients

Even if you think you have a good understanding of where your clients are coming from, there is always room for improvement and ways to get to know them better. To start, consider the following questions.

• Why did they hire you?
• What problem, challenge or need do your services solve?
• What are their business goals and what role do you play?
• Who are their clients?
• What do they want out of a relationship with you?

How to Strengthen Relationships with Your Clients

Just like with all relationships, business relationships thrive when fundamental needs are met. You can ensure you are meeting the most basic needs of your clients by being consistent in five main areas.

Do Great Work

It’s an obvious no-brainer when building relationships that the quality of work you do should be exemplary. If you’re not making your clients happy, it will be virtually impossible to forge long-lasting relationships.

Communicate Regularly

Consistent communication is important in all relationships. You can do this by being responsive to calls and emails, scheduling regular check-ins, sharing company news, and interacting with your clients across social media, if appropriate.

Ask for Feedback

After individual projects or reaching milestones, ask your clients for their view on how things are going. You can take a formal approach by having a client satisfaction survey, or ask them informally during a conversation. The most important step of getting client feedback, however, is having a plan for addressing any concerns or criticisms and being committed to improving the situation.

Rely on Your Expertise

Many times, your clients will welcome and appreciate suggestions on how to do things better or more effectively. Use your past experience and in-depth knowledge of the work to help your clients develop solutions that surpass their initial expectations.

Cultivate Partnerships

By considering each client relationship as an ongoing partnership, you can move the relationship to a collaborative, mutually beneficial relationship. This focus can make you more successful at building a sustainable relationship instead of simply doing the work and moving on.

How do you get to know your clients better? What do you do with that insight?

Image credit: arte_ram

Type is a fundamental part of any design it appears in. It can be used as text to read, as a shape and as a visual element where the choice of typeface conveys an emotion or mood. Type, when used well doesn’t need a photograph or illustration to back it up.

Creating A Mood

The font you choose can convey a lot of emotion. Look at the words below in four different typefaces.

We can read the same words but the font evokes different feelings and some fonts are more appropriate than others. The font at the top is a soft script font that (to me anyway) conveys Love more than Hate. The second font is a black letter font. Black letter fonts have a long history and have been associated with everything from Nazis to gangster rappers. The third font down is a sans-serif font called Avenir, which gives a fairly neutral feeling to both words. Finally, the fourth font is a grungy, distorted font which adds more meaning to the word Hate.

Which Fonts To Choose?

There is no simple answer to this but a good rule of thumb for using and choosing fonts is to stick to two or less typefaces per design. When it comes to fonts restraint is a good thing. Always remember LESS IS MORE. You can achieve interest by choosing two contrasting typefaces. For example on your website you might use a script or grungy font for your headings and contrast them with a sans-serif font in for your body text. You could do this using images for your headlines (I know, not very search engine friendly) or by using technology such as sIFR, Typekit and Cufon.

If you want to stick to web safe fonts you can achieve contrast by using serif and sans-serif fonts. The Monocle website does just that.

The UK Government Think advertisement contrasts a serif font with colorful childlike writing for a very effective campaign poster.

Type Size

You need to consider your audience when choosing the font size. Form follows function. If you’re creating a website for an over 60’s community, it’s probably a good idea to avoid font sizes 8 and 10 as that will be bothersome to read for many of the readers. On the other hand type that is too large can overpower a design and make it look a little less sophisticated.

Large type as headlines has been a popular trend on the web in the past few years with some designers choosing massive headlines to contrast with small body text.

Giant Creative

Amnesty International’s dramatic poster using very large and very small type overlaying a stark black and white image to get the point across. You need to look closely at this poster to read all the text but on first glance it clearly communicates its shocking message.

Type As A Shape

“Body copy” refers to larger tracts of text as opposed to short headlines, pull quotes. Type takes on a shape, often a simple rectangle on websites, when body copy is added to the page. The intensity of the shape can depend on the size of the font, the font face and how you lay out the text. In the magazine layout below the two columns of body copy are fully justified and also wrap around the circular ampersand symbol in the headline. The text is aesthetically pleasing and attractive with plenty of whitespace above the main headline which allows breathing space.

Trendy Vs Timeless

It can be tempting to go for the newest, coolest and trendiest typefaces out there. With so many free and cheap fonts available, there are literally thousands of fonts to play around with. Some of them are very “now” but next year they may look very dated. That’s not to say you shouldn’t use them. Just be aware of why you’re using them. If you’re new to design, you’ll also find that your tastes will change as you learn more.

That’s Hemi Head on the top and Bernhard Modern on the bottom. Hemi Head has a touch of Star Trek about it and could be useful if you’re designing for a retro space design. Bernhard Modern looks more sophisticated and classic. Some of the oldest typefaces are true classics which have been around for hundreds of years. They’ve been around that long and are in continued use because they are well designed and legible. Over time you’ll find that practice and experience will tell you which way to go with your type choices.

To sum up, some of the things to think about when using type as a design element are:

1. Is the typeface I’m using appropriate? Is it in keeping with the message I’m communicating?
2. If I’m using more than one typeface, are they contrasting or conflicting? How well do they work together?
3. Is the size right for the medium and the message?
4. Am I using a typeface that’s a timeless classic or will this typeface be the equivalent of 80’s shoulder pads next week?

So here ends the Elements of Design series. I hope you’ve found it useful.

Next week I’m starting another series that falls under the umbrella of “Design Principles”, I hope you can join me.

Related Reading:

• Design Elements: The Line
• Design Elements: Shape
• Design Elements: Texture
• Primary Design Elements, A New Series