This post is part of Mashable’s Spark of Genius series, which highlights a unique feature of startups. The series is made possible by Microsoft BizSpark.. If you would like to have your startup considered for inclusion, please see the details here.Name: PagelimeQuick Pitch: PageLime is a hosted CMS for designers. It allows you to manage assets on your site by logging in to a web app that’s hosted on its servers.Genius Idea: Pagelime is a simple CMS with a graphical interface that can easily hook into websites created with PHP, Java, Ruby, ASP or just straight XHTML/CSS. The system makes it easy for designers to create sites, while making content regions editable by clients. The new iPhone app lets designers and clients access many of the Pagelime backend features on the go.As we’ve noted in the past, a lightweight CMS can be a great fit for small business users who want a simple website, without necessarily needing the hassle or complexity of a more extensive content management tool.This is exactly the market segment that Pagelime is targeting. To be more specific, Pagelime targets the website designers who are asked to build these more simple client sites. Pagelime is a hosted CMS and it works by connecting to an existing domain and web server. By adding in CSS classes to designated elements of your site’s pages, you can make those blocks editable in a WYSIWYG editor hosted on Pagelime. Likewise, you can also enable features like image galleries, manage the SEO settings on a page and add server-side includes.

This ends up being a very nice tool for web designers who want to deliver a solution to a customer, without having to worry about either customizing or building a CMS. Pagelime has a variety of pricing options — starting with a free plan that lets you create three different sites. For $19 per month, users can create up to 50 sites and use Pagelime more as a white label service, with their own logo, colors, domain and various reselling tools. For $69 per month, a user can create unlimited sites and designate an unlimited number of administrators.Pagelime recently released its first mobile app, Pagelime CMS for iPhone [iTunes link]. Pagelime’s iPhone app isn’t intended as a replacement for the web app, but it does allow designers and their clients to extend the Pagelime platform. Users can add and edit pages or templates, make changes to editable areas, preview and publish changes, all from the app.
We think Pagelime has an interesting approach to content management, especially for smaller sites and for designers who don’t want to spend too much time dealing with backend code. If you’re looking at an alternative solution for maintaining or creating smaller websites, Pagelime is worth a try.What are your favorite lightweight content management tools? Let us know.

Sponsored by Microsoft BizSpark

BizSpark is a startup program that gives you three-year access to the latest Microsoft development tools, as well as connecting you to a nationwide network of investors and incubators. There are no upfront costs, so if your business is privately owned, less than three years old, and generates less than U.S.$1 million in annual revenue, you can sign up today.

Reviews: PHP

For more Dev & Design coverage:

Jacob Gube is the founder/chief editor of Six Revisions, a popular web development and design site, and the deputy editor of Design Instruct, a web magazine for designers. He has more than seven years of experience as a professional web developer and has written a book on JavaScript. Connect with him via Twitter.

There’s never been a more exciting time to be a web designer; but being a member of this fast-paced, persistently metamorphic profession, I’ll probably end up saying this at the end of every year until I retire.

But with the web design industry abuzz with new specifications like HTML5 and CSS3, and cutting-edge frontiers like the mobile web, I can’t help but wonder what the future will look like in the new year. Here are four predictions for the future of web design.

1. Mobile Web Goes Mainstream

The mobile web has been the dominant subject in web design for the past 2+ years. A quick peek at Dribbble, a social media site where designers share their projects, will show you that many of us are working on mobile device apps and interfaces.

However, it’s still safe to say that most websites have given little to no attention to their mobile web presence. Most of the innovative mobile device web designs we’re seeing are on big, industry-leading, tech-centric sites such as, Google, and Digg, or niche sites targeted toward web designers (such as A List Apart).

Where we’re not seeing mobile web design implementations are in run-of-the-mill company and corporate sites. Small- and medium-sized businesses, Fortune 500 companies, and government websites are sadly falling behind instead of in line.

However, companies are beginning to see the rewards of meeting the needs of mobile device users. In the years to come, there will be a significant shift in attention toward the mobile web presence in all websites.

There are already several mobile web tools you can use for creating a mobile web version of your site; it’s time companies seriously look into implementing these cost-effective and relatively simple solutions as either a stop-gap solution or a permanent one.

