Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

September 12 2011

7 Best Practices for Improving Your Website’s Usability


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

Writing content for web users has its challenges. Chief among them is the ease with which your content is read and understood by your visitors (i.e. its readability).

When your content is highly readable, your audience is able to quickly digest the information you share with them — a worthy goal to have for your website, whether you run a blog, an e-store or your company’s domain.

Below are a handful of dead-simple tips and techniques for enhancing the usability and readability of your website’s content.

These tips are based on research findings and suggestions by well-regarded usability experts such as Jakob Nielsen.

This list is not exhaustive, and is meant merely to arm you with a few ideas that you can implement right away. If you have additional tips to add, please share them in the comments.


General Goals of User-Friendly Web Content


Usable, readable web content is a marriage of efforts between web designers and web content writers.

Web pages must be designed to facilitate the ease of reading content through the effective use of colors, typography, spacing, etc.

In turn, the content writer must be aware of writing strategies that enable readers to quickly identify, read and internalize information.

As we go through the seven tips below, keep these three general guidelines in mind:

  • Text and typography have to be easy and pleasant to read (i.e. they must legible).
  • Content should be easy to understand.
  • Content should be skimmable because web users don’t read a lot. Studies show that in a best-case scenario, we only read 28% of the text on a web page.

What simple things can we do to achieve these goals? Read on to see.


1. Keep Content as Concise as Possible


It’s pretty well known that web users have very short attention spans and that we don’t read articles thoroughly and in their entirety. A study investigating the changes in our reading habits behaviors in the digital age concluded that we tend to skim webpages to find the information we want.

We search for keywords, read in a non-linear fashion (i.e. we skip around a webpage instead of reading it from top to bottom) and have lowered attention spans.

This idea that we’re frugal when it comes to reading stuff on the web is reinforced by a usability study conducted by Jakob Nielsen. The study claims a that a 58% increase in usability can be achieved simply by cutting roughly half the words on the webpages being studied.

Shorter articles enhance readability, so much so that many popular readability measurement formulas use the length of sentences and words as factors that influence ease of reading and comprehension.

What you can do:

  • Get to the point as quickly as possible.
  • Cut out unnecessary information.
  • Use easy-to-understand, shorter, common words and phrases.
  • Avoid long paragraphs and sentences.
  • Use time-saving and attention-grabbing writing techniques, such using numbers instead of spelling them out. Use “1,000″ as opposed to “one thousand,” which facilitates scanning and skimming.
  • Test your writing style using readability formulas that gauge how easy it is to get through your prose. The Readability Test Tool allows you to plug in a URL, then gives you scores based on popular readability formulas such as the Flesch Kincaid Reading Ease.


2. Use Headings to Break Up Long Articles


A usability study described in an article by web content management expert Gerry McGovern led him to the conclusion that Internet readers inspect webpages in blocks and sections, or what he calls “block reading.”

That is, when we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we’re actively looking for.

An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.

We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we’re attracted to the headings as we move down the page.

Below, you’ll see the same set of text formatted without headings (version 1) and with headings (version 2). See which one helps readers quickly skip to the sections that interest them the most.

What you can do:

  • Before writing a post, consider organizing your thoughts in logical chunks by first outlining what you’ll write.
  • Use simple and concise headings.
  • Use keyword-rich headings to aid skimming, as well as those that use their browser’s search feature (Ctrl + F on Windows, Command + F on Mac).

3. Help Readers Scan Your Webpages Quickly


As indicated in the usability study by Nielsen referenced earlier, as well as the other supporting evidence that web users tend to skim content, designing and structuring your webpages with skimming in mind can improve usability (as much as 47% according to the research mentioned above).

What you can do:

  • Make the first two words count, because users tend to read the first few words of headings, titles and links when they’re scanning a webpage.
  • Front-load keywords in webpage titles, headings and links by using the passive voice as an effective writing device.
  • Use the inverted pyramid writing style to place important information at the top of your articles.


4. Use Bulleted Lists and Text Formatting


According to an eye-tracking study by ClickTale, users fixate longer on bulleted lists and text formatting (such as bolding and italics).

These text-styling tools can garner attention because of their distinctive appearance as well as help speed up reading by way of breaking down information into discrete parts and highlighting important keywords and phrases.

What you can do:

  • Consider breaking up a paragraph into bulleted points.
  • Highlight important information in bold and italics.

5. Give Text Blocks Sufficient Spacing


The spacing between characters, words, lines and paragraphs is important. How type is set on your webpages can drastically affect the legibility (and thus, reading speeds) of readers.

In a study called “Reading Online Text: A Comparison of Four White Space Layouts,” the researchers discovered that manipulating the amount of margins of a passage affected reading comprehension and speed.

What you can do:

  • Evaluate your webpages’ typography for spacing issues and then modify your site’s CSS as needed.
  • Get to know CSS properties that affect spacing in your text. The ones that will give you the most bang for your buck are margin, padding, line-height, word-spacing, letter-spacing and text-indent.

6. Make Hyperlinked Text User-Friendly


One big advantage of web-based content is our ability to use hyperlinks. The proper use of hyperlinks can aid readability.

What you can do:


7. Use Visuals Strategically


Photos, charts and graphs are worth a thousand words. Using visuals effectively can enhance readability when they replace or reinforce long blocks of textual content.

In fact, an eye-tracking study conducted by Nielsen suggests that users pay “close attention to photos and other images that contain relevant information.”

Users, however, also ignore certain images, particularly stock photos merely included as decorative artwork. Another eye-tracking study reported a 34% increase in memory retention when unnecessary images were removed in conjunction with other content revisions.

What you can do:

  • Make sure images you use aid or support textual content.
  • Avoid stock photos and meaningless visuals.

Series Supported by join.me

The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

Image courtesy of iStockphoto, Kontrec

More About: web design, Web Design Usability Series


July 15 2011

5 Best Practices for Applying Game Mechanics to Your Website


Craig Ferrara is a senior gaming & UI expert at Gigya, where he designs the integrations of Gigya’s technology into clients’ websites. Gigya makes sites social by integrating a suite of plugins like Social Login, Comments, Activity Feeds, Social Analytics and now Game Mechanics into websites.

Conversations about game mechanics — the rules that govern how enjoyable a game is — are changing. Formerly a topic mostly discussed by game designers and gamer geeks like myself, gamification is now part of the business discussion as marketers look to apply it to websites.

One concept that has remained constant, regardless of who is having the conversation, is to identify ways to keep players engaged and games fun. This applies to your site as you encourage social user participation via gamification tactics. Let’s break websites down by their common social tools, and target ways to effectively gamify them.


1. User Generated Content


Increase content generated by users on your site. By incentivizing content creation, the user becomes more engaged, thereby making your site richer and more dynamic, as well as improving its SEO. Content is mostly submitted through simple vehicles like comments, ratings or reviews. These are basic ways to get feedback from users based on the content you produce and present.

For example, reward top commenters, but also look for alternative ways to reward commenting on pages. Perhaps allow “weighted commentary” — that is, permit users to sort comments based on each commenter’s respective “rank,” with the most highly ranked users’ comments appearing at the top of the feed. While this kind of reward falls outside the scope of badges and points, it gives the most active users something just as desirable: clout.


2. Sharing


Aside from being both repetitive and easy, sharing can prove incredibly useful in syndicating your content. With gamification elements, users feel even more compelled to syndicate your content. While sharing naturally lends itself to gamification, content publishers should be aware of one potential pitfall: rewarding the user simply for sharing is in violation of many of the major social networks’ terms of services. Social networks prohibit immediate incentives for clicking the share button in order to prevent users from spamming their feeds with random content to earn points.

One way to work within this system is to have users work toward a larger overall goal or ranking as a result of sharing. Instead of prodding your visitors to “click to share and earn ten points,” sharing can be a means to bring users toward an achievement. Doing so gives visitors the idea that sharing has value, but does not drive toward mindless clicking. Instead, they’ll share what actually matters to them instead of just spamming their networks.


3. Feedback


The Facebook “Like,” Google’s new “+1” and other reaction buttons serve as both content contribution and sharing tools. They allow users to express an opinion with just one click. Furthermore, you can incorporate gamification by rewarding users for “liking” content on your site — prioritize the opinions and feed activity of highly ranked users. For example, when a website’s activity feed displays popular articles and top user reactions, a visitor will likely feel more compelled to click. Think in terms of Roger Ebert giving “a thumbs up” to a movie versus relying on someone less influential.

The benefits of showing ranked reactions in the activity feed are two-fold here — not only will the user expose content to others on the site, but they will also showcase their rank, thus encouraging others to achieve the same status.


4. Social Login


Social login brings an invaluable layer into the game: a user’s social graph. A basic principal in game mechanics states that users are more inclined to participate if they have some real world benefit behind the rewards. This can be as simple as increased reputation within a community. Once a user logs in via social APIs such as Facebook Connect or Twitter, she can then compare herself with gaming friends as well as social network friends, all in one space.

Now your visitor knows some people in the site community — but they’re still new to the game. How can we encourage participation? Maybe award them small amounts of points just for clicking around, or more points for remaining on a page and consuming content. Therefore, a user who may have no initial interest in earning badges will still be able to advance in the rankings given their increase in participation points. As soon as they recognize the value in earning points (perhaps their comment appears higher in the activity feed), they’ll get hooked and consciously participate. Keeping users involved in the game without any effort on their behalf is a great strategy for converting them into active gamers.


5. Keeping Score


Any good game mechanics implementation goes out of its way to educate users on achieving and advancing within a system. For instance, offer instructions alongside every badge, and show an indicator of their progress within that achievement. At the same time, you don’t want to bombard site visitors with constant, blazing reminders. Instead, consider using simple JavaScript notifications that don’t monopolize valuable site real estate.

Of course what good are all these badges and points if you can’t show them off? By integrating game mechanics into activity feeds and leaderboards, you allow your users to do just that — all while putting a human face to the game. Activity feeds not only allow users to find their friends within their social graph, but also to view their friends’ badges. In turn, those participating in the game learn how to unlock badges for themselves. Any good game mechanics implementation should go out of its way to inform the user about how to level-up.


