As the first thing visitors see, home pages and headers often steal the design spotlight.

But above-the-fold thinking neglects the natural flow of vertical page layout. What happens when people reach the end of a page?

You can bet that a simple copyright statement won’t hold visitors’ attention, but many pages are designed with the expectation that people will find their way… or so we assume.

The bottom of a page is not the end of a website. An informative, compelling footer is the natural place to lead people to more information within the site rather than wandering aimlessly.

Read more about the trends and innovations that follow page content and answer the unspoken question, where to from here?

The ongoing problem of how to hold people’s attention can be addressed in many ways: eye-popping graphics, clever use of negative space, snappy typography and well-written text.

But all too often people are left hanging when they scroll to the bottom of the page. Should they scroll back up? Visit another website? Close the tab?

Where the body content ends, the footer takes over.

The footer is a distinct collection of content that concludes every page of a website. Typically, it contains a copyright statement, a link to the home page and either an email link or a link to the contact page.

Footers almost always span the width of the page. Beyond this, they exhibit a variety of styles.

Even though it doesn’t offer many links, Dishizzle makes it hard to miss the large icons at the bottom of its website. With its search box and friendly type, this footer is both legible and useful.

Compare it to the footer on 43 Folders, which takes the opposite approach. A handful of concise sentences explains the website’s purpose, describes its owner and links to its web host. After a thorough copyright statement, the page ends.

Sometimes footers merely repeat the navigation bar. It’s a natural fit: once the reader has read or skimmed the page, they come upon a list of interesting links to other pages, rather than be left to wander.

But those links are often just that: bits of clickable text arranged in a thin, underdeveloped strip. While this may work for websites that have little content, a serious website isn’t complete without a well-planned footer.

A footer is not just an appendage. It’s a good host.

Unsung Stewards

The bottom may seem an unlikely place to put vital information, but footers are ideal real estate for navigation and important features because visitors naturally move in that direction as they scroll down.

Like a good host, an elaborate footer presents different kinds of information that reflect the nature, and content, of the website.

A footer can play many roles on a website. The trick is deciding where guests should go when they’re done with a page. A good host lets their guests enjoy themselves and steps in only when the guests begin to wonder “What’s next?”

Footers as Site Maps

While the header presents links to major sections of the website, the footer can delve into details. Site map-based footers, which are ideal for websites that store content in many sections and sub-sections, reflect the scale and concerns of a website.

The White House is a good example. Its footer presents the website as six sections, each with as few as 6 and as many as 23 links.

Deliberately simple, the keyword links can be absorbed at a glance by guests scanning for topics of interest. Almost as tall as it is wide, the footer is hard to miss, but its content doesn’t compete with the page above.

Footers as Advertisements

Especially if the website sells something—a product, service or membership—the footer is a second chance to incite visitors to act. The end of the page is a great place to remind guests of the benefits of the product or service being offered. Repeating this same message on every page drives the point home.

Mail Chimp takes advantage of this space to repeat its sales pitch: 1) free templates, 2) a comparison of its service to that of competitors and 3) flexible pricing.

Expression Engine lists some of these things, too, and also links to the help section and other information that prospective customers would want.

Unlike plain site maps, footers that advertise must be more persuasive than informative. They should give guests incentives to buy and lead to pages that enable them to act.

Footers as Character Studies

While a personal website would address topics that interest its owner, the footer could describe the person behind it. Whose website is this? What is he or she like? What else do they do?

Few websites do this better than the one of graphic designer Jason Santa Maria, whose footer could be a page unto itself.

Meanwhile, the footer of standards expert Jeffery Zeldman’s contains visual—and even photographic—snippets of projects he is involved with or interested in.

Footer as Colophon

A footer can contain information about how or why the website was built. It could:

• Reiterate the website’s mission or tagline.
• Say which CMS or ISP is being used.
• Declare that the page has valid (X)HTML and CSS and complies with certain accessibility standards.

Variation Based on Context

The footer should generally stay consistent throughout the website. Page-specific information usually isn’t warranted. But complicated websites can bend the rules.

The playful icons on IBM’s website provide a friendlier, less corporate way to navigate pages. But these icons appear only in the “Smarter Planet” section.

IBM’s regular footer looks like this:

Likewise, the links in Apple’s site map-based footer varies according to the section it appears in.

Above, the footer in the Mac section. Below, the one for iPods.

None of these roles are exclusive. Elaborate footers can incorporate site maps, highlights, updates, credentials, search tools and more. Below, BustedTees offers ways to stay current, browse and submit feedback.

Functional doesn’t always translate into compelling, though. CNN’s footer includes a search tool, local weather, a site map, legalese and links to its content in other languages. Useful, but dry. The most interesting visual element is the red strip.

Although it fits the tone of the website, CNN’s footer is merely designed not to compete with the page above.

How to Craft a Useful Footer

Generally, a web page invites people to act or to learn. After reading a news article or blog post, people walk away with a new idea or set of facts. Product pages educate visitors on the items being sold. Pages with weather information affect how people dress. In each case, a person has changed somehow by the time they reach the bottom of the page. And there they find the footer.

