Brand = User Experience: The Interface of a Cheeseburger


  

In the first part of a series on the UX = Brand, the adventure of a web designer starts in a McDonald’s, where he discovers that there is a worm hole between the world of Branding and User Experience Design. Years later he learns that it is the Interface that connects both worlds. This is the first part in a series.

There he goes, the web designer, stepping up to the counter of an empty McDonald’s at 3 o’clock in the morning. He is scanning the overhead menu, putting a cheeseburger in his mental shopping basket. “Cheezubahga, onegaishimasu,” we hear him say, “with an iced tea.”

Waiting for his order, he examines the wireframe of the display on the cash register, the mechanical logic of the deep fat fryers, the input/output logic of the ice cream dispenser. Coming late from work, with his mind still in design mode, he starts tracing the restaurant’s interaction model, drawing arrows from the entrance to the counter to the tables to the trash cans; seeing how the conveyor-belt kitchen, the trays with the paper liners, the bolted down seats and the meals comprise a single, complete customer interface. “They must have run usability tests,” he thinks, taking his tray to the table.

Hungry for Food = Hungry for Words

When we are hungry for food, we follow similar patterns as when we are hungry for information. Similar, infantile patterns. At both times, we fall into a mode of dull impatient demand. We want everything immediately with as little interaction as possible. We want exactly what we expect in the way we are used to get it. When hungry, the last thing we fancy is thinking or making difficult decisions. Because, well, that’s how our body works. And that’s why after a hard day of work we often sleepwalk to McDonald’s.

When we are hungry for knowledge, we inevitably become mentally passive and use all our energies to receive information. Because that’s how our brain works. And that’s why we blindly return to Google search when looking for data.

McDonald’s = Google

McDonald’s is designed for you to switch off your brain as soon as you enter the door. Buying and consuming a Cheeseburger is an automated routine — simple and mindless, like tying shoelaces or riding a bicycle. You don’t need to analyze, guess, evaluate or make difficult decisions because McDonald’s is built in a way that minimizes conscious action. Once learned, the transitions between each step of the ordering process are automatic and seamless. Moreover, in any of its franchises anywhere in the world, McDonald’s provides one consistent user experience. Once learned, ordering, buying and eating becomes an easy routine. It’s just like Google: blunt, focused and clear.


Both McDonalds and Google have a lot in common: both are designed for you to switch off your brain as soon as you enter the “door”.

McDonald’s was driving “user centred design” to the extreme before interaction designers even thought of the notion. From its logo to its tables, from its hamburgers to its trash cans, it’s all designed to be practical and useful rather than aesthetically pleasing.

This functional approach is applied all the way down to the cheeseburger. Standardized in shape, taste, and consistency, it has an identity that is clearly distinct from that of the sandwich. There’s no need for a knife, fork or spoon, plate or pair of chopsticks. In fact, it has a simple hand-to-mouth interaction model not unlike that of baby to breast.

Fast Food Epiphany

The look, feel and taste of McDonald’s food is as branded as its logo. The design of the cheeseburger is a core component of McDonald’s corporate design, just like Ronald McDonald’s and the ketchup and mustard colors of its packaging. Its interface is its brand; its brand is its interface. But so what? Of course, everything at McDonald’s is designed and standardized. Of course, everything is calculated and controlled in a huge global franchise.

My epiphany that night was not that McDonald’s success is based on cold calculation. It was the realization that McDonald’s apparent lack of culinary and aesthetic taste is the result of ‘cold’ user interaction design. McDonald’s design is as user-focused as a high-traffic website. It’s designed so well that it makes us blind like sucklings. Just like Google’s search interface, its beauty is in the interactive experience and not in the object.

A Worm Hole between Branding and UX

In my experience old school branders and interaction designers fundamentally misunderstood and hated each other. They lived in parallel worlds. In one world the designer controlled everything, in the other the user was in charge. What confused me was that the longer I studied McDonald’s frameset, the less I was able to tell whether I was looking at a brand or at an interface. Is this branding or is it user experience design?

I had found what Astronomers call a ‘worm hole.’ A shortcut through space and time that acts like a magic elevator between different realities. McDonald’s seemed to lay at a critical point: the gravitational center of branding, where everything slants into a funnel that leads to a parallel world of user experience design. And back again. Ironically, worm holes have two so called mouths that are connected with a throat:

After discovering that this fascinating indeterminacy between brand and user experience applied to most of the recently successful brands — be it the iPhone, the Wii or Star Bucks — I decided to investigate it by thinking about it and writing about it.

Learning from Babies

Just by watching my baby grow and interact with its world, I learned more about interfaces than I could have possibly imagined. Most of what babies do is learning to interface with their surrounding. Observing the baby drinking its milk, I noticed that the interfacing does not happen on the nipple. It happens more generally between the mother and the child. In other words: The nipple is not an interface; it’s just one touch point. The interface is in the whole experience a child makes during breast feeding. The interface is the way they connect. And this experience defines the brand “Mama” in the beginning.

By studying breast feeding (the blueprint of user interaction) live, I was more and more certain that the correct equation was Brand = User Experience. Translated back into theory: The Interface was in the equals sign, not on the other side of the equation. The interface is what connects the worlds of Branding and User Experience Design. It’s the tunnel. The elevator. The wormhole. The throat.

Make sure you don’t miss the second part of the series on Brand = UX. In the next part we’ll look at the tricky question “What is an Interface? And can it be intuitive?”

Would you like to see the next parts of this series on SM?

Hopefully you’ll find this new format inspirational and interesting. What do you think? Please let us know and comment on this article! Your feedback is very valuable for us and it helps us to meet your expectations. Thank you.