2. Web Design as a Profession Will Become Specialized

Web designers are increasingly contending with many roles and tasks. What used to be just HTML, CSS and designing static brochure sites for the desktop has extended to designing web-enabled solutions for mobile devices, web apps, rich Internet application (RIA) interfaces, content management systems (CMS) and much more.

We’re tasked with making harmonious designs that carry a website’s brand across all platforms and situations — designs that establish the company’s brand whether it’s being viewed in a 28-inch desktop monitor or an Android smartphone.

This leads to two things. Job security is one, but the other is the need to distribute these tasks so that we can specialize and excel in one specific area.

In the future, there will be greater stratification of the role of web designer. Right now, web app designers, mobile app designers and traditional website designers are clustered under the umbrella title of “web designer.”

Just as the profession of being a doctor and the field of medicine are branched out into sub-fields such as oncology, dentistry and neurology, we may see a similar division in the field of web design. I can see specializations such as mobile web designer, content management system designer (with further sub-specializations such as WordPress theme designer or Drupal theme designer), and RIA interface designer becoming a reality and being in demand as we move forward.

3. Simpler Aesthetics for Websites

There’s been a sweeping trend in the way new websites are being visually designed. Web designers are forgoing complex visuals and overdone design techniques, opting instead for clean and simple web designs with a high attention to detail, a greater emphasis on typography — with the help of web fonts and the upcoming open web font format (WOFF) specifications — and stronger interaction design for richer and more captivating user experiences.

Not only that, but simpler aesthetics means lighter web pages, which translates to a better experience on mobile devices where Internet connectivity is lower in speed and less reliable when compared to the traditional broadband connection, and where screen sizes are too small to fit excessive design elements. This web design trend of “less is more” seems like it will extend, if not dominate, the aesthetic tastes of web designers in the near future.

4. Web Design Will Replace Print Design (Even More)

Print designers are typically tasked with brand identity design, such as logo design, letterheads, business cards and other print materials.

However, companies are seeing the great opportunities and effectiveness of business networking online. Businesses are a lot more concerned about their brand’s visibility on the web. Business cards are being replaced by social networking profiles on Twitter and Facebook. Newsletters, brochures and company letterheads sent out by snail mail are being dismissed for HTML e-mails and e-newsletters.

We’ll be witnessing design budgets earmarked toward traditionally print-based branding materials shift toward web design solutions such as Twitter profile page designs, Facebook fan page designs and HTML e-mail and e-newsletter template designs.

Where Do You See Web Design Heading?

If you’re a web designer or are in a related profession, what changes do you see us heading toward? If you’re not a web designer, what things do you want to see in web designs, and what things do you want to become history? Share your thoughts in the comments.

More Dev & Design Resources from Mashable:

10 Predictions for Web Development in 2011
5 Free Annotation and Collaboration Tools for Web Projects
8 Tools For Easily Creating a Mobile Version of Your Website
Hacker Web Design: Words of Wisdom for Building Great Apps
5 Design Trends That Small Businesses Can Use in 2011

Image courtesy of Flickr, Mike Rohde.

More About: design, List, Lists, mobile web design, predictions-2011, web design, Web Development

For more Dev & Design coverage:

Whether you want to improve your existing skills or learn new ones, we’ve provided plenty of web design and development resources in the past year.

Here we recap the best posts that fell into this creative category. These include a wealth of tutorials, resources, galleries, interviews and more.

Have a read below for a look back at Mashable‘s Dev and Design resources from 2010, and be sure to keep coming back next year for more.

Mobile Development Resources

google phones

Whatever mobile platform(s) you favor, we’ve got you covered.

Icon Resources

From minimal to festive, here’s a roundup of great icon galleries.

Resources for Web Developers

PHP tips? Check. Apps for developers? Check. Online resources? Check.

Apple-Related Resources

The iPad made an impact on dev and design this year. Here’s why.

Photoshop Resources

Photoshop is one of the primary tools in the digital designer’s belt. We got you up and running with the imaging software in 2010.

Career Resources

Whatever career path you’re following in the online dev and design world, these articles can help.