So, the end of the page is a natural place to put two things: tools by which visitors can act on what they have just learned; and calls to action.

Footers have a tough job. People ignore them out of habit; they instinctively scroll to the top or click away. That’s why good footers must be designed not as afterthoughts but as if they were pages themselves.

Creating a useful footer begins with asking certain questions:

• What content on my website do I want to emphasize?
  A good footer guides guests to those pages.
• What else would interest visitors?
  A good footer attracts guests with information they would like. Visitors who scroll all the way to the bottom were likely engaged by the page’s content. Links to related information will keep them on the website.
• What content would benefit visitors the most?
  Like a good host, its job is to be helpful. The footer rewards guests for reaching the end of the page with, if possible, freebies or entertainment or, better yet, frequently requested information. If the website is for a bricks-and-mortar business, the footer could contain a simple map to the location.
• What would epitomize the website’s character and style?
  Like a good conclusion, the footer sums up the nature of the website: its topic, attitude and theme. In this way, the footer is similar to the header, which introduces the website to newcomers.

T-shirt seller Threadless answers many questions in its keyword-rich footer:

Once you’ve decided what to put in your footer, don’t neglect presentation.

• Make it big.
  A token footer is thin, just tall enough to admit one line of text. An attention-grabbing footer is substantial. A rule of thumb is to make the footer’s height at least a quarter of its width. For example, if the page is 960 pixels wide, then the footer should be at least 240 pixels tall.
• Set it apart.
  Give the footer a distinct boundary, and make sure it spans the width of the page. Guests should see where the body ends and the footer begins.
• Give it style.
  A footer should carry the theme of the website, in style, color scheme and typography. If possible, it should reuse visual elements from elsewhere on the website. But it shouldn’t detract from the page’s content.
• Make it worthwhile.
  The ideal footer is strong enough to warrant the visitor’s attention. It offers interesting content to peruse in an attractive package—like any important page.

The Guardian isn’t afraid to play up its footer. Eye-catching graphics laid between brand-matching color bars tell visitors that this is content, not just fine print.

Silverback has few features in its footer but plenty of style. It offers an easy-to-read experience that restates the website’s purpose and encourages visitors to receive updates via its newsletter.

While Travelocity packs 72 links into its footer, a lack of visual hierarchy or clear layout makes it hard to take seriously. More doesn’t always mean better.

All of these criteria may sound like a tall order, but there are two easy approaches to creating a good footer.

Approach #1: Create a Miniature Home Page

The easiest way to create a helpful footer is to recap the website’s purpose and highlights. Look at your home page for inspiration.

Typically, the home page is a cross between a table of contents and a news ticker, giving guests an overview of the website and the latest information.

A footer need not include every element from the home page. If the home page showcases 10 best-selling products and the 3 most recent blog posts, then the footer could highlight the top 5 products and 1 post, with links to more of each. A smaller version of the website’s logo would also be appropriate.

Think of the footer as a table of contents that conveniently appears when visitors need it most: when they’re wondering what’s next.

MacTalk Australia has a relatively small header, which leaves more room for content and advertising above the fold. Nearly twice as tall as the header, the content-rich footer expands on the simple header’s navigation and introduction by spelling out how much content each category has and which tags are most popular. Both the header and footer have RSS and Twitter icons, and the footer includes a newsletter sign-up form—plus two other RSS and Twitter links just below the copyright statement.

The New York Times footer includes the latest headlines and photos from various sections.

Approach #2: Provide Supplementary Content

Footers can do the opposite of serving as a miniature home page by offering content not found anywhere else on the website.

Bits of supplementary content that can’t fill pages on their own can find a home in the footer. Unlike the miniature home page, a supplementary footer can contain links to other websites, as long as they’re informative or beneficial to the guest.

But don’t treat the footer as a dumping ground for stuff that doesn’t fit anywhere else. Like any proper page, a footer should inform, persuade, entertain or do all three. The key is to find worthwhile information that supports the website’s overall theme, not any one particular page.

Komodo Media’s footer includes eye-catching links to what the owner is listening to on Last.fm.

Some websites, such as Veer, point to their family of websites. Corporations can promote their brands simply by cross-linking them to each other.

Other Approaches

If your website has a substantial sidebar, try rearranging it as a footer. Although this will change the website’s layout drastically, moving secondary information to the bottom of the page might remove distractions from the primary information.

On Your Way

The golden rule of footers is never leave guests to their own devices.

Footers are hosts who present their guests with options. They are natural stepping stones across the website, enticing guests to click to other pages—or related websites.

You can learn a lot about a website’s priorities from the contents of the footer. What’s in your footer right now? You do have one, right? Because a website without a footer is worse than an article without an

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: k4lS7u