Would you like to read next parts of the series Brand = UX?(opinion)

About the author

Oliver Reichenstein is the founder and CEO of iA, a user experience design agency with offices in Tokyo and Zurich.


© Oliver Reichenstein for Smashing Magazine, 2009. |
Permalink |
96 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: ,

BlueCat Networks Scores $11 Million For IP Address Management Platform

Toronto-based BlueCat Networks, a provider of enterprise IP management solutions, has raised $11 million in its first round of institutional financing led by Menlo Park, CA-based firm Bridgescale Partners.

BlueCat caters to network administrators who face a variety of IP-related pressures like the introduction of VoIP networks, wireless devices (including RFID tags), virtualization, and the complexity IPv6 brings to company networks by offering automated solutions that simplify network processes.

BlueCat Networks markets IP Address Management (IPAM), DNS and DHCP platforms in the form of both physical and virtual appliances. All of its solutions are DNSSEC and IPv6 ready.

Bridgescale Partners in the release indicated that it wants to expand more into Canadian territory for investments.

Crunch Network: TechCrunch obsessively profiling and reviewing new Internet products and companies


The Shopping Spree Continues; Cisco Buys ScanSafe For $183 Million

Cisco has added another company to its coffers with the acquisition of ScanSafe for $183 million. A few weeks ago, Cisco announced a $2.9 billion acquisition of mobile networking infrastructure provider Starent Networks, which followed the $3 billion acquisition of video video-conferencing company Tandberg in late September.

ScanSafe provides software-as- a-service (SaaS) Web security solutions for large and small businesses. Tom Gillis, Ciscos’s VP and general manager of its security technology business unit, said in the release that the acquisition would help further Cisco’s vision “to build a borderless network security architecture that combines network and cloud-based services.” ScanSafe’s service will be integrated with Cisco’s AnyConnect VPN Client, a virtual private network (VPN) product to offer a cloud-security service.


Amazon Launches Hosted MySQL Database Cloud Service

Amazon has launched a hosted relational database service, Amazon RDS, as part of the suite of services available at AWS. The new service is a hosted MySQL database instance with the full capabilities and access rights as a normal self-hosted DB. As a hosted solution, instances are easily created and available almost immediately. Pricing stars at $0.11c per hour for the smallest scale specification, and is available now on the AWS site.

Unlike completely elastic hosted DB services, which abstract a large-scale cluster into a shared environment for customers, the Amazon model is to step up or down through tiers of service based on requirements. The tiers of service (with names that seem to be inspired by a fast food restaurant menu) and pricing are:


oDesk’s oConomy Hits $100 Million

Startup oDesk received rave reviews at this years TechCrunch50 conference thanks to its innovative workplace platform. The startup was voted as demopit winner with the launch of a new iPhone application that allows project administrators to monitor the work stream of their team members while they’re on the go.

Today, oDesk’s “oConomy” meter, which is the amount of money that is earned from workers on oDesk, hit $100 million. The oConomy showcases data from the work activity of 350,000+ oDesk users in over 150 countries.


Salesforce And Adobe Partner To Offer Flash-Based Applications In The Cloud

With all of its SaaS offerings, Salesforce.com is consistently integrating with other forms of cutting edge technologies, such as Twitter, Box.net, and more to offer clients more diverse and appealing options. Today, the company is partnering with Adobe to offer the “Adobe Flash Builder,” off of Force.com, Salesforce’s platform to build and deploy enterprise applications.

The new offering is meant to allow developers and IT departments to build cloud-based rich media applications off of Force.com. Developers can use Adobe Flash Builder for Force.com to extend or enhance existing Salesforce CRM implementations and custom-built Force.com applications, or build entirely new applications to meet business needs.


The power of two

gg-215x179
I spent this week at John Battelle and Tim O’Reilly’s Web 2.0 Summit, and thoroughly enjoyed myself. Partly because MG SIegler was on fire, doing a hybrid live blogging/news analysis stream that let me mine the hallway conversation, and mostly because John Battelle poured a ton of research and preparation into a relentless pursuit of the “story” — namely Twitter. John asked the questions we all wanted asked, leaving plenty of time to relax and enjoy the moment when the Big Guys finally showed their cards.

We’ll soon see how well these cards are being played, but for now the one fundamental fact is that, as with Noah, there are two of everything. Twitter and Facebook. Google and Microsoft. Scoble and Scoble (the one at the top of the thread and the one at the bottom.) This is very important because it undercuts the rationale for throwing FUD at the BigCos by turning us all into Missouri. If there are two locked trunks (varying degrees perhaps or not, doesn’t matter) then we can make up our minds for ourselves. The result: a valid user contract.

The reason a valid user contract is important is that it shifts the argument from who’s doing what to whom to what are we agreeing to do with our data. We may have argued over the value of Track on an individual basis, but this week’s announcements underline its value in aggregate. The hostility over the embargo of realtime search eased when FriendFeed opened things back up with realtime conversation; now the Facebook acquisition is being used to restart the notion of exclusion. But it has much less force once we notice that, just as with the Fail Whale, FriendFeed will continue until it morphs into a Facebook hybrid. We will continue to have a choice, and will validate those, preferably two, who continue to scratch the aggregate itch.

Viewed through the lense of the power of two, big memes like scalability and market force take on a different hue. What does it matter to me how good Windows 7 is in the abstract, as a revenue splash for Microsoft or as a funding mechanism for whatever the company is trying to do in the WebOS era? Not a lot, but certainly much less than in the context of OS/X, WebKit, iPhone, Android, etc. In context, Windows 7 drives the motion of the two forward. It means that Google Voice drives Apple to drive AT&T to open the door, while driving the Android ecosystem to firm up its AppStore and bake out its alternate proposition. It’s like what Tim Berners-Lee is doing, playing the US and UK governments off each other in a race to document transparency.