Web Design

We’ve offered a wealth of design-related resources this year — dive in!


From iconic designers to icon designers, we’ve talked to some rather interesting folk during the past 12 months.

Fun Resources

It’s not all work, work, work as we add a little fun with these light-hearted articles.

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:

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

For web developers, a key part of the toolkit is a solid text editor. Vi and Emacs wars aside, there are lots of good choices for web developers, ranging from the ultra-sparse to the full-on IDE.

One of the most popular text editors for Mac OS X among coders is TextMate. Despite not receiving many major updates since 2007, TextMate is still a favorite amongst developers, front-end coders and even writers (a few of Mashable‘s bloggers use TextMate to compose first drafts of blog posts).

On its own, TextMate is a good program. With the right add-ons and modifications, however, TextMate can be a dream come true. Even if we never see a TextMate 2, here are some tips to making the most out of your TextMate installation.

Install Some Themes

Out of the box, TextMate comes with a handful of themes, but there are many more options for your text editing enjoyment.

In a previous post, I compiled some of my favorite TextMate themes from over the years and put them together in a handy package on GitHub.

To install a theme, just double click it. TextMate, like other text editors, is designed for monospaced fonts. Mac OS X comes with several choices, including Menlo, which made its appearance in Mac OS X 10.6 Snow Leopard.

If you want to further explore your programming font choices, check out this article, written by my friend Dan Benjamin, which provides a great overview of some of the most popular choices.

Add Some Plugins

Despite not receiving any major updates for well, years, TextMate remains a favorite among old and new developers. If I had to pick a single reason, it would be the extensible nature of the program.

Simply put, TextMate can be extended and improved via the use of plugins and bundles. Plugins can impact the program as a whole, whereas bundles are specific collections of commands, snippets and shortcuts.

Some of my favorite TextMate plugins include:

  • WebMate — This lets you preview and edit HTML content in TextMate.
  • MissingDrawer — This adds a better project window interface to TextMate.
  • SVNMate — A nice SVN integration for TextMate.

What’s even better than just downloading the plugins is downloading the plugins and a set of UI modifications. One of my favorite TextMate “packages” is Green Moleskine, which has recently been updated to version 1.2. The new version includes Snow Leopard support for some of the UI modifications.

Green Moleskine also includes SVNMate, WebMate and MissingDrawer, but the link to MissingDrawer on GitHub has an updated version of that plugin.

For new TextMate installations, I usually just start with Green Moleskine and then build out.

Get GetBundles

Without a doubt, bundles are my favorite part of TextMate. I never thought I would be the type of person who got religious about my text editor, but the bundles feature in TextMate has made me a disciple.

Over the years, TextMate bundles have been created for practically every web framework and task you can imagine. You can find these bundles online and double click the *.tmbundle file to install.

But what if there was a better way to discover and install bundles, within TextMate itself? There is, and it is called GetBundles. GetBundles has a graphical interface that allows you to search the official TextMate bundle repository, the review queue and GitHub. The GitHub support is really slick, because these days, that’s where most of the updates and new code ends up being released.

The easiest way to install GetBundles is to pop open Terminal in Mac OS X and paste in the lines that Trey Piepmier thoughtfully set up on his blog.

Once GetBundles is installed, you can search the various repositories and click on a bundle to install it — and also check for updates to the bundles you already use.

Bundle Bonanza

Once GetBundles is installed, the final step to an awesome TextMate experience is track down some bundles.

These are a few of my favorites:

  • Blogsmith Bundle — Back when I wrote for TUAW and DownloadSquad, my colleague Brett Terpstra created a bundle to help us with our blogging. He did this because the backend of the publishing tool we used was unable to connect to XML-RPC clients like MarsEdit. This bundle, which included things like the ability to select a group of words and quickly insert a link, search archives or add tags and other information to a post, became something that I was so reliant on, I commissioned Brett to write me a Mashable-specific add-on bundle when I started working here. If you do any type of web writing, this Bundle, which works with MultiMarkdown, is an absolute gem.
  • MultiMarkdown Bundle for TextMate — John Gruber’s Markdown syntax is a format for writers who want markup that is readable and fast. MultiMarkdown adds even more features in the form of a TextMate bundle.
  • CSS3 Bundle — David DeSandro (of jQuery Masonry fame) created this excellent CSS3 bundle for TextMate, complete with browser-specific prefixes.
  • HTML5 Boilerplate Bundle — Darren Wood made this bundle, which puts all the HTML5 Boilerplate goodies at your fingertips.