Whether you’re a web developer whose clients need a great look and feel for their blogs, or just someone eager to bring a fresh new look to your own web site, there are literally hundreds if not thousands of free WordPress themes out there to consider. A number of those themes have been built by professional designers and talented amateurs, and are as easy on the eyes as they are easy on the wallet.

Whether you need a great photoblog layout, personal lifestream, or more business-oriented design, there’s almost surely an existing theme out there worth checking out for your next blog or blog upgrade. And if you’re already a developer or are willing to acquire a small set of template editing skills, you can always modify an existing theme to taste.

Have a look at some of our picks for great themes to either drop in as is or use as a starting point for your own tweaking and twiddling. Keep in mind this is only the tip of the iceberg — be sure to let us know about your other favorite themes in the comments!

1. Irresistible

2. Demet

3. P2

4. WPESP Portfolio

5. DarkHive

6. Google Chrome

7. Gallery

8. Selecta

9. BlackPower

10. Scarlett

11. Freemium

12. iBusiness

13. Meganews

14. Snapshot

Series supported by Rackspace

Rackspace is the better way to do hosting. No more worrying about web hosting uptime. No more spending your time, energy and resources trying to stay on top of things like patching, updating, monitoring, backing up data and the like. Learn why.

More WordPress Resources from Mashable:

-10 WordPress Plugins to Help Build Community
- HOW TO: Build a More Beautiful Blog
- Top 10 WordPress Plugins to Promote Your Social Media Profiles
- Top 10 Tips for WordPress Plugin Developers
- Embeddable Waves: The Google Wave WordPress Plugin

Reviews: Google Chrome, Twitter, WordPress

Tags: blogging, BLOGS, design, free, Lists, Web Development, web development series, WordPress, wordpress themes

One of the great things about working with WordPress and developing your own themes is the community and all of the resources that are available. If you’re not sure how to do something or looking to see what solutions other theme designers and developers are using, you can find plenty of infomation and tutorials to help.

unique-transportation

greentent

felicetre

twigkit

thepeachdesign

sebastianlaube

taptapas

cajanavarra

msn (Latest version)

dougneiner

greaterthings.lhc

droidweek

alby

synchmedia

semseocompany

bandthemer

karijobe

sebastiankrull

pressboxstl

tiendalasirena

puma

bythepond

marciweiche

dogonomachiya

worldinmylens

jovenescontralaviolencia

hipseat

headred

holtedesign

incrediblend

en.casino-lemonade

inizziativa

championsound

cssdharma

webtek

mobilemysite

cmyk08

cadwebsitedesign

annabelwilliams

batcetera

newstreamdesign

wewanttraffic

ableyachtins

space.carrotmedialtd

024zone

nudefoodmovers

uandersena

luiztiago

somoslaperalimonera

franfernandez

pepperkoffee

how-to-web

eldoradopalace

attilaacs

maurivan

trippingwords

Design

• 5 ways to avoid the most common mistakes in web design
• Create a Funky Perspective of a Model Riding Digital Volume
• Latest High-Quality Free Fonts for Your Designs
• 6 Ways To Take Your Webdesign From Good To Great
• Grunge In Web Design: Samples And Best Practices
• CNN’s New Website Design Deconstructed
• Breadcrumb Navigation Examined: Best Practices & Examples
• Trend Spotting: The Beauty of Using Two Colors, Black and White in Graphic Design

Development

• The future of interface design
• Simple CSS Tips that Go a Long Way
• Website Maintenance Tips for Front-End Developers
• 40 New Useful Web Development Tools and Resources
• Essential CSS/HTML Lists Styling Techniques
• Minimal and Modern Layout: PSD to XHTML/CSS Conversion
• 10 Free Server & Network Monitoring Tools that Kick Ass

Blogging

• Blogging: Secure Your Spot as the “Go-To” Blog
• How to Write a Blog Post That’s Stickier than Velcro
• What I Do When I Read a Good Blog Post
• Great Online Hangouts for Bloggers
• Selling ad space: tips from top design blog owners
• The 5 Essential Pillars of a Social Media Campaign
• THE Blogger’s Guide to Facebook
• Introducing the Obox Micro Blogging Theme Collection

Freelance

• Bling Freelancers: Get Rich or Freelance Trying
• How to Get Your Ideas Across to Clients
• Getting Clients to Embrace Fresh Ideas
• Invoice Like A Pro: Examples and Best Practices
• 7 Handy iPhone Apps For Your Work
• Freelance Guide to Building Customer Loyalty
• Calling All Freelancers On Twitter
• Five Ways To Find Revenue Sharing Opportunities

For this Sites of the Week we have selected some great sites such as the new Authentic Jobs and Wildfireapp. Also we’re featuring a great portfolio site for 31three, and much, much more! As usual we would love to hear from you, keep sending your suggestions to us and we will be more than happy to feature your site.

<!–break–>

You can send me your suggestions via Twitter twitter.com/FabianoMe or twitter.com/abduzeedo, and include #abdz_sites in the message.

DESIGN / CSS

Fontanel – fontanel.nl