This counter-surge disruption draws its power from the elasticity of the network and the cloud computing model. Next to this inexorable self-correcting dynamic, the politics of both FUD and silence fail miserably. If the sound sucks on a Startup School webcast from Berkeley, wait a half hour and the chorus of Fails prompts a fix. If you have to leave to drive to the event, get someone to patch the feed into Ustream so you can monitor from the car. If the car doesn’t play iPhone app audio, get a car that does it right. These micro-decisions in ones and twos make a small ripple; in a cascading social wave, you get Twitter and FriendFeed and Facebook and Google and Microsoft. And in that world, you get a new media model.

The mistake (if that’s what it is and not the fuel for progress) that’s made in identifying any one node as directly competitive with another is that the least important aspect becomes the defining metric of success. In fact, FriendFeed is wildly successful because it does not compare directly with Twitter or Facebook in scale or “user friendliness” but rather creates the ability to do things in the context of those successes. If Twitter lists make some of those FriendFeed processes possible in the larger platform, it only accelerates the value proposition of the aggregate tools. The barrier to entry is in finding complementary roles for new players beyond the first two or three.

Evean Williams’comment about there being room for both Twitter and Facebook may have been good politics, but it also reflects the larger reality of the power of two. Minus Twitter, Facebook remains trapped in its internal domain, without the escape route opened by Adsense to allow Google to achieve scale to create pressure on Microsoft. Without Facebook, Twitter has no vehicle for moving into the larger company’s private (and enterprise) market. FriendFeed is as much the structural backbone for Twitter as it is for Facebook, and Williams’ comments about not seeing two-way synchronization as particularly useful between the two clouds was the least perceptive comment he made at Web 2.0. In fact, the power of two will mandate full sync whether he likes it or not.

Forget the noise about FriendFeed and its founders being elites or two engineering-focused or whatever Silicon Valley spam you hear. If you’re looking for signals about where this thing is moving, look to the voices that are making the turbine spin. It says nothing about the various entities that make up the technology environment, negative or positive, to deride any one node. Commercial, social, open, pay-per-view, whatever. The most disruptive thing I saw on stage at Web 2.0 came from ComCast’s Brian Roberts, with the beta on-demand service that erases the boundary of the TV and the computer. This has gone wll beyond the politics of exclusion, the swiftboating of any individual, company, ideology, format, or layer of the stack. That won’t stop the sniping, but nobody really cares.

Crunch Network: TechCrunch obsessively profiling and reviewing new Internet products and companies


Pew Study Reports That Internet Users Are Becoming More Status Update-Friendly

A new Pew Internet And American Life Project study is being released today which reports that internet users on a whole are becoming more likely to update their statuses online (on social media networks). The report says that 19% of internet users say they use Twitter or another service to share updates
about themselves, or to see updates about others. When Pew surveyed the group in April of this year and in December 2008, 11% of internet users said they use a status-update service.

Updating status online is a learned behavior for most internet users. It’s not something users tend to do naturally but these statistics shows that people are increasingly looking to Twitter, Facebook and other sites to update their status, which is definitely noteworthy. The full report is embedded below.


Showcase Of Web Design In Ireland


  

This post is the second article of our new series “Global Web Design“. Over the next months we’ll be covering various continents, featuring web developers and web designs from different countries of the world and taking a close look of what is happening in the web design scene worldwide. We started last week with Russian web design. We continue now with Ireland (Lee Munroe) and Brazil (Fabio Sasso).

If you’d like to prepare an article for this series, please contact us and we’ll discuss the details.

Ireland. The land of the leprechauns, green fields and Guinness. But what about the web industry in Ireland? There have been a host of interesting things happening both North and South of Ireland recently. Nicholas Felton talked in Belfast, Ze Frank talked in Dublin, FOWA came to Dublin for the first time and FOWD came to Belfast. Are all these high profile events an indication that there are exciting things happening throughout Ireland?

Screenshot
Irish Web Design: Destination Dublin

To give you an insight into some of the interesting stuff happening, I’ve interviewed several high profile Irish designers involved in the web industry and how they feel Ireland is making an impact on the rest of the world, along with a showcase of some of the more inspiring websites being produced.

State Of Things

Q: How do you feel the standard of web design throughout Ireland sits with the rest of the world, and how is it changing?

Alan O’Rourke: I really felt 2-3 years ago that it was lagging way behind. There were a few really good designers you could count on one hand. But lately there are designers and sites springing out of nowhere with top class international standard portfolio sites and an amazing can-do attitude.

Around about the same time a brilliant grass roots community started building with a new openness and sharing of knowledge. Open coffees, Barcamps, and showcase sites all focusing on highlighting Irish talent. In terms of commercial design, photography and illustration I see Ireland being quite comfortably up there with the best in the world. However, it still has a way to go in terms of experimentation and more artistically driven websites.

blizzards
Irish Web Design: The Blizzards

Eoghan McCabe: Honestly, the standard of web design in Ireland is extraordinarily disappointing. Most people would rather not admit that and make an excuse: “there are great people out there, they’re just not known”, and so on. But the truth is that there are very few people, if any really, influencing web design on a global level from Ireland. You could make a list of 100 influential web designers from around the world, and not one of those would be Irish.

Why is this? We are a small country and maybe that makes a difference. But there are still plenty of web designers here. I think the problem stems from a general lack of global ambition; a lot of Irish designers, entrepreneurs and others strive for local victories only. But that’s another blog post!