Follow these pointers to connect your site’s social elements with game mechanics that allow you to reach both your passive and enthusiastic “gamers.” Keep in mind that tying rewards to your existing social elements is just as important as the rewards themselves. Just as with social games like FarmVille or World of Warcraft, participants should feel as if they’re part of a community through which they can proudly syndicate their achievements.

Image courtesy of iStockphoto, yurok

More About: business, game mechanics, gamification, incentives, social media, web

For more Business & Marketing coverage:


July 09 2011

40 New Digital Media Resources You May Have Missed


Whew! This week was awash with news. So, we transformed that news into advice, tips and how-to’s that you can reference for years to come.

Take Facebook’s video chat launch — we’ll guide you in setting it up. Or the space shuttle launch — we provide the Twitter accounts for dozens of astronauts and space experts. And Google+ has been on the minds of millions — we present its pros and cons. Mashable not only releases breaking news, we help you learn how to apply it to your business, your interests and your personal life.

If spare time for reading didn’t exactly factor into your busy week, here’s a roundup of resources that appeared on Mashable.


Editors’ Picks



Social Media


July 06 2011

7 Winning Examples of Game Mechanics in Action


Gabe Zichermann is the author of the books Game-Based Marketing (Wiley, now available) and Funware in Action (Manning, Q3/2010). He is also the CEO of professional mobile social networking startup beamME and frequently muses about games and the world at funwareblog.com.

Gamification is the use of game thinking and game mechanics to engage audiences and solve problems. In other words, it means taking the best lessons from games like FarmVille, World of Warcraft and Angry Birds, and using them in business. Whether targeted at customers or employees, across industries as diverse as technology, health care, education, consumer products, entertainment and travel, gamification’s impact can already be felt.

While some have criticized the concept of gamification as shallow or demeaning, the initial findings from gamification specialists are nothing short of astonishing. Regardless of your business model, the following seven gamified innovations should inspire you to strategize via game analysis.


1. Make a Market: Foursquare


The first incarnation of the location-based networking field was littered with carnage, leading many to write off the entire concept. But Foursquare’s founders, veterans of the now defunct Dodgeball, succeeded with an ace in the hole: game mechanics. Exposed to the concept while working at Area/Code (Zynga’s recently acquired New York City-based game design shop), Dennis and Naveen concluded that mobile social networking would work if you were to change the dynamic from multiplayer to single player.

Instead of depending on the action of the crowd to provide intrinsic reinforcement (e.g. “Hey, you’re around the corner. Let’s grab a beer!”), Foursquare overcame the empty bar problem by becoming a single-player game. The user competes for badges and mayorships whether or not anyone is there to meet him. In the process, Foursquare proved that location-based networking wasn’t doomed to fail, that simple game mechanics can affect behavior, and that you can engage 10 million customers — all while raising $50 million.


2. Get Fit: NextJump


When you listen to NextJump CEO Charlie Kim describe his zeal for physical fitness, you immediately understand the energy that has propelled this interactive marketing platform into one of the nation’s fastest growing businesses. But keeping fit isn’t just Kim’s personal goal — he told me it’s also a practice he believes his employees should value as a tool for improving their lives, reducing company insurance costs and preventing employee absenteeism. To achieve those goals, NextJump installed gyms in its offices, and built a custom application that enabled employees to check in to each workout. Ultimately, they rewarded the top performers with a cash prize. After implementation, around 12% of the company’s staff began a regular workout regimen.

But Kim wasn’t satisfied. By leveraging the power of gamification, he retooled the fitness “game” to become a team sport. Now NextJump employees could form regionally based teams, check in to workouts and see their team performance on a leaderboard. Leveraging the game themes of tribalism and competition had an astonishing effect on behavior. Today, 70% of NextJump employees exercise regularly — enough to save the company millions in work attendance and insurance costs over the medium term — all the while making the workplace healthier and happier.


3. Slow Down and Smell the Money: Kevin Richardson


In many countries, speed cameras snare thousands of drivers each year — a quick shutter flash earns a miserable ticket in the mailbox. In some countries, particularly in Scandinavia, ticket amounts correspond with the driver’s salary, rather than his speed. But Kevin Richardson, game designer at MTV’s San Francisco office, re-imagined the experience using game thinking.

His innovative Speed Camera Lottery idea rewards those drivers who obey the posted limit by entering them into a lottery. The compliant drivers then split the proceeds generated from speeders. Richardson used gamification concepts to turn an negative reinforcement system into a positive, incremental experience.

When tested at a checkpoint in Stockholm, average driver speed was reduced by 20%. If the plan were scaled across the U.S., the results could mean thousands fewer injuries, millions of dollars worth of reduced costs and substantial environmental benefits.


4. Generate Ad Revenues: Psych & NBC/Universal.


Psych is a popular program on the USA Network, but these days, creating value for TV advertisers means connecting to the web and social media in creative ways. Enter Club Psych, the online brand platform for the show, and among the first major media platforms to get gamified.

The brainchild of NBC/Universal executive Jesse Redniss, Club Psych implemented gamified incentives to raise page views by over 130% and return visits by 40%. The resulting rise in engagement has generated substantial revenue for the company, bringing registered user counts from 400,000 to nearly 3 million since the launch of the gamified version. The media conglomerate has since embraced the strategy across properties, bringing gamification to ratings leaders like Top Chef and the The Real Housewives.

Other content publishers, like Playboy, have seen similar results. Their Miss Social Facebook app has achieved an 85% re-engagement rate and 60% monthly revenue growth with gamification.


5. Make Research & Evangelism Count: Crowdtap


Getting product feedback is a costly and challenging effort. Therefore, most marketers have come to loathe ineffective surveys and expensive focus groups. Enter Crowdtap, the hot New York City startup launched earlier this year that reached $1 million in revenue and 100,000 users in just over 90 days. The company offers consumers gamified rewards to complete research tasks and to share brand advocacy with others — something mere market research simply cannot do.

Through the use of gamified, virtual rewards, the company has been able to raise average user participation by 2.5 times, thus reducing research costs by 80% or more for key clients. By targeting consumer rewards along a motivational (not demographic) axis, CEO Brandon Evans reports that competition-oriented users are four times more likely to create quality comments and 12 times more likely to refer others to the platform. Instead of competing against the system, they challenge themselves and peers to excel — an extraordinary achievement by any measure.


6. Save the Planet: RecycleBank


Modern life is wasteful, and easy fixes are rare. By tapping into people’s desire for reward and competition through gamified experiences, governments, utilities and entrepreneurial powerhouses are rewriting the rules of sustainability — and making the world a better place.

In a Medford, MA pilot program, households competed in an energy smackdown in which the winning family managed to lower its carbon footprint by 63%. In a program called Putnam RISE, Indiana families are making thousands of pledges to reduce power usage through a competition. The schools whose families conserve the most energy receive a cash prize. And across the country, incentives experts at Recyclebank are using the power of gamification to radically improve home environmental compliance. So far, they’ve utilized game mechanics such as points, challenges and rewards to drive breakthroughs. For example, the project has seen a 16% increase in recycling in Philadelphia, where the recycling rate has broken 20% for the first time in history.


7. Make Teaching Fun: Ananth Pai


As former globetrotting business executive turned elementary school teacher, Ananth Pai has seen it all. But when he inherited his class in White Bear Lake, MN, Pai realized there had to be a better, more engaging way to teach. So he grouped students by learning style, and retooled the curriculum to make use of off-the-shelf games (both edutainment and entertainment) to teach reading, math and other subjects. Students play on Nintendo DS and PCs, both single and multiplayer, for example. Their overall point scores are tabulated and shared using leaderboards.

In the space of 18 weeks, Mr. Pai’s class went from below third grade average reading and math levels to mid-fourth grade. The classroom success is supported by video interviews with his kids, who say “Learning with Mr. Pai is fun and social.”


In addition to these seven great tips, dozens more success stories pour in each week, underscoring the tremendous investment of time and money into gamification. Gartner Group estimates that by 2015, 70% of the Forbes Global 2000 will be using gamified apps, and M2 Research forecasts that U.S. companies alone will spend $1.6 billion on gamification products and services by that same year.

Gamification spans the gamut — from the hundreds of startups that launch with game mechanics incorporated into their products, to the big brands that make gamification a hallmark strategy. Regardless, the message is the same: the future will be more connected, more social and more fun than ever before.

More About: competition, foursquare, game mechanics, games, gamification, incentives, social media

For more Business & Marketing coverage:


July 04 2011

5 Free Virtual Firework Shows To Celebrate July 4

If your favorite part of July 4 celebrations is the fireworks, then we’ve got a fun gallery for you. We’ve found five tools that offer virtual fireworks you can enjoy right at your desk.

Whether you want to send someone an animated message, play around to create a mesmerizing browser show or add fireworks to your own site, we’ve found web sparklers to suit.

Light the touchpaper, stand at a safe distance and rocket through the gallery. You can find out more about the tools by clicking on the blue title text at the top left of each slide. Let us know which ones you like in the comments below.


1. Enjoy Canvas Fireworks





This hypnotic HTML5 Canvas experiment offers three different shapes of fireworks that you can control with your mouse for a 3D wow experience.


2. Write a Message in Fireworks




This is tons of fun. Compose your own message and see it written across the London skyline in fireworks. You can also share it with an automatically generated tiny URL.


3. Add Fireworks to Your Own Site With Fireworks.js




You can add fireworks to your own site with this nifty Javascript animation experiment. Or if you're just firecracker-curious, you can play around with it on the dev's site.


4. View Augmented Reality Fireworks




Simply print off the marker, fire up your webcam and you can enjoy your very own miniature augmented reality fireworks show.


5. Go Old School With Fireworks Just For You




Dating back to 2002, this particular desktop show is perfect for kids, offering mesmerizing fireworks generated by the click of your mouse.


BONUS: Join the HTML5 Fireworks Festival




If you're handy with HTML5 then join the "Hanabi fireworks festival" by forking the sample code, or creating your own from scratch. The resulting entries will then be revealed as an online spectacular on July 7.