Fontanelle is an online magazine that focuses on the latest developments in the design world with a focus on the young, talented and upcoming generation. (via Google Translate)

Authentic Jobs – authenticjobs.com

Authentic Jobs is a targeted destination for web & creative professionals, and the companies seeking to hire them.

APP / WEB APP

PagerDuty – pagerduty.com

Tired of being the last to know when your systems are down? PagerDuty aggregates alerts from any monitoring tool that sends email and calls you if there’s a problem.

Wildfireapp – wildfireapp.com

We’re dedicated to developing simple tools that help you promote your organization on the social web. Headquartered in Palo Alto, California, Wildfire Interactive, Inc. is a privately-held technology company specialized in developing simple tools that enable organizations to engage the hundreds of millions of users of social network sites such as Facebook and MySpace.

COMMUNITY / STORE

2high Festival – 2highfestival.com

Backbone Youth Arts presents 2high Festival. For two days Brisbane Powerhouse plays host to 2high Festival which brings young and emerging artists with interactive displays of art, live music, performance, and everything in between.

New Horizon Youth Centre – nhyouthcentre.org.uk

New Horizon Youth Centre aims to enable young people to gain skills and knowledge to improve their life chances and to help them move from adolescence into adulthood.

FLASH SITE

EKSRTD – eksrtd.com

EKSRTD – Home of a fashion & art inspired design collective.

Gladeye – gladeye.co.nz

Gladeye is a digital creative agency. We produce original interactive work for websites, games, interactive stories, and online advertising campaigns. We also develop online business strategy and web applications that people like to use.

BLOG / PORTFOLIO

31three – 31three.com

As a developer, you’re an extremely creative individual. Getting your websites to behave in Internet Explorer is proof enough… you are creative. Even so, you may not have the time or know-how needed to get the design of your site looking as clean as your code.

Kean Richmond – keanrichmond.com

I’m Kean Richmond, a web designer and developer, based in North Yorkshire, UK. I love what I do and getting to not only design but build the websites I create is incredibly satisfying. It also has many benefits such as giving me an understanding of the overall processes involved in creating a website.

TEMPLATES

Headlines – woothemes.com

Headlines continues where our old magazine themes left off. It has tons of requested features like featured area, social bookmarks, author highlighting, flexible layout to name a few. It’s the perfect platform to launch your magazine or blog and reach out to the world!

Clickcloud – themeforest.net

Clickloud is a web 2.0 business software template. It’s mainly directed towards the companies that either produce or administrate web 2.0 software content (cloud software companies) but it may be used for a variety of other things: company portfolio, personal blog theme etc.

About the author

I’m from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.

Sponsored Links:

This post pick up on the previous two parts of a very detailed tutorial for “Creating a Clean and Elegant Blog Design with Photoshop, Part 1 + 2“. This is part3 and it will be covering last steps required to finish the design by adding the Side Bar and Footer Sections. We pick up just where part 2 ended and the result of part 3 and final Blog Design will be looking like this:

Download full size here.

This tutorial now consists of:

• Part 1 – covering the Theme Header Section
• Part 2 – covering the Blog Front Page Post Section
• Part 3 – covering the Side Bar and the Footer Sections

Download the source file

Make sure you get a copy of the PDS source file before you start working on the tutorial. License: Creative Commons License.

• design – par1.psd
• design – par2.psd (2.4MB)
• design – par3.psd (2.9MB)
• palette.psd

Lets get started…

Step 16: First thing you need to do is to load up the PSD you created in part 2 or get the one available for download above. We need more space in the bottom for the Footer Section and will start with adding this. Use Canvas Size tool in the Image menu to add 160px like this. Make sure the Anchor is selected as shown to add space at the bottom.

Then locate content layer in Group “PART 1 – content background” and select the filled area. Use Transform Tool [Ctrl]+T to do this or simply select everything with [Ctrl]+A and fill the entire area with the color #797979. Then add a guide at 1250px from the top and use Transform Tool to make white fill in layers “Sidebar back” and  “Content list back” in group “BACKGROUND CONTENT AREAS” end at this new guide like this.

Step 17: Add a guide at 1270px from the top where the Footer Section will start. Add a Group called PART 3 above PART 2. In PART 3 add first a Group called FOOTER CONTENT and one called SIDEBAR CONTENT. In FOOTER CONTENT add a layer and call it “footer-background”. Select the area from the bottom up to the guide just added and fill it with white. Then add drop shadow using the Layer style window with setting used earlier.One thing that can make using Photoshop faster and more flexible is Styles and if you create new styles when you know the current settings will be reused it will be even better. The drop shadow have been used several times and could be a candidate for this – so lets try it.

You can always go back and save a set of styles you created earlier if you want to reuse them. We are going to do just that. Find the layer called header created in Part 1. We want to create a new style for the gradient used earlier and apply it to the Footer.Call the style header-footer-gradient. After saving the new style you can apply it to footer-background layer by opening the Layer style window, clicking on Styles and clicking on the style you just created.