The good news is that change is on the way. And it’s coming from the bottom up. It’s coming from the young guys that grew-up in a more confident, peaceful Ireland. And it’s coming from the underdog Universities like University of Ulster and their Interactive Multimedia Design course and, all things going to plan, a good Dublin college who will launch a Masters in emerging web technologies soon.

tapmap
The Tap Map

Ray Doyle: The standard of web design in Ireland has come a long way in the past 18 months. We are seeing some new, exciting work from talented Irish designers and developers. More so from the small independent Web studios than the big agencies, who I think are finding it hard to up-skill at the rate that is needed in this fast paced industry. Compared to the rest of the world, I think we are right up there. I feel the majority of the Irish companies are more cautious than, say, companies from New York or London. But with a little time, I think we can shift the mindset to be a bit more daring and forward thinking when it comes to creating engaging web experiences.

Sabrina Dent: That’s a very complicated question actually. We have a pool of very talented designers here relative to our size, but we’re lacking the trickle-down effect of good aspirational design. To a large degree, people’s standards and expectations are influenced by what they’re exposed to everyday; in the Republic, we don’t have any outstanding broadcast sites like the BBC, no top-notch newspaper sites like Rue 89, and no WhiteHouse.gov – pretty much every government website here is universally horrendous.

Having said that, I think the biggest change is in the clients. More clients are thinking bigger, and looking for higher-caliber design. I think that’s a really positive step forward.

glenilen
Irish Web design: Glenilen Farm

Web Standardistas (Christopher Murphy & Nicklas Persson): The island of Ireland is quickly establishing itself as a contender internationally. There’s a real energy emerging in Belfast which makes it very exciting to be working in this field, here, at this time. We’re thrilled to be helping to shape the industry as it grows from strength to strength.

Q: Is education in the web industry important in the web industry and do you feel there is adequate education available, both North & South, for developing professional world class designers?

Alan O’Rourke: Hmm, tough question as I didn’t study design in college myself. For an industry that moves and develops so quickly it must be difficult to build a course around it. Most of the institutions do it very well — judging by the quality of the graduates coming out. In this industry what is important is the ability of self learning. College is a great starting point, but then you need to start tracking the industry’s changing standards and techniques.

However, the business part of web design is not quite there. It does not seem to be covered well as so many designers get quite a shock and, unfortunately, some expensive mistakes are made when they start out in the real world. But then maybe it can’t be taught and you have to learn yourself the hard way.

Screenshot
White Noise Studios

Eoghan McCabe: I don’t know if I could consider formal education a fundamental part of the solution, but it certainly plays an important role. For a start, if universities were to stop teaching old techniques and technologies, they might not hinder or turn-off those young students that would like to explore their creativity on the web. But in addition, forward-looking courses that can point passionate students in the right direction can really make a difference. One example of this is the mass of excited, talented people coming out of the previously mentioned University of Ulster course. A few of these guys will play a big part in web design over the next five years.

On top of this, grassroots initiatives like the Build conference will invigorate those that have lost their way and inspire a whole new generation of web designers. For this, Ireland cannot thank Andy McMillan, the young, independent organiser of this event, enough. I don’t think even Andy understands the effect he will have on the Irish web industry and, as a result, the Irish economy, by bringing international heroes like Eric Meyer, Mark Boulton, Andy Budd, et al, to our shores. Andy also runs Refresh Belfast which is another example of a grassroots initiative that will make a great impact here.

Screenshot
Gareth Dickey

Ray Doyle: Good question, let’s open a can of worms :). I personally feel that in the digital media industry experience is more important than education. I often ask myself would I’ve been a better man, designer, drinker if I had chosen the path of the student and not that of bedroom designer/HTML monkey on minimum wage. I like think to not, well, probably a better drinker.

The main reason I opted for the experience route and not education was the lack of good facilities in Southern Ireland at the time and, based on some of the student portfolios I have seen recently, this is still the case. What we are lacking is an institute dedicated to shaping young talented individuals into digital media hot shots. What we need is our very own “Hyper Island“.

Winston Binch of Crispin Porter + Bogusky sums it up perfectly “Our Industry desperately needs more schools that specialize in creating and developing digital talent at the level and capacity of Hyper Island”.

standard
Web Standardistas

Sabrina Dent: I’m probably biased because when I started doing what I do, there was no formal education available — no certifications, and certainly no degrees. I’m one of those people who believes that good design skill is innate; you can learn everything there is to be taught about user interface design, CSS and XHTML and still not be a good web designer. I’d always choose a good portfolio over a good degree.

There’s a lot of value to being self-taught, not least of which is that you develop the ability to self-teach. Standards and trends in this industry evolve dramatically; tables shift to CSS, ASP shifts to PHP, soulless stock photos shift to quirky illustration, and suddenly everyone wants Ajax for everything. You have to be able to learn new skills as you go along — you’re not going to be in a classroom for the Next Big Thing.

Web Standardistas: As educators, we passionately believe in the importance of establishing a strong foundation on which aspiring professionals can build. We’re constantly refreshing our teaching materials and building upon the solid foundations we have established on our existing courses to offer new programmes tailored to this field. Watch this space.

Screenshot
Brown Bag Films</em

Q: Do you feel it is important for designers (and front end coders) to have working knowledge of development (back end coding) and to what extent?

Alan O’Rourke: Yes, very. I know it had a positive effect on my design after spending a year in a company of developers. It gives you insight into how your design will function, what is required to make it work (or better ways to do it), and how you communicate your design to a developer. I don’t know syntax or functions and ‘object orientated’ twists my noodle but I know what is possible, what is not, and what is just expensive to build.

