Smashing Magazine

10 Ways To Put Your Content In Front Of More People

2009-05-12T17:14:17Z

Which is more important, driving traffic to your website or encouraging as many people as possible to see your content? Believe it or not, they are not one and the same.Too often, we as website owners live and die by web analytics applications. We fret about bounce rates, unique visitors and dwell time. However, when we focus so heavily on the performance of our website, we miss a fundamental point: we should aim to expose users to our content, not our website. The website is a tool to showcase our content, but it is not the only tool that does this.

Organizations with truly successful websites understand this principle. Take, for example, the following: Amazon’s primary objective is to sell stuff. YouTube aims to use video content to carry advertisements. Twitter facilitates “tweeting.” (Who knows what its business model is!).

In each case, the content matters, not the website. That is why each company provides numerous ways to access its content beyond the website. From Amazon’s affiliate scheme to YouTube’s embed feature, these companies can reach audiences that may never visit their websites.

Twitter is probably the best example of all. How often do you actually read or post tweets via the Twitter website? If you are like me, the answer is very rarely.

The majority of users do not read tweets via the Twitter website.

The lesson here is obvious: as website owners, we need a broader Web strategy to release our content from the shackles of our websites. How do we do this? Below are 10 opportunities that you can integrate into your online strategy.

While the points mentioned below will refine your strategy to deliver content to more people, they can not serve their purpose without an appropriate environment. In the age of social media and the rise of interactive web-applications such as Facebook, Twitter etc. building a community around your website is the most important way to drive traffic and keep the users coming back.

Using forums, polls, comments and engaging users in the global conversations via external services turns out to be a silver bullet for gaining more exposure and winning more loyal visitors. Once you are building a community around your site, it’s time to think about more refined strategy that will help you to put your content in front of more people – and this is where the tips below will come in handy.

1. Target The Desktop

eBay recognized that it needed a desktop application. Many people make a living selling on eBay, and these people need desktop software that streamlines their business processes. They need desktop notifications, faster and more desktop-like interaction and easier access to eBay features.

eBay Desktop: eBay saw an opportunity to bring the functionality and content of its website to the desktop.

Using a platform such as Adobe AIR, you can easily put Web-based content and functionality onto the desktop. This is exactly what eBay did, and it has proved very successful among the company’s power users.

As a website owner, you should consider whether a desktop application is right for you. Do your users need desktop features, offline access or better integration with the operating system?

2. Going Mobile

It won’t be long before the Web is accessed by more mobile users than PC users. In many countries, this has already happened. Traditional websites often render poorly or are hard to use on mobile devices. They do not take into account the context in which a mobile user browses the Web. Approaching the mobile Web as a separate channel to your traditional website, then, is critical.

Here are some methods of delivering content on the mobile Web:

Create a mobile website.
Mobile websites take into account small screens, different input devices and the numerous other unique characteristics of the mobile Web.
Use text messaging.
Text messaging is ideal for notifications and updates. It is a perfect complement to your website and a way of keeping users informed.
Build mobile applications.
Mobile platforms such as the iPhone and Android make it increasingly easy to build applications that run directly on mobile devices. They allow you to make your content available even when the user is not connected to the Internet or away from their PC.

Video-streaming service uStream makes its content available on the iPhone.

Pushing your content to mobile devices is ideal if your target audience is often away from the computer or requires access to your content “in the field.”

3. Start Tweeting

Twitter has so much hype at the moment. However, it does provide a unique opportunity to reach a larger audience with your message. The question is, how best to use it? Some organizations use Twitter as a broadcast tool, turning it fundamentally into an alternative to RSS. An example of this is BBC News or CNN, which provide latest updates via the service.

CNN uses Twitter as a broadcast tool, turning it fundamentally into an alternative to RSS.

However, using Twitter as a broadcast tool misses its true power. Organizations that really “get” Twitter include Zappos and Omnifocus. They use Twitter as a way to engage with their followers and even provide customer support.

Use Twitter as a way to engage with your audience. If a number of people work on your website, encourage them all to tweet, rather than having a single branded account.

4. Write For Others

Writing for other websites is an excellent opportunity to demonstrate your expertise and spread your message to a larger audience than would otherwise be possible through your own website.

Do not limit your words of wisdom to your own website. Look for other editorial websites and blogs that speak to your own audience and offer to write for them. After all, your audience visits many websites other than your own. Why limit your writing skills to your own blog when you can reach new audiences by writing for others?

Whenever I write for other websites, they almost always include links back to Boagworld and Headscape. Here an example from one of my previous Smashing Magazine’s articles.

Of course, any article you write for others should be more than shameless self-promotion. The owners of those websites will want quality content that fits their website and is of interest to their audience. For example, I recently wrote an article for a website whose audience consisted of franchise owners. If I had simply written about how great Headscape was, I doubt the article would have been published. Instead, I shared a case study of our experience in working with a franchise-based business. The content was both relevant to the publication and useful to its audience. However, it also raised our profile among a base of potentially new customers.

What websites exist that reach your target market? Would they consider publishing some of your content? How could you rewrite your content to make it more appealing to them?

5. Embrace Facebook

Another option for expanding your Web strategy beyond the website is Facebook. Explaining the importance and reach of Facebook is surely unnecessary. However, you may be tempted to dismiss it because your target market is not teenagers, who are normally associated with these kinds of social networks.

What may surprise you is that Facebook is no longer confined to a younger demographic. Over the last year, the number of users between 35 and 54 has jumped 276%, to over 6 million people.

Carsonified Fan Page on Facebook: Facebook has introduced fan pages, which are public-facing profiles for organizations.

So, how do you reach your audience on Facebook? Here are three good starting points:

Create a group.
Groups have been around for a long time and are ideal for building a dialogue with those already interested in your product or service. You can easily invite people to participate, and those people in turn can invite others. This makes groups ideally suited to viral marketing.
Create a fan page.
Fan pages are basically public profiles for organizations rather than individuals. Unlike groups, pages are public-facing. This means they can be seen by non-Facebook users and are indexed by search engines. Fan pages are perfect for building long-term awareness and for reaching people both inside and outside of Facebook.
Create an application.
Facebook allows third parties to build applications that can be added to user profiles. These range from games to RSS feeds. Unlike with pages and groups, building applications requires some technical skill. However, the possibility of users embedding your content in their profiles makes this an attractive proposition, if you have appropriate content.

Of course, Facebook is not the only social network. But it does have considerable reach and provides some the best tools for reaching its massive audience.

6. Develop A Widget Or API

The ultimate way to distribute content has to be by providing an API or widget.

An API gives other Web developers access to your content, allowing them to build applications and websites around it. Using an API, developers can do anything from embed your content on their websites to build desktop applications that offer advanced functionality.

Twitter really gets APIs. When was the last time you viewed or posted tweets from the Twitter website? Chances are, a long time ago. Because Twitter offers a powerful API, thousands of developers have built all kinds of applications that allow you to view and post tweets. The actual service that Twitter provides is in fact very basic; but its API makes it possible to do everything from viewing tweets on a Google map to posting photos, video and audio.

Tweetdeck is just one example of the powerful applications that can be built using the Twitter API.

Unfortunately, APIs have some drawbacks. They require a considerable level of technical expertise to implement. As a result, they are of use only to developers. What about the rest of us? How do we add third-party content to our websites? That’s where widgets come in.

A widget is typically a small piece of code that you can copy and paste into your website. Literally thousands of widgets are available. They allow website owners to use the content and functionality of other websites quickly and easily. Widgets are used to embed YouTube videos, show your Amazon wish list and display your location on a map.

Widgets are powerful because they are easy to implement. This means anybody can add them, thus allowing you to distribute your content much more widely. Widgets are also easier to build than full APIs. This makes them a good starting point for those wanting to put their content in front of more people.

7. Offer Better Feeds

Not all approaches to putting content in front of more users have to be as time-consuming and complex as developing an API. Doing one other thing could increase your views within minutes.

Users increasingly rely on RSS feeds to consume content from websites. This is especially true for news, articles and blog posts. However, some website owners are so obsessed with driving traffic to their websites that they provide only teasers of their posts via RSS. To read a whole article, the user is forced to click through to the website.

This approach to RSS is counter-productive. When a user is browsing a large number of feeds, they are less likely to read your content if they have to leave their news reader to do it.

To maximize users’ exposure to your content, ensure as much of it as possible is displayed in the RSS feed itself. Require users to click through only when absolutely necessary.

Google Reader displaying a partial RSS feed: many websites truncate their content in RSS because their advertising revenue is based on page impressions. They see driving as much traffic as possible to their website as being in their interest. This is a short-sighted.

It is also important to note that when users read content from an RSS feed, they do not have the context of your website. Ensuring, then, that your content stands on its own and that your copy incorporates calls to action is necessary.

8. Use Multimedia

Of course, limiting your content to the written word is becoming increasingly unnecessary. Creating audio and video content has become a trivial task. Services such as YouTube and applications such as AudioBoo make production and hosting easy.

Also, pioneers like Diggnation and Wine Library TV have shown that users care more about quality content than high production values. Both shows essentially have presenters speaking to a single locked-off camera. This kind of production value can be achieved with a consumer camera and basic editing software.

That said, creating popular content is harder than it appears at first. Many organizations believe that simply uploading their latest product demonstrations to YouTube will generate millions of views. That is simply not the case.

Good rich media content has to be engaging if people are expected to watch it and, more importantly, recommend it to their friends. This can be done through a passionate host, great content, humor or shock value. With thousands of videos uploaded everyday, standing out from the crowd is important.

Wine Library TV proves that great content and a passionate presenter are more important than production values.

However, don’t forget that your content has to be appropriate to your target audience. Shock tactics may work well with a teenage audience but may not go down so well with middle-aged business executives!

9. Start Streaming

The next wave of multimedia on the Web will be not pre-recorded material but rather live streaming. Services such as Ustream, Qik and Justin TV are all fighting to dominate this space. Each offers the opportunity to stream live content on the Web at zero cost. This makes the barrier to entry extremely low.

The main benefit of this approach over pre-recorded material is interactivity. The live format allows viewers to engage with the presenter in real time via chat. This brings a host of opportunities, including, but not limited to, the following:

Live product demonstrations
Live streaming allows you present your products and services while taking questions from the audience. This is considerably more powerful that showing pre-recorded promotional videos.
Community sessions
If you run an online community, live streaming gives you the chance to engage with that community on a much more personal level than with the written word. Social news website Digg has run a number of “Town Hall” meetings in which its user base engages directly with the CEO and founder.
Online training
Finally, live streaming is a perfect environment in which to provide remote training. Whether the training is on using your product or selling online workshops, live streaming allows users to both hear and see what you are doing.

Social news website Digg has run a number of Town Hall meetings in which its user base engages directly with the CEO and founder.

Live streaming is still relatively immature, and few are taking advantage of this new opportunity. Your company has a real opportunity to differentiate itself through its use.

10. Don’t Forget Email

Amidst all this talk of video, audio and APIs, it is easy to forget the tools we have always had for reaching beyond the confines of our website. Although not the sexiest tool on our list, email had to make it on before the end of this post. Email should be a key tool for keeping your content in front of users. Obviously, email can be used for a lot more than syndicating content. However, for the purposes of this article, it can be used to subscribe to your content. If users can subscribe to your content via RSS, they should be able to do it also via email.

ProBlogger allows its readers to subscribe to his RSS-feed via e-mail.

Fortunately, there are services such as AWeber and MailChimp that make this easy. FeedBurner is an option, too; however, it lacks subject line customization and has very limited design customizations available. You can find more information about why FeedBurner isn’t good enough in the article FeedBurner’s Free RSS-to-Email Syndication: Why You Can’t Afford It. With one of these services implemented, users can subscribe via email with a single click of a link on your website.

A word of warning, though. If a user subscribes to your content via email, they are not giving you permission to spam them indiscriminately. If you fail to respect their email subscription, you are in danger of losing that user and inciting them to post negative comments on your website, which could put off others.

Conclusion

There was a time when a website was enough. Now, your website needs to be just one small part of your overall Web strategy. Expecting users to come to you is naive. Instead, take your content to them, whether on a social network like Facebook’s or a mobile device like the iPhone.

About the author

Paul Boag is the founder of UK Web design agency Headscape, author of the Website Owners Manual and host of award-winning Web design podcast Boagworld.com.

(al)

15 Fresh High-Quality Free Fonts

2009-05-11T22:25:38Z

Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.

In this selection we’re glad to present you Junction, Nadia Serif, Nilland, CartoGothic Std, Bergamo Std, Comic Serif, Birra Stout, Vegur and a couple of other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.

15 Beautiful High-Quality Free Fonts
40 Excellent Free Fonts For Professional Design
You can find over 80 more free fonts in our section Fonts.

15 Fresh High-Quality Free Fonts

Junction [ Download the .zip-package ]
Designed by Caroline Hadilaksono, Junction is a humanist sans-serif typeface. It has elegant, clearn and very sharp glyphs, but contains only 100 most common symbols. Like Gentium it perfectly fits to body copy, but can also show its strengths, balance and beauty in headlines. Here are some insights from the designer:

“Inspired by my favorite humanist sans serif typefaces, such as Meta, Myriad, and Scala, Junction is where the best qualities of serif and sans serif typefaces come together. It has the hand drawn and human qualities of a serif, and still retains the clarity and efficiencies of a sans serif typeface. It combines the best of both worlds.” Available as OpenType. Released by The League of Moveable Type, an open-source type movement.

Nadia Serif [ Download Mac (Postscript) | Download PC (TrueType) ]
This serif typeface is available for free download; the only requirement for using it is to send a PDF or any other copy of the work using this typefaces to its designers.

Nilland
A beautiful slab-serif typeface, designed by Manfred Klein. The family consists of 6 weights, regular, bold, extra bold, black, small caps and small caps bold (link and images via DerSven.de).

CartoGothic Std
A legible sans-serif typeface, in the opentype format; 4 weights are available: book, italic, bold and bold italic. License agreement. Win and Mac.

Bergamo Std
A free serif typeface, in the opentype format; 4 weights are available: regular, italic, bold and bold italic. License agreement.

HVD Comic Serif [ specimen ]
So many designers hate Comic Sans. They think people who don’t know design are overusing this funny little friendly font, which is nearly every time out of place. Some years ago, type designer Hannes von Döhren created a free alternative to Comic Sans. The difference: It has serifs and a much cooler look. OpenType Pro, designed by Hannes von Döhren.