More About: apps, fireworks, HTML5, july 4, List, Lists, software, web apps

For more Dev & Design coverage:


7 Great JavaScript Resources


As browsers and server-side platforms advance, and libraries new and old grow and mature, JavaScript evolves as well. Staying at the top of your game is important. As a JavaScript developer, you’ll need to keep up with the latest news and learn new skills.

We’ve put together a list of seven of our favorite JavaScript resources to help save you time and energy along the way. Whether you’re a beginner or a seasoned pro, we think you’ll find the sites below both informative and beneficial. If you know of other great resources, feel free to share them in the comments.


1. Mozilla Developer Network




The MDN has become the de facto resource for JavaScript documentation, and is an excellent resource for beginners and seasoned developers alike. Here you'll find the official and complete JavaScript reference, as well as useful guides, tutorials and articles covering everything from the basics of how JavaScript works to its best practices and design patterns. The MDN also has a thorough DOM reference, which we highly recommend checking out as well.


2. JQAPI




JQAPI is an alternative to the official jQuery.com API documentation. If you're a client-side JavaScript developer, chances are you probably have used, or at some point will use, jQuery in at least one of your projects. Whether your use is occasional or daily, you'll want to keep up with the latest development and new features in JavaScript's most popular library. Each new release improves security and performance via a slick, responsive and intuitive interface for quick browsing and searching of jQuery documentation. The UI here really is top-notch, and as a bonus, there's an offline version available for download.


3. JS Fiddle




JS Fiddle is a JavaScript pastebin on steroids. Create, share, execute and test your JavaScript right in the browser. This is a great tool for collaborative debugging or for sharing code snippets. It's also a fun way to perform quick experiments and test out new ideas. Simply combine your JavaScript, HTML and CSS, then click the "Run" button to see the results. You can also validate your JavaScript code against JSLint and save your Fiddle for use later, or share with others. JS Fiddle provides a number of useful features, like the ability to load up common frameworks automatically (to test your jQuery or MooTools code, for example) and as-you-type syntax highlighting, just like you'd get by writing code in your favorite IDE.


4. Eloquent JavaScript




This free ebook is an introduction to programming and the JavaScript language, written by developer and tech writer Marjin Haverbeke. The book reads much like a tutorial, and introduces a number of concepts and real-world applications in a clean, concise style. Interactive examples are also available, which means you can read about various techniques. You'll also get a chance to see them in action, and tinker with the code yourself. We found a lot of positive reviews for this book, so if you're new to JavaScript, this is definitely a book worth checking out.


5. Douglas Crockford's JavaScript Videos




An undisputed expert in JavaScript, Douglas Crockford is Yahoo's JavaScript architect and is one of the individuals instrumental in the planning, development and future growth of the language. The videos and transcripts on the YUI blog derive from a series of talks given by Mr. Crockford about the history of JavaScript, its future and its use today. Though the series is now about a year and a half old, we still think you'll find the videos informative. We certainly recommend watching them for a better understanding of the language, where it's been, how it works and where it's going.


6. How To Node




Not all JavaScript development takes place in the browser. NodeJS is one of the web's most popular server-side JavaScript frameworks. Whether you're a seasoned Node developer or someone who's looking to add server-side JavaScript to his repertoire, How To Node offers a great collection of articles on NodeJS development. This community-driven site offers an excellent repository of Node tutorials that's proven itself useful on a number of occasions. No Node developer toolkit would be complete without it.


7. DailyJS




We've looked at some great tools and reference material, covered tutorials from our favorite libraries and frameworks and touched on both client and server-side JavaScript development. However, we're always searching for something new. DailyJS is a popular JavaScript-focused blog that brings you the latest and greatest JavaScript news, offers tips and techniques, and reviews libraries, plug-ins and services for JavaScript developers. If you're just itching for your daily dose of JavaScript goodness, DailyJS has you covered.

More About: design, dev, features, javascript, List, Lists, web design, Web Development

For more Dev & Design coverage:


June 16 2011

8 Superior WordPress Plug-ins for eCommerce

There’s no doubt that WordPress is one of the most popular blogging platforms and content management systems on the Internet. It’s widely supported, relatively easy for the end user to learn, and is easily extensible. For the average user, the WordPress theme engine makes it easy to customize the look and feel of your site. It features a robust plug-in system, and with an expansive ecosphere of existing plug-ins, you can add new features with ease.

It stands to reason that many a small business would turn to WordPress to establish its online presence. So we’ve put together a collection of great ecommerce plug-ins to add catalog, cart and sales functionality to your WordPress site. They range from basic to complex, from free to commercial, but each provides tools that allow you to easily sell your wares on a WordPress-powered website.


WP e-Commerce





WP e-Commerce is one of the most popular ecommerce plug-ins for WordPress. For a free plug-in, WP e-Commerce doesn't skimp on features. It supports multiple payment gateways such as PayPal, Authorize.net and Google Checkout. The plug-in comes with a variety of ready-made themes, but still fully supports the creation of your own custom themes. You can also customize your order forms, share products via social networking integration, organize products into multiple categories, provide product variations (e.g. size, color) and much more.

For all its features, WP e-Commerce installation keeps it simple, requiring no more effort than other WordPress plug-ins - simply upload to the plug-ins directory and install from within WP Admin. If you’re looking to quickly launch an ecommerce site while avoiding a large time commitment or financial investment, WP e-Commerce is a fast and free, yet feature-rich solution.

Price: FREE


Jigoshop




Jigoshop is another great, free WordPress plug-in that looks quite promising. Boasting a lengthy set of features, Jigoshop gives you complete control over managing your inventory, coupon codes and shipping rates. The plug-in also supports multiple currencies, tax collection and various localization options. While the list of supported payment gateways isn’t quite as extensive as WP e-Commerce, PayPal is supported. Jigoshop also includes a couple of handy sidebar widgets for product search and filtering.

Though a few more supported payment gateways would be nice, we’re still impressed with the features of this free plug-in, and definitely think it's worth trying out.

Price: FREE


ShopperPress




ShopperPress is meant to act as a one-stop solution for ecommerce in WordPress. With over 20 ready-made themes, you simply install the plug-in, select your desired look, add products and start selling. ShopperPress supports both physical and digital goods, custom order forms, multiple languages and over 20 payment gateways. You can also easily integrate Google Analytics, as well as your own advertising. It's not entirely clear how easily you can customize the storefront beyond the 20 or so included templates, but if you need a drop-in solution for ecommerce, ShopperPress may be just what you're looking for. Furthermore, the $79 price tag includes technical support from the ShopperPress team.

Price: $79


Cart66




Formerly PHPurchase, Cart66 is a WordPress ecommerce solution for selling physical and digital goods as well as subscriptions. The plug-in includes Amazon S3 integration so you can easily and reliably deliver digital downloads to your customers. PayPal integration allows for Instant Payment Notification and delivery. Cart66 also lets you set up your own merchant accounts and gateway services.

It has all the features you'd expect from a commercial ecommerce solution, including inventory tracking, support for promotional codes and multiple product variations. Unlike some of the other plug-ins we've discussed, Cart66 doesn't have a storefront, per se, but rather allows you to drop products into any WordPress page or post on your site. While this may be a hindrance to some, this level of flexibility is great for vendors selling only a few products, or for those who wish to place some products behind a registration page or member area.

Price: $89-$399


Shopp




Shopp is an SEO-friendly, powerful and popular ecommerce plug-in. Shopp claims to work out of the box with any WordPress theme, so integration into an existing site should be simple. Other WordPress-centric features include dashboard widgets to easily view sales and product history, short codes and theme widgets to allow you to quickly drop Shopp elements and products into your pages.

Shopp also has a host over other standard ecommerce features: multi-category inventory management, payment history, multiple product images and variations, email notifications and a shipping calculator. The software also includes a number of promotional tools and supports a large variety of payment gateways, either natively or via plug-ins (PayPal, Google Checkout, 2Checkout, First Data, Authorize.net and more).

Price: $55-$299


eShop




Free plug-in eShop is another economical solution for rapid ecommerce integration into your WordPress site. eShop supports both physical and digital product sales, integrates Authorize.net and PayPal gateways (as well as a few others) and is compatible with the WP affiliate plug-in. Some basic features include stock management, configurable email templates, a variety of shipping methods, basic statistics, downloadable sales data, and much more. Like Cart66, eShop uses WordPress pages and posts, so you can easily integrate your products into any section of the site.

Price: FREE


WP Secure Downloads




This premium WordPress plug-in is designed specifically for managing and selling digital goods online and is perfect for selling software, music, artwork, documents, and anything else to be delivered as downloadable content. The plug-in installs just like any other WordPress plug-in, with no outside configuration necessary, and boasts features such as automatic theme integration, a built-in shopping cart and subscription-based purchases.

If your sales are limited strictly to digital products and you don't want the overhead of a large ecommerce package, but desire the flexibility of simple product management and sales, WP Secure Downloads is the ideal solution.

Price: $37-$179


MarketPress




This BuddyPress and WPMU-compatible ecommerce plug-in allows you to quickly and easily create an entire network of ecommerce sites (of course, you can use it for single storefronts as well). If you've got a lot of products to sell across a number of websites, or want to create a network of hosted ecommerce sites, this is definitely the plug-in to consider.

MarketPress keeps your database tables clean by using custom post types and fields for product data; new products are added simply by creating a new post. Other features include multiple product images, coupon codes, custom email templates, multiple currency support and customizable widgets. The plug-in also features a powerful API for extending functionality - for example, to create your own custom payment modules or collect a percentage of sales from network stores.

Price: $39-$209


More WordPress Resources From Mashable:


- 7 Ways to Build a Business Around WordPress
- HOW TO: Transfer Your Blog From WordPress.com to WordPress.org [VIDEO]
- How WordPress Themes Actually Work [INFOGRAPHIC]
- HOW TO: Make Your WordPress Blog More Like Tumblr
- 8 of the Best Premium WordPress Themes


More About: business, ecommerce, List, Lists, shopping carts, small business, Web Development, WordPress, WordPress plugins

For more Dev & Design coverage:


May 20 2011

5 Strategies for Maximizing Your Website’s Conversion Rate