How have you tricked out your TextMate install? Let us know in the comments.

Series supported by 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:

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
HOW TO: Make Your WordPress Blog More Like Tumblr

Reviews: Mashable, TextMate

More About: IDEs, mac apps, mac software, software, text editors, textmate, web development series

For more Dev & Design coverage:

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.


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

Reviews: Basecamp, Delicious, Diigo, Facebook, Flickr, FriendFeed, Tumblr, Twitter

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:

Here’s an interesting twist on the online business model: Designer/developer community Forrst is allowing users to purchase “Acorns,” a sort of virtual currency that can be traded in for pageviews on a particular post.

Forrst is a popular site where developers and designers can share code snippets, design snapshots and interesting articles; users can also request community feedback on current projects.

Acorns and promoted posts are a big part of Forrst’s third iteration, which has been rolled out just shy of the site’s first birthday.

Acorns can be bought with Paypal; each one costs $5 and guarantees a specific number of impressions for promoted posts.

Any Forrst user can use Acorns to make sure that his or her important posts, such as job-related posts or promotional posts about new products, are seen by thousands of users in the web development and design community.

The Forrst team says Acorns will also be used for “a few things coming over the next few months,” so we’ll keep our eyes open for whatever goodies Forrst might be rolling out in early 2011.

Other changes include a new homepage (which is much less adorable but much more functional for the first-time user), a redesign of post pages, and an impressive, ground-up rewrite of the site architecture and libraries.

To accomplish this rewrite, the Forrst team wrote a PHP5 framework called Magnus, which they hope to open-source sometime in the next year. We’ll be keeping you posted on that, as well.

Forrst is also integrating with JSFiddle, Pastie and GitHub’s Gist for its code snippets.

We’re impressed with the improvements that the Forrst team is rolling out and on the impression the site has made on the web design/development community in the past year. What do you think of Acorns and the other Forrst changes in version three?

Reviews: Forrst

More About: acorns, business, community, design, forrst

For more Dev & Design coverage:

Shane Snow is a Mashable contributor and founder of approximately a million websites. He also does infographics for Mint, Wix, and the Credit Loan network.

The men’s lifestyle publication Thrillist has rolled out a new site design. Thrillist’s design team put its 12 million-user website under the microscope for nearly a year before unveiling the new look.

A complete redesign can be high stakes for a large site. Digg 4 earlier this year showed what can go wrong in the rollout of a new user experience (in Digg’s case, a noisy uproar and traffic dive). Twitter, on the other hand, this year launched a redesign that enhanced user experience with few snags.

Mashable got a sneak peek at Thrillist’s new design, along with the scoop on what the inside of a massive art project looks like. Read on for the anatomy of this full web makeover.

The brainchild of New York native Ben Lerer, Thrillist launched in 2005 “to address the lack of funny, actionable information available to young men” in his city. By 2010 the publication was serving 2.2 million daily subscriptions in 19 cities in the U.S. and U.K., and was listed as number 93 on the 2010 Inc 500 fastest growing U.S. companies.

The site was redesigned in 2008 to address the needs of its growing audience, but by the next year had outgrown itself, leading the company to form a team charged with redesigning and rebuilding the website for usability and scalability.

The redesign team first pow-wowed in late 2009 after Chris Steib, Thrillist’s new product development director, was hired that November. While dozens of Thrillist team members had a hand in the design process, the bulk of the burden fell on the shoulders of Steib and two others: Jess Williams, creative director, and Mark O’Neil, director of technology. “It’s definitely the biggest project I’ve ever been in from start to finish,” said Steib.

The Redesign Process

Left:; Right: The new Thrillist design.

Before the proverbial pencil could hit the page, Steib spent months doing product direction homework. “The first step was to determine how the previous processes and implementation could be improved and to audit the existing website for UX and design problems,” Steib said. “Then I met early on with each department head and the key stakeholders on his/her team, gathering a wide array of business requirements. I broke these down into a high-level scope and built a basic site map and template directory our of the company’s highest priorities.”

Next came navigation; before drawing up sketches, the team needed to know not only what pages needed to be drawn, but where each fit in the hierarchy of the site.

With background work complete, Steib began drawing wireframes — boxy layout drawings of where elements would be placed on the pages — first by hand and then in Photoshop. A wireframe was created for each “template,” or unique combination of elements in the layout (e.g. the homepage and individual article pages had different templates).

Each wireframe was reviewed and debated in meetings with Thrillist executives, including Lerer himself. “This meant throwing a template up on the screen, tearing it apart for an hour, and then going back to my desk to make changes and iterate for the next session,” said Steib.

Once the direction of the design was established with the first approved wireframes, Williams, the team’s creative director, sat down to start on the actual artwork.

Williams put together a color palette and “mood boards,” or collages of design examples from around the web and print that represented the feel Thrillist’s brand positioning was aiming for, “highlighting different trends in different areas of web design; everything from the hierarchy of the page to small button details,” Williams said. “From that document, we were able to pair down what styles spoke to the Thrillist aesthetic that would then inspire the new site. We were drawn to sleek, modern designs and chose a color palette ranging in grays with red and blue highlights, which was both masculine and contemporary with numerous gradients, sharp edges and high contrast.”

Meanwhile, O’Neil and his development team began building the back-end framework for new features, such as the site’s TOP algorithm (which displays the most popular content on the site). They also began migrating the website database to MongoDB to improve its speed.

After the pattern and color research, Williams began designing the website’s header. In the first meeting with company directors, she presented a handful of ideas, which the team then debated. “We iterated quickly from the first meeting, pinpointing exact details we liked in specific headers and carried them throughout the subsequent design mocks,” Williams said.

The finalized header set the tone for the rest of the page design. Williams cranked out designs for each of the site pages and then discussed and critiqued them in weekly director meetings, revising, drawing, and revising.

It took from April to August for all the pages to be approved, meanwhile the design team was also working on rolling out other products for Thrillist, such as the newly acquired

At that point, Williams and Steib handed off the finalized designs to the front-end and back-end development teams to build them into a real website.


Constructing the new design was straightforward, with a few inevitable snags.

“We sent 45 mockups… two dozen Photoshop templates,” Williams said. “And we still missed things.”

For example, the site’s new login was a dynamic drop down box; however, Thrillist e-mails contain links to “log in,” which normally led to a flat login page. O’Neil’s team pointed this out, so Williams whipped up a new page.

“Another thing about when you translate design to actual implementation is transitions,” Steib pointed out. “You can’t really design a transition,” like the animation that occurs when a pop-up box appears. The design team audited the built site for consistency and design integrity once the front-end team coded the transitions.

Once the working model was built, all that was left was connecting the site to Thrillist’s content management system backend and database.

From planning to implementation, the entire project took approximately one year.

Lessons and Design Tips

Steib, Williams and O’Neil shared a few of the lessons learned during the year-long redesign process.

Chris Steib suggested:

  • For sites like Thrillist, where the content is an important part of tone and style, “You have to have the content lead the design.”
  • Involve company leaders in the process early so they can cut off bad ideas before you spend too much time on them.
  • Bring chocolate to meetings.

Jess Williams suggested:

  • Sometimes you need to design what won’t work. That way your team can get a feel of what will work.
  • Use your actual content rather than dummy text on design mockups. It’s the best way to realistically see what balance your design needs.
  • You actually can do it yourself. Owning your design process rather than sending it out of shop is well worth the extra time it takes.

Mark O’Neil suggested:

  • Get a lot of feedback from everybody, but know what feedback to ignore.
  • It pays to grow your internal talent pool rather than outsource everything.

Why Design Matters

Good design is not just pretty (sometimes it can be invisible), design is a lot of work. On the web, great user experience equals time saved and money made.