Birra Stout [ specimen ]
An elegant old-style typeface with strong elements of handlettering, designed by Darden Studio.

Vegur
This humanist sans-serif family is available in OpenType-format in three weights: ExtraLight, Regular and Bold. The typeface can be perfectly used both in body copy and in headlines.

Whiteboard Modern [ currently offline, the link was removed ]
An original hand-drawn typeface, designed by Jay Hilgert. The typeface is currently being designed, so currently only the demo-version is available.

Neighbourhood Type [ Download the .zip-package ]
“I took Neighbourhood as a challenge to create something that had the graphic expression of a display face while still maintaining some of the functionality of a text face. In the end I created something that I feel has the best of both worlds; an ultra simple sans serif text face with a large set of alternates which when combined with the regular characters create a new graphic display look”. Designed by Andy Chung.

Resonance Bold (Registration is required)
This type family consists of smooth curves and fine lines, and evokes the spirit of the 1970s. Resonance is a great typeface family for use on retro and vintage posters, flyers and also headings.

Layer Cake
An experimental typeface, designed by Jakob Nylund. Isometric multiple layered type. Capital letters A-Z, available only in Illustrator AI format.

Reminder: Mayberry Pro SemiBold (registration is required)
AscenderFonts released the font Mayberry Pro Semi Bold available for free download. This font belongs to the Mayberry Pro family. This family is a humanist sans serif designed by Steve Matteson to provide optimal legibility on screen in applications ranging from User Interfaces to web pages. The registration is required to download the font.

Bonus: Eco Font and Flaminia Type System

Eco Font [ Download .ttf ]
A Dutch company SPRANQ from Utrecht has developed a new typeface that is supposed to cut ink usage by about 15% – the trick is that the “Ecofont” has little holes in the letters. There is also Ecofont Professional Edition available: every corporate typeface can be adjusted. (via Twenteinside)

Flaminia Type System [ Download the .zip-package ]
Flaminia is a typographical system that allows its users and its future designers to quickly morph (through the use of Multiple Master axes) different variants of the glyphs. By allowing minimal changes of only one variable in the letter shapes, Flaminia also provides a tool to study which are the most relevant factors in the process of reading signs, and can be used free of charge for further researches in this field. Created by Andrea Bergamini, released by The League of Moveable Type, an open-source type movement.

More free fonts!

For more free fonts, please consider visitiong our previous posts:

15 Beautiful High-Quality Free Fonts
40 Excellent Free Fonts For Professional Design
You can find over 80 more free fonts in our section Fonts.

Fantastic Wallpapers That Will Blow Your Desktop Away

2009-05-11T11:05:12Z

We love desktop wallpapers. And we love beautiful ones most. And although we monthly publish desktop wallpapers of our readers (desktop wallpaper calendar feature), we thought that it would be nice to provide our contributors with some fresh inspiration and our readers with some nice wallpaper update for a lousy Monday.

The wallpapers for this post were selected over a long period of time; they cover mainly nature, abstract and digital art (further collections will be coming if you are interested). We’ve tried to pick only the most beautiful ones and hopefully you won’t be disappointed.

Below we present a showcase of over 50 fantastic wallpapers that will blow your desktop away. Most of them are in HD and will make your desktop look as nifty as it is possible. Because the resolutions are so high, if one doesn’t fit your screen, use your favorite image editor to refine its dimensions.

You may also be interested in the following related posts:

Fantastic Wallpapers That Will Blow Your Desktop Away

Bird on a branch
Available in various widescreen, fullscreen, HDTV and dualscreen resolutions.

Patrick Gunderson’s abstract artworks
Available in 1920×1080.

Unbrella Sky
1024×768, 1280×800, 1280×1024, 1440×900

Glacier Sunrise
Available in various full screen and wide screen resolutions – 1280×800, 1440×900, 1680×1050 and 1920×1200.

The Dancing Nebula
1920×1200px.

Colors and An Animal
Available in various fullscreen resolutions.

Guara
Available in 1920×1200, 2560×1600

Strukt
Available in 1024×640, 2560×1600

Serenity
Available in 1440×900.

De La Haut
Available in various fullscreen resolutions.

Creamy Sky
Available in various widescreen, fullscreen, HDTV and dualscreen resolutions.

Chameleon
Available in various widescreen and fullscreen resolutions.

something like an astronomer

MacBook Pro
Available in various widescreen, fullscreen, HDTV and dualscreen resolutions.

Bello Nebula
Available in the resolution 1920×1200.

La Solitudine
Available in the resolution 1680×1050.

Super Silo
Available in various resolutions – widescreen, fullscreen and iPhone.

For A Thousand Years
Available in 1280×1024, 1440×900, 1680×1050.

Dreamer
A beautiful wallpaper created by Henrik Newstream, available in various full screen resolutions.

Equidistant
Available in the resolutions 1280×1024, 1440×900, 1680×1050, 1900×1200 and in the iPhone-version.

Nova
Available in the resolution 1920×1200.

Eifel Tower
Available in the resolution 1600×1200.

Ee Venn’s wallpaper
Available in various resolutions – widescreen, fullscreen and iPhone.

Bokeh
Available in Dual & Single Display Screens (Wide/Full Screen)

Vladstudio’s wallpapers
Available in various fullscreen resolutions – 1280×1024, 1400×1050, 1600×1200.

Cosmic Apple
Available in various wide screen resolutions – 1280×800, 1440×900, 1680×1050 and 1920×1200.

Let if fly
Available in various full screen and wide screen resolutions – 1280×800, 1440×900, 1680×1050 and 1920×1200.

Swan
Available resolutions: 1440×900, 1680×1050 and 1920×1200.

Phalanx
Available in various full screen and wide screen resolutions – 1280×800, 1440×900, 1680×1050 and 1920×1200.

Autumn
Available in various full screen and wide screen resolutions – 1280×800, 1440×900, 1680×1050 and 1920×1200.

Chasing Dreams
Available in 1920×1080.

It’s Magic
Available in 1440×900, 1600×1200, 1680×1050 and 1920×1200.

Influx
Available in resolutions 1280×1024, 1920×1200 and 2560×1600.

All Falls Down
Available in resolutions 1280×800, 1440×900, 1680×1050 and 1920×1200.

Distorted 7 HD Wallpaper
Available in 1680×1050

Rooster’s Ranch
Available in 1440×900, designed by Andrea Andrade.

Electricmanja
Available in the resolutions 1024×768, 1280×800, 1280×1024, 1440×900, 1680×1050, 1920×1200 and in the iPhone version.

Photons
Available in various themes in resolutions 1280×1024, 1600×1200, 1920×1200.

Korean Star Paper
Available in the resolution 1920×1200.

a flower
Available in various resolutions 1600×1200 and 1920×1200.

The End, The Tsunami
Available in 1440×900, 1680×1050, 1920×1200

depthCore Heist
Available in various resolutions – widescreen, fullscreen and iPhone.

Girl
Available in 1680×1050.

Mac Universe
Available in 1680×1050.

Twizted
Available in the resolution 2560×1600.

In a Whisper
Available in 1280×800

Fritrix
Available in 1280×1224, 1680×1050, 2600×1300

Gone Clubbing
Available in various resolutions: 1920×1200, 1680×1050, 1440×900, 1280×800, but also fullscreen, HDTV and Mobile versions are available.

Route 66
1920×1200

The Dope Show
Available in 1680×1050 (up to)

Yellow Silk
Available in 1680×1050.

The Lich King (Warcraft)
HD — 1900×1200

Diablo3
1024×768, 1280×960, 1280×1024, 1280×720, 1280×800, 1440×900, 1600×1200, 1680×1050, 1920×1080, 1920×1200

Bulls on Parade
1100×778, 1920×1200, 1680×1050, 1280×1024, 1280×800, 1024×768

Last Click

Videogames Remakes Wallpapers
The French designer Mikaël Aguirre designs remakes of legendary video games such as Mario, Sonic, Gunstar Heroes and others. The wallpaper dimensions are up to 5000×2800 for printing. Incredible pieces of art.

You may also be interested in the following related posts:

Retro Toys: A Free Icon Set

2009-05-10T19:29:46Z

Today we are glad to release “Toys”, a retro icon set that was designed by Helen Gkizi and released with Smashing Magazine for its readers. The set contains 9 “toys” icons (png, 128×128px) that may come in handy in a variety of settings – e.g. in projects related to children and family.

The files are transparent PNGs, and the source file (.eps) is included as well. As always, the set is completely free and may be used for any private or commercial project without any restrictions whatsoever.

Download the set for free!

download the set (.zip, including .eps-source, 0.6 Mb)
release post on Webtoolkit4.me

We express sincere gratitude to Helen for her great work. Please let us know in the comments if this release meets your expectations. And if not, please let us know what we could improve in the upcoming releases!

Please take a look at other high-quality freebies as well:

Drawing Inspiration From Music

2009-05-10T13:14:34Z

Instead of getting into the heads of successful designers, we should be getting into the head of the audience we’re designing for. There are many ways this can be done, one of which is music. Relying on senses other than your vision can evoke a greater comprehension for what feeling must be conveyed through a design.

In my early years as a student, I had a difficult time adjusting to the thought process of a designer. I’m a hands-on learner, and developing design ideas is more of an abstract art. Being able to recognize a good design versus a bad design was never the problem, but creating unique designs was for me much like an artist trying to draw purely from memory that doesn’t have that capacity. For a couple of years I treated design as purely an art, simply because I lacked guidance in this area and didn’t know any better, hitting the ground running with a project without methodically seeking out inspiration appropriate for the task at hand.

That system didn’t prove to work well in many instances, and my failure caused me to question my skills as a designer. Instead of giving up, I fought to find my own way through the thick fog that clouded my vision of what was truly standing in my way: a lack of a methodical design process. As soon as I had realized where I went wrong, I dug right in to finding out how to do it right.