David Brussin is the Founder and CEO of Monetate, the leading provider of testing, targeting, and content optimization for websites.

As companies turn to social media giants like Facebook and Twitter to drive traffic and gain new customers, there is a growing risk that the website — one of the most powerful sales and marketing tools — will be overlooked.

It is important for every consumer-facing enterprise to seek out new prospects and drive additional traffic via all available social media channels. Yet too many companies still neglect some basic strategies that could maximize conversion rates for the traffic they already have. The following strategies — when implemented correctly — will not only lead to an increase in conversion rates and revenue from mobile and social media channels but will also help drive companies toward an important cultural transformation, one that can elevate them above competitors and help them stay there.


Some Perspective


Commerce is becoming less about channels and more about touch points. Marketing is moving beyond multichannel to become “multipoint,” and coping with this shift is a serious challenge for businesses of all kinds.

Fortunately, the website remains a place where many customer conversations are initiated, and a growing percentage of transactions are completed, even if they begin elsewhere. A strong yet nimble website — one that can efficiently leverage customer data — will put brands in a better position to effectively respond to the emerging demands of multipoint marketing. Without such a site, they will continue to lose out on potential revenue and lose ground to more agile competitors.


1. Understand Your Customer


By tracking anonymous consumer behavior on the website, companies can display campaigns, content, offers and experiences tailored to an individual’s browsing habits. Watch what they search for and what they look at, not just what they buy.

For example, you might display the latest Air Jordans to consumers who have a history of browsing Nike sneakers. In my experience, retailers who target promotions based on brand preferences see a double digit increase in average order value.


2. Make Webpages Relevant


Websites should adjust marketing content in real time to reflect current events or other sales-related factors, such as customer location. Content that is tailored to different key segments (for example, notifying overseas consumers of discounted international shipping or letting customers from Florida know there’s no sales tax) can help persuade them to purchase.

Relevance includes adjusting site content to reflect where a consumer comes from. For example, were they directed from Facebook or an email newsletter? Make sure the messaging that brought them to the site is reflected in the site experience and inform that site experience with what analytics show about that traffic segment. For example, data may indicate that the buying habits of customers from Facebook are different from those who land on your site via email.


3. Use Offline Learning to Inform Online Action


Many multichannel retailers have accumulated a lot of knowledge about their customers. For example, managers of brick and mortar stores know that there are local brand preferences. Headquarters may track brand preference by region or state. So use that data to geo-target online traffic.

If Texas shoppers prefer Wranglers to Levis, highlight Wranglers to online traffic from Texas. The results will be improved conversion rates and higher average order values.


4. Consistency Is Key


Traffic that comes from outside channels like social media will convert better if consistent messaging is maintained throughout the sales cycle. A promotion that initially drives traffic to a website (such as “Twitter followers receive 20% off”) should be reflected not just on the landing page but also on each page that the visitor sees until they check out.

This doesn’t mean a site makeover. Instead, the message simply needs to echo the messaging that caught the consumer’s attention in the first place.


5. Test, Test, Test


To know if a site is truly compelling, brands must constantly test it to ensure that content is presented in a manner that resonates with consumers to produce optimum results. Businesses should test for sticking points and optimize the choice of messaging, design of buttons, layout of forms and display of positive reinforcements like trust seals and privacy assurances. Even a small improvement at each stage of the process will pay big dividends.

Smart marketers will establish a culture of testing. By making the use of A/B and multivariate testing tools, brands can increase creativity, experimentation and revenue. A culture of testing in which decisions are data-driven is the best posture from which to meet marketing challenges.


Looking Forward


I would love to be able to wrap up by saying “do the above and you’re done.” But that’s not how commerce works today. The rapidly evolving world of multipoint marketing means that brands must constantly tweak the experience that their website delivers to each visitor segment based on everything they know about that segment. That knowledge includes data drawn from all channels — something a website can provide if the proper technology is in place to tap it.


For more lists, how-tos and other resources on this topic, check out Mashable Explore!

Image courtesy of iStockphoto, Jirsak

More About: business, MARKETING, social media, web, web design, Web Development, web traffic

For more Business & Marketing coverage:


May 15 2011

9 Outstanding Websites for Design Inspiration


When it comes to web design and development, we’ve offered up our top picks for tools of the trade. We’ve shared great tips from pro developers. We’ve even wrangled exemplary sites to learn from.

But sometimes, a healthy dose of artistic inspiration is in order. If you’re a web designer (or web design afficianado) and low on creative juice, take a gander at some of these sites — recommended by top designers themselves — that push the limits of what artistic and technical expression can be on the web.

Have you come accross a truly spectacular site design that deserves the web’s attention? Share it in the comments below.


1. Lost World's Fairs - Atlantis




Take a journey 20,000 leagues under the sea via this compelling proof-of-concept.

"The Lost World's Fair project is a showcase of IE9 Web Open Font technology," says Jesse Thomas, founder and CEO of the design firm Jess3.

There are a few interesting projects from The Lost World's fair series, but Thomas picked Atlantis "because it was enjoyable to control how fast I processed the information. With this kind of responsive design, I can go slow the first time, and quick the next time."

Thomas also notes the aethetics. "The use of illustration is soothing. I really appreciate in these examples the attention to detail."


2. BeerCamp at SXSW 2011




Web designer Dan Rubin with code shop Webgraph suggested we take a look at this event promo site.

The design is unassuming at first, but the scroll bar packs a surprise.

"This is another stunning site from n'clud for an event at this year's SXSW. The scrolling effect is outstanding, taking you through the site with plenty of physical depth," says Rubin. "It's one of my favorite examples to show during workshops and presentations."

It's hard to explain just how impactful this website is unless you've experienced it. Go ahead. We'll be here when you get back.


3. Dmig 5




We've higlighted Design Made in Germany before when it won the first annual Web Font Awards, but it's so impressive it bears another mention.

Brad Colbow, an independent web designer and illustrator picked this one for our gallery.

"I'm a sucker for great illustration integrated onto a site, and this one does it really well," Colbow says. "It's using some transparency effects to change the backgrounds as you scroll down. This is one of those sites that looks great as you resize it in other browsers too."


4. Analog




Minimalism still rules the well-designed web, but that doesn't mean you should skimp on the details. The information site for web design shop Analog is the pick of UK web designer (and frequent Mashable contributor) Grace Smith.

"Analog is simple and elegant, with beautiful intricate details," says Smith. "However, it's the clever use of 'Easter Eggs' that make visiting this one-page site such a pleasure. The use of CSS3 transitions on the mugshots, along with the unique GeoIP implementation and Grid (try pressing G), make this a clear example of how to create a visually stunning site that utilizes current web development practices and encourages users to return."


5. Guide to the App Galaxy




WordPress developer Brian Casel (another design contributor to this site) pointed us toward this clever informational site from Google.

It's another effective use of the scroll wheel, and the graphics can't be beat. "It's both visually appealing and highly informative at the same time," Casel notes.


6. Octavo Designs




The web has seen its share of horizontally scrolling sites -- some better implemented than others. The portfolio for Octavo Designs bucks the trend of awkward side-scrollers, according to Kelli Shaver, a web/UI developer and regular Mashable contributor.

"The site is just full of texture and warmth, with very detailed, unique, often subtle illustrations," Shaver notes. "I think it works really well with the typography. Everything just comes together to create a very engaging experience."


7. One Bit Increment




A web full of shiny vectors and smooth white spaces can eventually get boring. Graphic designer Emily Caufield points out a more tactile approch in One Bit Increment's "gamified" homepage.

"I thought this site was a great fusion of meticulous handmade art and the wonders of modern technology," says Caufield, referring to the paper cut-outs that comprise the virtual landscape of this impressive Flash-based design. "It functions as a website, a body of art, and a game."


8. Ben the Bodyguard




Informational sites can become stale -- logo splash, navigation bar, some floating text, and a few graphic bumpers if you're lucky.

That's why "Ben the Bodyguard" is a step in the right direction, says Jacob Gube, founder and chief editor of the design blog Six Revisions and frequent Mashable contributor.

"It's a great proof-of-concept of what HTML5 and CSS3 can do," says Gube. "The site has a memorable user experience design; something that all websites should strive for, no matter how you execute it. Is it the most functional, beautiful or usable design? Definitely not. But did it succeed in its intended objective, which is to generate buzz about an upcoming web service? 13,000+ tweets says it does."

Take a stroll through this site to see what we're talking about.


9. Awwwards




Looking for a bubbling font of great design examples? LA-based web designer Soh Tanaka reccommends checking out the Awwwards (get it?), a site that recognizes and promotes the best of innovative design.

"It usually features sites that are very interactive and that push the limits of CSS3 and JavaScript," Tanaka says. "I feel most of these sites are pushing the boundaries of design and development on the web."


Interested in more Dev & Design resources? Check out Mashable Explore, a new way to discover information on your favorite Mashable topics.

Image courtesy of iStockphoto, skodonnell

More About: design, inspiration, List, Lists, web design

For more Dev & Design coverage:


May 14 2011

33 Essential Resources for Developers & Designers


For months now, web developers and designers have flocked to Mashable to learn from and share our how-to guides, analyses, videos, lists, videos and galleries.

Below, we’ve assembled 33 of our favorite resources since January and separated them into three easily digestible lists: inspiration, design and development.

To keep up to date with news and resources about the topics listed below, feel free to follow Mashable‘s dev & design channel on Twitter and become a fan on Facebook.


Inspiration



Design



Development


For more news and resources on the topics covered in this post, you can follow Mashable‘s dev & design channel on Twitter and become a fan on Facebook.

More About: features, web design, Web Development

For more Dev & Design coverage:


Why Today’s Developers Might Be Programming Themselves Out of Tomorrow’s Jobs


Christopher Kahler is a co-founder and CEO of Qriously, a service for measuring real-time public sentiment by replacing ads with questions in smartphone apps. Follow him on Twitter

In late 2010, Apple approved 14-year-old Robert Nay’s app, Bubble Ball, for publishing on the App Store, where it quickly racked up 2 million users and, for a short while, even wrested the ever-popular Angry Birds from its perch at the top of the download charts. It’s a staggering achievement for a young teen with no formal programming experience -– never mind education. No skills. Nada. Zip.