At the end of the day, the new Thrillist’s success will depend on what users think. The only thing Lerer and his crew can do is now pull off the curtain and brace for rotten, flying tomatoes. Or, if they’re lucky, a few million more users.

More Dev & Design Resources from Mashable:

How the iPad Is Influencing Web Apps
Susan Kare: Interview With an Iconic Designer [GALLERY]
5 Better Ways to Read “Hacker News”
5 of the Best New User Experiences of 2010
4 Winning Web Design Tips From Ryan Carson of Carsonified

Reviews: Digg, Mashable, Twitter

More About: design, development, redesign, thrillist, web design

For more Dev & Design coverage:

Google has donated two open-source Java tools to the Eclipse Foundation to join the popular IDE suite in 2011.

The tech giant’s WindowBuilder and CodePro AnalytiX were part of Google’s acquisition of Instantiations in August this year. By September, Google had relaunched some of Instantiations’ tools as open-source software.

One of those tools was WindowBuilder, a WYSIWYG code generator. This drag-and-drop, bidirectional GUI designer for Java played nicely with a variety of frameworks, including Swing, XML Windowing Toolkit (XWT), the Standard Widget Toolkit (SWT) and more. With support for Windows, Linux and Mac, the Eclipse extension was intended to make Java app creation a lot simpler and faster.

And CodePro is another interesting Eclipse plugin for “comprehensive automated software code quality and security analysis.” The toolkit included features from EclipsePro Audit and EclipsePro Test and generally attempted to improve code quality, maintenance and readability.

Instatiations’ execs estimate the software, which is slated to roll out with the rest of the Eclipse June 2011 release train, is worth around $5 million.

Google’s emphasis on Java tools is hardly surprising; the blockbuster success of the Android platform (and sometimes harsh criticism of the Android Market of apps) has practically mandated a focus on Java, which is a big part of the Android stack. Giving devs better Java tools free of charge is an investment in the future of Google’s own platforms.

That’s not to say either of these Eclipse extensions is, in itself, going to be directly used for Android applications; we’re not sure either tool is intended for mobile development. But better tools make better Java devs, who in turn are better equipped to make more and better Android apps.

We would, however, love to see more drag-and-drop, WYSIWYG-plus-code Android app tools — something along the lines of a less-dumbed-down App Inventor. If you know of any such tools, definitely let us know about them in the comments.

Reviews: Android, Android Market, Eclipse, Google, Linux, Windows

More About: codepro, developers, eclipse, foss, Google, java, open source, windowbuilder

For more Dev & Design coverage:

Mozilla is getting ready for the January semester of School of Webcraft, a 100% free developer training resource run in partnership with Peer 2 Peer University.

Last semester, the School of Webcraft offered 15 classes; now, Mozilla is trying to get around 30 classes going for the January semester.

Classes will be between six and 10 weeks long; they’ll revolve around topics relevant to web designers and developers, including HTML5, JavaScript and CSS. Previous classes have also included non-developer topics such as organic SEO. Requisite skill levels will run the gamut from novice to expert. The volunteer-run courses will begin on January 26, and proposals for new course ideas are still being accepted.

Students learn through a combination of free and open learning materials, online study groups and hands-on assignments that test their hacking skills.

If you’re a leader in the developer community, you can also step up and lead a course yourself. If you want to organize a class, you’ll get support from P2PU and Mozilla in the form of course design, materials, learning facilitation and other resources.

Registration opens on January 8; until then, you can sign up for the School of Webcraft e-mail list.

Mozilla believes that developer training is “both at the high school and university level… out of date, lousy and losing students.” Another problem is that younger learners simply don’t have access to good web dev learning resources. And certification training is expensive and often out of step with current practices.

By creating a completely free, open training ground for developers and would-be developers of all stripes, Mozilla hopes to remedy some of the problems surrounding technology education.

We fully support this mission; anything that will allow more people to become better informed about and more proficient in web development and related technologies is a win in our book.

Of course, we’d love to see more than just front-end and markup languages explored; but for that to happen, some knowledgeable devs are going to have to volunteer to teach their peers the basics (or not-so-basics) of other programming languages.

More About: developers, education, mozilla, school, training, trending

For more Dev & Design coverage: