As usual, this section of sites offer up some fresh takes on how sites should be laid out. At times alternate layouts can be annoying, inspiring, helpful and destructive. There are many good reasons for the patterns that have formed, and at the same time, they are nothing more then patterns. There are no hard rules. These sites challenge our preconceived notions of how a layout should be structured. Whether they function well or not is almost irrelevant in terms of just plain making us think about why we do things the way we do.
-
I posted to designmeltdown.com
Atypical Layout Part 3
http://feedproxy.google.com/~r/designmeltdown/uecD/~3/3ImfivDpp-8/Part3.aspx
May 18 2009, 9:18am | Comments »
-
I posted to smashingmagazine.com
10 Ways To Put Your Content In Front Of More People
http://feedproxy.google.com/~r/SmashingMagazine/~3/hpwaguLHKtY/
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)
© Paul Boag for Smashing Magazine, 2009. | Permalink | 43 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: content, creative, ideas, techniques
- Tags:
- How-To
- creative
- techniques
- content
- ideas
May 12 2009, 8:35am | Comments »
-
I posted to smashingmagazine.com
15 Fresh High-Quality Free Fonts
http://feedproxy.google.com/~r/SmashingMagazine/~3/yV21Ra6QEdY/
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.
- Tags:
- free
- typography
- Fonts
May 11 2009, 7:39am | Comments »
-
I posted to smashingmagazine.com
Fantastic Wallpapers That Will Blow Your Desktop Away
http://feedproxy.google.com/~r/SmashingMagazine/~3/wGDhLjatpQg/
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:
Really Stunning Desktop Wallpapers 100 Beautiful iPhone Wallpapers 70 Beautiful Dual-Screen Desktop Wallpapers
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
Diablo31024×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.
Related posts You may also be interested in the following related posts:
70 Beautiful Dual-Screen Desktop Wallpapers 100 Beautiful iPhone Wallpapers Really Stunning Desktop Wallpapers
© Moin Anjum for Smashing Magazine, 2009. | Permalink | 65 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: desktop, downloads, free, wallpapers
- Tags:
- downloads
- free
- Graphics
- wallpapers
- desktop
May 11 2009, 12:16am | Comments »
-
I posted to smashingmagazine.com
Retro Toys: A Free Icon Set
http://feedproxy.google.com/~r/SmashingMagazine/~3/DCACbkCnx0Y/
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! Related posts Please take a look at other high-quality freebies as well:
Project Icon Set Flavours Icon Set DelliStore: A Free Professional CSS/XHTML/PSD-Template “Magazeen”: Free Magazine-Look WordPress Theme Typography Keyboard Layout
© Smashing Editorial for Smashing Magazine, 2009. | Permalink | 7 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: free, Freebies, icons, retro, toys
May 10 2009, 12:17pm | Comments »
-
I posted to smashingmagazine.com
Drawing Inspiration From Music
http://feedproxy.google.com/~r/SmashingMagazine/~3/9TfD-BjROrw/
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.
© aedwards for Smashing Magazine, 2009. | Permalink | 19 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: inspiration, music
- Tags:
- inspiration
- music
May 10 2009, 5:16am | Comments »
-
I posted to smashingmagazine.com
Flash vs. Silverlight: What Suits Your Needs Best?
http://feedproxy.google.com/~r/SmashingMagazine/~3/ZMJDk1c-o0g/
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:
How to SEO Flash Google learns to crawl Flash
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:
An Overview of Silverlight Silverlight vs. Flash: An Analysis Report Flash vs. Silverlight: Theming and Styling Flash vs. Silverlight: Words and Numbers
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)
© Muhammad Usama Alam for Smashing Magazine, 2009. | Permalink | 52 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: flash, silverlight
- Tags:
- How-To
- flash
- silverlight
May 9 2009, 7:22am | Comments »
-
I posted to smashingmagazine.com
35 Examples Of Masterful Lighting Effects In Web Design
http://feedproxy.google.com/~r/SmashingMagazine/~3/4OjPHZyxCnw/
Using a light source the right way can add dimension and beauty to a website design. Strong light sources create a stark contrast between light areas and shadows in a design, making the elements look more realistic and dimensional and less flat. Some websites opt instead for a dim light source to create a soft glow around particular areas of the website, to attract the eye more subtly. Lighting can also create a mood for a website. Some websites use bright swirls of light to show energy, while others use a dim glow to create a peaceful mood. In the examples below, you will see a wide range of lighting effects used, from subtle lighting effects to bold rays of light streaking across the page. You can learn how to better use light and shadow to polish your page designs and make them stand out on the screen in our recent article 5 Simple Tricks To Bring Light and Shadow Into Your Designs. Masterful Lighting Effects In Web Design 45royale
Newism
TaoEffect
McCafe
Postbox Inc.
Weloveicons.com
31 Three
Icondock
Mailchimp
for a beautiful web
CampaignMonitor
Crush + Lovely
Camp Creative Group
Design moves me
ditley
artificial studio
Revive Africa
Lisa Moseley
WebKitbits
rareview
Your Web Job
Strutta
Drew Wilson
envato
icebrrg
Revyver Labs
Mike Precious
nekob
nitobi
Search Inside Video
Monterey
Tutorial9
GoodBytes
foehn
Alex Buga
youLOVE.us
avalonstar
Viget Labs
Barack Obama
About the Author Angela Rohner is founder of the Flash and CSS design gallery TheBestDesigns.com, which she started in 2001. She currently works as an Art Director and Front-End Developer in Dallas, TX. To get in touch with Angela, you can find her on Twitter, or you can visit her website. (al)
© Angela Rohner for Smashing Magazine, 2009. | Permalink | 36 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: design, effects, lightning, showcases
May 7 2009, 3:31pm | Comments »
-
I posted to smashingmagazine.com
Crucial Concepts Behind Advanced Regular Expressions
http://feedproxy.google.com/~r/SmashingMagazine/~3/M_dkI0x0wyA/
Regular expressions (or regex) are a powerful way to traverse large strings in order to find information. They rely on underlying patterns in a string’s structure to work their magic. Unfortunately, simple regular expressions are unable to cope with complex patterns and symbols. To deal with this dilemma, you can use advanced regular expressions. Below, we present an introduction to advanced regular expressions, with eight commonly used concepts and examples. Each example outlines a simple way to match patterns in complex strings. If you do not yet have experience with basic regular expressions, have a look at this article to get started. The syntax used here matches PHP’s Perl-compatible regular expressions. 1. Greediness/Laziness
All regex repetition operators are greedy. They try to match as much as possible in a string. Unfortunately, this might not always be a desired effect. Thus, lazy operators are used to solve this problem. They only match the smallest possible pattern and are used by adding a ‘?’ after the respective greedy operator. Alternatively, the ‘U’ modifier may be used to make all repetiton operators lazy. Differentiating between greediness and laziness is key to fully understanding advanced regular expressions. Greedy Operators The * operator matches the previous expression 0 or more times. It is a greedy operator. Consider the following expression: preg_match( '/<h1>.*<\/h1>/', '<h1>This is a heading.</h1> <h1>This is another one.</h1>', $matches );
Recall that a . means any character except a new line. The above regular expression is looking for an h1 tag and all of its contents. It uses the . and * operators to constantly match anything inside the tag. This pattern will match: <h1>This is a heading.</h1><h1>This is another one.</h1>
It returns the whole string. The * operator will continuously match everything — even the middle closing h1 tag — because it is greedy. Matching the whole string is the best it can do. Lazy Operators Let’s change the above operator by adding a ‘?’ after it. This will make it lazy: /<h1>.*?<\/h1>/
The regex now fulfills its duty and matches only the first h1 tag. Another greedy operator that uses this same property is {n,}. This matches the previous expression n or more times. If it is used without a question mark, it looks for the most repetitions possible. Otherwise, it starts from n repetitions:
Set up a String
$str = 'hihi';
Match it using the greedy {n,} operator
preg_match( '/(hi){1,}/', $str, $matches ); # matches[0] will be 'hihi'
Match it with the lazy {n,}? operator
preg_match( '/(hi){1,}?/', $str, $matches ); # matches[0] will be 'hi'
- Back Referencing
What it does Back referencing is a way to refer to previously matched patterns inside a regular expression. For example, take a look at this simple regex that matches an expression in quotes:
Set up an array of matches
$matches = array();
Create a String
$str = "\"This is a 'string'\"";
Traverse it with regular expressions
preg_match( "/(\"|').*?(\"|')/", $str, $matches );
Print the whole match
echo $matches[0];
Unfortunately, this will not correctly match the string. Instead, it will print: "This is a '
This regular expression matches the opening double quote but finds a different type of quote to close it. This is because it was given the option of picking a double or single quote at the end. In order to fix this, you can use back referencing. The expressions \1, \2, …., \9 hold references to previously captured subpatterns. The first matched quote, in this case, will be held by the variable \1. How to Use It In order to apply this concept to the aforementioned example, use \1 in place of the last quote: preg_match( '/("|\').*?\1/', $str, $matches );
This will now correctly return: "This is a 'string'"
Remember that back referencing may also be used by preg_replace. Note that instead of \1 … \9, you should use $1 … $9 … $n (any number of these will work). For example, if you want to replace all paragraph tags with text that represents them, use: $text = preg_replace( '/<p>(.*?)<\/p>/', "<p>$1</p>", $html );
The $1 back reference holds the text inside the paragraph and is being used in the replace pattern itself. This completely valid expression shows an easy way to access matched patterns even while replacing. 3. Named Groups When using multiple back references, a regular expression can quickly become confusing and hard to understand. An alternative way to back reference is by using named groups. A named group is specified by using (?P<name>pattern), where name is the name of the group and pattern is the regular expression in the group itself. The group can then be referred to by (?P=name). For example, consider the following: /(?P<quote>"|').*?(?P=quote)/
The above expression will create the same effect as the previous back reference example, but by instead using named groups. It is also significantly easier to read. Named groups are also useful when sifting through the array of matches. The name given to a specific pattern is also the key of the corresponding matches array. preg_match( '/(?P<quote>"|\')/', "'String'", $matches );
This will print "'"
echo $matches[1];
This will also print "'", as it is a named group
echo $matches['quote'];
Thus, named groups not only make code easier to read but also organize it. 4. Word Boundaries
Word boundaries are places in a string that come between a word character and a non-word character. The specialty of these boundaries is the fact that they don’t actually match a character. Their length is zero. The \b regular expression matches any word boundary. Unfortunately, boundaries are so often skimmed over that many do not recognize their real significance. For example, let’s say you want to match the word “import”: /import/
Watch out! Regular expressions can be tricky. The above expression will also match: important
You may think it is as simple as adding a space before and after import to prevent these bogus matches: / import /
But what about this case? The trader voted for the import
When import is at the beginning or the end of a string, the modified regex will fail. Thus, splitting this up into cases is required: /(^import | import | import$)/i
Looking back at our regular expression, it does not take periods or other punctuation into account. Just to match this single word, a regular expressions may look like this: /(^import(:|;|,)? | import(:|;|,)? | import(.|\?|!)?$)/i That’s a lot of code to match just a single word. This is why word boundaries are so significant. To accomplish the above statement and many other variations with word boundaries, all that is necessary is: /\bimport\b/
This will match every case above and more. \b’s flexibility comes from the fact that it matches a zero-length string. All it matches is an imaginary space between two characters. It checks if one of the characters is a non-word character and the other is a word character. If so, it matches it. If the beginning or end of a string is encountered, \b treats it as a non-word character. Because the i in import is still considered a word character, it will match import. Note that the opposite of \b is \B. This operator will match the space in-between two word or two non-word characters. Thus, if you would like to match ‘hi’ inside another word, you could use: \Bhi\B
- Atomic Groups
Atomic groups are special regex groups that are non-capturing. They are usually used to increase the efficiency of a regular expression, but may also be applied to eliminate certain matches. An atomic group is specified by using (?>pattern): /(?>his|this)/
When the regex engine matches an atomic group, it will discard backtracting positions that came with all tokens inside it. Consider the word ’smashing’. Using the above regular expression, the regex engine will first try to match the pattern ‘his’ in ’smashing’. It will not find a match. At this point, the atomic group will kick in. The engine will discard all backtracking positions. This means that it will not search for ‘this’ inside ’smashing’. Why? If ‘his’ did not return a match, then obviously ‘this’ (which includes ‘his’) will not return positive either. The above example did not have many practical uses. We might as well have used /t?his?/ instead. Look at the following: /\b(engineer|engrave|end)\b/
If the regex engine is given the word ‘engineering’, it will correctly match ‘engineer’. The next word boundary, \b, will not match. Thus, it will move on to the next match: engrave. It realizes that the ‘eng’ matches, but the rest do not. Finally, ‘end’ is attempted and also failed. If you look carefully, you will realize that once the engine matches ‘engineer’ and fails the last word boundary, it can not possibly match ‘engrave’ or ‘end’. These two matches are smaller words than ‘engineer’, and thus the regex engine should not continue with the other trials. /\b(?>engineer|engrave|end)\b/
The above is a much better alternative that will save the regex engine time and improve the code’s efficiency. 6. Recursion
Recursion in regular expressions can be used to match nested constructs, such as parentheses, (this (that)), and HTML tags, <div></div>. They require the use of (?R), an operator that matches recursive sub-patterns. Consider the regular expression that matches nested parentheses: /(((?>[^()]+)|(?R))*)/
The outermost parentheses in this regular expression match the beginning of the nested constructs. Then comes an optional operator, which can either match non-parenthetical characters (?>[^()]+) or the whole expression again in a sub-pattern, (?R). Notice that this operator is repeated as many times as possible to match all nested parentheses. Another example of recursion at work is the following: /((?>[^]+)|((?R)))*/ The above expression combines character groups, greedy operators, back-tracking, and atomic groups to match nested tags. The first parenthesized group ([\w]+) matches the tag name for use later in the regular expression. It then proceeds to match the rest of the tag. The next parenthesized sub-expression is very similar to the one above. It either matches non-tag (?>[^]+) characters or recurses over another tag (?R). Finally, the last part of the expression matches the close tag. 7. Callbacks
Certain matches in a pattern may require special modifications. In order to apply multiple or complex changes, callbacks can be used. A callback is used for dynamic substitution Strings in the preg_replace_callback function. They take in a function as a parameter to use when a match is found. This function receives the match array as a parameter and returns a modified string that is used as a replacement. As an example, consider a regular expression that changes all words to uppercase in a given string. Unfortunately, PHP does not have a regex operator that changes a character to a different case. To accomplish this task, a callback may be used. First, the expression must match all letters that need to be capitalized: /\b\w/
The above uses both word boundaries and character classes to work. Now that we have this expression, we can write a callback function: function upper_case( $matches ) { return strtoupper( $matches[0] ); }
upper_case takes in an array of matches and returns the whole matched pattern in uppercase. $matches[0], in this case, represents the letter that needs to be capitalized. All of this can now be put together using the preg_replace_callback function: preg_replace_callback( '/\b\w/', "upper_case", $str );
That is the power of a simple callback. 8. Commenting
Commenting is not a way to actually match strings, but it is one of the most important parts of regular expressions. As you dive deep into larger, more complex expressions, it becomes hard to decipher what is actually being matched. Using comments in the middle of regular expressions is the perfect way to minimize such confusion. To place a comment inside a regular expression, use the (?#comment) format. Replace “comment” with the word(s) of your choice: /(?#digit)\d/
It is especially important to comment regular expressions that you release to the public. Users of your regex will be able to easily understand and modify the pattern to meet their needs. It can even go so far as to help you decode it when revisiting a program. Consider using the “x” or (?x) modifier for free-spacing mode with comments. This causes a regular expression to ignore white space between tokens. All spaces can still be represented with [ ] or \ (a backslash and a space): / \d #digit [ ] #space \w+ #word /x
The above is the same as: /\d(?#digit) \w+(?#word)/
Always create well-documented code. Further Resources
Regular-Expressions.infoComprehensive website on regular expressions Cheat SheetInformative regular expressions cheat sheet Regex GeneratorJavaScript regular expressions generator
About the author Karthik Viswanathan is a high-school student who loves to program and create websites. You can view Karthik’s work on his blog, Lateral Code, and explore the most popular articles on the Web through his online Twitter application. (al)
© Karthik Viswanathan for Smashing Magazine, 2009. | Permalink | 34 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: expressions, php, regex, regular
- Tags:
- How-To
- php
- expressions
- regex
- regular
May 6 2009, 9:39am | Comments »