Eoghan McCabe: I believe in experts with common sense and a healthy appreciation for what their peers do. I have a Computer Science background and I love to try to understand what the developers in Contrast do for our apps. That doesn’t mean I ever could do their work, but it does mean that I can excel at mine in the context of what they need from me.

Beautiful things happen when you throw a bunch of passionate experts in a room together and let them learn from and help each other to achieve a common goal. I always seek feedback on my design work from everyone in the company, no matter what they do, because there’s always insight to be gleaned from different perspectives. Likewise, I love to brainstorm technical solutions with the other guys before they get to work with the code.

Screenshot
ndrc

Ray Doyle: Definitely, it’s vital for a web designer to know and understand the limitations of web design. I have seen developers cringe when they are handed a design to code up that’s been put together by a print designer. It’s quite funny to see them flip out. Any serious web designer should have a basic knowledge of CSS/XHTML.

Sabrina Dent: It is certainly a bonus. When you’re developing a front end UI, it’s nice if you know which calls to the database are cheap and which are spendy, for example, or how to avoid little design features that are just not worth their weight in development overhead. But as long as you’re open to feedback from the team actually coding on the ground, it isn’t necessary.

Web Standardistas: We feel it’s absolutely critical for designers to have a working knowledge of development principles. The recent debate between Lukas Mathis and Mike Rundell goes to the heart of the matter. Their posts, Designers Are Not Programmers and Designers Who Are Technical: The More You Know, The Better Your Work, respectively, offer a comprehensive and well-reasoned look at this topic. In the words of Mr. Rundle, “Designers Don’t Just Make The Pretty.”

Screenshot
5pieces

If I was to offer you a pint, what would you go for?

Alan O’Rourke: Any Laager is fine for me.

Eoghan McCabe: I’d give it the whole “oh… what do they have” thing and then settle on a Guinness when the disappointment sets in. But in a perfect world, it would be a Brooklyn Pilsner, a Vedett, a Sierra Nevada IPA or a Galway Hooker.

Ray Doyle: Is it your round? I would have to go for JD instead of the pint.

Sabrina Dent: A pint of Coke with ice. I know, it’s dreadfully boring, but I try to make up for it by being entertaining company.

Web Standardistas: That depends on where we are. Right now we’re in Berlin enjoying a couple of Erdingers. A firm favourite in Sweden would be Norrlands Guld. When in Hong Kong, it would have to be Tsingtao.

What’s going on in Ireland?

There are a host of upcoming events happening in Ireland in the near future. As previously mentioned, Build will be happening Thursday 5th November 2009 and featuring the likes of Eric Meyer, Andy Budd, Mark Boulton and co. Renowned designer Elliot Jay Stocks will be talking at the University of Ulster Thursday 3rd December 2009 (a Web Standardistas event).

The first Refresh Dublin will be held on Thursday October 29th 2009 and will feature speakers including Sabrina Dent. Run by Niamh Redmond, Refresh Dublin is an event that promotes design, technology, usability, and standards.

For information on other upcoming web-related events, check out Digital Media Island and Digital Circle.

Showcase of beautiful web design from Ireland

Evolveni

Screenshot

Stakeholder

Screenshot

iq360

Screenshot

nopostie

Screenshot

Living Lyric

Screenshot

Amanda Holden

Screenshot

paper jam

Screenshot

The Ability Awards

Screenshot

Dublin Espanol

Screenshot

The Exception

Screenshot

Country Kitchens Bakery

Screenshot

Rob Hearne

Screenshot

Arrival

Screenshot

Outdoorni

Screenshot

Sponsor Lee

Screenshot

Skipskap

Screenshot

Dead Good Design Agency

Screenshot

Mark Wallis

Screenshot

Kanchi

Screenshot

John Hayes Film

Screenshot

Locle

Screenshot

Totally Dublin

Screenshot

next bus

Screenshot

People Love Presents

Screenshot

Discover Craigavon

Screenshot

Stanley Kubrick: Taming Light

Screenshot

Oliver Jeffers

Screenshot

pixelcraft design studio

Screenshot

Jordan Moore

Screenshot

Freshest

Screenshot

The Menace

Screenshot

Abbey Theatre

abbey

Design Innovation

Screenshot

Apps

app

Plan Ireland

plan

Build

build

Mr Brian Burns

burns

QFT

qft

The Good Little Company

goodlittle

Luv That Design

luv

The Creative District

creative

Strange Victory

strange

The Peoples Forest

peoples

Contrast

contrast

Muzu

muzu

Web Factory

webfactory

BBC Irish

bbc

The Harper Organisation

harper

fntnhrl

fnt

U Music

umusic

Organic Supermarket

supermarket

Agtel

agtel

What do you think?

What do you think of the Irish web industry? Are there any exceptional sites that haven’t been covered? Share your thoughts.

Stay Tuned and Get in Touch!

This article is the second of our new series “Global Web Design“. Over the next months we’ll be covering various continents, featuring web developers and web designs from different countries of the world and taking a close look of what is happening in the web design scene worldwide. We started last week with Russian web design. We’ll continue next with Brazil (Fabio Sasso).

If you’d like to prepare an article for this series, please contact us and we’ll discuss the details.

About the author

Lee Munroe is a web designer from Belfast Northern Ireland who runs an Irish web design gallery and a user review site for Northern Ireland. You can follow him on Twitter.


© Lee Munroe for Smashing Magazine, 2009. |
Permalink |
30 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , ,

Rich Typography On The Web: Techniques and Tools


  

Let’s face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered “Web safe,” and those ones aren’t exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let’s say, headings? Or pull quotes? What then?

You have a few options. Many people just opt for more elaborate CSS font stacks, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.

Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

1. sIFR 2.0