Step 18: In this step you will add a bit of decoration to the Footer. Make a copy of the LOGO Group from Part 1 and move it to Group FOOTER CONTENT. Then drag it to the right location in the footer and scale it down in size using the Transform Tool. Then add copyright text and if you like a backlink to WordPress and your favorite hosting provider.

You should now have this partial result.

Step 19: Different bloggers tend to like different widgets in the sidebar. You may put whatever you like in it of cause and because it is such a flexible area of a blog I will just add a few examples of what could fit well. Just using screenshots of the well know google custom search and the Advertise Here signs I have material for the top part of the sidebar.

Since we have no categories in the top menu it would make sense to have a widget listing Blog Content Categories. What you do to create the layout shown below is simply creating layers for the white and grey boxes. Fill them with the color you want and apply a layer style 1px stroke. Colors used here are:  Stroke: #bebebe, background #eeeeee. The boxes should be 50px and 25px in height. The space on both sides of the boxes is 20px. Add one px space between the boxes.

Use the same steps to create a popular posts widget like this. The small images are 40×40px.

Step 20: To make the design consistent I decided to use the same box type to separate the articles created in Part 2. It looks like this. I had to move the articles a bit to make it fit but it was easy because moving elements in a group can be done by selecting the group.

This is the last step in this  Photoshop Blog Design Tutorial. I plan to continue this tutorial and implement the design as a WordPress Theme later on so stay tuned.

The Final Result

Download full size here.

Post tags: Design, Photoshop, Photoshop Tutorials, Templates, Themes, Tutorials

Textures have become more popular and been put to greater use in recent years. They’re not limited to Web design either; textures of all kinds are used in print design, illustration, traditional art, TV commercials… you name it! Texture is one of the best ways to add depth to your design, whether it’s subtle noise on a clean vector illustration or a lot of grunginess throughout a layout.

Over the last weeks we collected numerous examples of beautiful textured Web designs to inspire you, followed by a small collection of links to help you get started in using textures in your own designs.

If you like this post, you may be interested in reading some of our other texture-related articles:

• 100 Beautiful Free Textures
• Textures and Patterns Design Showcase
• Textures in Modern Web Design

Textured Web Designs

Loukotka

FT Designer

Cole & Weber

Jason Julien

Trinity Irish Pub

The Klog

Alex Coleman

Bergedorf

Big Cartel

Stuck in Customs

Bill C. English

Boerne Wild West Day

Brown Blog Films

Chouteaus Landing

Ctrl+N Diseño Gráfico

Cubeclub Chemnitz

Danny Diablo

Demain Jarrete

DH Cards

Dibtych

Douglas Menezes

Eliseos

Fudge

5 Pieces

Glocal Ventures

Handcrafted CSS

Inner Metro Green

Introzo

53 Mondays

Island Photobooth

Mutant Labs

Legwork Studio

Le Web Défi

Lilly Stable

Love Freelancing

Mark Forrester

Markup & Style

Martin Anderle

Matt Salik

Merge Web

Meson Projekt Blog

Morphix

Mother Earth Brewing

New to York

Orange Label

Pampaneo

Piz’za-za

River City Church

Roar 4 Milk

Saddleback Leather

Stack Overflow

Story Pixel

Sushi and Robots

Texture Lovers

Tony Chester

Yodaa

What Is Blik

Yellow Bird Project

Thunder Fuel

THS

Texture Downloads

• Texture Lovers
• Lost and Taken
• Zen Textures
• Love Textures
• WebTreats ETC
• Circlebox Textures
• Texture Vault
• Textur.es
  A community-driven growing gallery of freely available textures.

Texture Tutorials

• Create a Cartoon Grunge Website Layout
• Create a Green Grunge Web Layout
• How to Create a Textured Grungy 3D Type Design
• Texture with Layer Modes
• Design a Stylish Retro Game Boy Poster
• Add Visual Texture in 3 Easy Steps
• Create a Texture Based Poster

(al)

© Callum Chapman for Smashing Magazine, 2009. | Permalink | 51 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: showcases, textures

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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 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 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 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

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 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.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

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 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:

Further Resources:

• Simplified Dynamic Text Replacement
  This article from CSS Tinderbox discusses Cufon and how to use it effectively.
• Dynamic Image Replacement: Practical Techniques and Tools
  This article from HongKiat offers an overview of multiple methods of dynamically replacing text on your website.
• Dynamic Text Replacement
  This article from .net magazine covers usage of sIFR.
• Roundup of Font Embedding and Replacement Techniques
  An excellent roundup with information on a variety of techniques and scripts.

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 |
73 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: Fonts, sIFR, text replacement

Showcase of Web Design in Russia (via @smashingmag) -

This article is the first 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 start today with an article about web design in Russia. We will continue with Ireland (Lee Munroe) and Brazil (Fabio Sasso) upcoming weeks. Hence, you may want to subscribe to our RSS feed for more similar posts.

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

Web Design in Russia

