TG Designer

10 Responses to “Starting Out Organized: Website Content Planning The Right Way”

1. 

   Kristin Wemmer says:

   March 18th, 2010 at 1:03 pm

   So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions.

   [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]
   

   Your New Project: How It Goes All Too Often

   

   On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

   On day two you get the following:

   • A TIFF logo (in CMYK) via email;
   • A set of logo standards that include the RGB values, via email (separately);
   • A disc full of photos with various names (like “DSC09080978″);
   • A fax that labels the photos according to their file names;
   • An email that lays out the top and second-level navigation, as the client sees it;
   • A phone that makes last-minute changes to the top-level navigation;
   • An email with a DOC attachment full of text for various pages (but not all of it).

   And on day three you get an email that makes half of the junk you got yesterday obsolete.

   You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

   We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

   • Allows you to organize deliverables from various media;
   • Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
   • Helps you collaborate with all stakeholders;
   • Shows how the project is developing and what’s left to do;
   • Ideally launches you into the actual design and building phase.

   The Architecture: Every Brick Counts

   

   Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

   You can plan your architecture in many ways.

   Card Sorting

   

   Card sorting is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

   • What’s it for?
     To gather feedback on what pages should go where on your website.
   • What’s good about it?
     It’s a great way to learn the assumptions of multiple users.
   • What’s bad about it?
     The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
   • In sum
     One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

   A few resources to learn more about card sorting:

   • Card Sorting: A Definitive Guide
   • Card Sorting According to the US Government (official .gov website on usability)
   • Card Sorting: Mistakes Made and Lessons Learned
   • Word Matching

   Content Inventories

   

   A content inventory is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

   • What’s it for?
     To understand the context and purpose a website’s pages.
   • What’s good about it?
     Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
   • What’s bad about it?
     Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
   • In sum
     A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

   A few resources to learn more about content inventories:

   • Content Inventories as described on Usability.gov
   • Content Inventory (Boxes and Arrows)

   Paper and Sketchboards

   

   Sometimes paper just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

   • What’s it for?
     To quickly and collaboratively sketch out a website architecture.
   • What’s good about it?
     You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
   • What’s bad about it?
     Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
   • In sum
     Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

   A few resources to learn more about sketchboarding:

   • Sketchboarding (Adaptive Path)
   • Sketchboards + Prototypes (Slideshare)
   • More links on Brandon Schauer’s website

   Site Map Diagrams

   

   A visual site map is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

   • What’s it for?
     To visually explain the relationships between pages on your website.
   • What’s good about it?
     Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
   • What’s bad about it?
     The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
   • In sum
     A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

   A few resources to learn more about site maps and diagrams:

   • A Visual Vocabulary for Sitemaps
   • The Lazy Information Architect’s Guide to Making Sitemaps

   Which to Choose?

   There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

   When picking your method of architecture planning, consider these things:

   • How big is the website?
     The sheer size of some websites makes some of these methods cumbersome or impossible.
   • What type of website is it?
     The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
   • Who is your client?
     The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
   • Consider your workflow.
     Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

   A few tips on architecture planning:

   • Organize content according to user needs, not an organizational chart or how the client structures their company.
   • Give pages clear and succinct names.
   • Be sympathetic. Think of your typical users, called personas, and imagine them navigating the website. What would they be looking for?
   • Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
   • If you can’t succinctly explain why a page would be useful to someone, omit it.
   • Plan the architecture around the content. Don’t write content to fit the architecture.
   • When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
   • Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

   The Architecture Is The Home, Not The Content Itself

   Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

   Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

   HTML Wireframes

   

   Making your own wireframe is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

   • What’s it for?
     HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
   • What’s good about it?
     They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
   • What’s bad about it?
     Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
   • In sum
     HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

   A few tips on manual wireframes:

   • Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
   • Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
   • For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

   Plain Old Text

   

   Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

   • What’s it for?
     Text editors are a quick and easy way to organize text for a website.
   • What’s good about it?
     They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
   • What’s bad about it?
     The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
   • In sum
     Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

   A few tips on using text editors for website planning:

   • If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
   • Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.

   Slides

   

   As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

   • What’s it good for?
     Slideshow creators are used to easily sketch the structure and to link pages.
   • What’s good about it?
     They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
   • What’s bad about it?
     Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
   • In sum
     Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

   A few tips on using slideshow creators for website planning:

   • Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
   • Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.

   Jumpchart

   

   Jumpchart lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

   • What’s it good for?
     Jumpchart is a natural extension of manual HTML wireframes.
   • What’s good about it?
     It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
   • What’s bad about it?
     Jumpchart requires a paid subscription to plan larger websites.
   • In sum
     Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

   A few tips on using Jumpchart for website planning:

   • Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
   • Use the permission system to control who can see and who can edit.
   • For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

   Putting It All Together

   Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

   Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

   The Inevitable Revisions: Being Fleet of Foot

   

   Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

   This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

   • Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
   • Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
   • Bundle revisions. You’ll kill your budget if you make individual changes as they come.
   • Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
   • Make sure your contract specifies consequences for revisions. Be explicit.

   Collaboration: Bring Stakeholders Together or Die Trying

   If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

   Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

   • If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
   • Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
   • Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

   Explaining: Heel Meet Arrow

   

   You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

   • Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
   • Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

   Moving On: The Button That Launches a Thousand Ships

   So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

   A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

   Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

   A Few Parting Practical Tips

   • Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
   • Keep all deliverables in one place, and put them there as soon as you get them!
   • Ask for written changes, preferably via email so that they’re time-stamped.
   • Use Google’s advanced site search to quickly learn about the current website’s size and shape if your project is a redesign.
   • Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
   • Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

   Wrapping Up

   As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

   • Understand the goals of the website.
   • Gather resources.
   • Organize resources at top level and then at page level.
   • Assess your work based on user profiles.
   • Demonstrate your plan.
   • Get approval.
   • Move on.

   So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

   Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.

   (al)

   ---

   © Kristin Wemmer for Smashing Magazine, 2010. | Permalink | 39 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: ia, planning
   
2. 

   Dan Redding says:

   March 18th, 2010 at 1:34 pm

   It’s important to promote your design business. This is especially true when economic times are challenging, you’ve got news to announce, or you’re simply hungry for growth. Many forms of promotion are available to the modern designer – with banner ads and Google AdWords among the most popular. In this digital age, it’s easy for web and graphic designers to overlook one of the most effective and fun forms of promotion: the mail campaign. In an era when people are accustomed to communicating electronically, the value and meaning of something you can hold in your hands is greater than ever before.

   The promo mailer is perhaps most popular among illustrators and graphic designers working for editorial clients, which means that it is a powerful, untapped resource for some web designers. Likewise, it was probably a much more common practice ten years ago than it is today due to the rise of online promotion techniques – but those who ignore its potential are missing out on a tool with the power to gain new clients, increase web traffic, and attract publicity for your business and events.

   

   This promotional mailer for Ultra Design Co. includes 3-D posters (complete with 3-D glasses!). Designed by Humberto Howard/UDC

   Common types of mailers include postcards and brochures, but designers featured in this article have produced everything from faux newspapers to toys and even promotional eyepatches.

   In other words, this can and should be much more than just another opportunity to promote your work. It is also an opportunity to have a heap of fun, think outside the rectangle, and even present former and potential clients with a unique objet d’art. If you give them a piece of art and design that they’re unlikely to forget, then they’ll be unlikely to forget you.

   [Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]

   How to Create a Postcard

   

   Promo postcard by author and designer Dan Redding at Magnetic State

   The type of mailer that you send is limited only by your imagination, but the most common form is the postcard (we’ll look at other forms momentarily). Postcards come in a variety of sizes (standard is 4.25” by 6”) and are available on cardstocks in a variety of weights and finishes. There is no right or wrong way to create a postcard design, but one steadfast rule is that your greatest talents and skills should be in the spotlight. You’ll probably only have a moment to connect with the recipient of your card, so be bold and communicative.

   Your design work should go on the front – perhaps your strongest portfolio piece, or a small selection of them – along with your name, URL, and a list of services provided: ‘Illustration and Design,’ ‘Graphic Design and Web Design,’ etc. The back of the postcard usually includes a designer’s logo along with contact information. Some designers will print a huge logo or alternate design back here, while others will leave enough space for a personal, handwritten note. No matter what your design, make sure to consult USPS guidelines to ensure that your design is acceptable for mailing (any quality printing company can assist you with this).

   Avoid the Trash Can

   If your postcard looks like every other advertisement out there, it will probably end up in the recycling bin. In fact, it might not even make it past the intern that sorts the mail at that publication you sent to. Then it will get recycled, and in a week, your beautiful work will be five percent of a toilet paper roll on a shelf in a Wal-Mart in New Jersey. You don’t want that.

   

   This beautiful, hand-silkscreened promo mailer by Jay Vollmar has a personal touch.

   If your card makes it past the perils of the wastebasket and reaches the hands of your addressee – perhaps an Art Director at a record label or the CEO of a startup company – then you’ve done well. If he or she reads both sides and likes it enough to tack it onto the bulletin board for future reference, then you’re in great shape. And if you get a phone call the next time that Art Director has a freelance job, then you’re golden.

   Your design work is not junk – it’s your passion – so your promo shouldn’t be junk mail. Make your promo memorable and personal. When it lands in the hands of Steven Q. Client, present Mr. Client with a design that is compelling and appropriate to his industry. Write him a note that is friendly and courteous while reminding him that you hope to hear from him the next time an appropriate freelance project arises. An even better way to make a great impression and stay out of the rubbish bin is to make an unusual or useful product instead of a postcard.

   Print Your Design

   If you’re very industrious (and you’ve got a good printer), you might print your postcard yourself. But for most designers, it makes the most sense to pay a professional printer to print a few hundred copies of your design.

   Choose a print company that will provide accurate colors, high-quality printing, and accessible customer service. There are many of these available on the web; one fine example is Modern Postcard (author’s note: I am not affiliated, just a satisfied customer).

   Don’t be wasteful. Check your printer’s environmental policy (a responsible printing service will make this available). Investigate their commitment to sustainability, recycling, and environmentally friendly products. Make your mailers count. Send to recipients who will be interested in your services.

   Think Outside the Rectangle

   Some designers eschew the pedestrian postcard in favor of a more adventurous option. Here are some creative promotional items that defy expectations.

   

   This lovingly crafted mail package from Labzeus/Brian Neumann includes his portfolio on a flash drive. According to Mr. Neumann’s website, “The project involved package design (custom folder with die cuts), letterpress & foil stamping (letterset & folder), giclée printing (fold-out poster, 2-sided), chemical etching (flash drives) and hand embossments (sticker seal and poster front). I also sourced mailer boxes, custom labels and had branded packing tape created to round out the piece.”

   

   Promotional ‘business card’ eyepatch designed by Paul Coors for the now-defunct art gallery Publico

   

   These small buttons are emblazoned the famous logos of design hero Paul Rand. Why not make small gifts or accessories featuring your own work?

   

   Promotional paddleball toy by Jay Vollmar

   

   Philadelphia illustrator Hawk Krall sends out ‘mega-packs’ of colorful food-themed goodies. “I get the best response from these,” says Hawk. “I send out about 150-200 of these to my best/newest contacts, made up of 3 or 4 postcards, stickers, tearsheets, hot dog magnets, etc.”

   

   This newspaper-style promotional brochure from Hugo & Marie garnered the consultancy lots of attention both online and off.

   A word of advice: if you design an unusual item, says designer Derek Sussner, “take a mockup to the design consultants at the USPS before you show up with 700 things to mail, especially if they are dimensional, fragile, or out of the ordinary. That early consult can save some time, energy – and often, postage costs.”

   All About Mailing Lists

   So now you’ve got a few hundred copies of your beautifully designed postcard/portfolio brochure/novelty treasure map. Where do you send them? You need a mailing list. A good mailing list is something that you can purchase or develop on your own.

   Your mailing list should consist of both former clients and potential clients. You’re contacting former clients to say hello and to reinforce your presence in their minds. You’re contacting potential clients to introduce your work and convince them to visit your site, call you, and ultimately, hire you. With any luck, some of those potential clients will be transformed into enthusiastic former clients list by next year.

   

   Postcard by Weiman Design LLC

   How to Buy a Mailing List

   Just like printing companies, a simple web search will turn up many companies that sell mailing lists. In fact, many printing companies are ‘one-stop shops’ that will not only print your mailers, but can also sell you a mailing list and even stamp, address, and send your items for you. If you choose this route, make sure the company you buy from is a reputable one. Get their representative on the phone and ask them what they can offer that’s suitable to your target audience. Make sure their lists were compiled recently and contain accurate information. If the list is over a year old, how many of those contacts have changed employers or positions? If one name is spelled wrong or one office incorrect, your mailer will end up at the bottom of the wastebasket – along with the money you spent developing and printing it.

   

   This postcard by Sam Kuo represents the theme of Halloween in New York City. Mr. Kuo has designed many clever mailers that acknowledge pop-culture phenomena and current events.

   How to Build your Own Mailing List

   For many designers, D.I.Y. (do it yourself) is an ethos to live by. Researching and compiling your own mailing list can be a highly effective and personal way to customize a list to the specific needs of your business. Sending to former clients and contacts is the easy part. But who else can you send to?

   In order to build your own mailing list, you’ll need to identify a target audience. If you’re an editorial illustrator working for magazines, you might go to a bookstore and copy down the names and office addresses of art directors listed in the masthead of magazines you’d like to see your work in. If you’re a web designer, you might identify a target market (perhaps you specialize in promotional websites for filmmakers and videographers). Start Googling relevant companies and checking Contact pages for address listings. Don’t be afraid to get on the phone, introduce yourself, and politely inquire about an appropriate contact person who you might send to.

   

   Postcard by Hawk Krall

   High and Low

   When selecting targets for your mailing list, choose a wide range of recipients. You should choose people and organizations similar to those you’ve worked with before. These potential clients are likely to be suitable to your size, price range, and services. You should also contact your ideal clients – look for your ‘dream job.’ If there are any companies you’ve always wanted to work with, now’s the time to do some research and get in touch. Be resourceful and be professional.

   Snail Mail is Your Friend

   Whatever you decide to send, calculate accurate postage for each item and buy correctly valued stamps. When in doubt, take your item to the post office and ask questions.

   If you’re sending postcards, buy postcard stamps from the postal service. In the U.S., these stamps are cheaper than standard first class stamps and will save you a good deal of money on a bulk mailing.

   Send your mail so that it will arrive on a Tuesday or Wednesday (this rule also applies to your email newsletter). Not only is mail volume lighter after Monday, but work volume is lighter, too. Your recipient is likely to have a smaller amount of mail competing with yours for his or her attention on these days. He or she is also more to have a few more moments of attention to devote to something besides the day’s pressing work tasks.

   Examples from Sussner Designer Co.

   Sussner Design Company (aka SDCo) is a design firm that’s been doing superb (and award-winning) work in Minneapolis, Minnesota for over ten years. Derek Sussner – the company’s “proud owner guy,” according to their website – was kind enough to answer some questions about SDCo’s inventive promotional materials for this article.

   

   Sussner Design Company Promotional Brochure

   “We printed about a 1,000,” Derek says of these newspaper-like brochures of the firm’s design work. “Of those, we mailed out 700. We use the rest as our portfolio when we meet with new clients, or to send to new people we come in contact with. Reflections printed them for us. We have a great, long-standing relationship with them. We create all of Reflections’ promotional materials – so we print our own self-promo materials for trade. These brochures/mailers have been pretty successful for us. And they are a great way to stay in front of people we haven’t talked to in awhile.”

   

   Sussner Design Co. Ten-Year Anniversary Poster

   When Derek is asked whether he purchases his mailing lists or generates them in-house, he responds, “Both. The mailing list that works the best is the one we keep in-house. We add people we work with, have worked with in the past, people we’ve met and/or submitted proposals for, colleagues, industry partners, and a few networking friends. We also purchased a list (and we’ve renewed it several times). From what I can tell, we’ve never generated a face to face meeting from the purchased list.”

   

   Sussner Design Company Happy Hour Spinner

   The Sussner ‘happy hour spinner’ is a whimsical, functional, and extremely clever item that allows the user to put his or her happy hour destination in the hands of fate. The item was the follow-up to a Lunch Spinner, which Derek hopes to re-create soon. “We’re also looking to create a version the can be customized by the recipient – so they can be used by our out-of-town clients and friends.”

   Derek’s says the company’s goal for promo mailers “is always that people keep them – and even better – display them on or around their desk. And the best scenario is that it causes them to write you an email or call you with a new project. I also like it when the leftover promos have a life span so you can continue to use them, hand them out, or send them with other capabilities presentations.”

   

   Moving announcements and event notifications are other common types of promotional mailers.

   Derek’s advice on the most important attribute of a successful mailer is simple: “It has to grab someone’s attention. Hopefully, it slows the motion of the arm down – if someone notices it on their way to throwing it in the garbage.” The truth of the matter is that all printed promotional matter – no matter how clever – is ultimately disposable. That’s why promo items need to create a mental and emotional impact on the audience’s mind as quickly and deeply as possible.

   In Conclusion

   Exceptional design work is promotion in itself. Keep your clients happy and follow your own path as an artist and craftsperson. Word of mouth will keep clients and fans of your work coming back to hire you or check in on the evolution of your creative talent. In fact, a designer at one popular screenprinting and graphic design studio contacted for this article said, “You’ll be interested to discover that we actually do not have any promotional material! Our posters have worked as an effective promotional material for us for years. Don’t ask me how, but they do.” The truth is that this award-winning studio stays on top because its designs are exceptional and original each and every time. It has also been in business for many years – accruing clients, awards, and publication in popular design magazines all the while.

   However, for designers that work at new or growing businesses – some of which launched during a daunting economic downturn – promotion is a valuable tool. It can also be a great way to express your personal creative energy between jobs for professional clients.

   Besides, Thomas Edison once said “Everything comes to him who hustles while he waits,” and Jay-Z said “You can’t knock the hustle.”

   So promote, promote, promote!

   ---

   © Dan Redding for Smashing Magazine, 2010. | Permalink | 35 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/16/how-to-create-a-promotional-snail-mail-campaign/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: campaign, mail, promo
   
3. 

   Kejun Xu says:

   March 18th, 2010 at 2:25 pm

   China is a country with five thousand years of civilization. It is a multi-national entity extending over a large area of East Asia. China’s cultural influence extends across the continent, with customs and writing systems adopted by neighboring countries including Japan, Korea and Vietnam.

   China has gone through numerous ups and downs and twists and turns, from wealthy and prosperous (as during the Tang Dynasty back in 618–907 AD) to powerless and colonized (as during the Qing Dynasty, just around 100 years ago). Now China is reopening its door to the world again, embracing the latest trends, concepts and technologies, the World Wide Web being one of them.

   In our interviews with six well-known designers in China, each of whom wears different hats, the recurring theme was that China’s Web design industry is rising like a spiral from imitation to innovation and user-centered design.

   
   Chinese Web Design: Dongpai

   [By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]

   State Of Affairs

   The designers we interviewed had much to say about the direction of Web design in China, the status quo and trends. The individuals are spread out across four major cities in China, and they are:

   • Yu Guo
     Former chief designer at Baidu, China’s largest search engine.
     Current city: Beijing.
   • Whitecrow Zhu
     Co-founder of UCDChina, and principal product experience designer at Alipay, a subsidiary of Alibaba.
     Current city: Hangzhou.
   • Junchen Wu
     Co-founder of UCDChina, and director of products at Tuniu Travel.
     Current city: Nanjing.
   • Lytous Zhou
     Visual designer, UI lead at CK Telecom and author of the book UI Evolutionism.
     Current city: Shenzhen.
   • John Woo
     Lead of the user-experience team at Google China.
     Current city: Beijing.
   • Rex Song
     Freelance information architect; co-founder of UCDChina.
     Current city: Beijing.

   The interviews were conducted via phone, Skype and Google Talk. Questions were sent to the designers before the interviews to give them context, but the actual interviews were semi-structured. Being interested in the scope of their thoughts, we asked them not to limit their answers to just “Web design.” The designers were told that Web design here refers not only to visuals, CSS and the front end, but also the back end, infrastructure, design rationale, cultural elements, user-experience design and research and so on. We wanted the designers to express their thoughts as openly and as creatively as they wanted to.

   
   MFM Moliyo, a game website.

   Question: How do you see the status quo of Web design in China?

   Yu Guo: Almost 70% of Chinese Internet users are under 30 years of age. They are young, open, and they adapt to new things quickly. They like to play games online and enjoy looking for ways to entertain themselves online. So, you may see visually attractive elements on many Chinese websites, the purpose of which is to cater to this group of users.

   Whitecrow Zhu: About two years ago, we witnessed a huge trend where designers in China were imitating Korean websites in their use of Flash. Flashy and colorful design was once the trend. However, with the introduction of Web 2.0, websites in China are improving. Users are exploring the content as opposed to exploring solely the visuals. Visuals alone do not satisfy Chinese users any more. They are looking for useful and helpful content, and they want to contribute to the websites as well.

   Junchen Wu: It’s on an upward trend, getting better and better, but like a spiral. In terms of Web knowledge and techniques, Chinese designers are on par with designers in Western countries, but they have not reached the point of fully utilizing that body of knowledge. An excellent example of this is user research. Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.

   Lytous Zhou: Well, two points. One, limited budgets are very common in China’s Web design market. As a result, Web design ends up with overwhelming visuals to attract attention. It might be flashy and pretty at first sight, but the information architecture might not be well planned, and usability can be poor. Regarding the second point, Chinese Web design tends to be very localized, as it should be.

   
   Chinese web design: Midea Microwave Oven

   For example, Alipay, a byproduct of Taobao, became a successful standalone product because it took into consideration the purchasing behavior and psychology of Chinese users. China is a big country, and some websites are successful because they cater to particular geographical locations. The other side of the coin is that Chinese Web design is not quite international yet. It’s such a huge market and can sustain itself without even reaching out to the international market. You will see that UCDChina.com and a lot of other Chinese websites don’t have English versions, even in their navigation.

   John Woo: China has not formed one distinctive Web design style yet, because the country is big, and Chinese users are complicated in many ways. The impression of foreigners of Chinese Web design might be that it is busy and flashy, but I take it as practical. When Flash design was the fashion, many designers (or their bosses) wanted to use Flash to make their Web pages attractive. When SNS was booming in the US, it was soon introduced in China, together with the Facebook and Twitter design styles. When it’s practical and useful, many Chinese people will just borrow the concept and develop it further. Baidu, QQ and Taobao won business and respect this way.

   Rex Song: China has a large population, and the saying “the more, the merrier” applies to its Web design. You will see some Web pages that are busy and cluttered, with designers or stakeholders trying to put everything on the page. The other thing is that, currently, the primary motivation to go online for the average web surfer in China is entertainment. So, Web designers in China tend to make their websites play-ish, SNS-ish and visually attractive, as we saw with the popular trend back in 2004 to imitate Korean Flash websites.

   
   Shoebox

   Chinese Web Design In A Nutshell

   So, do you now have a rough idea of the status quo in Chinese Web design? Although our interviewees tended not to reduce Web design in China to certain patterns, we summarized a few bullet points based on the topics most frequently mentioned in our interviews.

   1. Flash-Heaviness: Born of Imitation

   Flash design has been a source of constant debates for years. The fact that optimizing Flash objects for search engines can be difficult is a major turn-off for some designers.

   However, Flash was called out, and it’s the most frequently mentioned keyword in our interviews. Back in 2004, when Korean websites were all in Flash, Chinese designers and business owners considered Flash the “fashion.” Rex Song mentioned that when this trend was extremely popular a few years ago, you could even download ready-made Korean-style Flash ZIP files from online stores for little money, so that you could do it quick without spending a lot of effort.

   Google is renowned for its focus on simplicity. But take a peek at the nuances that distinguish Google China and Google US:

   

   The design of Google China is a bit more vivid than that of Google US, with a hint of animation added to the former to enhance the richness of Google search. By the way, this concept was first implemented on Google Korea and Japan, although both of them have since reverted to a more static interface.

   Although Flash implementation began as imitation, it is now increasingly featured in the portfolios of design studios and freelancers, on websites to launch new products and for products geared to the younger generation.

   Shanghai Vive is an old Shanghai cosmetics company that is trying to rebrand and attract high-end consumers. Its branding uses Flash heavily, depicting an elegant and high-class life.

   

   Cool Bear Hi, one of the product lines of Great Wall Motor, has a Flash website to promote its new car release.

   

   To accommodate low-speed Internet connections, Cool Bear Hi does a good job of showing the progress of the loading Flash.

   

   The text below the car on Cool Bear Hi changes as more Flash loads. With the chipper text there to assuage visitors, the loading Flash doesn’t seem that boring to watch. Above are a few screenshots we took, and below is what it says at various points in the loading process:

   • At 4%: “Choose Cool Bear Hi. Share your happiness.”
   • At 22%: “Wear a smiling face every day, and say Hi to everybody.”
   • At 41%: “Cool Bear is impatient, ‘Why hasn’t anybody taken me home!’”
   • At 70%: “Book a test-drive appoint. Get your special gift and reward points.”

   Mian Dian Fang, a ready-to-serve breakfast company, also uses heavily Flash on its corporate website. The animation gives the steam bread and “baozi” a human touch, having them do morning exercises and other activities. The metaphor persuades customers that the company serves a healthy breakfast.

   

   Let’s look at how Mian Dian Fang shows its loading progress:

   

   The loading animation parodies the yeast process: the flour gets bigger and bigger, until you can see a full-blown website.

   Shoebox, a shoe brand for the younger generation in China, uses Flash across the whole website to show its grasp of fashion. In addition, the sketched art on the home page and old brown newspaper color for the background set up Shoebox’s philosophy: taste is an attitude of life; start with the simple; fashion is a kind of sport; start with Shoebox.

   

   Lenovo Mobile O1 takes advantage of personalities and embeds their stories in Flash to present the features, functionality and usefulness of its new product, Lenovo O1.

   

   Artlans, an interactive design studio, also uses Flash, especially for its menu buttons, the call to action and the language switcher. Design studios may not want to use Flash all over their portfolios, but rather in a few key places to show their skill at using Flash for clients.

   

   Idea Design, a design studio that uses Flash in full swing.

   

   2. Designing for Entertainment

   We really liked our one-on-one interviews because not only did we hear different stories from different people, but we also heard certain other stories from everyone. For example, Whitecrow, Lytous, Yu, and Rex all talked about the “entertainmentalization” of Chinese Web design. “When a social networking website comes to China, it must become a game website,” said Whitecrow.

   A case in point is a feature provided by Kaixin.com (Kaixin means “happy”), which recently spurred a social phenomenon in China: “Stealing vegetables.” Kaixin pretty much copied Facebook’s navigation and user interaction. But it’s different in what it allows you to do: set up your “Happy Farm,” build your house, grow your own vegetables and then steal your friends’ vegetables when they are ready to be harvested. Some dedicated players even made Excel spreadsheets to track their friends’ harvest season in order to expedite stealing. It’s like any other video game but embedded on a social networking website, allowing you to play with a wider variety of users. “Stealing vegetables” became so popular that it drew the attention of censors from China’s Ministry of Culture. Under pressure from the Ministry, the game is now called “Picking vegetables,” a less offensive euphemism for mainstream Chinese culture. Online players still prefer the more accurate name.

   Happy Farm
   

   Happy Ranch
   

   Happy Orchard
   

   The application was recently added to Facebook, but it is only for Chinese-speaking users at this time.

   Lipton Milk Tea features a “Hug Relay” game that you can play right on the website. Hug your friends by validating your account on Renren, another social networking website in China, and gain hug points.

   

   Once you accumulate enough hug points, you can shop on the online store and purchase gifts, an incentive to maintain momentum in the game:

   

   Like Lipton, M&M China also uses an online “relay” game to engage visitors to its website.

   

   I Love G3, a website from China Mobile to promote the 3G network and 3G cell phones, presents an animated Flash questionnaire for users to play around with.

   

   After you have answered a series of questions such as, “How would you kill time on a train?” and “How would you cross the ocean?” the system analyzes your personality and recommends 3G cell phones to match you:

   

   3. Designing for Clicks

   Unlike Latin and Germanic languages, Chinese is rooted in hieroglyphic characters. Typing in Chinese on an alphabet-based keyboard can be slow, especially for middle-aged and older users. So, you will see that some website user interfaces are extremely busy: text and image links everywhere—”the more, the merrier,” as Rex Song points out. These websites are designed for clicking, as opposed to searching (although keyword search is an essential component of any information-rich website).

   Yoho, an online shopping platform for the younger generation, takes advantage of every sliver of real estate on the page to promote its products. Yes, a search box is in the top-right for you to search, but with all of these images and hyperlinks, it’s more enticing to just click, click, click.

   

   It’s the same with China Visual, a visual design resource portal. The home page presents all sections of the website as text and image links, giving you a quick peek of the content.

   

   NetEase (aka 163.com), one of the largest news portals in China, takes full advantage of the Web reading pattern of Chinese users: i.e. clicking.

   

   Above is a screenshot of NetEase’s home page. The Chinese lunar New Year was approaching when we were writing this article, and you can see that this website uses red, a color symbolic of festivals, for the background. The page is filled with headlines of news and featured articles as well as ad spots. You can perform a search at the top of the page, but by scanning the entire page, you get a sense of what’s happening today. And if you’re interested in any of the headlines, just click—that easy.

   All that said, many websites are working to unclutter their UI, increase the font size and line spacing and enhance readability. “Sina.com, if you have been paying attention to its redesigns all the way back to the late 1990s, is doing better and better at information design,” said John Woo, lead of the Google China UX team.

   4. Designing for Culture

   When asked, “Can the world learn anything from Chinese web design?” Lytous Zhou answered without hesitation: “Culture. The Chinese respect Dao, and we have our own set of values and mores. Websites targeted to the Chinese market should follow the online habits and aesthetics of Chinese users. For example, cultural symbols, calligraphic elements and festivities: all of these could be integrated into a Web design if applicable. A lake may just be a lake, but associating a fairy tale with a lake makes it prettier.”

   True, if you add a fairy tale and human touch to a lake, the user’s perception of it would change.

   Pizza Hut China, which is an example I like to use every time I explain cultural differences, uses Chinese elements heavily all over its website: in the color scheme and family theme. Warm reds and yellows are colors symbolic of festivity in China, and the family dinner is highly regarded in Chinese society.

   

   By comparison, Pizza Hut US highlights fast food and online ordering on its home page. Red is also Pizza Hut US’ theme color, but it’s more solid, darker and cooler than the warm red on the Chinese website.

   

   Same with McDonald’s China website, where one main menu is dedicated to the “Happy Family Party.”

   

   Tong2 Studio has a unique look and feel with this traditional Chinese floral pattern on its background.

   

   Six Station, whose home page is a Chinese ink and watercolor painting in Flash, opens its creative and innovative mind to clients.

   

   Dongpai Design, an interactive design studio, has an interesting mini-website that borrows from the “Three Kingdom” story (a period of Chinese history) to communicate its design philosophy and values.

   

   While John Woo points out that incorporating national and cultural elements into design is not limited to the Web, he acknowledges the practicality of Chinese Web design—that designers will borrow anything that might be useful to them or their users.

   Want An Even Bigger Showcase?

   Not enough visuals for you? Here is a whole bunch of more websites to give you a better sense of design in China.

   UI Seven
   A design studio.

   

   IDT
   A personal showcase that records the designer’s 12-year love affair with his girlfriend (now wife) and his own professional growth as the Web evolved during those years.

   

   Youguan Cookies
   Also uses Flash animation to promote its product line.

   

   Xin Hongru
   An interactive design agency that uses both Chinese elements and Flash to showcase its work.

   

   Thinkpad Edge
   A new product line of the Thinkpad laptop.

   

   Moliyo MFM
   An online video game website, designed for clicks.

   

   361 Sports
   Borrows the theme of the 2010 Guangzhou Asian Games for its home page.

   

   Dove Chocolate China
   Uses Chinese elements and the lunar New Year to decorate its home page.

   

   BangbangWa
   A snack company whose website is rich in games and Flash.

   

   Brain Town
   A personal portfolio website.

   

   ShuXia
   A platform to showcase the creations of members.

   

   Jossy Jo
   A clothing brand.

   

   Apsou
   An interactive consulting agency.

   

   Mole Lele
   A cartoonist’s personal website.

   

   WEBE7 Enterprise Network Interactive
   A portfolio website.

   

   Sanshen Toscana
   A real-estate website that relies heavily on Flash.

   

   Wotoon Design
   A design agency.

   

   Shaopan Film Studio

   

   X’mas Tree Workshop
   A mini games website where you can create your own Christmas tree and send it as an e-card to your friends.

   

   The GF Space
   A design agency.

   

   HAHA DIY
   A neat website for DIY home ornaments.

   

   Yimei Cross Stitch

   

   Happy Basket
   Designed for clicks.

   

   WuHansoufang
   A pretty cool Flash website.

   

   Chateau Junding
   A domestic wine brand.

   

   TIIDA
   Incorporates a family theme into its Flash design.

   

   Magic Workshop
   A kids clothing company, using Flash-animated cartoons to capture the company’s culture.

   

   JJ Ying
   A neat personal portfolio website.

   

   Beijing Orange Advertising
   A creative showcase website.

   

   Nescafe
   Another website rich in both games and Flash.

   

   Yee Chino
   A restaurant.

   

   Gold Chino
   The sister restaurant of Yee Chino.

   

   Guoguo Diary
   A fairly simple but creative personal website.

   

   Rancho Santa Fe
   A real-estate developer in Shanghai.

   

   Challenges, Opportunities, Trends

   Challenges

   When it comes to challenges in the Internet industry, one of the frustrations mentioned by Whitecrow, Junchen, Rex and Lytous is government censorship. YouTube, Twitter, Facebook, and Flickr are all blocked in China because some of their content is considered “inappropriate.” And for compliance purposes, “Sina Microblogging has a team of humans whose job is to censor content, in addition to machine filtering,” says Whitecrow.

   The international debate on how free and open the Internet should be is ongoing (see Nussbaum, 2010), and there is still no universal “policy” for the Internet. But without an open environment, China could be impeded from learning from and catching up to other countries.

   Still, every coin has two sides. “It limits your freedom,” says Whitecrow Zhu, “but meanwhile, it has a positive effect on UI design and content presentation. There is less room for gimmicks. It forces you to concentrate on useful content and how to present your content.”

   The other challenge mentioned by Junchen Wu and Rex Song was the lack of quality educational programs: “Vocational schools might teach you how to use Photoshop and Dreamweaver and how to code in HTML, CSS and JavaScript, but they may not teach you design thinking and the logic behind design. The World Wide Web is still young, and at higher-education institutions we have not seen any Information Architecture or User Experience Design degrees yet.”

   Our interviews did point to the fact that designers in China have not yet taken full advantage of rigorous research methodologies. Take what Junchen Wu said about the status quo of Chinese Web design: “Many designers know the concept, but they hardly include it in their design practices. They know of usability testing, but they rarely do it.”

   And in response to the question, “How do you convince stakeholders that a design is right?” Rex Song brought up the notion of “guanxi” and trust, and he thought the concept A/B and multivariate testing was “Western” and might yield a “low ROI.”

   This is understandable on the one hand, because China has a long history of interpretive reasoning, be it Confucianism or Daoism. On the other hand, Chinese Web designers in general have a long way to go in using hard data to back up their design choices.

   One might argue that the designer’s job is simply to design, the fact is that you need reasons to support your decisions that affect layout, color scheme, positioning of elements, user interaction and so on. Only “25% of the designers who relied on their personal opinion were right. A research study conducted by the Neilsen Norman Group (2009) concluded that “you’d be better off tossing a coin than asking advice of these people.” This cannot, of course, be said of everyone, but it speaks to the importance of data.

   Opportunities and Trends

   We were inspired in all six interviews by the discussion of the opportunities and trends in Chinese Web design.

   Question: What trends do you foresee in Chinese Web design?

   Yu Guo: E-commerce, I would say. Do you know Taobao? Some of my female colleagues have bought soy sauce, pickles and snacks that I’ve never heard of at Taobao. They love it. This is the market in China, and there is demand. I think every company should take advantage of it.

   [Authors' note: Taobao is one of the largest shopping platforms in China to connect buyers and sellers of "baobei" (treasures). Out of curiosity, we searched for chocolate on Taobao and found those seasonal truffles that are sold around Thanksgiving and Christmas exclusively at Costco, the largest warehouse membership club in the US.]

   

   Whitecrow Zhu: I think Web design in China is moving towards integrating more and more user-generated content. Douban, an online book and movie club, is a good example. Like YouTube, the majority of the website’s content is user-generated, and it has been pretty successful. Douban existed before YouTube, by the way.

   

   Several years down the line, e-commerce in China will be in full bloom. E-commerce is not tied to any ideology other than simple economics and consumer interest. It has less of a chance of being censored, and people demand it.

   Junchen Wu: Creating more value for customers. Listen to what they say, look at what they do, do what they do and think what they think. My belief is that Chinese Web design is getting better and better, in an upward-spiral trend.

   Lytous Zhou: Focus on users and your service. I don’t think we’ll see anything unnecessarily extravagant, like crammed content and excessive visuals. Features, functionality, industry standards and meeting customer needs are the trends, I believe. And you’ve got to think outside of the box.

   John Woo: Functional, useful and usable. Making websites flashy, with lots of reds and greens, is absolutely unnecessary. Focus on user essentials and user needs. Though not a website, the Tianyu (KTouch) cell phone is very popular in China these days, and I bought six for my family: four with big font display and handwriting input for my parents and parents-in-law, one with 3x optical zoom and an 800 MP camera, and one that looks like lady’s powder case (see picture below). Tianyu was a “Shaizhai” manufacturer but is now a registered company with a pretty good share of China’s cell phone market. Why? It focuses on user essentials and basic needs. Websites are no different.

   [Authors' note: "Shanzhai" literally means "villages in the mountain with stockade houses." The use of shanzhai became popular with the outstanding sales of shanzhai cell phones. Although shanzhai companies do not use branding as a marketing strategy, they are known for their flexibility in design to meet specific market needs. Shanzhai cell phones can be sold at prices much lower than normal cell phones. (Wikipedia, 2010)]

   

   Rex Song: In terms of online trends, we will develop our own Web design style using the backdrop of Chinese culture. Formatting-wise, we will be in line with the mainstream world, creating more user-centered designs and offering a better user experience.

   Wrapping Up

   The Web in China is young, and Chinese designers are playing catch-up. Despite the challenges, we see even more opportunities: smart people, a big market, increasing demand, flexibility and innovative and user-centered design thinking.

   On many Chinese websites, we’ve already seen the “upward-spiral trend from imitation to innovation and user-centered design”. Innovation in China is a constant goal. It is being pushed in President Hu Jingtao’s State speech all the way down to classroom curricula. Says Bruce Nussbaum (2009), “To its credit, China has made design a national priority and is pouring billions of yuan into design education.”

   Through our interviews, we also collected some resources that our designers would like to share with Smashing Magazine readers (including those in languages other than Chinese).

   Events

   • UCDChina Book Club Meetups
     These monthly meet-ups occur on the third Sunday of every month in China’s eight major cities: Beijing, Shanghai, Nanjing, Shenzhen, Guangzhou, Hangzhou, Xiamen and Chengdu. They set a topic for each month, and club members can borrow the books from UCDChina library and return them at the next meet-up.
   • UCDChina Annual Conference
     The first conference was held in Guangzhou in 2009. It’s free to attend.
   • UPA China Annual Conference
     The UPA China Chapter conference, different from UPA International. The conference is usually held on “Usability Day” every year.
   • Designer and Developer Front End Technology Forum
     A biannual forum for designers and front-end developers in China.

   Books, Blogs and Online Resources

   • UI Evolutionism
     About HCI design on mobile devices, written by local designer Lytous Zhou.
   • Emotional Design: Why We Love (or Hate) Everyday Things
     A classic must-read about design and emotion.
   • Designing Web Interfaces: Principles and Patterns for Rich Interactions
     A book about design patterns for building Web interfaces with rich interaction.
   • Yahoo! Design Pattern Library
     This website was credited by our interviewees as “one of Yahoo’s most important contributions to the design industry.”
   • Douban
     An online book and movie club, mostly user-generated comments and criticism.
   • iFeng
     Phoenix News Media, a new portal.
   • Since 1984
     About design and beautiful things in the world.
   • Metroer
     About reading, including “design reading.”
   • Mooogu
     About industrial and interior design. A good website to find inspiration.
   • Apple4us
     Community blog for tech demos, reviews and ideas.
   • Ffffound!
     An image bookmarking website.
   • Notcot
     For your ideas, aesthetics and amusement.
   • We Heart It
     A website that lets you create an online album from your favorite images and videos.
   • Core77
     Design magazine and resource.
   • Engadget
     A Web magazine with obsessive daily coverage of everything new in gadgets and consumer electronics.
   • The Design Inspiration
     Like its name suggests…
   • Dbcut
     A Korean design community portal.

   Your Voice Is Important to Us

   What do you think about the Web design in China? We couldn’t cover everything in one post, and we are sure we have missed some perspectives. We look forward to hearing your feedback!

   Related Posts

   You may be interested in the following related posts:

   • Shalom! A Showcase of Web Design in Israel
   • Showcase of Web Design in Russia
   • Showcase of Web Design in Germany
   • Showcase of Web Design in Mexico
   • Showcase of Web Design in Ireland

   About the Authors

   This guest post was written by Kejun Xu and Hendry Lee.

   Kejun Xu, an information architect devoted to user experience research; a user researcher dedicated to user-centered design; a usability engineer engaged in making the Web easier to use; and a translator and interpreter who loves inter-cultural communication and bridging people together. She designs for her users, making their lives easier and hassle-free. She blogs once a while, about UXRnD, to record the auto parts and loose diamonds, in case she forgets.

   Henry Lee helps people overcome strategic and technical challenges in starting and growing their blogs. Read more of his blog tips, including website building with blog software, strategies, hosting, social media, Web writing, design and more. You can also hire his team at Marketing Loop to build a Web presence for your business or personal website. Stay in touch with Hendry by following him on Twitter.

   (al)

   ---

   © Kejun Xu for Smashing Magazine, 2010. | Permalink | 132 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/15/showcase-of-web-design-in-china-from-imitation-to-innovation-and-user-centered-design/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: china, showcases
   
4. 

   Sven Lennartz says:

   March 18th, 2010 at 3:23 pm

   Every now and again we showcase fantastic favicons, those tiny pieces of art that you’ll find in your browser’s address bar or when rifling through your bookmarks. These little gems are important because they serve as visual indicators to help visitors easily identify content in their browser. That aside, favicons are just nice to look at, and way too many websites don’t make use of them. We want to change that, which is why we are presenting what is now the ninth episode in our favicons series: a small article with tiny images and fast loading time… for a change.

   

   We’ve written numerous articles about favicons in the past. If you’d like to find out more, feel free to look at these posts:

   • Favicon Episode 8
   • Favicon Episode 7
   • Favicon Episode 6: Black, Abstract and Hand-Drawing
   • Episode 5: The Delicate Beauties
   • Part 4: Creative Favicons: Tiny Artwork
   • Part 3: Creative Favicons: When Small Is Beautiful
   • Part 2: Inspire Yourself: More Creative Favicons
   • Part 1: Inspire Yourself: 50 Remarkable Favicons

   Any picture’s merit is debatable. But notice that these favicons were chosen not simply for their beauty and originality; it was important to us also that each fit the overall website design and logo. Pay attention to the details of the design.

   All favicons are linked, of course, to the websites from where they were taken (if they still exist). Click on them to get more insight into how favicon design relates to overall layout design. The order here does not indicate any ranking.

   	Tableau Public
   	Gnash Project
   	Top Roundups
   	Elastic Tabstops
   	i-on interactive
   	Arc Technology Group
   	Kodingen
   	Sound Light Vision
   	Highcharts
   	Faces
   	Photoscape
   	London Reviews
   	Open Faces
   	RocketTheme
   	Techbridge
   	Soft eXpansion
   	Screwturn Wiki
   	Nimbupani
   	Spoonjuice
   	Universität Freiburg
   	Paragon Software
   	iMasters
   	TechEBlog
   	FitBit
   	DropBox
   	Axialis
   	Swebapps
   	Acquia
   	Snipt
   	MIX Online
   	Second Market
   	Open X
   	Filemail
   	55Eleven
   	Onehub
   	Projectbubble
   	Projektwerk
   	Medienlab
   	Iconshock
   	Splitweed
   	Goby
   	M1 Design
   	PageStat
   	Commadot
   	Babbelblog
   	Tammy Hart
   	Toufee
   	Lion Framework
   	High Beam
   	Mixxt
   	CMSExpo

   And finally, all the favicons in one picture:

   

   (al)

   ---

   © Sven Lennartz for Smashing Magazine, 2010. | Permalink | 63 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/14/50-fantastic-favicons-episode-9/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: favicons, showcases
   
5. 

   Aygul Zagidullina says:

   March 18th, 2010 at 3:40 pm

   Do you remember?.. The first time you played with pieces of modeling clay, melting them in your hands and going deeper and deeper into the colourful plasticine world where your imagination was the only limit. Since the 19th century, when Franz Kolb and William Harbutt independently of each other invented plasticine (modeling clay), it has been used in almost all fields of art: illustration, web design, typography, claymation, installation design.

   Plasticine artworks can be found just everywhere: advertisements, book/magazine as well as CD/DVD covers, movies / TV series, music videos, computer / console games, and even web design elements. Below you will find a collection of beautiful plasticine artworks that hopefully will inspire you and give you an idea about how this material can be used in your next design project.

   [Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

   Plasticine + Photography / Illustration

   Advertising

   Nike Italy by Wieden+Kennedy Amsterdam (Netherlands)

   

   Faber Castell plasticine Advertisement by Unitas RNL Santiago (Chile)

   

   

   Onida Washing Machines Advertisement by McCann Erickson Mumbai (India)

   

   

   Freya Lingerie Advertising by Stuart Jackson

   

   

   

   Becks Advertisement by Scholz+Friends Hamburg (Germany)

   

   

   Forma Total Gym by Artplan (Rio de Janeiro, Brazil)

   

   

   Nicorette Advertisement by DRAFTFCB KOBZA (Austria)

   

   Aniquem Advertisement by McCann Erickson Peru

   

   Stamyl Advertisement by Maruri Grey (Ecuador)

   

   

   

   Magazine Cover Design

   Esquire (March 2009) – 30th birthday of plasticine character Morph

   

   Poster Design

   “The Summer Reading Club” Poster for The Toronto Public Library by Barbara Reid

   

   “Young Audience” Poster for Theatre Direct by Barbara Reid

   

   Flyer for The Ovnis by Pablo Alfieri

   

   Book Illustrations

   Barbara Reid

   

   

   

   Artworks

   Amy Vangsgard

   

   

   

   

   Irma Gruenholz

   

   

   

   

   Anna Villalba

   

   

   

   Manuela Martin

   Charlotte Oh

   

   

   

   Tammy Durham

   

   

   

   CactuSoup

   

   

   

   Plasticine + Animation = Claymation

   Clay animation, or claymation as it is popularly known, is one of the types of stop-motion animation which is extremely laborious. Each animated piece is sculpted in plasticine clay. Some of the best-known clay-animation artists and studios include Will Vinton, Aardman Animation, Art Clockey and many others.

   Animatied Movies / TV Series

   The Gumby Show (1957 – …)

   Closed Mondays (1974)

   Morph (1977 – …)

   The Adventures of Mark Twain (1986)

   Wallace and Gromit (1989 – present)

   Wallace and Gromit in “A Matter of Loaf and Death” (2008)

   Creature Comforts (1989)

   Mona Lisa Descending a Staircase (1992)

   Loves Me… Loves Me Not (1992)

   Purple and Brown (2006 – …)

   Shaun The Sheep (2007 – …)

   Chess Game “Poole – HAL 9000″ (from the “2001: A Space Odyssey” movie)

   Pigeon Pilfer (2009)

   Plasticine Crow (1981) [RU]

   Last Year’s Snow Was Falling (1983) [RU]

   From Iljitsch to Kuzmich (2000 – …) [RU]

   Movie / TV Opening Title Sequences

   Freaked

   

   

   Spokoynoy nochi, malyshi! [RU]

   Advertising

   Levi’s

   Sony Bravia: Play-doh

   Chevron Cars

   American Express: Modelling Clay by OgilvyOne London

   Xbox 360

   Music Videos

   Frank Zappa – Baby Snakes (1979)

   John Fogerty – Vanz Kant Danz (1987)

   Grizzly Bear – Ready, Able (2009)

   Paolo Nutini – Pencil Full Of Lead (2009)

   Computer / Console Games

   Claymates (1993)

   

   ClayFighter (1993)

   

   Primal Rage (1994)

   

   The Neverhood (1996)

   SkullMonkeys (1998)

   

   Platypus (2002)

   

   Gumby vs. the Astrobots (2005)

   

   Cletus Clay (2006)

   Wallace & Gromit’s Grand Adventures (2008)

   Shaun The Sheep

   Plasticine + Web Design

   Microsoft: {You shape} it

   

   lauren.brandcubator

   

   malum

   

   Plastilina Creativa

   

   Zaramella

   

   Plastilin Event

   

   Plasticine + Typography

   

   

   Further Resources

   • http://www.bombastudio.pl/index.php?/identity/plastelinowa-typografia-new/
   • http://www.behance.net/Gallery/plasticine-typo/310776

   Installation Design

   James May’s “Plasticine Paradise” garden at RHS Chelsea Flower Show 2009 on May 19-23, 2009 in London, England.

   

   

   

   Plasticine Art Tutorials

   • “Working With Plasticine” Tutorial by Barbara Reid
   • “Making Plasticine Pictures Video” Tutorial by Barbara Reid

   What do you think?

   What is your opinion on plasticine art? In case any exceptional plasticine works haven’’t been covered, please feel free to use the comments area to share your thoughts and suggest other beautiful works. We are looking forward to your feedback and your thoughts!

   ---

   © Aygul Zagidullina for Smashing Magazine, 2010. | Permalink | 45 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/13/plasticine-art-showcase-shape-your-imagination/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags:
   
6. 

   Smashing Editorial says:

   March 18th, 2010 at 3:46 pm

   Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

   The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

   You may be interested in the following related posts:

   • 50 Fresh JavaScript Tools That Will Improve Your Workflow
   • 45 Powerful CSS/JavaScript-Techniques
   • 70 Useful AJAX And JavaScript Techniques

   [By the way: The network tab (on the top of the page) is updated several times a day. It features manually selected articles from the best web design blogs!]
   

   Calendars and Timelines

   jDigiClock – Digital Clock (HTC Hero inspired)
   jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget.

   

   jQuery Sliding Clock v1.1
   jQuery transpearant Slider clock with CSS sprites.

   

   Date / Time Picker
   Note that this control is not designed to work in IE6; although it will function correctly in most cases, the positioning of the calendar may be way off depending on how your page is styled.

   

   JavaScript Debugging and Validation Tools

   Venkman JavaScript Debugger project page
   Venkman is the code name for Mozilla’s JavaScript Debugger. Venkman aims to provide a powerful JavaScript debugging environment for Gecko-based browsers namely Firefox 3.x, the Netscape 7.x series of browsers, Netscape 9.x series, Mozilla Seamonkey 1.x and Mozilla Seamonkey 2.x. It does not include Gecko-based browsers such as K-Meleon 1.x, Galeon 2.x and Netscape 8.x. The debugger is available as an add-on package in XPI format. Venkman JavaScript Debugger has been provided as part of the Mozilla install distribution since October 3rd 2001.

   

   CompanionJS
   Companion.JS (pronounced Companion dot JS or CJS) is a Javascript debugger for IE.

   

   How to Test your JavaScript Code with QUnit
   QUnit is a powerful JavaScript unit testing framework that helps you to debug code. It’s written by members of the jQuery team, and is the official test suite for jQuery. But QUnit is general enough to test any regular JavaScript code, and it’s even able to test server-side JavaScript via some JavaScript engine like Rhino or V8.

   

   JS Bin – Collaborative JavaScript Debugging
   JS Bin is an open source collaborative JavaScript debugging tool.

   

   Forms, Buttons & Navigation

   Making a Google Wave History Slider
   Here is shown how to create a Google Wave-like history slider. Using it will enable visitors to go back and forth in time to view the changes that take place on a comment thread.

   

   Fancy Radio Buttons With jQuery
   Creation of 2 mandatory option sets that a user could choose, while hiding off the radio button inputs and using an anchor links to make it a bit more usable.

   

   Creative Button Animations with Sprites and JQuery
   Fading hover effect for which the transition is smoothed with JavaScript, using jQuery library.

   

   Password (un)Masking
   JavaScript jQuery that toggles the masking and unmasking of the password field.

   

   jQuery MagicLine Navigation
   These “sliding” style navigation bars have been around a while, and turns out it’s really pretty darn easy. Here are put two examples together.

   

   Fixed Fade Out Menu: A CSS and jQuery Tutorial
   The aim is to have a fixed navigation that follows the user when he scrolls, and only subtly showing itself by fading out and becoming almost transparent. When the user hovers over it, the menu then becomes opaque again. Inside of the navigation we will have some links, a search input and a top and bottom button that let the user navigate to the top or the bottom of the page.

   

   jQuery plugin: Simplest Twitter-like dynamic character count for textareas and input fields
   The best way to explain what this plugin does is to mention Twitter. Twitter posts are limited to 140 characters. While typing the Twitter post there is this always present information about how many characters the users have before reaching the limit. The information is not only provided merely by displaying a number, there are different colors applied to certain stages to notify the user about the status.

   Sliding Labels v2
   Form label keeping the label inline, but sliding it off to the left rather than going away on click.

   

   Ketchup Plugin
   Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality.

   

   Layout tools

   jQuery {css}designerGrid Plugin
   {css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

   

   css-template-layout
   JavaScript (jQuery) implementation of the CSS Template Layout Module

   

   How to create a fluid grid with jQuery
   Grid-based layout is probably the more preferred way to style up a webpage to give it more magazine-like look and feel. This tutorial is about how to use CSS and Javascript to create a fluid grid-based layout (See demo here). The algorithm/procedure used in this tutorial is very simple and straightforward. There are more advanced algorithms out there which can handle multiple scenarios. But the purpose is to understand the basic logic on how to create such layout. So here it goes…

   

   closure-templates
   Closure Templates are a client- and server-side templating system that helps you dynamically build reusable HTML and UI elements. They are easy to learn and customizable to fit your application’s needs. Closure Templates support JavaScript and Java and use a data model and expression syntax that works for either language. You can also use the built-in message support to easily localize your applications.

   

   Useful jQuery Plugins

   TipTip jQuery Plugin
   TipTip detects the edges of the browser window and will make sure the tooltip stays within the current window size. As a result the tooltip will adjust itself to be displayed above, below, to the left or to the right of the element with TipTip applied to it, depending on what is necessary to stay within the browser window. TipTip is a very lightweight and intelligent custom tooltip jQuery plugin. It uses ZERO images and is completely customizable via CSS. It’s also only 3.5kb minified!

   

   jQuery Roundabout
   Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

   

   jParse – jQuery XML Parse Plugin
   jParse is a jQuery plugin that allows you to parse XML that was fetched with the jQuery .ajax method (making it fully customizable).

   

   jQuery Quicksand plugin
   Reorder and filter items with a nice shuffling animation.

   

   typeQuery, change website typography with jquery
   typeQuery gives the flexibility to change the font-family for everything you define with class, id, or tag, this example is referring to the selected item on a select object with id=”tag” and the font-family value at select object with id=”family”: $($("#tag").val()).css("font-family", $("#family").val());

   

   Flip! A jQuery plugin v0.9.9
   Flip is a jQuery plugin that will flip easily your elements in four directions.

   

   Data Encryption With JavaScript: jCryption
   jCryption is a jQuery plugin for encrypting POST/GET data submitted by forms. It uses public-key algorithm of RSA for the encryption & has a PHP file for handling the decryption of data.

   

   Minimalist jQuery: 11 useful plugins under 4K
   jQuery makes our lives easier. So much so that it’s tempting to use it all the time, inadvertently slowing our page load times (cue YSlow and Hammerhead). Combining, compressing, and delivering scripts at the end of your page helps in the HTTP request department. On the file size front, below are jQuery plugins that give solid bang for your performance buck.

   

   Undo/Redo in jQuery
   An easy-to-use plugin for adding undo/redo capabilities to a jQuery application. It is based loosely on the Objective-C/Cocoa way of doing things.

   

   editease
   editEase – jQuery CMS | no fuss, no database, no worries

   

   jsHub
   jsHub is a single piece of JavaScript (a “tag”) that can handle reading different sorts of page information and then send them to many different vendors’ products. One piece of code to send to Google Analytics, Omniture SiteCatalyst, WebTrends and Mixpanel. Instead of one piece of JavaScript per vendor, jsHub has a single piece of code (the “hub”) and plugins that know how to translate into the required wire protocol for each vendor. Vendors only maintain the plugin for their product.

   

   Educational JavaScript Resources and Tutorials

   Caffeinated Simpleton
   JavaScript is an amazing little language, but it’s got some quirks that turn a lot of people off. One of those quirks is this, and how it’s not necessarily what you expect it to be. this isn’t that complicated, but there are very few explanations of how it works on the internet. This article is an attempt to explain how this works and how to use it properly.

   

   What You Need To Know About JavaScript Scope
   This article discusses how JavaScript handles scope and how various JavaScript libraries provide methods for dealing with it and how they smooth out a few bumps. We’ll also look at how you can get back to basics and do some interesting scope wrangling without a library, a useful approach if you’re writing code that needs to stand alone.

   

   Learning Advanced JavaScript
   A very nice tutorial to learn JavaScript, containing code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig.

   

   Highlight search terms automagically with JavaScript and mark
   Script surrounding the search term(s) with the mark element rather than a span, although the class searchword is retained in case you want to style these marks differently from others. In the CSS, the rule article mark is just added to turn it a gentle shade of pink.

   10 Really Helpful Traversing Functions in jQuery
   With jQuery, selecting HTML elements is laughably easy. But at times, we may wish to further refine the selection, which can be a hassle when the HTML structure is complicated. In this tutorial, we’ll explore ten ways that we can refine and extend a set of wrapped elements that we wish to operate upon.

   

   Using keyboard shortcuts in Javascript
   If you want to enhance your web app, Javascript keyboards shortcuts is definitely something to consider. In this article, you’ll learn to use JS keyboard shortcuts, with and without the JQuery framework.

   

   Code Conventions for the JavaScript Programming Language
   This is a set of coding conventions and rules for use in JavaScript programming.

   

   jQuery – Select element cheat sheet
   This cheat sheet helps you to find the index of a selected option, set the selected option by value, set the selected option by text, insert a new option before or after another and get the text or value of the selected option.

   

   Compare JavaScript frameworks
   Modern Web sites and Web applications tend to rely quite heavily on client-side JavaScript to provide rich interactivity, particularly through the advent of asynchronous HTTP requests that do not require page refreshes to return data or responses from a server-side script or database system. In this article, you will discover how JavaScript frameworks make it easier and faster to create highly interactive and responsive Web sites and Web applications.

   

   Park your Horse, Code Cowboy: Professional JavaScript Workflows, Part 1
   In this series, we’ll talk about tools & techniques you can use to cover those No’s, and cut a lot of strife & embarrassment from your JavaScript experience.

   

   JavaScript Reference examples (example source code)
   JavaScript Reference examples, organized by Objects, Properties, Methods & Collections. Some Event Handlers Reference are also available.

   

   JavaScript best practices
   A compilation of best practices and good advice I’ve amassed over the years, much of it learnt the hard way (experimentation and suchlike). Take the advice below to heart and keep it in a part of your brain that has a quick access route so you can apply it without thinking about it. I am sure you will find things to disagree with, and that is a good thing – you should question what you read, and strive to find better solutions. However, I have found that following these principles has made me a more effective developer and allowed other developers to build upon my work more easily.

   

   wtfjs
   JavaScript is a language we love despite it giving us so much to hate. This is a collection of those very special irregularities, inconstancies and just plain painfully unintuitive moments for the language of the web.

   

   Related Posts

   You may be interested in the following related posts:

   • 50 Fresh JavaScript Tools That Will Improve Your Workflow
   • 45 Powerful CSS/JavaScript-Techniques
   • 70 Useful AJAX And JavaScript Techniques

   Poll

   ---

   © Smashing Editorial for Smashing Magazine, 2010. | Permalink | 61 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/12/45-fresh-useful-javascript-and-jquery-techniques-and-tools/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: AJAX, javascript, jquery
   
7. 

   Luke Wroblewski says:

   March 18th, 2010 at 4:38 pm

   Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller; connections are slower; text entry is trickier; the list goes on. So, limiting the number of forms in your mobile applications and websites is generally a good idea. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.

   But constraints breed innovation, and mobile forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. Thanks to the modern solutions covered in this article, the mobile space may not be a place to avoid forms much longer. Instead, it may become the place to encourage them.

   [By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]

   Field Zoom

   In many mobile Web browsers, when a user selects a form’s input field, the “field zoom” feature expands it to fill the screen’s viewable area. This makes an otherwise tiny field large enough for people to actually see the data they are entering. Given that many form errors are caused by people not seeing their inputs well enough to correct misspellings, the usability of this feature is clear.

   The Safari browser on Apple’s iPhone makes use of field zoom together with a “form assistant.” The form assistant displays “Previous,” “Next,” “AutoFill” and “Done” buttons below the magnified input field, giving people an easy way to move through and complete a form. No need to worry if an input field is off screen: the user just hits “Next” and won’t miss it!

   

   However, not everyone will know about the form assistant or know how to hide the keyboard. So, make sure the controls on the Web page still allow them to complete the form. Excessive spacing around the “Submit” button can tuck it behind the keyboard.

   Field zoom is another great reason to top-align input field labels in forms. As you can see on Google’s registration form (screenshot below), left-aligned labels disappear when input fields are expanded to fill the screen. With no visible label, the user can easily forget what question they have to answer. Long input fields also suffer a bit with field zoom.

   

   Mobile browsers that don’t have field zoom also run into issues with left- and right-aligned input field labels. Anyone using such a form on Google’s Android OS (below) faces the problem of disappearing labels. The screen simply does not have enough room for both the input field and its corresponding label. Top-aligned labels avoid this issue.

   

   Input Formats

   Some mobile Web browsers recognize specific input types (part of the developing HTML5 standard) and adjust their input modes accordingly. For example, specifying an input of the type url brings up a virtual alphanumeric keyboard with “.”, “/”, and “.com” keys. Specifying an input of the type email brings up a virtual alphanumeric keyboard with “.” and “@” keys. Specifying an input of the type number brings up a virtual numeric keyboard.

   These input-specific keyboards make entering the particular type of data required by each input field much easier. Even browsers without virtual keyboards benefit from the use of number, because users would not have to switch to number mode to enter numeric data.

   

   Password-Masking

   Most password input fields in forms instantly obscure all characters that a user enters to keep sensitive information hidden from prying eyes. Automatic masking of passwords may provide the appearance of security, but it can also create usability issues when people are left staring at a row of bullets that they hope (but can’t verify) is their password.

   Many mobile devices address this issue by displaying the most recent character the user has entered, and then obscuring that character as a bullet only after a brief delay. This technique has made its way onto the desktop, as illustrated in this password-masking solution from ZURB.

   Pop-Up Menu Controls

   Drop-down select menus are one of the hardest input types to use. First, you have to click on the menu to open it. Then, you have to maneuver through a potentially long list of small targets. Once you find the value you want, you need position your cursor on the right target and select it. To top it off, many implementations of drop-down menus on the Web require you to keep your cursor on the menu while navigating the list, or else the menu closes!

   Even dexterous users often miss them and need to start over. Couple this interactive challenge with the small screens of mobile devices and the need for a different solution for select menus becomes quite obvious.

   For drop-down select menus on Web forms, Apple’s iPhone presents users with a pop-up menu control. This control displays the options in the menu in a contained list that can be scrolled at various speeds though drag, nudge and flick gestures. The large touch targets also make it easy to select the right value once you’ve found it.

   

   Similarly, Google’s Android provides a larger touch target for select menu options. When the user taps a drop-down select menu on an Android device, a scrollable list of menu options appears in a dialog window over the Web page.

   

   Compound Menu Controls

   Pop-up menu controls can be applied to compound inputs as well. So, instead of requiring three separate input fields for the month, day and year of a requested date, one date field can bring up a set of pop-up menus that allow people to scroll through three lists at once to find the right date. This approach can be applied to other kinds of compound inputs as well, such as height in feet and inches.

   

   Google’s Android has a compound input field solution, though it makes use of visible interface elements to move through a list instead of relying on gesture-based scrolling alone.

   

   Native Input Controls

   In addition to having compound menu controls, most mobile operating systems have several other custom input controls available to application developers. Sliders, split buttons, rating widgets and scrubbers are just a few of the components worth considering in place of standard form controls to make inputting easier for users.

   

   Orientation

   Because people like to hold mobile devices both horizontally and vertically in their hands, mobile forms should adjust accordingly to take advantage of the changing screen space. The compose email form on Google’s Android does just that.

   

   When held vertically, the screen shows three input fields with several action buttons. In the horizontal position, the email body input takes over the screen, and one action button is shown on the right. This layout maximizes the screen space available for the message content.

   Voice Input

   Google’s Nexus One phone allows people to use voice input for any text field in an application. Users can swipe the virtual keyboard to switch the phone to audio input mode, or they can use the microphone button. The video below demonstrates both of these options in action. With effective voice input, typing any characters into the mobile device becomes a thing of the past.

   What’s Next?

   Mobile is growing exceptionally fast, and as more designers and developers focus on the space, we’ll hopefully see even further innovation in mobile forms. After all, anything that makes inputting (both on mobile and desktop devices) faster and easier will do a lot of good for both companies and their customers.

   About the Author

   Luke Wroblewski is an internationally recognized digital product design leader and the author of two popular Web design books. You can follow Luke on Twitter @lukewdesign or by using RSS.

   Smashing Magazine readers can get a special 20% off discount on Luke’s latest book: Web Form Design Filling in the Blanks. Just use discount code MIX to order.

   (al)

   ---

   © Luke Wroblewski for Smashing Magazine, 2010. | Permalink | 24 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: mobile
   
8. 

   Jessica Bordeau says:

   March 18th, 2010 at 5:18 pm

   Since its emergence, the digital photography market has gradually supplanted the traditional one. APN and digital SLR cameras entered our lives, and some people announced the death of silver-based images. This is not all lie, and yet old-fashioned images have been particularly popular in the past few years. All we do seem to do now is try to recreate the atmosphere of those bygone times anyway. Blurry, distorted and over-saturated images are not just a fad anymore. People have became familiar with the style and even consider it a full-fledged photographic genre.

   And this is where toy cameras play a role. These devices, made entirely of plastic, including often the lens itself, are not only toys. Sure, they cost next to nothing and have no controls to speak of, but this is what people like about them: they create unpredictable pictures, with equally unpredictable vintage effects. Once you understand this, the rest is a beautiful game. Take them anywhere, anytime, and photograph whatever you like.

   
   Photo credit: Pirouetting, by helenannsia

   How does this apply to modern design? Now that vintage websites are so trendy, why not look to this type of image for inspiration? You probably don’t want to go through the trouble of taking up silver-based photography because that would mean buying, developing and scanning film, maybe even making prints. That takes time and is expensive.

   What you can do, though, is use the magic of Photoshop to make your ultra-sharp, high-definition images look like they were taken with one of these cameras. Below are a list of the most famous toy cameras and some tutorials that can be used to recreate their famous effects. Most of them are part of the Lomography movement, but you might also want to consider some other options in trying to recreate that authentic look. You also may be interested in our previous article “The Disturbing Beauty of Oversaturated Pictures and Lomography.”

   [By the way, did you know there is a brand new Smashing Wordpress Book? Push WordPress past its limits!]

   Famous Toy Cameras

   Toy cameras are cheap, low quality and yet functional. As such, the deformations in the photos they produce are pronounced, and not all images are guaranteed to be perfectly exposed. Still, there are just so many of them these days that picking a few is hard. The ones presented here have paved the way for the success of the others. You may know them but not the stories behind them?

   Diana

   Let’s start where it all began. Picture yourself in Hong Kong in the early ’60s, when a factory starts producing the Diana. This inexpensive plastic-body camera was at the time usually given away as a novelty gift. Occasionally, it would be used by actual photographers who took advantage of the various effects it produced. And many effects there were. Because of the poor quality of materials used, the Diana camera was disposed to light leaks, leading to film damage, an effect typically fixed by sealing the seams with light-proof tape. Handy, huh?

   But the plastic body wasn’t the most interesting part: it was the lens, also made out of plastic. Not only did it enhance the already low contrast created by the light infiltration, but it also made for odd color rendering, chromatic aberration and blurry images. As if this weren’t enough, the image circle only marginally covered the diagonal of the film frame, which is why Diana images have heaving vignetting.

   
   Photo credit: elZekah

   As photographers started to deliberately exploit these characteristics, production grew through the ’70s and opened the way for other toy camera manufacturers.

   
   Photo credit: chomdee

   Lomo LC-A

   This is where things get a bit tricky, so pay attention. It’s now the beginning of the ’90s, and for a few years the Russian factory Lomo PLC has been producing the Lomo LC-A camera, which basically has all of the characteristics of a toy camera (vignetting in particular). But production was stopped, and the camera was all but forgotten until two Austrian students found one at a flea market in 1991 and decided to exploit its marketing potential. They convinced the director of the Lomo PLC factory to relaunch production and negotiated an exclusive contract for distribution with their brand-new company: Lomography AG.

   
   Photo credit: maaku

   And here begins the Lomography movement. If the term is familiar to you, you probably know at least two things about it. First, it promotes casual snapshot photography. Second, it is associated with over-saturated and high-contrast images. To confuse things, this second characteristic has nothing to do with the LC-A camera itself or with any other cameras for that matter. It is actually the result of the way the film is processed, which would usually be cross-processing. But Lomography is a movement, not a technique, and it was certainly the first to promote camera imperfections as an aesthetic. The success of the LC-A camera helped spread this aesthetic.

   
   Photo credit: citronnade

   Holga

   With the success of this movement, Lomography AG became interested in other low-cost cameras, such as the Holga, which had been produced in China for a decade. Even though it was made by a different manufacturer, the Holga was considered the successor of the Diana. Inspired by its predecessor, the Holga was designed as an inexpensive mass-market camera. And like the Diana, it is not of the best quality and has the same flaws.

   
   Photo credit: babyabby10

   But the Holga became popular and was even exported to the West over time, mostly for photo-reporting, for which its low profile was appreciated. Its problems were no longer problems, and now it is not surprising to hear of Holga photos winning awards. Because it is entirely manual, one can create effects, such as double exposure and panoramas, by not winding the film.

   
   Photo credit: Bill Hansen (website)

   ActionSampler, SuperSampler, Oktomat

   These three cameras don’t have many differences. They all take multiple shots in a set period of time, thus creating micro-images that look like short animated movies. The Actionsampler and Supersampler have four lenses each, while the Oktomat has eight, fitting eight frames into the standard 35mm.

   
   Photo credit: amylynnthompson

   To make them a bit more fun, what you see through the viewfinder is not exactly what you get.

   
   Photo credit: golfpunkgirl

   Lomo Fisheye 2

   As the name suggests, the Lomo Fisheye camera has a fish-eye lens. It was the first 35mm compact camera to offer such a wide angle (170°), and unlike the other toy cameras covered here, it gave surprisingly good results for the price. The second edition came with several enhancements, such a viewfinder that covered the same angle as the lens (it was blocked off before).

   
   Photo credit: aapnootmies

   The effect created, often seen in sport images, can serve many other purposes. But the user should be aware of two major characteristics: strong deformation and light leaks.

   
   Photo credit: faha

   Photoshop Tutorials And Resources

   Now, let’s put all this into practice. Even if you are familiar with these effects, have ever actually tried to replicate them? There are a lot of different effects, and you can combine them to create unique images.

   Faking the Holga Camera and Fisheye Lens

   How to Fake a Holga Photograph
   This tutorial shows you how to fake Holga photographs in a few simple steps.

   

   Another Way to Fake a Holga Photograph
   Another tutorial on faking Holga photographs.

   

   Fish-eye effect
   This shows you how to create a fish-eye effect for a picture taken with a regular lens. This one is a video and it addresses two important points: the lens circle border is not supposed to be so sharp when taking a fish-eye photograph, and one often deals with light infiltration.

   

   Fish-eye effect
   Another fish-eye tutorial. It doesn’t show how to distort the image, so you will have to add this step yourself, but it adds a nice final touch to the image by using a picture of the inside of a fish-eye lens.

   

   Recreating Low-Quality Camera Flaws

   Vignetting
   A very simple tutorial on recreating the vignetting effect.

   

   Soft-Focus Lens Effect
   What if you’re already happy with the contrast and color saturation of your image and just want to recreate the effect of a soft-focus camera lens or diffusion filter? In this tutorial, you’ll learn a fast and easy way to add a more traditional soft-focus lens effect to images.

   

   Faking Barrel Distortion and Chromatic Aberrations
   Here is a nice Photoshop plug-in to fake barrel distortion and chromatic aberrations. Adding these effects to your pictures will make them look even more authentic.

   

   Light Leaks Effect, Part 1 and Part 2
   Of course, this article wouldn’t be complete without a great tutorial on light leak effects. Here is an awesome one, divided into two parts, each covering a different effect: a white-blur light and a colored bar leak.

   

   Working on Colors and Light Exposure

   Getting That X-Pro Lomo Look
   This tutorial is fairly quick and easy. It shows you how to get that great x-pro Lomo look by tweaking color. You’ll be exploring a new method of vignetting, and you’ll be widening and blurring the image a little.

   

   Cross-Processing Tutorial
   With so many possible permutations of film stock and processing techniques, there is no single, identifiable look to cross-processed images. The most common combination is C-41 as E-6, in which slide chemistry is used to process color negative film; and mimicking it in Photoshop is a quick job. Image contrast is usually high, with blown-out highlights, while shadows tend towards dense shades of blue. Reds tend to be magenta, lips almost purple and highlights normally have a yellow-green tinge.

   

   Cross-Processing
   Another cros-processing tutorial.

   

   Vintage Effect
   Age your images a give them a vintage effect.

   

   Using Textures and Double Exposure

   Through the Viewfinder
   Did you know that Flickr has a Through the Viewfinder group? The idea is that you shoot through the viewfinder of an old camera using your modern digital or film camera and create an interesting framing effect. Here is a tutorial on how to create this effect.

   

   Resources of Speckle Pattern
   Yes, there is also a Flickr group called “Noise and Dust Through the Viewfinder.”

   

   Paper Texture Effect
   Here is a quick and easy tutorial for those who want to learn the art of taking a photo and turning it into an old-fashioned vintage picture.

   

   Some More Paper Texture Effect
   Another tutorial (this one a video).

   

   Filmstrip Effect
   Download a filmstrip template and use it to create negatives of your pictures.

   

   Double Exposure
   When you take a double-exposed photograph, the results are usually a bit unpredictable. With Photoshop you have much more control over the result.

   

   Another Way to Create Double Exposure
   While the most common way to create a double exposure is by using a different blending mode on the top layer and adjusting its opacity, this method accurately simulates how a camera takes a double exposure.

   

   Other Ideas

   No tutorials are needed to create these effects. They are included here merely to give you more ideas. You’ll still need to work on your pictures to get that vintage look. Then, just put them together and enjoy.

   Shoot Series Like the Oktomat and the Actionsampler
   Draw inspiration from the Oktomat and Actionsampler cameras. You’ll get either four or eight images in the same frame, each of them having been shot after an interval of only a few seconds.

   
   Photo credit: Look!, by Moyö

   Shoot Series like the Supersampler
   The Supersampler effect is quite similar to the Actionsampler: four images in the same frame, but spaced differently. And remember that you can arrange layers both horizontally and vertically.

   
   Photo credit: moving clocks run slow, by aleinsomniac

   Panorama 1
   Panorama images don’t necessarily have to be perfectly arranged. Here is an example of what else can be done.

   
   Photo credit: Christophe Dillinger (website)

   Panorama 2
   Another inspiring panorama.

   
   Photo credit: bruceberrien

   Panorama 3
   The panorama view can be combined with a filmstrip effect. It simulates a double-exposure panorama taken on a manual camera.

   
   Photo credit: mikrofoniusz

   Want More?

   Polaroid

   If cheapness is a defining characteristic of toy cameras, it surely isn’t for Polaroids. The Polaroid camera itself is not expensive, but because Fuji is now the only company that produces the film for it, getting affordable ones has become difficult. But this may change in the next few months thanks to the Impossible Project.

   Going back a bit, the world’s first commercial instant camera was the “Land” camera, unveiled in 1947. Since then, Polaroid has become synonymous with instant photography, because most of the cameras have been created by the Polaroid Corporation. Nowadays, the cameras are used by photographers mainly to preview their work before actually shooting. But as toy cameras, they are fun to play with and can make for nice effects.

   
   Photo credit: paine666

   Polaroid and Transfer Effect

   Retro Polaroid Coloring on Your Photos
   This is a simple tutorial on how to get that retro Polaroid coloring in your photos.

   

   Polaroid Transfer Effect
   This Photoshop tutorial shows you how to create a cool old photo transfer edge effect using a piece of stock photography, an alpha channel and the burn and dodge tools.

   

   Showcase of Beautiful Pictures

   Considering that Flickr has a group for almost every subject, it is no surprise that there is one for toy cameras. Here is a showcase of the most beautiful images from it.

   
   Photo credit: have I told you lately, by cHr1st1an S

   
   Photo credit: ubu84

   
   Photo credit: 000038, by qwj

   
   Photo credit: 54330027, by etara

   
   Photo credit: Ipanema Beach – Brazil, by marcelo_maia

   
   Photo credit: Hélicoïdal, by Cathy Lehnebach

   
   Photo credit: Purgatoire, by stiveune

   
   Photo credit: untitled, by Greg Zauswoz

   
   Photo credit: untitled, by bradbrochill

   
   Photo credit: .., by cjlomo

   
   Photo credit: spree1, by hellomelly

   
   Photo credit: Love me two times, by laszlo_ototh

   
   Photo credit: exit, by renaishashin

   
   Photo credit: untitled, by Sergio Conde Sánchez

   
   Photo credit: Akhirnya buat lomba juga -__-, by febryanyovi

   
   Photo credit: Cosy Clausterphobia, by miss_michelle

   
   Photo credit: svema_test1, by ashtonleee

   
   Photo credit: untitled, by poppart

   
   Photo credit: lomographicsocietyinternational

   
   Photo credit: La Bòfia – Redscale, by fgali1964

   
   Photo credit: chomdee

   
   Photo credit: offcenter

   
   Photo credit: Holga Tennis, by Nick Whitmoyer

   
   Photo credit: golfpunkgirl

   
   Photo credit: eyetwist

   Further Resources

   Old Toy Camera – Photoshop action
   This Photoshop action makes images look as though they are aged prints, shot on a toy or antique camera. Also included are two actions that create borders similar to those seen on photos from many antique and toy cameras.

   Toy Camera Contest
   FILE presents here a selection of images submitted for its Toy Camera Contest. This collection gives an idea of the challenge facing the judges to find three winners. The range and quality of the submitted images are impressive.

   Gallery
   This project is home to photos taken with toy cameras. Most are plastic: Holga, Diana, Dorie, Debonair, Lubitel, Banner, Snappy and Yunon. Distortion, blur and imperfection are some of the characteristics that endear these cameras to enthusiasts.

   Abduzeedo: 60 Interesting Lomo Fisheye Shots
   Gathered here are a few Lomography fish-eye shots. Some were taken with Lomography cameras such as the Diana and the LC-A+ with a fish-eye lens adapter attached.

   Lomography.com
   Lomographic Society International Website.

   (al)

   ---

   © Jessica Bordeau for Smashing Magazine, 2010. | Permalink | 44 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/10/uncovering-toy-cameras-and-polaroid-vintage-effects/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: photography, photoshop, toy camera, tutorial, Tutorials, vintage
   
9. 

   Christian Heilmann says:

   March 18th, 2010 at 5:59 pm

   I thought I could not be out-geeked. With a background in radio, and having dabbled in the demo scene on the Commodore 64 and hung out on BBSes and IRC for a long time and all the other things normal kids don’t quite get, I thought I was safe in this area.

   Then I went to my first WhereCamp, an unconference dealing with geographical issues and how they relate to the world of Web development. Even my A-Levels in Astronomy did not help me there. I was out-geeked by the people who drive and tweak the things that we now consider normal about geo-location on the Web.

   Pulling out your phone, find your location and getting directions to the nearest bar is easy, but a lot of work has gone into making that possible. The good news is that because of that effort, mere geo-mortals like you and me can now create geographically aware products using a few lines of code. So, let’s give the geo-community a big hand.

   [Offtopic: by the way, have you already visited Smashing Magazine's Facebook fan page? Join the community for a stream of useful resources, updates and giveaways!]

   Why Geo Matters

   First of all, why is it important to consider physical location on this planet (at this moment) when we develop Web products? There are a few answers to this.

   The first answer is mobility. The days of people sitting in front of desktop machines at home are over. Sales of mobile devices, laptops and netbooks have overtaken those of bulky stationary computers in the last few years. The power of processors now allows us to use smaller, more mobile hardware to perform the same tasks. So, if people use their hardware on the go, we should bring our systems to them. Which brings us to the second—very important—point: relevance.

   Giving the user content that is relevant to the physical space they are in at the moment makes a lot of sense. We are creatures of habit. While we love the reach of the Internet, we also want to be able to find things in our local area easily: people to meet, cafes to frequent, interesting buildings and museums to learn about. The advertising industry—especially of the adult and dating variety—realized this years ago. I am sure you have come across one of the following before:

   

   I am sure these ads are more successful than the ones that show only user names. That the photos and names are the same for every location doesn’t seem to be a problem (but yes, I noticed it). So how does it all work?

   Getting The User’s Location Via IP

   Every computer on a network has a number that identifies it: its IP address. The Internet is nothing but a massive network, and your IP number is assigned to you by the service provider that you have used to connect to that network. Because the numbers that service providers assign change from one geographical location to the next (much like telephone numbers), you can make quite a good estimate of where your visitors are from.

   To find out where a certain phone number is from, you use a phone book. To find out where an IP is from, you can use the Maxmind GeoIP database. Maxmind also provides a JavaScript solution that you can use on websites:

   <script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
   <script>
     var info = document.getElementById('info');
     var lat = geoip_latitude();
     var lon = geoip_longitude();
     var city = geoip_city();
     var out = '<h3>Information from your IP</h3>'+
               '<ul>'+
               '<li>Latitude: ' + lat + '</li>'+
               '<li>Longitude: ' + lon + '</li>'+
               '<li>City: ' + city + '</li>'+
               '<li>Region: ' + geoip_region() + '</li>'+
               '<li>Region Name: ' + geoip_region_name() + '</li>'+
               '<li>Postal Code: ' + geoip_postal_code() + '</li>'+
               '<li>Country Code: ' + geoip_country_code() + '</li>'+
               '<li>Country Name: ' + geoip_country_name() + '</li>'+
               '</ul>'
     info.innerHTML = out;
   </script>

   

   This gives you some information on the user (try it out for yourself). The challenge, though, is relevance. Your IP location is the location of the IP that your provider has assigned to you. Depending on your provider, this could be quite a ways off (in my case, I live in London, but my provider used to show me as living in Rochester). Another problem is if you work for a company that uses a VPN. At Yahoo, for example, I have to connect to the VPN to read my company email, and I have to choose a location to connect to:

   

   So, for a solution like the one highlighted above, I would show up as being in a totally different part of the world (which might be useful for watching Internet TV in the UK while I am in the US). IP geo-location, then, is an approximation, not a dead-on science.

   Getting The User’s Location Via The W3C Geo API

   Guessing geographical location via IP is possible, but it can also be pretty creepy. Being able to take advantage of your location is useful, but security-conscious users and people who are generally suspicious of the Internet are not happy with the idea of their movements being monitored by a computer. This makes sense: if I can monitor your whereabouts day and night, I would know where and when to rob your house without you being there.

   There are a lot of solutions to the challenge of having good-quality geo-location and maintaining privacy. Google Gears has a geo-location service; Plazes helps you store your location; and Yahoo’s Fire Eagle is probably the most polished way to securely maintain your location on the Web.

   The problem with all of these services is that they require the user to either install a plug-in or visit a Web service to update their location. This is not fun; browsers should do the work for you.

   We now have a W3C recommendation for a geo-location API that allows browsers to request the geographical location of the user. This makes it less creepy, and you get real data back.

   Firefox 3.5 and above supports the W3C geo-location API. So does Safari on the iPhone if you run OS 3.0 or above. If you use the API, the browser will ask the user whether they want to share their location with your website.

   

   Once the user allows you to get their location, you get much more detailed latitude and longitude values. Using the API is very easy:

   // if the browser supports the w3c geo api
   if(navigator.geolocation){
     // get the current position
     navigator.geolocation.getCurrentPosition(
   
     // if this was successful, get the latitude and longitude
     function(position){
       var lat = position.coords.latitude;
       var lon = position.coords.longitude;
     },
     // if there was an error
     function(error){
       alert('ouch');
     });
   }

   Compare the IP and W3C solutions side by side. As you can see, there can be quite a difference in measuring the visitor’s location. The extent of the difference is shown in the following demo:

   

   Converting Latitude And Longitude Back Into A Name

   Having more information is nice, but we have lost the name of the city and all the other nice data that came with the Maxmind database. Because the location has changed, we cannot just grab that old data; we have to find a way to convert latitude and longitude coordinates into a name. This process is called “reverse geo-coding,” and several services on the Web allow you to do it. Probably the most well-known is the geo-names Web service, but it has a few issues. For starters, the results are very US-centric.

   One freely available but lesser-known reverse geo-coder that works worldwide comes from a surprising source: Flickr. The flickr.places.findByLatLon service returns a location from a latitude and longitude coordinates. You can try it out in the app explorer, but by far the easiest way to use it is by using the Yahoo Query Language (or YQL). YQL deserves its own article, but let’s just say that, instead of having to authenticate with the Flickr API and read the docs, reverse geo-coding becomes as easy as this:

   select * from flickr.places where lat=37.416115 and lon=-122.0245671

   Using the YQL Web service, you can get the result back as XML or JSON. So, to use the service in JavaScript, all you need is the following:

   <script type="text/javascript" charset="utf-8">
    function getPlaceFromFlickr(lat,lon,callback){
      // the YQL statement
      var yql = 'select * from flickr.places where lat='+lat+' and lon='+lon;
   
      // assembling the YQL webservice API
      var url = 'http://query.yahooapis.com/v1/public/yql?q='+
                 encodeURIComponent(yql)+'&format=json&diagnostics='+
                 'false&callback='+callback;
   
      // create a new script node and add it to the document
      var s = document.createElement('script');
      s.setAttribute('src',url);
      document.getElementsByTagName('head')[0].appendChild(s);
    };
   
    // callback in case there is a place found
    function output(o){
      if(typeof(o.query.results.places.place) != 'undefined'){
        alert(o.query.results.places.place.name);
      }
    }
   
    // call the function with my current lat/lon
    getPlaceFromFlickr(37.416115,-122.02456,'output');
   </script>

   Combine that with the other services, and we get a more detailed result and can put a name to the coordinates:

   

   The Trouble With Latitude And Longitude

   While latitude and longitude coordinates are a good way to describe a location on Earth, it is also ambiguous. The coordinates could represent either the centre of a city or a point of interest (such as a museum or a pub) in that spot.

   WOEID to the Rescue

   To work around the problem, Yahoo and Flickr (and soon will Twitter) support another way to pinpoint a location. The Where On Earth Identifier (or WOEID) is a more granular way to describe locations on Earth. Because Flickr supports it, we can easily get get photos from a particular area:

   select * from flickr.photos.search where woe_id in (
     select place.woeid from flickr.places where lat=37.416115 and lon=-122.02456
   )

   Using this and a few lines of JavaScript, showing geo-located photos is pretty easy:

   

   This has also been wrapped in a simple-to-use YQL solution. The following code will display 10 photos of Paris:

   <script>
     function photos(o){
       var container = document.getElementById('photos');
       container.innerHTML = o.results;
     }
   </script>
   <script src="http://query.yahooapis.com/v1/public/yql?q=
   select%20*%20from%20flickr.photolist%20where%20location%3D%22paris%2Cfr
   %22%20and%20text%3D%22%22%20and%20amount%3D10&format=xml&
   env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=photos">

   You can also play with this in the YQL console.

   Why Not Search For The Location’s Name?

   The main question about implementations such as the one above is why couldn’t we just do a search on Flickr for the city, instead of doing all the complex geo-lookups? The reason is false positives. Take Paris, for example: if you want to show photos of Paris on a travel website, you don’t want Paris Hilton to show up in there. Same goes for Jack London. You may also want to show photos of London, England, not London, Ontario. Geographic data is full of these kinds of gotchas, and the term for finding the right one is “disambiguation.” See the Wikipedia article on “Victoria” to see just how many geographical contexts this term can have.

   Turning Text Into Geo-Data

   Finding a visitor’s geographic location is all well and good, but it doesn’t mean much if you can’t link it to information for that area. This is where it gets tricky. For Flickr (and soon Twitter), this is easy, because both services are able to attach geographical locations to the content you put in them. This is not so for most of the information on the Web, though, and this is when we resort to clever algorithms, machine-learning, pattern-matching and all the other think-tank stuff that computers and the scientists in front of them do.

   Say you want to identify the geographical locations that a particular text or Web page talks about. Yahoo offers a service for that called Placemaker, and it is pretty easy to use. You need to get a developer key and send this as appid, send a text as documentContent, define the type of the text as documentType and define the type of data you want back as outputType. All of this needs to be sent as a POST to http://wherein.yahooapis.com/v1/document:

   <form action="http://wherein.yahooapis.com/v1/document" method="post">
     <textarea id="text" name="documentContent">Hi there, I am Chris.
       I live in London, I am currently in Sunnyvale and will soon be in
       Atlanta and Las Vegas.</textarea>
     <div><input type="submit" name="sub" value="get locations"></div>
     <input type="hidden" name="appid" value="{YOUR_APP_ID}">
     <input type="hidden" name="documentType" value="text/plain">
     <input type="hidden" name="outputType" value="xml">
   </form>

   You can try this out yourself. Using PHP to call the API instead of a simple form, you can even format the output nicely. See it in action here:

   

   While developers who have played around with Web services won’t find Placemaker hard to use, the service can be daunting for the average developer. That is why I built GeoMaker some time ago. GeoMaker allows you to enter a text or URL, select the locations you want to include in the final outcome, and get the locations either as a map to copy and paste or as micro-formats.

   

   However, because there is also a YQL solution for using PlaceMaker in JavaScript, we can do the same with a few lines of client-side code to enhance an HTML document. Check out the following example:

   

   To use this, you need three things: a text with geographical locations in them in an element with an ID, a Google Maps API key (which you can get here) and the following few lines of code:

   <script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
   <script>
   addmap.config.mapkey = 'COPY YOUR API KEY HERE';
   addmap.analyse('content');
   </script>

   This makes it incredibly easy to give your visitors a sense of what part of the world a text is related to.

   Adding Maps To Your Documents

   Online maps have been around for a while now (and Google Maps was instrumental in the rise of AJAX), and many providers out there allow you to add maps to your documents. Google is probably the leader, but Yahoo also has maps, as does Microsoft and many more. There is even a fully open map service called Open Street Maps, which has been instrumental in the recent rescue efforts in Haiti.

   If you want interactive maps, probably the easiest thing to use is Mapstraction, which is a JavaScript library that does away with the discrepancies between the various map providers and gives you a single interface for all of them. 24ways published a good introduction to it three years ago.

   Probably the simplest way to show a map that supports markers and paths in your document without having to dive into JavaScript is the Google static maps API. It creates maps as images, and all you need to do is provide the map information in the src URI of the image. For example, in the script example above, this would be:

   http://maps.google.com/maps/api/staticmap?
   sensor=false
   &size=200x200
   &maptype=roadmap
   &key=YOUR_MAP_KEY
   &markers=color:blue|label:1|37.4447,-122.161
   &markers=color:blue|label:2|37.3385,-121.886
   &markers=color:blue|label:3|37.3716,-122.038
   &markers=color:blue|label:4|37.7792,-122.42

   You can define the size and type of the map. If all you provide is the location of markers, the API will automatically find the right zoom level and area to ensure that all markers are visible. Google’s website even offers a detailed tool to create static maps, including markers and paths.

   Geo Is A Space To Watch

   I hope this has given you some insight into all of the things you can do to bring the earth to your product and to put your product on the map. Geo-location and geo-aware services are already huge, and they’ll be even more important this year. There will be more services—some mobile providers are ready to roll out new hardware and software—and now you can be a part of it.

   What the geo-world needs now is a designer’s eye, and this is where you can help the geo-geeks create apps that matter, that look great and that make a difference in our visitors’ lives. For inspiration, check out Mapumental, which allows you to pinpoint a place to live in London, or see how Google Earth and some 3-D Objects allow you to race a milk truck on real map data.

   (al)

   ---

   © Christian Heilmann for Smashing Magazine, 2010. | Permalink | 57 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/08/entering-the-wonderful-world-of-geo-location/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
   Post tags: javascript
   
10. 

    Andy Rutledge says:

    March 18th, 2010 at 6:48 pm

    The design profession is full of happy folks, and understanding why so many designers enjoy their work is not hard. But not all are so happy. If you’re not careful, the joy of getting paid to pursue your passion can be tainted by the less joyous realities of the professional world.

    You see, no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. This is true whether you work freelance, for an agency or in-house with a company.

    Every week I hear from designers who are struggling to come to terms with these realities. Unhappy with their current circumstances, they write to ask for advice on improving their lot. Usually, they either claim not to understand how things got so bad, or they lay the blame somewhere other than at their own feet. In every case, however, the sole cause is their poor choices and lack of professional acumen. It needn’t be so.

    
    Design is craft, but no matter how skilled you are as a designer, unless you are equally prepared in professional matters, your prospects will be limited and your circumstances compromised. Image source

    [Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]

    Professional Diagnosis

    Here, I’ll paraphrase a few emails I’ve received from designers seeking advice. For each, I’ll diagnose the situation, explain in no uncertain terms what should have been done to avoid the situation and suggest a strategy the designer can follow to improve their circumstances.

    These circumstances are not uncommon. Many of you reading this are likely experiencing similar problems… or may at some point in the future. I hope that the information, advice and strategies presented here will help you avoid these and other problems.

    1. From A Freelance Designer

    Question: “I recently graduated from design school and have started freelancing, and I’m wondering how you get clients? How do you get your name out there?”

    This person may just as well have jumped out of an airplane and then asked, “Now, how do I go about finding parachute? Oh, and should I land somewhere specific? How exactly do I do that?” Even so, this lack of foresight is quite common. The immediate lesson is that you shouldn’t become an independent professional with little to no professional experience, with no prospects and knowing little to nothing about the business.

    Fresh out of college or design school, you’re not a professional; you’re a technician (by definition, the opposite of professional). For the next few years you should be acquiring the skills, knowledge and understanding required of a design professional. The place to do this is in the company of peers and under the wings of mentors: at an agency or in house with a company. The successive lessons and built-in support system inherent in these environments are essential to a designer’s professional development.

    The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years, while you let your agency or company carry the burden of acquiring clients and running the projects. If you are any good, in time you will earn the respect of your peers and superiors, establish a good reputation (spread by word of mouth) and acquire professional acumen. If in that time you make any effort at all to share your work and thoughts with the wider design or business community, your name will become known (through word of mouth and your portfolio or blog), and your reputation will be built on substance rather than on social marketing’s smoke and mirrors. This would be the appropriate time to embark on a freelance career.

    As a freelancer, you’ll be running the whole show. So, you’ve got to be an ace at finances and budgeting; at speaking with and converting potential clients; at knowing what to discuss in order to weed out unsuitable potential clients; at preparing all manner of legal and project-specific documents, writing proposals, project management, intra-project client communications (and being the confident, unflinching pro in the face of every client request, question and distasteful situation); at dealing with dozens of types of unforeseen issues without hesitation; at maintaining tax information and constantly preparing various tax and business forms; at marketing, preparing and maintaining your own branding and identity, with its various elements; and at knowing how to begin and conclude all kinds of projects confidently. Oh, and you’ll also need a constant flow of interested potential clients.

    If you’re not confident and accomplished in all of these areas, then you’re not ready to be a freelance designer.

    Freelancing is only suited to seasoned professionals. Pursuing a freelance career as your first step in the profession is almost always a foolish move. Professionalism is maintained by habit. If your first step is a misstep, you’ve set a poor tone for the work ahead. Unless you immediately correct your mistakes, the habits you’ll develop will be clumsy and unprofessional.

    
    The way to “get your name out there” is to establish a pattern of excellent work and a reputation for integrity over several years. You need to be good at whatever it is you are doing. Image source

    2. From An Agency Designer

    Question: “I’m not very good at the discovery meeting with clients. I’m never really sure what to ask or how to figure out what sort of design they’re looking for. My project manager or C.D. usually ends up asking most of the design questions. What’s the best way to handle this situation?”

    This is a common issue for designers at agencies, especially those with little experience. Luckily, an agency is a good place to gain experience and competence. But the question signals a few issues that require attention.

    First of all, design questions are not really appropriate during the discovery process. Granted, specific branding constraints may need to be defined and understood, but the design you will craft will come not from the client’s judgment and understanding of design but from yours alone. The design will be your articulation of what they need, based mostly on their business aims, the website’s purpose, their customers’ needs and expectations, the end users’ specifics, etc. In fact, if you ask no design questions at all, you’re probably on the right track.

    Imagine for a moment that you’re a physician trying to determine the best course of treatment for your patient. In that situation, you would not ask the patient what he thinks should be prescribed. Instead you would inquire about his symptoms, history, environment, physical needs (e.g. is he a pro athlete, or does he simply need to be able to get around normally?). The answers to these questions will define the constraints and indicate the appropriate course of action. Your patient’s opinion on what prescription would be appropriate is likely irrelevant; he came to you because he lacks the ability to help himself.

    Go into the discovery meeting prepared. Before the meeting, learn as much as you can about the company, its history and its past and current activities. Script a list of questions—some specific to this client and some appropriate for any client—to get the ball rolling. These questions will serve as a springboard to more in-depth discussion, which in turn will flesh out what you need to know.

    One more thing: you’re the design professional and it’s your responsibility to conduct the project successfully. You (not the PM or CD) should be driving the discovery. Use your time at the agency to improve your discovery skills, taking on more responsibility with each successive client. Reflect on each project’s discovery process, and look for ways to improve the process and your questions. With time and effort, you should become competent in this essential part of the design process.

    3. From A Freelance Designer

    Question: “Some of my clients expect three or four (or more) comps from me. But that’s a lot of work, and I would prefer to show just a couple. Should I just charge more if they want more comps? How do some designers get away with just one or two for all of their clients?”

    These are interesting questions, and they beg a couple more:

    1. Why is this designer allowing his clients, who are not designers, to set the number of design comps?
    2. Why is he letting quantitative preference rather than qualitative necessity frame his understanding of the issue?

    Good design is not found by picking from a pack of arbitrary options, but is rather the result of deliberate, contextual choices. Taking a scattershot approach to design is in no way effective. Your clients may not appreciate this, but you certainly should! Your responsibility is to ensure that your clients don’t shoot themselves in the foot.

    The only person who knows how many design options are appropriate is you: the designer who is engaged in the process. And in almost every case there is one best design solution. Sometimes another compelling direction is worth considering and presenting to the client, but this cannot be known until you have fully engaged in the process, conscious of the parameters specific to that project.

    In most cases, you’ll explore a host of options during the design process. A thorough exploration will cull a majority of the trials, leaving only the most appropriate and compelling candidate(s)—one or two. These and only these design options should be shown to the client. Inferior designs should never be presented, even to fulfill a request for more options (options for what: mediocrity?).

    As a freelance design professional, or even as an agency designer, your responsibility is to define how many design options to present in a given situation. If a potential client insists on a less effective and less professional process, do not agree to work with that client. Compromise never brings excellence and has no place in design or professionalism. If you become comfortable making this sort of compromise, other compromises will also become easy for you. Your clients deserve and are paying for more than a compromised design.

    4. From An Agency Designer

    Question: “I seldom get to meet my clients before I present design comps to them. By that point, the projects almost always become a tiresome series of re-workings of my original ideas. How can I change this?”

    One wonders what these original ideas were based on if the designer has never met the clients. If so, either 1) this person is at the wrong agency, and/or 2) this person lacks the professional understanding or the backbone to insist that she decide how the agency should structure design projects and client-designer interaction.

    Relationships are built on trust, and trust is born of experience and understanding. Your client cannot trust someone they have never met and who they know nothing about. So, when designs are presented by someone the client has never met, no wonder the client is a bit reticent and inclined to second-guess the designer’s decisions. These and the ensuing problems are all a result of the designer’s failings. Yes, it’s on you. Always.

    As the designer and an aspiring professional, you must insist on driving the design process. This means that you must be the one to meet with the client in the beginning. If a project brief is required, you must be the one to create it, based on your direct conversations with the client and his team.

    If your agency has a process in place that prevents you from fulfilling your responsibilities, your options are either to change the process or to find a better agency. Anything less relegates you to an irresponsible practice in an unprofessional environment. Hopefully, this is not acceptable to you, because it would erode the habits you are professionally obliged to cultivate.

    5. From A Freelance Designer

    Question: “I love to design, and I think I’m pretty good at it. But I’m not comfortable talking to clients. Whenever I’m on the phone or in front of a client, I get very nervous. I think my nervousness makes me seem less capable, and I’m pretty sure I lose some of my client’s confidence. What can I do to correct this? Should someone else do the talking?”

    Effective communication is one of a designer’s most important jobs. Every communication, whether by email or phone or in person, is an opportunity to demonstrate value and win confidence. And if you don’t demonstrate value, you’ll seldom win confidence. Like designer #1 above, you may simply not be prepared to be a freelance professional.

    If you fail in communicating, no matter how skilled a designer you are, you won’t get the chance to ply your skills very often, and seldom for the best clients. The best clients are those who invest complete trust in their designers. That trust must be earned before any actual designing happens (see designer #4 above).

    And no, someone else should not do the talking. The design professional’s job is to show confidence when dealing with clients. No one else can communicate your value or win trust for you. The reason clients distrust those who do not communicate with confidence is because this trait signals other incompetencies. This may sound harsh, but it’s a fact: if you’re not confident, it is because you lack capability (whether professional competence, design skill or perhaps vocabulary)… and you know it. Address this void, and your confidence will shine through.

    If you lack confidence in conversation, start to address this deficiency immediately or find another calling. Otherwise, you may have a bright future as a production artist somewhere, but not much of one as a design professional. Design professionals are experts at every aspect of interacting with people.

    Confidence aside, it goes without saying that excellent vocabulary is an important component of effective communication. People judge you by your words, as well they should. Knowing this, your professional responsibility is to work on your vocabulary, just as you work on your design ability: daily.

    Professionalism

    Skill in design is only part of what defines a competent professional. Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others (whether clients, co-workers, employees or others). Professionalism is also measured by how well you uphold ethical standards in making the difficult decisions in every area of your work.

    Talent and skill can make you a technician; and a technician is, as we noted, not a professional. For context, think of traditional professions: lawyers, doctors, architects. The enormous responsibility they are entrusted with, and their ability to carry out that responsibility across the scope of their work, makes these people professionals. Thus, an able professional would not be troubled by the questions posed in this article. Rather, they would know precisely how to proceed or how to circumvent these issues. If you have any of these questions, you may not be prepared to be a design professional.

    
    Professionalism is also measured by integrity, preparedness in handling and interacting with clients, and breadth of understanding in the myriad of issues that will confront you in the course of working with others. Image source

    All of these situations result from designers believing that being a good designer is good enough. This profession has little room for those who lack a professional’s integrity and broad understanding. Designers who are willing to compromise and simply accept the faulty decisions that are handed to them have had their profession stolen from them. These designers have no business working with clients who pay good money for professional service.

    Be better than this. Your first step to success is to assume your rightful responsibility for everything that involves you. Dissatisfied with the flawed structure at your agency? You chose to work there; change your circumstances. Frustrated by your perpetual lack of prospects and stalled reputation? Sounds like you’ve got deficiencies to address. Overwhelmed by the challenges and complexities inherent in freelancing? You probably started freelancing without sufficient preparation.

    Fix it. You fix it. It’s all on you.

    Designers: you get paid to do what you love. How great is that!? But this fortunate and enviable situation leads to fulfillment only if you take full ownership of your profession. Otherwise, you’re carrying a time bomb. When it goes off, your career will either falter or be blown to smithereens. Don’t let this happen to you. Educate yourself. Have the courage and integrity to habitually make good choices so that you enjoy a long and happy career as a design professional.

    (al)

    ---

    © Andy Rutledge for Smashing Magazine, 2010. | Permalink | 144 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | http://www.smashingmagazine.com/2010/03/08/common-questions-about-design-professionalism/“>Tweet it! | Submit to Reddit | Forum Smashing Magazine
    Post tags:
    

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

CAPTCHA Code