sIFR (Scalable Inman Flash Replacement) was one of the first dynamic text replacement methods, developed in the spring of 2005. It uses JavaScript and Flash to convert any text you designate on a page to any typeface you choose and has been released as open source under the CC-GNU LGPL license, so it’s free for anyone to use.

sIFR 2.0

sIFR is fully accessible to screen readers, because it simply displays the original text if JavaScript or Flash isn’t enabled. And because of the way text is rendered, if your visitors zoom in using a browser’s text-zoom option, the replaced text will also zoom in (only when the page loads, though, not if they zoom in afterward).

How sIFR Works

While sIFR is a rather complex system, its basic concept is simple: JavaScript checks to see whether Flash is installed in your browser. If it isn’t (or if JavaScript isn’t installed), it stops there and the visitor sees your text in whatever font you’ve specified in your style sheet. If Flash is installed, then the JavaScript measures each element on the page that you’ve designated to be converted.

Once JavaScript has measured all the elements, it replaces each with a Flash movie that is the same size as the original element. The original text is passed into the Flash movie as a variable, then some ActionScript code in the Flash file draws the text in the typeface you’ve chosen and scales it to fill the area occupied by the Flash movie.

Benefits of sIFR

  • Works with virtually any font
  • Degrades gracefully in most instances to the original HTML or (X)HTML file if the person doesn’t have Flash or JavaScript installed
  • Cross-browser and cross-platform compatible
  • Because the original (X)HTML document remains unchanged, the SEO, accessibility and other concerns people usually have with Flash aren’t really issues

Drawbacks/Disadvantages of sIFR

  • Requires both JavaScript and Flash to be installed
  • Will not be visible if a Flash ad blocker is used
  • Firefox does not easily deselect sIFR text

2. P+C DTR (With Word-Wrapping and Inner Tags)

P+C DTR (with word-wrapping and inner tags) (the “P” and “C” standing for PHP and CSS) is a text replacement method that works with PHP and CSS rather than Flash or JavaScript. Considering that PHP is a server-side language, and every modern browser automatically supports CSS, this method has some advantages over those that use Flash or JavaScript. This version of P+C DTR is based on the original P+C DTR method, but with the addition of word-wrapping and inner tags.

P+C DTR

How P+C DTR Works

P+C DTR uses PHP’s output buffering functions to extract the heading text and give it an inline style that points to the script that replaces the text with an image. Therefore, the only requirement on the back end is that the host server supports PHP image generation.

The CSS comes into play in designating the heading’s font color, size and background color. The styling for the heading is kept in a separate CSS file, but the file is called only once per browser session, so it doesn’t have a noticeable impact on page load time.

Benefits of P+C DTR

  • Doesn’t require Flash or JavaScript
  • Not affected by ad blockers
  • Output is valid XHTML and CSS

Drawbacks/Disadvantages of P+C DTR

  • Will not work if images are disabled in the browser
  • headings have to be uniform throughout the website; you can’t have one style of heading on one page and another on a different page (unless you use a different style sheet for each page)
  • Although it does seem possible to select the text in the headings, it is difficult to do so

3. Cufón

Cufón was created as an sIFR alternative. It uses JavaScript to replace text, without Flash, making it more widely compatible than sIFR.

Cufon

How Cufón Works

Using Cufón is a bit more involved than a lot of other DTR methods. You have to go through an extra step: converting whatever fonts you want to use to a format that Cufón can work with. An automated tool can do this, though, so technically it is not more complicated than the other methods.

Once you’ve converted the fonts, Cufón simply replaces the text in your browser with the font you’ve designated via the JavaScript. Activating Cufón is as simple as uploading the script and putting a couple of lines of code in the head of your document.

Benefits of Cufón

  • Doesn’t require Flash
  • Technically, it’s quite easy to use — even with the extra step of converting fonts
  • In general, the embedded text can be copied and pasted in any application, but it doesn’t always work – e.g. there are problems in Chrome 3 and Firefox 3.5.2
  • Because text is rendered using only JavaScript, it’s quicker than many other methods
  • Degrades gracefully if JavaScript isn’t supported

Drawbacks/Disadvantages of Cufón

  • Converts your text to image files, which means it’s not as accessible as plain (X)HTML
  • Does not seem to work in IE8 unless the page is viewed in compatibility mode It does work in IE 8.
  • Requires JavaScript
  • Accessibility issues: Cufón wraps the text inside canvases and spans and so Because. Each. Word. Is. In. Its. Own. Span. Some. Screen. Readers. Will. Read. The. Text. Like. This.
  • In Firefox, if CSS is disabled, a bizarre text duplication occurs
  • Sometimes has problems with text selection

4. Typeface.js

Typeface.js is a JavaScript-based dynamic text replacement method that embeds fonts on your page rather than converting them to images. This means that visitors are presented with a page that acts (and really is) like a regular HTML and CSS page.

Typeface.js

How Typeface.js Works

Whereas most of the methods mentioned so far either replace the text with Flash or turn the text into an image, Typeface.js styles text with an embedded font using JavaScript. So, your text stays as accessible as it was before, without the need for Flash.

Typeface.js uses the browser’s vector drawing capabilities to draw the text in your HTML documents. All modern browsers support this (Firefox, Opera and Safari use the <canvas> element and SVG, and Internet Explorer supports VML).

Benefits of Typeface.js

  • Leaves the text on your page as text, making it more accessible
  • Flash is not required
  • Not affected by ad blockers

Drawbacks/Disadvantages of Typeface.js

  • Copyright issues prevent many fonts from being embedded in this manner, so only free and open source fonts can be used
  • Requires JavaScript
  • A tool is available to convert OpenType and TrueType fonts to Typeface.js’s required format
  • Font embedding causes larger page size and more HTTP requests
  • Doesn’t work in Internet Explorer when images are disabled

5. Facelift v1.2 (FLIR)

Facelift Image Replacement (FLIR) is another DTR alternative that uses PHP and JavaScript. Flir lets you replace any element (h1, h2, spans, etc.) with dynamically generated text and has extensive documentation available as well as a forum for getting help.

FLIR

How FLIR Works

FLIR is relatively straightforward. JavaScript finds the parts of your page that need to be replaced. It then sends the text for each of those parts to a PHP script that generates an image with the desired fonts, and then it plugs them back in where they belong on the page.

Benefits of FLIR

  • Doesn’t require Flash
  • Supports word wrapping, so long headers aren’t a problem
  • Works with almost any font you choose
  • Degrades gracefully if JavaScript is not available

Drawbacks/Disadvantages of FLIR

  • Requires JavaScript
  • Text selection in Internet Explorer is virtually impossible
  • Will not work if images are disabled

6. sIFR 3

sIFR 3 is the newest version of sIFR. It’s currently in development, so bugs still need to be worked out. A number of new features have been added, and using sIFR is now easier.

sIFR 3

How sIFR 3 Works

sIFR 3 works much like sIFR 2.0. It uses Flash and JavaScript to replace text on the page with a Flash movie, while retaining accessibility features.

Benefits of sIFR 3

  • Same benefits as sIFR 2, mentioned above
  • Allows control of kerning, leading and line-height properties
  • Has the ability to ignore specific elements during replacement
  • Supports pixel fonts
  • Allows the use of background images within the Flash file

Drawbacks/Disadvantages of sIFR 3

  • Same drawbacks as sIFR 2, mentioned above

7. SIIR (Scalable Inline Image Replacement)

SIIR is another technique that replaces your original text with an image file in whatever font you choose. It includes a caching program to reduce the load on your server from all of the dynamically generated content, and it also includes some accessibility features. SIIR works with virtually any TrueType font.

SIIR

How SIIR Works

SIIR works like most other dynamic text replacement techniques that use images to replace the original text. A mixture of JavaScript and PHP code finds the individual elements that need to be replaced; it pulls text from the website to generate dynamic images in the desired font, and then inserts those images in place of the text.

Benefits of SIIR

  • Can be used to generate text with any TrueType font
  • Documentation is very thorough and easy to understand and includes explanations of modifications you can make
  • Uses the alt attribute in images to display the original text if the browser has images turned off
  • Does not require Flash
  • Doesn’t detract from SEO, because the original text is still displayed in your code

Drawbacks/Disadvantages of SIIR

  • Replaced text does not change when a user increases text size in their browser (but most browsers now use “zoom”, so this is less of a concern)
  • Can be processor-intensive, though the caching does help
  • Copying and pasting the text in Internet Explorer is not possible

8. sIFR Lite

Based on the original sIFR technique, sIFR Lite is a simpler, more user-friendly technique. The result is much more light-weight than the original and entirely object-oriented. It has been tested on Safari, Firefox, Camino, IE and Opera.

sIFR Lite

How sIFR Lite Works

Like sIFR, sIFR Lite uses a combination of Flash and JavaScript to replace the original text with a Flash file. JavaScript searches the page for elements that need to be replaced, then Flash scripts create the dynamic images, and JavaScript replaces the original text with the new Flash files.

Benefits of sIFR Lite

  • Same as sIFR 2, mentioned above
  • Much smaller file size than original sIFR (3.7 KB vs. 22 KB)
  • Will automatically detect text color in your original file, which is an improvement over the original method that requires the developer to enter the color manually

Drawbacks/Disadvantages of sIFR Lite

  • Same drawbacks as sIFR 2, mentioned above
  • Uses tag names and classes instead of CSS selectors, which does affect usability (although it does make it faster and more maintainable)

9. Dynamic Text Replacement (DTR)

This is the original Dynamic Text Replacement technique that appeared on A List Apart in June of 2004. It uses a combination of JavaScript and PHP to replace plain text on your page with a dynamically generated image. It is the precursor to all of the techniques discussed above. If it weren’t for this technique, many of the other ones may not have been developed. It should also be noted that the demo page for this method now redirects to the P+C DTR method mentioned above, so it seems that the original method is viewed as obsolete.

Dynamic Text Replacement

How DTR Works

A small PHP script generates and renders a PNG image whenever it’s requested by a JavaScript file. The JavaScript file is largely based on Peter-Paul Koch’s JavaScript Image Replacement method. Basically, once the HTML on a page has finished loading, a JavaScript file tests for image support, and if images are supported, it finds the elements that need to be replaced and sends them to the PHP script. Using it is fairly straightforward, and only a couple of lines of code need to be configured.

Benefits of DTR

  • Doesn’t require Flash
  • If the font you’re replacing supports foreign characters, this method will work, even if the page is translated (e.g. through Google or another service)

Drawbacks/Disadvantages of DTR

  • Requires images and JavaScript
  • Text selection is difficult
  • Method is obsolete, and so is not supported

10. PHP Image Replacement

PHP Image Replacement (also known as PIR) is based at least in part on the method originally outlined by A List Apart but modified to be used with jQuery for better control over the end images produced.

PHP Image Replacement

How PIR Works

PHP Image Replacement uses a modified version of the PHP script from A List Apart to dynamically create the replacement images and then uses jQuery to dynamically replace pieces of the page text with images generated by the PHP script.

Benefits of PIR

  • Claims to be the simplest script of this type currently available.
  • Takes relevant information about background, size, color, etc. from the document itself.
  • Very lightweight.
  • Maintains accessibility and degrades gracefully.

Drawbacks/Disadvantages of PIR

  • Requires JavaScript.
  • Setup requires some basic PHP and JavaScript knowledge.

11. FontJazz

FontJazz is a JavaScript typography engine that works entirely on the client-side and requires no server-side processes. It works with any typeface.

FontJazz

How FontJazz Works

FontJazz uses JavaScript to render headlines in the user’s browser, rather than as images on your site’s server.

Benefits of FontJazz

  • Compatible with a wide variety of browsers, including IE5+, Firefox 2+ and Google Chrome.
  • Uses only client-side scripting.
  • Degrades gracefully, showing the original type if FontJazz isn’t supported.
  • Works with any typeface.
  • SEO friendly.

Drawbacks/Disadvantages of FontJazz

  • Requires JavaScript.
  • Doesn’t support kerning.

12. WordPress Plug-Ins For Dynamic Text Replacement

A few WordPress plug-ins are available for some of the dynamic text replacement methods mentioned above, as well as two that are unique to WordPress. The biggest advantage of plug-ins is that less coding is usually required, and you’re less likely to run into bugs from conflicting scripts.

Facelift Image Replacement (FLIR) for WordPress

WP FLIR

FLIR for WordPress is still in development but is close to being completed. It works just like the FLIR method mentioned above. The main bug currently present is that automatic updates don’t always work. Almost all of the configuration for FLIR can be done from the admin panel, though you’ll still need to do some things manually (such as upload and configure fonts).

WP sIFR

WP sIFR

WP sIFR works like sIFR 2.0. The only configuration you have to do is upload your SWF font file to the plug-in directory and activate the plug-in. All of the other configuration is done from within the WordPress admin panel.

WP-Cufon

WP-Cufon

WP-Cufon lets you easily use Cufón on your WordPress website and it includes good documentation and regular updates. It also works just like Cufón, so you’ll still need to convert your fonts beforehand. Configuration is done directly in the admin panel in WordPress.

AnyFont

AnyFont

AnyFont uses custom fonts (TrueType or OpenType) to replace text in post titles, menu items, and pretty much anything else in your WordPress theme. It has a font manager that you use to easily upload new fonts from within WordPress; it has built-in style management; you can add shadows to your text; it includes cache management; and it uses SEO-compatible image replacements.

Font Burner Control Panel

Font Burner Control Panel

The Font Burner Control Panel is a different technique for adding fonts to your website. Basically, it allows you to use any of the more than 1000 fonts available on Font Burner on your WordPress blog. All you have to do is upload the plug-in to your plug-ins folder, activate it and then configure it through the admin panel.

13. Font Embedding Options

Embedding fonts is another option if you don’t want to use an image replacement technique. While you can upload fonts to your own server and use @font-face that way, it uses a lot more bandwidth and there can be intellectual property issues to deal with. The services below offer a great alternative by hosting fonts for you and serving them remotely. The advantage is, obviously, that you can have a rich embedding of commercial fonts in your designs; the drawback is that these services usually require membership and a monthly fee.

Typotheque

typotheque

Typotheque is a service that lets you use the @font-face rule in CSS. It works with fonts within the Typotheque collection, which currently consists of more than 25 typefaces. They have a free trial license available, as well as a variety of paid options.

Kernest

Kernest

Kernest.com is another web service that takes advantage of the @font-face attribute in your CSS and serves fonts for you, saving bandwidth. They serve both free and commercial fonts. Pricing is based on the font(s) you choose.

Typekit

Typekit

Together with various typographic foundries, Typekit.com has developed a web-only font linking license that allows for rich font embedding in web design and also protects interests of type designers. Typekit uses jQuery and a subscription service to allow designers to embed non-standard, non-system-specific fonts into HTML-pages.

As other services, it uses the @font-face CSS property. The configuration takes place via the Typekit’s plattform; to use the fonts, designers just need to insert two JavaScript-snippets into their pages. The service offers a platform that hosts both free and commercial fonts and has various plans ranging from $24.99 per month to $49.99 per month. The service is in closed beta (October 2009). Developed by Jeffrey Veen.

FontDeck

Fontdeck

Fontdeck is an upcoming font embedding solution from Clearleft and OmniTi. As other services, FontDeck is a font-face delivery system that will work keep both font designers and web designers happy. Developed by Richard Rutter and Jon Tan. Not available yet.

Dynamic Text Replacement Methods Compared

Here’s a handy table that shows the features of each technique mentioned above:

Method Technology Used Font Types Supported Images?
sIFR 2.0 Flash, JavaScript Not specified No, Flash
P+C DTR PHP, CSS Not specified Yes
Cufon JavaScript Must be converted: TTF, OTF, PFB, PostScript Yes
Typeface.js JavaScript Must be converted: TrueType, OpenType Yes
FLIR JavaScript, PHP Not specified Yes
sIFR 3 Flash, JavaScript Not specified No, Flash
SIIR JavaScript, PHP TrueType Yes
sIFR Lite Flash, JavaScript Not specified No, Flash
DTR JavaScript, PHP OpenType, TrueType Yes
PHP Image Replacement JavaScript, PHP, jQuery Any Yes
FontJazz JavaScript Any Yes (background)
AnyFont WordPress-Only TrueType, OpenType Yes
Font Burner Control Panel WordPress-Only Font Burner Fonts Only Yes
Typotheque @font-face Typotheque Fonts Only No
Kernest.com @font-face Kernest.com Fonts Only No
Typekit @font-face Typekit Fonts Only No

Further Resources:

About the Author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

(al) (ll) (vf)


© Cameron Chapman for Smashing Magazine, 2009. |
Permalink |
55 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: , ,