Nay used an application called Corona that essentially allows users to build smartphone apps using a graphical interface, eliminating the need of any coding skills. He’s a pioneering user of the next generation of platform dependencies — innovations upon which further innovations can be built.

The term “platform dependency,” referring to products and services that are symbiotic with an existing platform (FarmVille on Facebook, Tweetdeck on Twitter, Rapportive on Gmail, and so on), has been discussed at length in several recent blog posts that weigh its dangers and opportunities.

While these relationships are not unique to “our” industry, the heady pace of evolution in the information sector, modeled with equal parts idealism and fantasy, is pointing toward some fascinating outcomes. The most fascinating of these is also the most paradoxical: The smartest kids are coding themselves into unemployment.

Before I’m viciously indicted with committing the Luddite fallacy, give me a chance to qualify: Smart kids code platforms that are making it increasingly redundant to know how to code — look at Nay for instance. As such, coding as a skill is becoming a casualty of efficiency, which is a beautiful thing. Coding is a means to an end, and if new methods are developed that enable us normal folks to achieve comparable results, then that’s a win in my book.

To a certain extent this is already happening, albeit to a less romantic degree. Take Google App Engine for instance. Instead of needing to set up whole server infrastructures, you just upload a simple web app and Google handles everything else, from load-balancing to scaling. Many companies don’t even go that far. A Facebook Page, with its built-in tools to distribute content, advertise, promote and engage with an audience, is often all you need.

Beyond the purely technical realm, services and layers are appearing to make aesthetic skills more and more redundant as well. Enterprise software company Cloudera used 99designs, which recently scored $25 million in funding, to crowdsource its logo on the cheap. And apps like Instagram and Retro Camera that allow users with little “skill” to take brilliant photographs.

Eventually, you won’t need to have any technical knowledge in a world increasingly defined by technology.

Rather, the only thing you will need to have is an idea, and having good ones will be the only meaningful thing setting you apart from others. I like to think of it as the triumph of creativity over learned skill — a change that some believe has ramifications for formal education as well.

The only remaining question is: Where are your ideas going to bubble up from?


Interested in more Dev & Design resources? Check out Mashable Explore, a new way to discover information on your favorite Mashable topics.

More About: apps, platforms, programming, web apps, Web Development

For more Dev & Design coverage:


May 07 2011

4 Free Ways to Learn to Code Online


The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

Learning to code is something every tech-minded person should try at least once — and the wealth of online courses, many of which are free or surprisingly inexpensive, make learning about programming easier than ever.

If you’re thinking of picking up C++, Ruby on Rails, Python or Java, these online options might be a good way to test the waters of programming before you fully invest your time and money in formal training or certifications. And if you’re a veteran programmer in need of resources for learning new languages, these sites might help you a bit, too.

One disadvantage of learning to code through an online platform is the lack of face-to-face interactions with an instructor. But don’t let that intimidate you — Google, Stack Overflow, and other online forums (even Twitter) are great ways to get help when your code won’t compile, you don’t understand a concept or you just get frustrated.

In the comments, let us know if you’ve found other great resources for learning about programming — or other sites for support and Q&A for newer developers.


UC Berkeley Webcast/Courses




The University of California at Berkeley has an extensive catalog of webcasts, including events and courses. The coursework is entirely free to access, and it includes video and audio webcasts of computer sciences classes from the current semester all the way back to 2003.


Mozilla's School of Webcraft




Mozilla's 100% free developer training site is all about teaching noobs and jedis alike how to code. If you want to get started coding with something like HTML or if you're an experienced dev who wants to dive into Python, the School of Webcraft is something worth checking out. Several courses generally run simultaneously, and new classes are being drafted all the time.


Google Code University




From Google Code, we have the Code University, a free and fascinating resource. And of course, it has its own forums for learners to ask questions and get help. True beginners can also start out with the introductions and tutorials, which are designed with newer devs in mind.


MIT's OpenCourseWare




If you've dreamed of studying computer science at one of the U.S.'s leading tech institutions, here's your chance. MIT's free and accessible courses are great for ambitious would-be coders. Check out the full list of courses for computer science, which include introductions to Java, Python, C++ and more.


Series Supported by Rackspace
rackspace

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

Image based on a photo from iStockphoto user alxpin


More Dev & Design Resources from Mashable:


- Ruby on Rails: Scaling Your App for Rapid Growth
- Should Your API Be Free or Pay-to-Play?
- HOW TO: Get Devs to Use Your Company’s API
- Should Your Company Offer an API?
- 10 Tools for Getting Web Design Feedback

Top image courtesy of iStockphoto user nullplus

More About: beginner, code, coding, developers, development, education, learning, programming, web development series

For more Dev & Design coverage:


February 15 2011

How Open Data Initiatives Can Improve City Life


Major city governments across North America are looking for ways to share civic data — which normally resides behind secure firewalls — with private developers who can leverage it to serve city residents via web and mobile apps. Cities can spend on average between $20,000 and $50,000 — even as much as $100,000 — to cover the costs of opening data, but that’s a small price to pay when you consider how much is needed to develop a custom application that might not be nearly as useful.

Here are a few examples of initiatives that are striving to make city governments more efficient and transparent through open data.


1. Apps4Ottawa – Ottawa, Quebec


Careful to adhere to security and privacy regulations for their open data program, the City of Ottawa started sharing data in several areas: geo-spatial (roadways, parks, runways, rivers, and ward boundaries); recreation facilities; event planning; civic elections data; and transit, including schedules. Other data the city is pursuing includes tree inventory, collections schedules for garbage, recycling and compost, and bike and foot paths.

Ottawa aligned their first open data contest, Apps4Ottawa, with the school year (September 2010 to January 2011 ) to involve colleges and universities as well as residents and local industry. Categories for the contest included “Having Fun in Ottawa,” “Getting Around,” “Green Environment/Sustainability,” “Community Building,” and “Economic Development.” The winner is scheduled to be announced later this evening.

Guy Michaud, chief information officer for the City of Ottawa, said their open data efforts have already spurred economic development and is meant to be good for local entrepreneurs. The city receives no revenue through the apps, and the developers can sell what they create. In turn, Ottawa residents get improved services from applications that are created, with better access to city data and more user-friendly formats and platforms.


2. CivicApps.org – Portland, Oregon


After tracking Vivek Kundra’s efforts at the federal level with data.gov, Portland, Oregon launched CivicApps.org, a project initiated out of the mayor’s office to bring a more localized approach to the open data movement. Skip Newberry, economic policy advisor to the mayor, say that the project’s main objective is to improve connections and the flow of information between local government and its constituents, as well as between city bureaus. To call attention to the release of public data, they also launched an app design contest, highlighting the tech talent in Portland’s software community.

According to Rick Nixon, program manager for the Bureau of Technology’s Open Data Initiative for the city of Portland, CivicApps.org took a more regional approach to cover the multiple layers of local government: County, Metro, TriMet, and the City of Portland, all of which collect and maintain various kinds of public data. Data sets released include regional crime, transit, infrastructure (i.e. public works), and economic development programs. Additional projects, such as the PDX API, have been launched in order to make the raw data from CivicApps more useful to developers.

In addition to developer-specific apps, a number of transit related apps — bike, train, bus, mixed modes — were also developed. A very popular and established transit app, PDXBus, was re-released as open source under the rules of the CivicApps contest. Other popular apps helped provide residents greater awareness of their surroundings such as where to find heritage trees, where to find urban edibles, and where to locate each other during disaster relief efforts.


3. CityWide Data Warehouse – Washington, DC


For years, the District of Columbia provided public access to city operational data via the Internet. In keeping with the mayor’s promise to be transparent, the program CityWide Data Warehouse was launched, and provides citizens with access to over 450 datasets from multiple agencies. The first two datasets released were service requests from the mayor’s call center, including trash pickup, pot hole repair, street light repair, snow removal, parking meter issues and crime data.

According to David Stirgel, program manager for Citywide Data Warehouse, the project looks for data that be of interest to the widest possible audience and which will remain reusable over time. Some of the applications that have come out of the program include Track DC, which tracks the performance of individual District agencies, and summary reports that provide public access to city operational data. Some of the applications built by companies and individuals using the data include Crime Reports and Every Block.

In 2008, the District Mayor’s office, the District of Columbia’s Office of the Chief Technology Officer, and digital agency iStrategyLabs launched Apps for Democracy, an open code app development contest tapping into District data that cost $50,000 and generated 47 apps. The contest was repeated in 2009. Over 200 ideas and applications were submitted, and the winner was an iPhone and Facebook app called Social DC 311. It could be used to submit service requests, such as reporting potholes and trash problems. An honorable mention was given to FixMyCityDC. Unfortunately, neither app is maintained today.


4. NYC Data Mine – New York, NY


NYC BigApps 2.0 is part of an initiative to improve the accessibility, transparency, and accountability of city government. According to Brandon Kessler, CEO of ChallengePost, the company and technology powering the NYC BigApps 2.0 Software Challenge, Mayor Bloomberg challenged software developers to use city data from the NYC.gov Data Mine to create apps to improve NYC, offering a $20,000 in cash awards to the winners.

The second annual challenge closed its call for submissions at the end of January 2011 and opened the vote to the public. Voting ends on March 9. Requirements included that the software applications be original and solely owned by the entrants, that they use at least one of the datasets from the NYC.gov Data Mine, and be free to the public throughout the competition and for at least one year after the challenge. The panel of judges reads like a “who’s who” of New York tech luminaries, and includes Esther Dyson of EDVenture, Fred Wilson of Union Square Ventures, Jack Dorsey of Square and Twitter, and Kara Swisher of All Things Digital. One of the first year’s winning apps was WayFinder, an augmented reality Android app which allows users to point their phone in a direction and see which subways and Path trains are in front of them.


5. DataSF – San Francisco, California