After finding a process that worked for me, I started finding inspiration in ways that I never would have thought to turn to. I quickly got sick of thumbing through the CSS galleries and the like and started trying to look at the world in a different light. One of the most inspirational things for many people is music, designers especially. Elliot Jay Stocks has even released an EP. That’s all good and well, but how can music specifically bring design inspiration?

Outside the [Music] Box

Music and art seemingly go hand-in-hand. Many different forms of art, design, or creation use music to enhance the experience. Here are just three examples:

Movies use a soundtrack to enhance the visual experience and the content of the script, to create or develop the mood.

Ballets use music in combination with visual cues such as movement, make-up, costumes, or props to set the mood. They create a story without words, which breaks out of the box of normal storytelling methods and relies on other senses and tactics to let the story be told for them.

Car forums often feature a post (or many) posing the question: “what music do you race to?” Music affects everyone differently and there are many variations of answers to this, but it is obvious that almost everyone uses music to somehow set the mood for the task at hand.

Making a Melody

Music tends to thrive on metaphors. One of the most popular examples is that of Peter and the Wolf. Soviet Union composer Sergei Prokofiev created a story using different instruments to depict different characters. This is a great example of how design can adapt methods from other arts.

Many websites, such as Freelance Switch, use a variety of colors and icons to depict different subjects within the site.

The above image depicts the metaphor of “Music From the Other Room”. When looking at it without knowing the title of the work, it might be confusing and meaningless to some. I first was annoyed that many elements were not completely legible, such as “music”. Then I re-read the title, “Music From the Other Room”, and realized just how perfectly it fit. The title reminded me of when I was growing up and we had a piano in the living room, which was just below my bedroom. I could hear the general melody of the song, but I couldn’t make out any details. After coming to this realization I again looked at the image and found just how well this metaphor was conveyed in this piece.

Using artistic methods to create systematic design concepts can be both liberating and efficiently productive. It can allow your creativity to flow in ways that inspiration from other designs cannot, and having your parameters laid out ahead of time will guide the creativity flow exactly where it needs to be heading.

Letting the Music Sing

There is a rising mantra between designers: “Design less, think more.” Samantha Warren sums it up rather succinctly while AIGA goes into more detail. Before ever sitting down to sketch or design, you need to know your boundaries and the context which you will be designing within. Many accomplish this through Mood Boards. Finding music that fits the particular mood you’re trying to convey can get you away from recreating a tired idea and push you toward breaking outside of the box and marching to the beat of your own drum.

One of the major guidelines that determines the outcome of a project is the audience. Not having much experience with a particular audience can limit your vision of what will appeal to them. If you’re designing a social media site for African-American teens in a particular city or region, this could pose as quite a challenge if your main concentration has been work for large corporations. Obviously looking to those whom have accomplished such a venture successfully is a good idea, but focusing on the past makes it difficult to design a unique and more successful future. Instead of getting into the heads of successful designers, we should be getting into the head of the audience we’re designing for.

There are many ways this can be done, one of which is listening to the music that generally appeals to this particular audience–as well as the music that appeals to the minorities of this audience. Relying on senses other than your vision can evoke a greater comprehension for what feeling must be conveyed through a design.

Retaliate

What music moves you to design? Have you used music to set the mood for a project in the past?

About the author

Ann Edwards is a freelance designer from Indianapolis, Indiana. She is also an avid car enthusiast, music addict, and self-proclaimed web geek.

Flash vs. Silverlight: What Suits Your Needs Best?

2009-05-09T19:53:12Z

With the release of Silverlight 1.0 and its subsequent versions, a debate started among designers and developers regarding choosing between Flash and Silverlight. Silverlight faces difficulties in capturing the market because of the maturity of Flash. However, Silverlight has managed to keep up by including certain features that designers and developers have always wanted to see in Flash, such as search engine optimization. In this article, we will discuss some of the technical differences between Flash and Silverlight to help you choose the technology that best suits your needs.

Animation

Flash uses the frame-based animation model. In frame-by-frame animation, we create an object for each frame to produce an animation sequence. For example, if you want to move something across the screen in 3 seconds, calculate how many frames 3 seconds will take, then calculate the matrices required for each frame along the way. Keep in mind that the player won’t actually maintain a frame rate unless you embed a blank audio track; otherwise, 3 seconds might turn out to be 2 or 6 or 5.

Silverlight is based on the WPF animation model, which is time-based instead of frame-based, so you define the start and end conditions, and it figures out how to do it. No need to deal with matrices like with Flash. Also, no need to calculate the positions of objects in various frames.

File Size

Flash uses a compressed format, and text and images are embedded in the movie, hence the file size of a Flash component is relatively small.

Silverlight uses XAML for its description language, and it is non-compressed, so the size of a Silverlight component is usually larger.

Scripting

ActionScript is used to program Flash objects. ActionScript is an object-oriented language with a full range of controls for designing user interfaces. And it can be integrated with back-end technologies that use other languages and frameworks, such as PHP, ASP and Ruby On Rails. It comes with a huge, powerful class library for developing online browser-hosted applications and stand-alone desktop applications.

For Silverlight scripting, you can choose from among a number of programming languages such as Visual C#.Net and Visual Basic.Net, including client-side scripting with JavaScript. C# and VB.NET can be used to write managed code that runs on and uses all of the enhancements and capabilities of Microsoft’s .NET framework.

Video And Audio

Flash supports multiple video formats. The latest codec is very high quality, and the bandwidth usage is nice. There is one problem, though: if you create a tool that outputs Flash content, the formats it supports aren’t really used by anyone else. The original video codec, Sorenson’s proprietary H.263 implementation, is a mutant version of H.263. The compression follows the spec fairly closely, but a bunch of features were left out, and you can’t exactly just go find complete specs on how to build your own encoder.

Silverlight implements the industry-standard VC-1 codec for video, and supports WMV and WMA. Just about everyone already has Windows Movie Maker, but if someone doesn’t, it’s not a big deal because Microsoft makes available a free SDK encoder for producing WMA and WMV. So, not only would you be using formats that people would more likely be able to encode themselves, but Microsoft provides your product with SDKs if you want to do the encoding yourself.

Sound Processing

ActionScript offers a set of sound classes that can be used to generate and control sound in a movie. You can add sounds from the library while the movie clip is playing and control those sounds. If you do not specify a target when you create a new sound object, there are methods to control sound for the whole movie.

Silverlight doesn’t have the low-level audio APIs you would need to write an audio application in the browser. It doesn’t even support playback of WAV files because .NET has very little audio playback support.

Accessibility

Flash provides rich accessibility features for those who have hearing and vision problems or who rely on keyboard shortcuts. Providing captions for video solves accessibility challenges for people who are deaf and hard of hearing, but people who are blind or have low vision or other physical disabilities need the video playback controls to be keyboard-accessible and to function properly with assistive technologies such as screen readers and screen magnifiers. Users who rely on keyboard access can use a variety of familiar shortcuts to control video. Buttons such as “Play/Pause,” “Stop,” “Rewind,” “Mute” and “Closed Captions” can be tabbed to and activated with the spacebar. Slider controls such as for volume and playhead position controls can be accessed via the arrow keys, and the “Home” and “End” keys can be used to skip directly to the beginning or end of a range. The volume slider also accepts numeric keys to set playback audio levels in one quick step.

Silverlight 3 is the first browser plug-in to provide access to all system colors, allowing people with partial vision to use familiar operating system controls to make changes, such as switching to high-contrast color schemes for ease of readability. These features are far fewer than those provided by Flash.

Platform Compatibility

Flash supports Windows Vista/XP/2000, Windows Server 2003/2008, Mac OS 10.1/10.5 (PowerPC), Mac OS 10.1/10.5 (Intel), Linux 5, openSUSE 11, Ubuntu 7.10 or later and Solaris 10.

Silverlight supports only Windows Vista/XP/2000, Windows Server 2003/2008, Windows Mobile 6, Mac OS 10.1/10.5 (PowerPC) and Mac OS 10.1/10.5 (Intel). Because Linux and Solaris support is missing, users of those operating systems won’t be able to experience Silverlight on their machines.

Text Representation/SEO

Flash stores fonts using shape definitions and the player doesn’t understand TTF, hence we cannot separate the text layer from the movie. Typically the text written on a flash component was not SEO friendly however Adobe has made the modifications to Flash so that it will be indexable, and the search engines have begun to index Flash.

Currently Google is the only search engine that is noticeably reading Flash files. They have worked closely with Adobe to develop the right toolset for the Googlebot in order to read the files for indexing. Yahoo is working on it and MSN is working with their own format, Silverlight, so they probably won’t be developing the toolset necessary to read Flash files.

To read more about how to make Flash SEO friendly, please read the following articles:

In Silverlight applications, user interfaces are declared in XAML and programmed using a subset of the .NET Framework. XAML can be used for marking up the vector graphics and animations. Text is deployed on web server as separate entity and can be read and accessed separately. Textual content created with Silverlight is searchable and indexable by search engines as it is not compiled, but represented as text (XAML).

Supported Image Formats

Flash supports almost all image formats.

Silverlight supports only PNG and JPEG file formats. Some other file formats are supported by Silverlight but in a limited way. A full list can be found here.

Socket Programming

The XMLSocket object implements client sockets that allow computers running the Flash player to communicate with a server computer identified by an IP address or domain name.

To use the XMLSocket object, the server computer must run a daemon that understands the protocol used by the XMLSocket object. The protocol is as follows:

XML messages are sent over a full-duplex TCP/IP stream socket connection.
Each XML message is a complete XML document, terminated by a zero byte.
An unlimited number of XML messages can be sent and received over a single XMLSocket connection.

~~Silverlight doesn’t support socket programming.~~ Silverlight supports sockets programming through the System.Net.Sockets namespace. Silverlight supports asynchronously sending data back and forth across a socket over ports ranging from 4502 to 4534. Silverlight supports cross-domain socket communications between a Silverlight application and any server, provided that a special security policy file is in place on the server.

Webcam Support

Flash has webcam and microphone support for live video and audio transmission, and using them is really easy in Flash. It takes only a few lines of ActionScript code to invoke the camera object.

Camera.get	Returns a default or specified camera object, or null if the camera is not available.
Camera.setMode	Sets aspects of the camera capture mode, including height, width and frames per second.
Camera.setMotionLevel	Specifies how much motion is required to invoke Camera.onActivity(true) and how much time should elapse without motion before Camera.onActivity(false) is invoked.

Silverlight doesn’t support webcam or microphone.

Deployment

The Flash deployment package contains only a single Shockwave (SWF) file, and all images, text and animations are incorporated in this file. Because of the compressed nature of a Flash component, its images and text are not indexed by search engines, and thus not searchable.

The deployment process of Silverlight is far more complex; all individual components need to be deployed separately. The following components typically get sent to the client for each Web request of Silverlight:

XML files,
DLL files (if necessary),
Silverlight.js file,
Any other JavaScript file,
Resources (images, audio, video).

Read the full documentation on Silverlight deployment.

Windows Application

A Flash movie can be compiled into a Windows application and run as a standalone EXE file. It can also be played on a desktop that has an appropriate Flash player.

Silverlight doesn’t support playing the movie as a Windows application.

Media Streaming

Flash provides no such service to host the content and application with them. Thus, building a video website with Flash is not as cost-effective as building one with Silverlight.

Microsoft Silverlight Streaming by Windows Live is a companion service for Silverlight that makes it easy for developers and designers to deliver rich media as part of their Silverlight applications. The service allows Web designers and developers to host and stream cross-browser media and interactive applications that run on both Windows and Mac. This service can be combined with Microsoft Expression Studio and other third-party tools to create and develop interactive contents.

Silverlight Streaming by Windows Live is currently in beta testing and offers 10 GB of free hosting for rich-media applications.

Conclusion

Selecting the right technology for rich Internet applications is often critical, and choosing between Flash and Silverlight depends entirely on your requirements. If you expect that some of your users will be on Linux or Solaris, then you should go with Flash. If you want your website to be indexed by search engines, then Silverlight may be better.

Besides, as Doug S. is points out in the comments, it’s worth noticing that a minority of web users actually have a Silverlight plugin installed on their machine, while most users do have Flash-support. The Flash Player 9 and higher support streaming of the H.264 video codec which means anyone with a video program that can output an MP4 can stream to Flash. There are literally hundreds of free apps on Mac, PC and Linux that can do this. It’s also important to mention that the latest version of Flash Player supports 3D rendering while Silverlight does not and that SWF, FLA, FLV, and AS are all open-standard formats, while Silverlight is 100% proprietary.

The following table summarizes the features discussed above. Rather than including arrows to indicate whether each platform has a particular feature, we’ve simply marked “better” to show the areas in which each technology beats out the other.

Features	Flash	Silverlight
Animation		better
File size	better
Scripting		better
Video/Audio		better
Sound processing	better
Accessibility	better
Platform compatibility	better
Text representation/SEO		better
Supported image formats	better
Socket programming	better
Webcam support	better
Deployment	better
Windows application	better
Media streaming		better

Further Resources

The following articles are suggested for further reading:

About the Author

Muhammad Usama Alam is a software engineer and Web developer with over 8 years of experience in designing and developing business solutions for the enterprise. He also blogs at SmashingApps.

(al)

Smashing Magazine

10 Ways To Put Your Content In Front Of More People

1. Target The Desktop

2. Going Mobile

3. Start Tweeting

4. Write For Others

5. Embrace Facebook

6. Develop A Widget Or API

7. Offer Better Feeds

8. Use Multimedia

9. Start Streaming

10. Don’t Forget Email

Conclusion

About the author

15 Fresh High-Quality Free Fonts

15 Fresh High-Quality Free Fonts

Bonus: Eco Font and Flaminia Type System

More free fonts!

Fantastic Wallpapers That Will Blow Your Desktop Away

Fantastic Wallpapers That Will Blow Your Desktop Away

Last Click

Related posts

Retro Toys: A Free Icon Set

Download the set for free!

Related posts

Drawing Inspiration From Music

Outside the [Music] Box

Making a Melody

Letting the Music Sing

Retaliate

About the author

Flash vs. Silverlight: What Suits Your Needs Best?

Animation

File Size

Scripting

Video And Audio

Sound Processing

Accessibility

Platform Compatibility

Text Representation/SEO

Supported Image Formats

Socket Programming

Webcam Support

Deployment

Windows Application

Media Streaming

Conclusion

Further Resources

About the Author