The land mass that is one-sixth of the Earth is always surprising. As the founder of one of design-related magazines in Russia (Designcollector.net), I am happy to present the hidden force that is Russia. I won’t dwell on the classic stereotypes but will rather look at the creativity flowing through.

The era of professional and commercial online design started in Russia about a decade ago. We’re now seeing an increase in professional design and development. I won’t concentrate much on the history of Web design in Russia; that has been happening for ages. Like everywhere in the world, Web design came to Russia as a modern way to present any kind of information to an audience online. So, principles such as simplicity, accessibility and eye-catching design have been cultivated for several years.

Russian Web Design: Mospromstroy

Web development as a profession was relegated to the elite for years until geek heads and artists took it over. For a few years there was a boom of home pages and tiny corporate websites that were built with any regard for the end user. This trend ended thankfully, in large part due to the highly scaled websites that came out the original and still unique studio founded by Artemy Lebedev, which has produced more than 760 websites.

Today, the professional scene of web design consists of thousands of freelancers, studios, agencies and large media companies, along with offshore and outsourcing businesses. I won’t do a “Top 20″ this or that rating, but I will try to touch on the most established parts of Russian Web design, including agencies, freelancers, portals and so on.

State Of Things

Measuring a Web design market by the products of its agencies is not quite fair. Russian agencies have also proven their management technologies and quality-control processes. As someone once said, “The best way to understand a new city is to go to the central market.” And in Russia, Web design is still concentrated in the hands of freelancers and small studios. To get a better picture of freelancing in Russia and the bordering Ukraine, I have asked two freelancers to talk about their work.

I spoke with Gennady V. Osypenko, who is the rather famous Kiev-based designer working with companies from Eastern Europe (he is also known as Genn), and Dmitry Sulliwan, a Russian freelance Web designer.

Alexarts

Q: Could you please describe the life of a freelancer, developer and designer?

Gennady Osypenko: You do work, get inspiration and then do more work: that is freelancing. For sure, you meet clients and collaborate a lot. Compared with an office job, you travel around the city a lot, wasting your time on that. Freelance designers become the center of the project, and even oversees developers, acting as a kind of art director. Designers in offices just do the routine, yelling at account managers and listening to art directors. Hence, I am a freelancer, and I do not remain at one job for long.

Dmitry Sulliwan: The work of freelancer is very interesting. You get new experiences from working with different companies on diverse projects, and some of those experiences may not even be related to design. Different cultural and professional events make the life of the freelancer easier and allow him to share his experience and understand the value of his job. A freelancer’s life is good because he manages himself, which allows you to get more pleasure from your work. But that does not mean you work any less. From my perspective, freelancers work one-and-a-half times more than permanent contractors. The only barrier to getting the best results is laziness. Hence, there are not a whole lot of true professionals in the freelancing space.

Profsouz.tv

Q: Are there any regular meetings or events?

Genn: We hold festivals and different advertisement exhibitions. The only exhibition I have visited abroad was the designers market in Budapest (Sziget). Web-oriented conferences were very popular last year. Not all of them were about design, but some were useful and interesting anyway. I’ve done things like short master classes at some of them, and I plan to do that in future; I’ve been invited at the end of October to say something about being a freelance designer. I like talking about what I do to people who are eager to listen.

Dmitry: There is a good set of conferences in Russia. I can name the last ones: DesignAct in Moscow, and the 404 Web Designers Conference in Samara. Many Russians also visit foreign events in Europe and around the world.

Erarta.com

Q: Where do you get inspiration from?

Genn: I get inspiration from everything around me. That is a typical answer, but any object could lead my imagination to the unique and perfect idea. It is like in the House M.D. series on TV, when House is stuck on a diagnosis and suddenly gets inspiration to solve it. I got inspiration for my last project from the Wipeout Pulse game on PSP. I played it for hours and eventually got an idea for a website architecture.

Dmitry: Design books, magazines and Internet resources. Nowadays, we have a nice bunch of local design blogs on which they share their experiences and thoughts.

Solisty Moskvy

Q: What’s the situation with the market? How much do designers earn?

Genn: I don’t know the situation in the market, but I know for sure that a lot of people want to make a website or establish an online identity. As a freelance designer or creative process supervisor, I prefer more interesting and specific projects, ones that don’t reflect the whole market situation.

Dmitry: True designers, like any other good specialists, cost a good amount of money. The question is whether there are enough positions. There are many agencies and studios, and so fewer of them would be able to provide a good experience or take on interesting projects.

Stilyagi

Q: Is being a Web designer considered high-level, sophisticated work?

Genn: When you see an ad on every (literally every) open surface saying, “Site for $100,” how could you regard Web designers or anyone connected with website creation to be high level or sophisticated? Luckily for us, customers who really need complex, functional websites understand that they have to work with professionals. Just because you can illustrate something does not mean you are a Web designer. If you can organize the craziest information in a usable and readable way, and then decorate it, then you are a Web designer. So, we could say that being a Web designer is both high level and not high level at the same time. Actually a lot of Web designers also create perfect identities and motions, so I’d better call them designers, even though we create beautiful websites.

Dmitry: Unfortunately, not always. Mostly because people still confuse Web designers with system administrators [Interviewer note: That's true, because most Russian Web designers can do Shell and Apache tasks, hosting stuff and email management and develop a reputation for mixing them together. When a Russian customer orders a website, they want it 100% with domains, parking, hosting, support. This is the main issue with the profession.] But in most IT and related companies, the position of Web designer (and developer, UI designer and visual designer) is valued and respected because of the high-level skills and usually complex work involved. These days, the Web design profession has cut out its own place in the market and is recognized for it.

Nel’ma

Q: There are rumours that many designers in Russia still use tables, and that most designs are 100% fluid, regardless of screen resolution?

Genn: Are you referring to HTML coders and Web developers? As far as I know, the trend is to use semantic code and follow accessibility and other compliance standards. One Ukrainian HTML coder even coded his own blog in HTML 5 and met all standards requirements, even if only for a few browsers. So they’re all progressive and forward-looking. As for 100% fluid width, there was an assumption that all websites had to be 100% wide and fill the whole browser window. As I explain in my training and master classes, the width of websites should fit the requirements. As I can tell, incorrect use of fluid widths is declining and used in only specific instances.

Dmitry: Those are only rumors. Professional Web developers follow standards and adopt the latest trends in coding. Fluid width is a distinction of Russian Web development and a common standard. Good fluid layouts are usable, dynamic and look good at different resolutions. And good Web developers can avoid common issues, such as those related to floating and typography, by using fluid width.

Imja Rossii

Q: What about typography and Web standards?

Genn: It’s a common joke that all designers hate Cyrillic letters. The letters really look odd if you want to create something fancy, but we adapt to it. I like the story of one logo made in the US for some candy trademark. The designer decided to add a feature to the logo and name, so he made ö out of o. Years later, he found out that Scandinavian designers hate umlauts, but he used them as decoration and it worked well. We have to abstract and not see hieroglyphs in letters but rather understand their nature and use them in the best way.

Dmitry: Cyrillic type has far-reaching issues. The main illusion is that Cyrillic type is not better than Latin. That issue is outdated. We have great Russian typography designers who do amazing type that fits certain designs well and win awards. Nowadays, even Web editorials order custom typography for their titles. Typography on the Web has become user-friendly and readable.

vtransport.ru

Q: Are there any issues unique to Russian Web design?

Genn: Yeah, there might be some difference between design in Ukraine and in Russia. As long as designers are not regarded as high-level specialists in the community, then customers will continue to believe that they are perfect designers, too. So, they will always want to move this a bit, repaint that a touch, and change the whole layout five minutes before the deadline. With any project, I try to be as specific as possible in explaining almost every pixel (or dot, if we are talking about print) so that the customer can see why the product is the way it is. It’s surprising, but it works more than half the time. The other problem is that no one wants to part with their money, so you could end up waiting some time before getting money for a project that is done, implemented and working.

Dmitry: Russian customers still do not understand that designers do not blindly follow their ideas but are rather themselves highly motivated workers who want to produce the best results for the given job. Whoever the customer, whether foreign or local, every time it is a minor war. Designer-client relations are not stable in Russia and are not even regulated. We have no professional unions and, of course, no support from the government. Newcomers to freelancing are often not aware that some customers are unfair, but they find out when they do not get paid.

Zemlja

Q: Do you see any remarkable differences between Russian designs and ones in the US and Western Europe?

Genn: I am happy that distinguishing between designs in Russia and those on the worldwide scene is becoming harder and harder. The designs here are unique in their own way, but then the work of every good designer is unique.

Dmitry: As mentioned, the main difference is fluid layouts. Good Russian websites have a clear and semantic structure, and they don’t follow strict grids, which make the layouts dynamic and fresh. They use modern Web technologies, combining unobtrusive JavaScript with clean xHTML.

Russian UK Style

Q: How does all of this work?

Genn: I don’t know. I didn’t like physics in university much. When I ask myself that question, I start reading British science fiction. It doesn’t answer the question, but it has a lot of funny jokes.

Dmitry: Briefly, the situation is good. Russian Web designers are always looking forward and no longer do clumsy, heavy Flash-based websites. We have started to concentrate on usability and accessibility and become more integrated with the rest of the professional world.

DC: Russian Web designers are even starting to organize professional unions (like WSG Russia) and visit local conferences, such as 404, RIT, Drupal Camp and many others.

Showcase Of Creative Agencies

Let’s turn now from the freelancing life in Russia to the FMCG and promotional sectors, where Russian creative agencies live. They do their best to impress consumers with their products and corporate websites. The results are meant to impress visitors and make them spread the news like a virus. Here are some agencies that have gained public attention as well as prestigious awards, such as the FWA, ADCR and even the Cyber Lions shortlist.

Design Depot

OrangeLabel

Ony.ru

Deluxe Interactive

FIRMA

BrandStudio

Red Keds

Nile Studio

Coalla Revolving

Instinct

ONY!

Transformer Studio

Showcase Of Web Agencies

These guys create great websites and form the foundation of the Russian Web design scene. They’re not necessarily the best; they just do their work better than most.

As mentioned, ArtLebedev Studio is still the largest studio in the Russian market, based on portfolio size. To date, it has done more than 760 websites, 725 graphic designs, 113 product designs, 44 interfaces, 32 environmental designs and 30 presentations. This record is still unbeaten, and its brand is something of a guarantee on the Russian Web design scene. Also worthy of mention is its Bronze Cannes Cyber Lion award (the only studio in Russia to win it), and its internship program, which helps international students realize their ideas.

ArtLebedev Studio’s work

The next largest studio in Russia is DEFA Interaktiv. It was founded by Dmitry Kozlov eight years ago and has made a success of its customers’ businesses with its highly professional skills.

DEFA Interaktiv’s work

The quite new and fast-moving creative agency Deluxe Interactive has already been mentioned at the Favorite Web Awards (FWA) and continues to produce great promotional Flash websites.

Deluxe Interactive’s work

Futurico

Turbomilk

Creative People

Proekt

Pixel

Oblako

Showcase Of Freelancers

Freelancers are the hidden force of Russian creativity. As we mentioned, anyone who can successfully freelance in Russia could handle art direction at any agency with no problem. To grow as professionals, freelancers need a decent place to showcase their work and share insight. Such places include Deforum.ru, free-lance.ru, illustrators.ru, behance.net, revision.ru and russiancreators.ru. Quite a few magazines and blogs profile the best practitioners: kak.ru, Designet.ru, Designlenta.com, Revision.ru, Creativenews.ru, Peopleofdesign.ru, Omami.ru, ru.designeast.eu, designwar.net, djournal.com.ua and Designcollector Network

Valery Fironov

Stepan Burlakov

Illya Mikhailov

Alexander Kizyachenko

Andrey Gorokhov

Stas Polyakov

Andrew Tron

Denis Drachyov

Dmitry Sulliwan

Eugeny Muravyev

Nazir Khasavov

Alexandr Martinov

Alex Kuh

Anton Ponomarev

Dmitry Evstropov

Bogdan Sviridov

Yuriy Degtyar

Web Developers Online

The Web developer scene in Russia is well represented on blogs, too. We’ll cherry-pick the best ones here among the dozens that exist. On them, Web developers and intelligent commentators share their thoughts on various topics and host friendly communities. Vadim Makeev and Constantine Osnos chose these ones for us.

Vadim Makeev

Alexander Shabunevich

Nikita Vakorin

Gennady Osipenko

Din Neville

The particular nature of Russian communication has produced these huge community platforms, where any topic can rise or fall according to the “vox populi.” Everything IT-related, from Web 2.0 to Web development, is discussed on Habrahabr. The best place to talk about Russian Web standards is Webmascon magazine. And Deforum is the place to share your creative work and welcome a crowd of decent, and sometimes obscene, critics.

Also worthy of mention is Injun, a Flash and ColdFusion development blog, as well as Inforedesign and SEOBaby, for their useful content. Nbsp and Internet Things are great for their professional content related to Web design, development and promotion.

Creative Formations

To round out our picture of Russian creativity, we’ll mention some online resources related to other design industries. For example, advertising: Adme and Advertka. For fashion: LookAtMe and Fashion Communication. And the 3-D and CG arts: Render Ru and CGTalk.

Russian creativity bears fruit every day, and the best way to stay on top of it is to read our Designcollector Network and stay connected to Russia’s magic networks.

Showcase of Russian Web Designs

ValdiGroup

Pestovo Golf and Yacht Club

Yaltinsky Mjasozavod

Adv.ru

73dpi

DEFA Interaktiv

Worktrek.ru

JustParty

Gamer.ru

F5.ru

Turbomilk

Centrostroy

Red.mts.ru

Pink.

SOFT BAG

Rosinka International Group.

Armenianchurch.ru

Industry-daily.ru.

ElCheVive.

Plohiestihi

Stella Artois

Maminy Kolybelnye

RBC.ru

Tish

© Creative People

Stanley

Panorama Parket

Tomichechek

Red Apple 18

Dymov1.ru

Stardust shop

mobilemarafon

Bork.ru

MTV 2008

Elementshop

Semejnoe Puteshestvie

Would you like to see more similar posts 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 see more similar posts on SM in the future?(surveys)

Stay Tuned and Get in Touch!

This article is the first 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 start today with an article about web design in Russia. We will continue with Ireland (Lee Munroe) and Brazil (Fabio Sasso) upcoming weeks. Hence, you may want to subscribe to our RSS feed for more similar posts.

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

About the author

Arseny Vesnin is the founder and creative mind behind Designcollector.net, a blog that showcases designs created by artists from Russia and other countries of the world.

(al)

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

Post tags: inspiration, showcases, webdesign