Like other city governments, San Francisco’s goal for their DataSF program was to improve transparency and community engagement as well as accountability. Ron Vinson, director of media for the city’s Department of Technology also stated potential for innovation in how residents interact with government and their community. With an emphasis on adhering to privacy and security policies, the city can stimulate the creation of useful civic tools at no cost to the government.

Before launching, they reached out to Washington, DC to identify the most popular datasets, and learned that 20% of the datasets represented over 80% of the downloads. With this information, they went out first with crime, 311, and GIS data. They also allowed the public to request data through a submissions mechanism on the website where others could vote on their suggestions. This input is now required reading for the city administrator thanks to an executive directive and open data legislation.

Since launching in August 2009, DataSF has accumulated over 60 applications in its showcase. According to Vinson, the city stays engaged with their tech community by participating in local unconferences and meetups.


More Dev Resources from Mashable:


- 5 Website Features You Can Easily Offload to Reduce Costs
- HOW TO: Design & Program a Facebook Landing Page for Your Business
- Learning Ruby: Expert Advice for Advanced Developers
- 10 Predictions for Web Development in 2011
- HOW TO: Make the Most of TextMate

Image courtesy of iStockphoto, Veni

More About: app development, apps, data, government, List, Lists, open data, Web Development

For more Dev & Design coverage:


February 14 2011

January 14 2011

Learning Ruby: Expert Advice for Absolute Beginners


The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

The Ruby community and the language itself are a fast-growing phenomenon that plays an ever-increasing role in the ecosystem of web apps we all know and use.

If you’re a beginning Ruby dev, this post is for you. We have polled six experts in the Ruby community — developers who have come highly recommended and respected by their peers.

This is the advice they give specifically to new Ruby developers. We hope you find it useful, encouraging and enjoyable.

If you’re a seasoned pro or an intermediate Rubyist, stay tuned. We’ve got lots more where this came from, and our six experts have got tips, tricks and code snippets for you, too.


Jacques Crocker: Learn As You Build


Jacques Crocker is a Rails Jedi based out of Seattle who loves working on early-stage startup ideas and launching new products. He’s helped launch almost a dozen Rails apps this year including HeroScale.com (automatically scale your Heroku workers and dynos) and WordSquared.com (a massively multiplayer online word game). Next year, he’s planning on using Rails to launch 24 new web apps.

In an e-mail exchange, he told us new Ruby devs should “start building something and get it released to GitHub as soon as possible.

“You don’t have to have a new or exciting idea to implement. When you are learning, just build stuff that has been done before. Build a scaled down version of Twitter. Or reimplement a blog.”

Crocker says he once ported a PHP-built job board to Rails — a thoroughly educational experience.

He continued, “I’d recommend finding a project that looks interesting on OpenSourceRails.com and getting up and running locally (and the tests functional). Then try adding a few new features to it. And get it upgraded to the latest Rails version while fixing the dependencies.

“Jumping straight into development work without experience will definitely be difficult and frustrating. However the amount of learning you’ll receive will be enormous… Making yourself suffer through the pain of a new environment will help you learn faster than you ever thought possible.”


Yehuda Katz: Dive Into the Ruby Community


Yehuda Katz is a member of the Ruby on Rails core team, and lead developer of the Merb project. He is a member of the jQuery Core Team and a core contributor to DataMapper. He contributes to many open source projects, like Rubinius and Johnson, and works on some he created himself, like Thor.

He advises newer Ruby developers, “Don’t be intimidated. Take advantage of the very many robust community resources that exist, and make connections with community members through open source. The Ruby ecosystem is hungry for new developers, and if you make your mark, you won’t go jobless for very long.”

In fact, Katz says the community itself is one of the strongest points of the Ruby language. “Even though most of the web development community is focused around the Rails framework, there are standalone libraries for just about everything, like virtually every new NoSQL database and connectivity with services like Twitter and Facebook.

“There’s a spirit of experimentation in the Ruby community that makes it extremely strong.”


Obie Fernandez: Start With a Clean Slate


Obie Fernandez is the founder and CEO of Hashrocket, a Florida-based web consultancy and product shop. He’s a well-regarded blogger and speaker, and he’s also a series editor and book author for higher-education publishers Addison-Wesley.

He said, “Don’t try to bring over your old idioms and patterns, because they’ll just weigh you down.

“When I came over to Ruby from Java, my first instinct was to try recreating a bunch of concepts and architectural patterns that I already knew, such as dependency injection, instead of learning new ones more appropriate to Ruby. If you’re coming from a statically typed language like I did, you might have some trouble letting go of the perceived security of type constraints.

“There’s like this whole Zen aspect of working with Ruby where you have to let go of trying to exercise control over every possible interface for your objects.”

He also echoes Katz’s statements about the Ruby community. “We’ve got this amazing, creative and hard-working global community of people working to make Ruby the most enjoyable environment. There is no big commercial vendor getting all capitalistic on us and causing problems like you see with Oracle and Microsoft and their developer communities. Almost everything that gets done in our space, 99% is done for open-source love and passion and because it is useful to the person doing it.”


Ryan Bates: Ask — and Answer — Questions


Ryan Bates is the producer and host of Railscasts, a site full of free Ruby on Rails screencasts.

For beginning Ruby devs, Bates recommended, “You can learn a lot by asking questions, and you can learn even more by contributing, yourself.

“With every problem you run into, there are many others who will likely run into the same thing. When you find a solution, write about it to help others and to get feedback on better solutions. We’re all learning.”

Bates takes his own advice, as well, by contributing to sites like Rails Forum.

Disclosure: Mashable‘s features editor, Josh Catone, is the co-founder of Rails Forum.


Desi McAdam: Learn From the Masters


Desi McAdam is a Ruby developer at Hashrocket. She also co-founded and regularly contributes to the technical blogging group DevChix.

She said the thing that helped her most in her study and use of the Ruby programming language was “pairing with other masters of the language.” Since not everyone who wants to learn Ruby has one-on-one access to the masters, however, she has a few suggestions for beginning devs.

“I would also suggest reading books like The Ruby Way by Hal Fulton and Programming Ruby, a.k.a. The Pickaxe Book, by Dave Thomas, Chad Fowler and Andy Hunt.

“If Ruby happens to be the first language you are ever learning I would suggest Learn To Program by Chris Pine. My sister is a nurse who has never done any programming whatsoever and she was able to use this book to learn the fundamentals of programming and she did so at a remarkably fast pace.”


Raquel Hernández: Three Steps With Four Tools


Raquel Hernández is an experienced hacker/mathematician with a background that includes many programming languages and many work environments, from freelance and contract work to startups and larger companies. However, she’s made a particular focus of Ruby and Rails.

She came to us with a list of specific steps and tools for new developers.

“I would suggest reading Programming Ruby 1.9: The Pragmatic Programmer’s Guide (The Pickaxe Book) in order to get familiar with Ruby.

“For Rails-specific stuff, I’d highly recommend Railscasts as starting point. Pick a fun project; complete the Getting Started with Rails tutorial; and deploy it to Heroku.

“After completing these three steps, you’re going to be having so much fun and getting lots of things done that there won’t be coming back.”


Specific Questions or Tips?


If you’re new to Ruby and you have a question, feel free to drop it in the comments! Our panelists are likely to stop by with more feedback.

Likewise, if you’re a more experienced Ruby dev and you feel like answering questions or passing on some great advice of your own, please leave a comment and school us all.


Series supported by Rackspace

rackspace

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


More Dev & Design Resources from Mashable:


- The Top 8 Web Development Highlights of 2010
- HOW TO: Get More Out of Your Fonts
- 4 Predictions for Web Design in 2011
- HOW TO: Make the Most of TextMate
- 5 Free Annotation and Collaboration Tools for Web Projects

More About: beginner, developers, programming, rails, ruby, Web Development, web development series


January 05 2011

5 Web Technologies and Trends to Watch in 2011


In 2010 we saw the rise of HTML5, the maturation of CSS3, the release of Rails 3.0, and the widespread adoption of the @font-face selector (part of CSS3) — among other things. In short: it was a busy year for advancing web development technologies.

What will 2011 hold?

Below is a list, compiled by Mashable editors of some of the web technologies and trends we think should be on your radar for the coming year. These aren’t all straight up web dev technologies, per se, but they’re all things that will have an impact on website and app development in 2011.


1. jQuery Mobile


jQuery has become practically synonymous with JavaScript, in large part because of its extensibility, ease of use and strong project leadership. With the goal of being a touch-optimized web framework for tablets and smartphones, jQuery Mobile is one of the most visible projects aiming to take cross-platform, cross-device web development for mobile browsers to the next level. As more and more developers consider building apps with HTML5, a solid mobile JavaScript framework becomes more and more enticing. jQuery Mobile has the pedigree to become the de facto JavaScript framework for mobile.

- Christina Warren, Mobile Reporter


2. Hardware-Accelerated Web Browsers


Internet Explorer 9 (IE9) is lightning fast, thanks to its use of DirectX 10 and hardware acceleration, vastly improving the speed and capabilities of the browser versus its competitors. Thanks to that envelope-pushing from Microsoft, Google and Mozilla are quickly scrambling to match the hardware acceleration capabilities of IE9. Next year, your browser is going to feel a lot faster.

- Ben Parr, Co-Editor


3. Node.js and Server Side JavaScript


The Node.js website describes it as an “evented I/O for V8 JavaScript.” Essentially, it’s a toolkit for writing event-driven servers in JavaScript. What does that mean? In simple terms, it means no waiting around for slow I/O operations to complete before moving on to other operations; and for Node.js specifically, it means doing it all in server side JavaScript. For things like real-time web apps, web crawlers, file uploading, streaming, etc. — where speed is paramount — this is very important. Node.js represents the beginning of what I expect will be a wider spread adoption of server side JavaScript in 2011. For more on what Node.js is and how it works, check out this excellent overview on Simon Willison’s blog.

- Josh Catone, Features Editor


4. Real-Time Clickstream Sharing


There are tons of ways to share what you’re reading on the Internet — social sites and other online publishing tools made waves this year, with mass integration of share buttons and the gradual adoption of desktop clients, widgets and bookmarklets, which all made sharing easier. Real-time clickstream sharing is the next step in sharing your personal online experience, and 2011 is the year that will decide if the Internet is ready for it or not. Keep on sites like Sitesimon, Voyurl and Dscover.me.

- Erica Swallow, Assistant Editor


5. NoSQL Databases


NoSQL, a loosely defined term used to describe alternative database engines that generally don’t follow the traditional relational database schemas widely in use, has been on the rise in recent years. Notable
alternative databases that gained attention recently include Google’s BigTable, Amazon’s Dynamo, Apache Cassandra, MongoDB, CouchDB, Voldemort and Riak. Of course, let’s not throw the baby out with the bathwater — different doesn’t necessarily mean better. There are always trade-offs when choosing one data model over another. As Ted Dziuba wrote, “by replacing MySQL or Postgres with a different, new data store, you have traded a well-enumerated list of limitations and warts for a newer, poorly understood list of limitations and warts.”

Still, the explosive growth of alternative database systems in the past couple of years definitely singles NoSQL out as a web technology trend to watch in 2011.

- Josh Catone, Features Editor

More About: jquery, jquery mobile, List, Lists, node.js, nosql, real-time clickstream tracking, things to watch 2011, things to watch in 2011, web browsers

For more Tech coverage:


January 01 2011

The Top 8 Web Development Highlights of 2010


The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.

This year brought quite a few headlines of note to the developer world. While we each have our favorites, from new releases of classic tools to astounding announcements from tech companies, here in no particular order are a few stories that stood out to us this year.

In the comments, we’d love to know what stories stood out most to you this year, partly to indulge our sense of gratuitous end-of-year nostalgia and partly to help us hone our coverage for 2011, when we hope to bring you more fascinating web dev news than ever before.

What were your favorite dev-related headlines of 2010?


1. The Release of Rails 3.0


Early in February, the Ruby on Rails core team took the wraps off Rails 3.0, a long-awaited release of the popular Ruby framework.

Rails creator David Heinemeier Hansson wrote on the Rails blog, “We’ve had more than 250 people help with the release and we’ve been through almost 4,000 commits since 2.3 to get here. Yet still the new version feels lighter, more agile, and easier to understand.

“It’s a great day to be a Rails developer.”


2. Salesforce’s Acquisition of Heroku


Earlier this month, Salesforce bought Heroku for a staggering $212 million, giving another token of legitimacy to the growing Ruby community as well as to cloud-based programming tools.

Salesforce CEO Marc Benioff said at the time, “The next era of cloud computing is social, mobile and real-time… Ruby is the language of Cloud 2, and Heroku is the leading Ruby application platform-as-a-service for Cloud 2 that is fueling this growing community. We think this acquisition will uniquely position Salesforce.com as the cornerstone for the next generation of app developers.”


3. Facebook’s Release of HipHop for PHP


In February, Facebook rolled out HipHop, an internal open-source project intended to speed up PHP for large-scale applications.

HipHop isn’t quite a compiler. “Rather,” wrote Facebook engineer Haiping Zhao, “it is a source code transformer. HipHop programmatically transforms your PHP source code into highly optimized C++ and then uses g++ to compile it.”

The project was the culmination of two years of work by a small team of engineers; in the end, it got a thumbs-up from PHP creator Rasmus Lerdorf, who said, “”I think it is a cool project and it will certainly be a good option for some sites.”


4. The Rise of Node.js


Node.js has been around for a couple years, but 2010 was the year awareness and use of the JavaScript framework really blew up.

Commits have grown, as has the number of committers. Traffic to the project website has steadily climbed through the year, and downloads for Node.js from GitHub have predictably grown, as well.

As the organizers of the annual Node Knockout wrote, “It’s at the bleeding edge of a technology stack that allows developers to blur the lines between software, the web and the new like never before.”


5. Microsoft’s Release of Visual Studio 2010


The latest version of Microsoft’s Visual Studio, a big release by any standards, launched this year to impressive reviews from all corners of the web. InfoWorld said the release “marks a major advance in functionality and ease,” and The Register wrote, “It is hard not to be impressed by Microsoft’s tool suite.”

The IDE was overhauled, completely rewritten from the ground up. Support for Silverlight was added, and Microsoft also took this opportunity to release F#, a new programming language developed by Microsoft Research.


6. Facebook’s Release of the Open Graph API


Facebook and social app developers have long wrestled with Facebook integration for third parties. In the spring at its f8 developer conference, Facebook rolled out a brand new model for tapping into the social web, and it did so to unprecedented fanfare.

Dubbed the Open Graph, Facebook’s changes brought instant gratification and familiarity for Facebook users as they surfed the web — and they brought a fast and easy way for devs to integrate with the social network, as easy as a single line of HTML in many cases.


7. The Android/Java/Oracle Saga


What a year it’s been for Java! Not only is the language a key part in the programming stack of the fastest-growing mobile OS out there; it’s also the star of a big, potentially spendy lawsuit between two of the giants of the tech industry.

Sun, which developed the language in-house back in the dark ages, was acquired by Oracle. That deal became official in January, and Oracle wasted no time in getting litigious with Google over that company’s use of Java in the Android platform and the Dalvik virtual machine that stands in for the JVM on mobile OSes.

The lawsuit began in August with Oracle claiming that Google “knowingly, directly and repeatedly infringed Oracle’s Java-related intellectual property.”

Google quickly countered that it was shocked — shocked! — that Oracle would make such claims over an open-source technology. It followed with the assertions that Oracle’s patents are unenforceable and that if there had been “any use in the Android platform of any protected elements” of Java, Google itself “is not liable” due to the face that such violations would have been committed by third parties and without Google’s knowledge.

We’ll continue to keep an eye on the lawsuit and on Java’s role in the Android platform throughout 2011.


8. Apple Declares War on Flash


Tensions between Apple and Adobe ran high this year, beginning in January when the iPad launched without support for Flash. Then in February, Apple co-founder Steve Jobs told employees why: “No one will be using Flash. The world is moving to HTML5.”

These were the words that launched a thousand blog posts. Throughout the spring, the two companies waged a war of words — and one sweet antitrust inquiry with the Department of Justice over Apple’s banning of Flash for iPhone app devs.

Steve Jobs dropped the bomb of the year in a passive-aggressive missive on Flash in which the Apple co-founder stated that Adobe’s programming technology “no longer necessary” and waxed hypocritical about open technologies.

But while he may have been passive-aggressive and hypocritical, he also may have been right. With HTML5 making a strong showing early in its lifetime, it was only a matter of time before a public figure of Jobs’s stature would make a statement or two about the death of Flash.

Of course, this tension has made for a convenient cozying-up between Google and Adobe along the way.


What Are Your Picks?


Again, let us know in the comments what your favorite stories of 2010 were — and Happy New Year from the geeks at Mashable!

With special thanks to our Twitter friends who made suggestions for this list: Jordan Runnin, Leon Gersing and Jeremy Bray.


Reviews: Android, Facebook, Google, Mashable, PHP, Twitter

More About: 2010, developers, News, programming, Web Development

For more Dev & Design coverage:


December 27 2010

10 Predictions for Web Development in 2011


As a class, developers have had a fantastic year in 2010.

We’ve made headlines, grabbed the limelight, been vilified and glorified beyond all reason and gotten paid pretty nicely along the way. And the bubble of consumer web apps just continues to swell, so there are no signs (yet) that 2011 will bring anything short of grandeur for the web and mobile development communities.

Looking ahead to what the coming year might hold, there are a few sure bets and a few speculations we’d like to offer. Some are, as noted, almost certainly bound to come true. Others are more along the lines of hopes and prayers than hard-and-fast predictions we’d stake money on.

With that in mind, here are 10 things we think the world of hacking will hold in 2011.


1. There Will Be a Need to Understand and Optimize for All Form Factors


Even the most brainless of “social media gurus” could tell you this one. With the surging popularity and newfound accessibility and affordability of smartphones — thanks in large part to the growth of the Android platform — we’ve had to optimize for the mobile web and learn about mobile applications a lot in the past year in particular.

Now, as tablets begin to creep into the market, we’re having to craft new experiences for those, as well. We’re constantly forced to consider form factor when creating new sites and apps. Will it run Flash? What about screen resolution? Font size?

Almost every developer worth his or her salt will have to become increasingly adept at developing for the myriad form factors set to dominate the gadget market in 2011.


2. There Will Be Breakout, Cross-Platform Mobile Development Tools


With all the mobile growth that’s been occurring, especially given the current state of the iOS/Android market shares, the time has never been riper for a great mobile framework, SDK or IDE to enter the arena.

Hopefully, sometime in 2011, we’ll see a new group of flexible and robust tools that can facilitate app development for any number of operating systems — including tablet-specific or forked OSes. We’re talking more than WYSIWYG, DIY app-builders and more than iPhone-to-Android porting tools; we want to see serious, mobile-centric power tools in 2011.


3. Investment in Cloud-Based, Collaborative Development Tools


We’ve seen some interesting starts in community-based, online coding. There are a few collaborative code editing apps, some of them with real-time capabilities.

We’re looking forward to seeing more and better apps for cloud-based, collaborative coding in 2011 — something like a better Wave, created specifically with hackers in mind. This will allow for better and faster work to be generated by an increasingly decentralized hacker community. It’ll also pave the way for improved on-the-job learning and open-source hacking.


4. WYSIWYG Tools Get Better and Grow


While WYSIWYG tools of the past — and, who are we kidding, the present — often lead to spaghetti code of the ugliest variety, we just keep seeing more and more of them.

We’re going out on a limb and predicting (or hoping) that WYSIWYG and split-screen (WYSIWYG and code) developer tools become more sophisticated. Whether they get better or not, they’re definitely going to continue to proliferate, especially for the novice coder and the DIY non-coder markets. Still, we’re being told the code on the other side of the GUIs is getting better all the time.

Who knows? 2011 could be the year WYSIWYGs stop sucking.


5. We’ll Keep Building “Touchable,” App-like UIs


Facebook Mobile Privacy

All that stuff we said earlier about form factors kind of applies here, too, but in reverse. Your sites will have to look better on mobile devices and tablets, yes; but also, they’ll continue to natively look and feel more like mobile and tablet apps.

Some folks, a couple of Mashable staffers included, aren’t happy about the app-itization of the entire Internet. Call us old-fashioned, but we like our websites to be websites and our mobile apps to be mobile apps.

The average consumer, however, seems to delight in the shiny, touchable, magazine-like interfaces taking over the iPad and similar devices. Expect to be asked to make more and more app-like sites in 2011.


6. There Will Be a Higher Standard for Web and Mobile Security


The past year has been a bit of a horror show when it comes to web security. There have been a handful of high-profile hacks that exposed user data to the world; there was also much confusion on the user’s side of the screen as to how security works on a personal level.

We predict — nay, we dream — that in 2011, developers of consumer-facing apps will be extra careful with things like data encryption, user privacy controls and other security issues.


7. Third-Party App Development Will Plateau


Building a Facebook app or a Twitter app was all the rage in 2009, but something shifted in 2010, right around the time of Twitter’s Chirp developer conference: Developers found out that building on someone else’s platform was a good way to set yourself up for failure, especially when the platform decides to shift direction, change its APIs, acquire a competitor, or simply change its terms of use.

We predict that developing these kinds of apps will plateau and even taper off in 2011. The web is glutted with third-party social media tools; many devs are beginning to realize there’s more money and more interesting challenges elsewhere. In the end, social networks will be more interesting to advertisers large and small than to independent and third-party developers.


8. Ruby Will Get Some Cool Optimizations and Tools


We’ve seen lots of cool tricks and optimization tweaks around Python and PHP; 2011, however, will be the year for better Ruby tools.

The Ruby language is becoming extremely popular in developing consumer-facing web apps, and we’re sure to see some big-name companies release open-source tools and even improvements to the Ruby core — think along the lines of what Facebook did last year with HipHop or Google’s Unladen Swallow project.


9. NoSQL Technologies Will Stake Their Ground


We’ve seen and heard interesting things from the NoSQL corners of the web this year… and by “interesting,” we don’t necessarily mean “good.”

NoSQL technologies have had some high-profile hiccups this year (remember that MongoDB/Foursquare disaster?), but we’ve been assured that what doesn’t kill NoSQL only makes it stronger and more stable.

That being said, we’re not predicting the demise of MySQL any time soon. As one astute Twitter friend wrote, “Relational databases have their place, as do NoSQL solutions. To blindly choose one over the other is shortsighted.”


10. Open-Source Software Will See Unprecedented Growth


Open-sourcing interesting or unused tech is a trend we like to see from companies like Google and Facebook. In fact, we hope to see even more open-source contributions from proprietary software giants in 2011.

It’s not just the big players who are writing great open-source code. We know a lot of web startups are working on internal tools that’ll also be open-sourced in 2011. There are more youngsters (and not-so-youngsters) joining the ranks of hackers every year; many of them are being encouraged by sites like this one to make valuable contributions to the open-source community.

We predict more awesome open-source software than ever in 2011. Will it be a victory by Stallman’s standards? Probably not, as it won’t be exclusive of proprietary software creation, sale and licensing. But the trend toward more FOSS is a good one, and one that we’ll continue to report on in the year to come.


What Are Your Predictions?


In the comments, let us know your predictions for what 2011 may bring to the world of web and mobile development. And if you disagree with our predictions, let us know. They’re only educated guesses, after all; join the conversation.


More Dev & Design Resources from Mashable:


- HOW TO: Make the Most of TextMate
- Hacker Web Design: Words of Wisdom for Building Great Apps
- 5 Better Ways to Read “Hacker News”
- A Beginner’s Guide to Integrated Development Environments
- 10 Chrome Web Apps to Check Out

Image courtesy of iStockphoto, loops7

More About: app development, coding, developers, development, hack, hacking, List, Lists, predictions, predictions-2011, web design, Web Development

For more Dev & Design coverage:


December 23 2010

5 Free Annotation and Collaboration Tools for Web Projects


This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

Specific, contextual feedback is crucial for teams collaborating online, which is why it’s so important to make receiving it as fast, efficient and easy as possible. Asking for feedback can be tedious and is often done out of context, for example, via e-mail.

However there are numerous tools available to make the task of gathering and giving feedback for web projects simpler and swifter. This article is interested in those that focus on annotation and are available freely to the widest possible audience.

Here are five of the best free tools to annotate and collaborate on the web. If you’re partial to a particular tool available, let us know in the comments.


1. MarkUp.io


MarkUp lets you express your thoughts and ideas quickly and easily on any webpage. Because it’s browser based, it doesn’t require any download or installation. You can just drag the Get MarkUp icon into your bookmarks or favorites bar. When you visit a website, just click the MarkUp bookmarklet to load the toolbar, so you can begin annotation.

When you click the publish button and slide to confirm, you will receive a unique URL with the image and notes captured, making it easy to share with anyone, seeking feedback where necessary. For those visiting a MarkUp URL, you will see a respond button. When you press this, you can either keep the old annotations or start afresh with just the original image.

The MarkUp toolbar is simple and effective with five different drawing tools to choose from, and should the toolbar happen to get in the way, you can just drag it over using one of the two buttons located on each end of it.

A neat feature is the ability to use Ctrl + Z to undo your previous action if you make a mistake, and the backspace key will remove the element from the page.


2. Bounce App


Bounce is a lightweight application for giving quick feedback on a web page. You enter the URL you want to annotate, add your notes, and then share your feedback with anyone you want. It’s free for everyone, has no logins or accounts, has no limit on who you share your feedback with and doesn’t require any software to be installed. It’s actually the lightweight version of ZURB’s Notable app.

Just input the URL of the webpage that requires feedback and hit the grab screenshot button. A rather fun bouncing ball appears as the screenshot is processed. The screenshot of the webpage is then displayed with the controls at the top. It’s a good idea to enter your name before you begin, so all the comments are labeled in your name. Then click on the specific portion of the screenshot where you’d like to leave feedback and click and drag the mouse over this. A box will then appear where you can add your comment and click OK.

All comments are numbered sequentially, so knowing the order of priority is simple. You can add a name to the screenshot and click save to get a public URL, which you can distribute to anyone. There are also the neat options of sending the link directly to Facebook and Twitter. The people you’ve shared your page with can make their own notes, save them and bounce them back.

It’s also worth noting that TinyBounce, the smaller, sleeker little brother to Bounce was created for the 10K EventApart competition and received a Notable Mention.


3. SharedCopy


SharedCopy is a bookmarklet that allows you to share and mark up webpages. Once you drag the SharedCopy icon to your bookmarks toolbar, you can then click this bookmark whenever you need to make an annotated copy of a page.

You can add text notes, simple lines and shapes, and highlights to the page. When you’re done, click save and grab the unique URL for your SharedCopy page and share it with anyone for a simple way to collaborate. Saving essentially creates a ’separate copy’ of the webpage with its own URL, containing your annotations. You can set your pages to be published (public) or private – a person must then know the URL to access it.

Anyone can immediately use SharedCopy as a guest without any registration, although you can create an account, which gives you access to further features such as:

  • Moderation and Notification: Know when someone comments on your copy and moderate other commenters.
  • Profile and RSS: Upload a profile image, gather all your copies in a blog-like archive and share them through RSS.
  • Add-Ons and Integrations: Sync with your blog, bug tracker, Twitter, Basecamp, Tumblr, FriendFeed, Backpack and Delicious.

With several API’s available, it’s also possible to integrate SharedCopy into your own services.


4. WebKlipper


WebKlipper allows you to easily annotate web pages with virtual post-it notes and a highlighter. Once you enter the page URL, WebKlipper will open the site with a menu bar displayed at the bottom. It then generates a unique URL that you can share with the rest of your team members. Once they open this URL, they will see the page with your annotations. When you’ve created your Klip, you’re also able to edit both its title and its unique URL.

By selecting a piece of text and clicking ‘Highlight,’ it gives the selected text a yellow background. Once created, comments can be resized and repositioned. By clicking ‘Share,’ you can share the URL of the annotated page via e-mail or directly through Twitter and Facebook.

In the menu bar is the link to Notifications, which are a quick and easy way of keeping track of updates on a Klip. Once you add yourself to the notification list for the selected Klip, you’ll start getting e-mails from the creator and modifiers of it. You are also able to view the original page and the different versions of the Klip for quick access to its version history.

WebKlipper also allows you to annotate images and PDFs by uploading these to its website.


5. Diigo


An abbreviation for the “Digest of Internet Information, Groups and Other stuff,” Diigo is a social annotation service that lets users add highlights and notes in situ to any web page. Any annotation can be made either public or private, with other Diigo users able to read public comments and reply/interact to comments. Diigo combines aspects of social bookmarking, annotation, full-text search, tagging, and sharing. You can also upload images that can be tagged and shared with your group.

A browser add-on allows you to share your annotations with others or send directly to Twitter, Facebook, Delicious or your blog. It has an impressive suite of tools, which are worth checking out, from browser extensions to a Diigo API.

The groups feature is an excellent collaborative research and learning tool that allows any group of people to pool their findings through group bookmarks, highlights, sticky notes and a forum. With group sticky notes, group members can interact and discuss important points right on the web page, preserving the original context. You can choose to make your group public, private or semi-private.

Tags and lists provide two different ways to organize information. Tags are best for diverse and disparate information, while lists are best for focused information. You can use lists to organize, share and display a specific collection of bookmarks. Another neat feature is the ability to play, browse and annotate any list of URLs as an interactive slideshow.

Are you currently using any of these tools? If so, please share your thoughts and experiences in the comments below.


More Dev & Design Resources from Mashable:


- What Does Web Design Say About Your Small Business?
- 5 Design Trends That Small Businesses Can Use in 2011
- 10 Free WordPress Themes for Small Businesses
- 5 Beautiful Tumblr Themes for Small Businesses
- 10 Free Drupal Themes for Small Business

Image courtesy of Flickr, Mykl Roventine

More About: annotation, annotations, bounce app, collaboration, collaborations, collaborative tools, design, development, diigo, List, Lists, markup, sharedcopy, web apps, web design, webklipper

For more Dev & Design coverage:


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl