Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.

1. Wireframing Articles

Here are more than twenty wireframing articles, guides, and tutorials to help you improve your wireframing process. There’s information on everything from paper wireframing techniques to using programs like Adobe Illustrator for the wireframing stage of your designs.

Wireframes Magazine
This site offers tons of resources and articles about wireframing. They include wireframe samples, UI tools, and job listings, as well as a place for designers to share their wireframes and wireframing tips. Popular articles have covered prototyping with the 960.gs grid system, graph paper sketch layouts, and wireframe moodboards.

Wire Frame Your Site
A great introduction to the benefits of wireframing from Sitepoint. It offers a three-step approach to wireframing in addition to expounding on the benefits of using wireframes, including their ability to let you foresee potential problems before you get into the nitty-gritty of designing.

Ajax Wireframing Approaches
A post in a series from Particletree about prototyping Ajax, this covers wireframing techniques. This article covers three excellent methods of wireframing dynamic content: Keyframing, stacking and TOP (Turn On Possibilities), as well as outlining the benefits and drawbacks of each.

The Importance of Wireframes in Web Design and 9 Tools to Create Wireframes
A great overview of why wireframing is a good idea, along with tools for creating your own. This is a really comprehensive article that covers everything from creating wireframes to working with clients during the wireframing process to the benefits of wireframing over visual design in the early stages of a website design.

20 Steps to Better Wireframing
An awesome collection of twenty tips for creating better wireframes. Some of the objectives covered include being clear about your objectives, getting everyone involved and avoiding over-designing your wireframe. Added up, these tips should make anyone’s wireframing process easier and more efficient.

Get Wireframing: The All-In-One Guide
A complete roundup of wireframing guides, techniques, tools, and more. It’s a great resource post with links to other sites, including a section for techniques, tools, examples, paper prototyping, and wireframing articles, among other links.

The Importance of Wireframing
A great article on why you should wireframe, along with resources to get your started. It’s a great rundown of the benefits of wireframing, including its ability to help clients focus and what they can teach you about your clients.

Pwireframing: Paper Wireframing
This is probably one of my favorite wireframing techniques. It’s a paper-based method, but goes way beyond just making some rough sketches. The photos included really help solidify the technique in your mind.

Shades of Gray: Wireframes as Thinking Device
An article detailing tne designer’s reasons for using wireframes and their purpose. It really covers the personal wireframing experience of the author, including what they get from wireframing beyond the obvious results. Examples are included (both the wireframes and final site design).

Wireframing Over the Shoulder
A video showing a full wireframing process from start to finish by From the Couch. This is an actual fast-forwarded video of a designer sketching out a complete wireframe of a real site on paper.

The ‘Boxing Glove’ Wireframing Technique
A guide to a big-picture wireframing technique. This is an incredibly simple and straight-forward technique that emphasizes three elements wireframes should help to clarify: proposition, concept, and context.

Framing the Problem
An article about wireframing from ClickZ. This article focuses on creating wireframes that answer three simple questions: What types of visitors need to be persuaded? What actions do they need to take? What information do they need to take action?

SEO Wireframing
A guide to wireframing for search engine optimization purposes from SEOmoz. It describes the wireframing process strictly from an SEO perspective and reminds designers to keep in mind things like key functions for each page and building navigation with relevant keywords.

HTML Wireframes and Prototypes: All Gain and No Pain
A guide to using HTML for wireframing and prototyping websites from Boxes and Arrows. It touts the benefits of creating HTML wireframes over visual-only types and offers up extensive information about creating your own HTML versions.

The Ancient Art of Wireframing
A look at the history and benefits of wireframing. It also looks at more modern techniques appropriate for dynamic websites and offers up new standards for contemporary wireframes.

“I Need to See It”—Wireframing for a Richer Web
A discussion of some of the issues and solutions for wireframing rich media applications. This article also talks about the benefits of both interactive and “high-fidelity” wireframes, including definitions for each and how to go about creating each.

Better Perspective in Wireframing
A huge list of tips for creating better wireframes. It outlines tips like putting functionality first, focusing on the user experience and working to a deadline.

Wireframing Using InDesign
A downloadable guide to wireframing using Adobe InDesign, along with a sample file you can experiment with. The content comes partially from a workshop that was presented at a Communication and Multimedia Design course at Rotterdam about wireframing.

I <3 Wireframes
This site aggregates wireframe images from Flickr. It’s a great place to check out if you’re not sure what method of wireframing will work best for you, or if you just want to see how other people are approaching wireframing.

Website Wireframes
This is a great overview of wireframing, including brief reviews of a number of wireframing tools. It includes tips for creating wireframes and an overview of the tools available for it.

Wireframing Web Applications
An article focused specifically on wireframing web apps as opposed to less complicated websites. This is an excellent guide to the particular challenges presented when wireframing dynamic applications and includes an overview of tools appropriate for creating dynamic wireframes.

Content Wireframing: Ducks Meet Row.
A great guide to wireframing your content. This article covers the particular challenges and requirements of wireframing a site’s content, as opposed to just it’s structure and functionality.

How to Create Website Wireframes
A complete wireframing how-to from About.com. This article is broken down into four parts: the focus of wireframes, what a wireframe should include, how to create a wireframe and the benefits of wireframing.

How to Wireframe
Here’s a video tutorial for creating a wireframe. It also includes tips on creating better wireframes, like using a grid to line everything up and adding everything you think you’ll need and then removing things afterward.

Speed Wireframing with Nick Finck
A video outlining Nick Finck’s wireframing process. The wireframe created is done using OmniGraffle and a wireframe stencil kit.

2. Wireframing and Mockup Tools

There are a number of tools available beyond just pen and paper to help you build wireframes for websites and online apps. Below are a few options, as well as some roundup posts to help you choose the right solution for you.

Pencil Project
A Firefox plugin that lets you do GUI prototyping right in your browser. It includes all the standard drawing tools you’d expect, plus it’s cross-platform compatible and can accept user-defined stencils.

Web Design: Top 5 Wireframing Tools
A review of five wireframing tools from CMS Wire. Tools included are OmniGraffle, MockupScreens, iRise, Axure, and MindJet MindManager.

iPlotz
A tool to create clickable and navigable website mockups. There are free and paid plans available, with prices ranging up to $495.

Jumpchart
Another tool for creating clickable website mockups. Jumpstart has free and paid plans, with prices ranging up to $50/month.

Wireframes
A brief article with a huge list of wireframing software, both desktop and web-based.

Hot Gloo
A wireframing app designed for designers and programmers. The beta version is currently free to use.

Building a Website Wireframe in Illustrator
A great guide to using Adobe Illustrator for your wireframes. This is a very complete tutorial, complete with screenshots taken during the process.

Balsamiq Mockups
A web-based wireframing and mockup tool. There are free and paid version available. The paid one is $79.

Wireframing Web Applications
An article comparing three different wireframing tools, both desktop and web-based, including Gliffy Online and Balsamiq Mockups.

Templatr
While Templatr is generally thought of as a template generator, it can work really well as a wireframing program. Just choose the layout you want to use and customize it as much or as little as you want.

Websites designed for children have been largely overlooked in web design articles and design roundups, but there are many beautiful and interesting design elements and layouts presented on children’s websites that are worthy of discussion and analysis. There are also a number of best practices that are exclusive to web design for children’s sites — practices that should usually not be attempted on a typical website.

This article will showcase a number of popular commercial websites targeted towards children, with an analysis of trends, elements, and techniques used to help keep children interested and stimulated.

Design That Stimulates the Senses

Humans are mentally stimulated by a number of factors, and this is especially true with children. Successful children’s websites implement a number of elements and design principles that create an environment suited for a child’s personality and interests.

Bright, Vivid Colors

Bright colors will easily capture and hold a child’s attention for long periods of time. Although color choice is a primary factor in designing any type of website, this is especially true when designing a website for children since colors make a big impression on children’s young minds. Color choices and combinations that would likely be rejected or laughed at when designing a typical website may be welcomed on a website for children.

How many of the color combinations used in the screenshots below would succeed on a website aimed at an adult audience? Not many. So, when designing a site aimed at kids, use bright, vivid colors that will visually stimulate in an unforgettable way.

PBS KIDS

Herman’s Homepage

Funbrain Playground

A Happy Mood

Kids will remember and return to a website if their experience is a happy one. Elements can be incorporated into the design to ensure that a cheerful, positive mood is presented.

Mickey Mouse Clubhouse creates a happy mood by making Mickey himself a visual focal point on the page. His happy face and body language help enhance this happy feeling, creating a welcome atmosphere.

The Play-Doh website creates a happy mood using a beaming child as the focal point.

The Fifi and the Flowertots website has a large smiling Flowertot character in visual focus, creating a happy mood.

Elements From Nature

Children are stimulated by recognizable elements that they can relate to. Because children’s experiences in life are limited, some of the things they are most familiar with are found in nature. Natural elements such as trees, water, snow, and animals are used in the websites shown below. In many cases, these elements are overemphasized through size or simplicity of design.

The Disney website alters its theme depending on what product is being promoted. In this screenshot, they use a Grand Canyon-like landscape to create a memorable visual experience.

Discovery Kids uses an underwater theme.

Club Penguin presents an arctic theme.

CBC Kids uses a seasonal theme based on simplistic, eye-catching graphics.

PopCap Games uses a grassy landscape in front of large rays of sun.

Larger-Than-Life Design

Large design elements have proved to be effective in all types of web design, demonstrated by the fact that large typography, large buttons, and large call-to-action areas have become commonplace in modern design. Because children are naturally drawn to simple, obvious, and recognizable objects, websites designed for children will increase their effectiveness through the use of large design elements.

Animated Characters

Large, animated, speaking characters are a fascinating and captivating way to grab and hold a child’s attention. Many sites designed for children use this element effectively.

Barbie

Mr. Rogers’ Neighborhood

Disney Princess

Thomas the Tank Engine

Barney & Friends

Depth in Design

Children like to let their imaginations run wild in a world that looks and feels real. This kind of atmosphere can be created through depth in design elements. This might include extruded shapes, shadows, landscapes, beveled effects, shiny gradients, or floating objects. Often, many of these elements are present in cartoon-like displays, as shown below.

The Webkinz® “Adoption Center” uses shadows, a life-like character, and other 3-dimensional elements to create a design that has depth.

Poisson Rouge creates a deep, realistic atmosphere using a window that looks outside at the sun, along with a number of other 3-dimensional elements.

Rainbow Magic creates depth in their design through a Flash-animated landscape scene that moves as the user hovers over different elements.

Navigation and Call-to-Action Areas That Stand Out

In any website design, navigation and call-to-action areas should be focal points. Children’s website designers can oversimplify these areas so that children can navigate easily. Text-based navigation on children’s websites would not be as effective as large buttons and graphics, because they would lack visual focus on a page.

Peppa Pig has a horizontal navigation bar that includes large icons and easy-to-read descriptions for each item.

The Winnie The Pooh website incorporates their navigation bar into their “forest” theme, using large wooden graphical elements that won’t be overlooked by the user.

Sesame Street has an easy-to-locate horizontal navigation bar, along with large call-to-action areas.

My Little Pony uses text-based navigation, creating a less-graphical experience, which allows focus on the content elements. This might be ideal in some situations, but on a children’s website a graphic-based navigation bar is more likely to be effective.

User Interaction

Probably one of the most important ways for a children’s website to succeed is to include elements that allow a child to interact with the site in some way. Children don’t want to do intense reading or research; they want to play and be entertained.

On a typical website, certain design elements are viewed as distracting, unusable, and cumbersome. On a child’s website, those same elements are viewed as an effective means of attracting users.

Interaction Through Animation and Sound

Effects and experiences created with Adobe Flash are discouraged in typical modern web design, but on children’s sites there is almost no other option. It’s true that JavaScript animation and effects have come a long way because of the many JavaScript libraries available, but the ease with which complex animations can be created with Flash makes this method the first choice for many commercial websites designed for kids.

The Pauly’s Playhouse site, like most of the websites featured in this article, is built entirely in Flash.

The Hot Wheels website includes an animated “car of the day” that zooms onto the screen when the page loads, creating visual interaction.

Roary the Racing Car has a brief “flash intro” with a “skip” button. This is an old-school trend in typical web design, but is an effective means of catering to a child-based audience. The intro animates through a road until the characters appear on the horizon. This helps the user feel as though they’re personally entering Roary’s animated world.

The Yahoo! Kids navigation bar is created with Flash and makes sound effects and animates when its items are hovered over. This trend is very common on many of the sites featured in this article.

Interaction Through Video

Television is known to captivate child audiences for hours, which is why “Saturday morning cartoons” have for decades been a lucrative part of the broadcast schedules for many TV Networks. Similarly, video on a child’s website adds a fun, interactive, and educational aspect to a site’s content.

Kids’ CBC – Video

Yahoo! Kids Movie Guides

National Geographic Kids – Videos

Interaction Through Games

What child does not enjoy playing games? One of the most effective ways to entertain, educate or otherwise occupy a child on a website is to include a “games” section. Almost all the websites researched for this article include games that educate, stimulate, and allow direct interaction, while also incorporating many of the design elements already discussed. Below are some examples.

CBeebies – Gordon the Garden Gnome

Toy Story – Woody’s Big Escape

Disney Pixar’s World of Cars allows users to create, share, and race their own custom cars.

Printable Elements

Kids like to have something tangible to take with them, to help them remember their experience. Printable pictures and colouring pages allow kids to have a keepsake of their experience, while giving website owners an opportunity to enhance and promote their brand outside of the computer screen. Below are some examples of printable colouring pages on kids’ websites.

Pingu Coloring Pages

Crayola Digi-Color

Peppa Pig Colouring Pages

Thomas and Friends Online Colouring

Teletubbies – Print To Color

Unconventional Methods

We’ve already discussed a number of elements that, in modern typical web design, are now considered unconventional. Sound, animation, and large obtrusive graphics are often frowned upon in typical web design. On children’s websites, these elements help the user experience. Other unconventional elements and design choices are discussed below.

Changing the Cursor

This is absolutely viewed as a bad practice in standard web design, but can be a fun, effective way of adding a playful element to a kids’ website theme. This can be done using dynamic HTML, but is more often done via Flash.

The cursor on the Discovery Kids website turns into a snapping bear trap graphic.

The cursor on the Sesame Street website is followed by a yellow star when it hovers over standard HTML elements, and turns into a yellow star surrounded by smaller animated stars when the cursor is moved over clickable Flash elements.

Talking Navigation

Sometimes a navigation bar will produce sound effects, but in other cases, the navigation links will sound out what they represent in a cheerful voice.

The PBS KIDS navigation bar speaks using children’s voices, when the user hovers over it.

The CBeebies navigation bar uses a voice to sound out the destination of each navigation item.

The Bob the Builder navigation bar speaks to the user on mouseover.

The Fifi and the Flowertots features a speaking navigation bar.

Breaking the Grid

While traditional modern web design techniques have embraced the benefits and aesthetics of grid-based design, kids’ websites can break free from an overly structured layout to create a unique world that a child will enjoy experiencing.

This is not to suggest that using a grid as the basis of the design is wrong. It may be beneficial to start with a grid, then design elements outside the grid in a controlled manner. This flexibility in design and layout is demonstrated on a number of the sites already discussed, but is also evident in the navigation bars of the examples below.

The navigation bar on the Spongebob Squarepants website is slanted, going against convention in typical grid-based web design.

The Hannah Montana website features navigation bar graphics that break the grid.

The In the Night Garden website features a very unusual navigation bar design that bears little resemblance to that found in a conventionally-structured design.

Below are some examples of websites that utilize a more rigid, grid-based format, and as a result are not as unique, memorable, or captivating as some of those already considered in this article.

Kids WB is rigid, and not as memorable.

The Crayola website is somewhat old-school with its grid format and vertical navigation.

Neopets is also designed on a more structured grid.

Granted, in some cases a stronger grid-based design would be necessary if the audience was an older child audience, as is the case with SI Kids, shown below.

Taking Responsibility

If you are attempting to reach the minds and hearts of young, impressionable people through an online experience, you are entrusted with a weighty responsibility. Children are mentally fragile, and easily affected by what they see, hear, and touch. There are certain factors that need to be addressed on every children’s website, to ensure no harm is being brought to the children.

Promoting Education

Games and other interactive elements should be created not just to promote your company’s brand and identity, but to help educate and train young minds in a beneficial and positive way. Promoting education through games and activities will show that your company cares about the user and how their online experience might affect them in the future.

Online Learning Games from Fisher Price include games that vary according to age group.

Funbrain promotes itself as “The Internet’s #1 Education Site for K-8 Kids and Teachers.”

Information for Parents

Parents will be keeping a close eye on their children’s internet habits. Many children’s sites are aware of this, so they include information that is geared towards parents. Sometimes this is in the form of a tip, as is the case with the Sesame Street games website, or simply a navigation item that points to a parent’s section.

Sesame Street Games includes a “Parent Tip” box.

BEN 10 has a “Parent Stuff” link in their primary navigation bar.

Thomas the Tank Engine includes a “parents” link.

Usability Testing

Finally, one of the best ways to help build a successful online experience for children is through watching children navigate and interact with your site’s games and other unique features. Not all companies will have the budget for extensive testing, but almost all will have the ability to do at least a minimal amount of testing — even if it’s with just one child. This will allow you to see the site through a child’s eyes and make any necessary modifications, the same as would be done in any usability tests.

Companies like Disney, Sesame Street, and PBS, of course, have been studying the behaviour of children for years, so many of the examples showcased above could be utilized to form the basis for a successful children’s website, even if no usability testing is done.

Conclusion

Here is a summary of both conventional and unconventional best practices for designing a website for kids.

Conventional Best Practices

• Create elements that are large and visually memorable
• Use bright, vivid colors that stimulate the senses
• Incorporate elements from nature
• Create depth in the design
• Add navigational elements that are large and easy to find
• Use video
• Include printable elements
• Break the grid
• Make modifications based on usability testing

Unconventional Best Practices

• Create a happy, playful mood
• Use animated characters
• Use graphic-heavy navigation bars
• Use Flash animation abundantly
• Embed motions and sounds that trigger on page load
• Include a “games” section
• Change the cursor to contribute to the theme
• Add voices to navigation rollovers
• Be accountable to both children and parents

A web designer who has worked on a children’s website would likely say that it was one of the most fun and interesting projects they’ve had the privilege of working on. If you ever have the opportunity to create a user experience that is geared towards children, be sure to follow some of the proven methods demonstrated on many of the sites discussed here, and your website will have a good chance to be a big hit with children.

Touchriver is a 2 column widgetized magazine theme. Theme is enabled with javascript based custom fonts, featured post slider, About Us section, flickr gallery etc.

View Demo

2. Cypher Free Wordpress Theme

Release Date: August 22, 2009

Cypher v.2 is a 2 column, paper themed WordPress theme. Built for Wordpress 2.8+. Cypher v.2 offers support for sidebar widgets, comments, custom default avatars.

View Demo

3. The Folio Elements Free Wordpress Theme

The Folio Elements theme is the perfect solution for simplistic and light weight “portfolio” type websites.

View Demo

4. Magiting Free Wordpress Theme

Release Date: September 16, 2009

Magiting is a featured-packed and multi-colored free WordPress theme with TweetMeme retweet button. It has 2 columns, with an easy Options page for customization. Loaded with Social Bookmarks button, Twitter Account integration, Automatic Thumbnail Resizer without using a plugin or custom field, Adsense ready with lots of advertising blocks.

View Demo

5. BlueBubble – Free Premium Wordpress Portfolio Theme

Release Date: November 12th, 2009

BlueBubble is a Free, Clean, Simple Premium Portfolio Wordpress Theme for Designers, Photographer or any other creative minds! It’s designed for easy showcasing your work and it comes with some very cool features.

View Demo

6. Seven Five Free Wordpress Theme

The Seven Five is a semi-automatic “Lifestream” WordPress theme taking minimalism to an entirely new level. This theme is intended for those looking for a simple, efficient and clean solution for integrating all the services you have come to love such as Twitter, Flickr and more. Of course, the Seven Five theme provides all the standard blogging functionality of WordPress as well.

View Demo

7. Vodpod Free Wordpress Theme

A fully featured and free video WordPress theme which works seamlessly with Vodpod.com.

View Demo

8. LiveTwit Free Wordpress Theme

Release Date: August 13, 2009

This super cool theme streams real time tweets on blog automatically.

View Demo

9. Foodiary Free Wordpress Theme

Release Date: November 2, 2009

Foodiary is magazine Wordpress theme with 3 columns widgetized footer and advanced features.

View Demo

10. Matiyaga Free Wordpress Theme

Release Date: September 26, 2009

Matiyaga is a featured-packed and multi-colored free WordPress theme with TweetMeme retweet button. It has 2 columns, with an easy Options page for customization.

View Demo

11. Spexel Free Wordpress Theme

Release Date: 29 November, 2009

Spexel is a premium quality WordPress theme, AJAX powered featured content, twitter & flickr ready, multi-column, multi-layout, multi-style and built on a very effective design for any kind of website. Completely SEO optimized and Valid XHTML 1.0 Strict & CSS 3.0. Also, Spexel can be customized from a highly advanced Options Page that has over 145 different options!

View Demo

12. Rockstar Free Wordpress Theme

Release Date: September 30, 2009

Adii’s previous custom design for his successful personal blog is now available as a free theme. It’s simple layout, and clean colour palette means easy customizations to this neatly coded theme on the ever-popular WooThemes framework.

View Demo

13. Bueno Free Wordpress Theme

Release Date: November 25, 2009

Bueno is a clean, minimalistic design which just oozes sophistication in both it’s typography & structure. Stripped of all fancy design elements; the reader’s focus should be on the great content that you produce. Bueno is perfect for the regular (and not-so-regular) blogger.

View Demo

14. Mainstream Free Wordpress Theme

Release Date: July 23, 200

A vibrant personal blog theme with a colourful selection of styles, built on WooThemes flexible theme framework, boasting a selection of theme options.

View Demo

15. Meta-Morphosis Free Wordpress Theme

Release Date: April 24, 2009

Meta-Morphosis is a visually-rich personal blog, with a magazine layout approach. Incorporating some nifty javascript font replacement and javascript widget slider in the footer, Meta-Morphosis should meet all of your personal blogging needs.

View Demo

16. Signal 37 Free Wordpress Theme

Release Date: October 13, 2009

Clean typography, a web 2.0 palette, heavily inspired by 37 signals and their wonderfully clean and focussed designs, Signal 37 is here.

View Demo

17. Pork&Beans Free Wordpress Theme

Release Date: July 19th, 2009

View Demo

18. Fresh Mortar Free Wordpress Theme

Release Date: November 11, 2009

Fresh Mortar theme is an ultra-flexible magazine/news premium theme as a result of mashup between Fresh News and Mortar.

View Demo

19. Paper Wall Free Wordpress Theme

Release Date: July 10th, 2009

View Demo

20. Smashing Multimedia Free Wordpress Theme

Release Date: August 22, 2009

Smashing Multimedia is a unique, flexible and advanced WordPress theme for artists, photographers, podcasters, designers and users.

View Demo

21. Glassical Free Wordpress Theme

Release Date: November 7th, 2009

Glassical is a glossy two column, widget ready and WordPress 2.8 compatible WordPress theme designed for passionate bloggers.

View Demo

22. Sigyn SM Free Wordpress Theme

Release Date: November 14, 2009

The theme has a unique grungy design that stands out and can serve as a good baseline for your Magento-powered online shops.

View Demo

23. Scherzo Free Wordpress Theme

Release Date: October 4th, 2009

A precise theme with a widget ready sidebar. Built on the idea of making your blog as readable as possible:

View Demo

24. MoneyBlog Free Wordpress Theme

Release Date: September 23, 2009

View Demo

25. Tipz Free Wordpress Theme

Release Date: October 27, 2009

View Demo

26. Ekologic Free Wordpress Theme

Ekology is the new free premium wordpress theme from web2feel.com. This is a magzine layout theme with thumbnail enabled miniposts, Featured post slider with images, Featured Video section, Customizable About us section, Customizable Banner ads, Google adsense enabled etc.

View Demo

27. Mintozine Free Wordpress Theme

Mintozine is a free premium wordpress theme. It is a business style wordpress theme. It has a port folio section with image carousal, Custom text panels on the home page, Welcome message, Twitter feeds , Flickr gallery etc.

View Demo

28. Creative Press Free Wordpress Theme

Creativepress is a cms with a business template layout and blog layout mixed together. The theme is very apt for your small business websites . This will let you break away from the conventional blog format sites using wordpress

View Demo

29. Selecta Free Wordpress Theme

With video blogging being the main influencer of this design and coupled with our experience in the vlogging world you will have a theme which allows you to make your videos the main focus of your site.

View Demo

30. NewsPress Free Wordpress Theme

Release Date: October 19th, 2009

Newpress is built under 960 grid system and packed with in-demand features such as featured post, dropdown menu, social bookmarks button, etc

View Demo

31. Zaoel Free Wordpress Theme

Release Date: October 21, 2009

View Demo

32. FXMAG Free Wordpress Theme

Release Date: June 26, 2009

Premium design, being built on a neutral design theme it can be used for literally any niche without much, if any, edits.

View Demo

33. FreshMag Free Wordpress Theme

Release Date: July 28, 2009

FreshMag is a multi-layout, multi-column, multi-style highly customizable Magazine and Blog WordPress theme which features some rare options, its theme options page has about 82+ options that makes this theme extremely customizable.

View Demo

34. Blue Rooster Free Wordpress Theme

Release Date: June 5th, 2009

The theme is a two column layout with a extra templates that can convert your blog into a CMS. The sidebar and footer are both widgetized, author and category templates included, as well as social buttons already intact. The theme style is a mix of rounded corners, flat edges and wooden elements with a schema of muted, dark colors on a plain white surface.

View Demo

35. Chronicle Free Wordpress Theme

Chronicle is a news magazine niche wordpress theme.
Theme has jquery featured news slider, News highlight section, Featured video, Tabbed content, News previews with thumbnails.

View Demo

36. LapOfLuxuryFree Wordpress Theme

Release Date: September 28, 2009

View Demo

37. Magazeen Free Wordpress Theme

Release Date: February 23rd, 2009

View Demo

38. Gallery Free Wordpress Theme

Release Date: May 4th, 2009

View Demo

39. deStyle Free Wordpress Theme

Release Date: Year 2009

View Demo

40. Irresistible Free Wordpress Theme

Release Date: February, 2009

Irresistible is a visually-rich personal blog, with a little bit of a multimedia focus. Incorporating some nifty video-options and widgets, Irresistible should meet all of your personal blogging needs. Just add your content to the mix.

View Demo

41. FreebiesDock Free Wordpress Theme

Release Date: January 6, 2009

View Demo

42. Vintage and Blues Free Wordpress Theme

Release Date: January 28th, 2009

View Demo

43. HikoZine Free Wordpress Theme

Release Date: October 29, 2009

View Demo

44. iBusiness Free Wordpress Theme

Release Date: October 29, 2009

View Demo

45. Creative by Nature Free Wordpress Theme

Release Date: July 30th, 2009

View Demo

46. Work-a-holic Free Wordpress Theme

Release Date: June 18th, 2009

View Demo

47. TheUnstandard Free Wordpress Theme

Release Date: Jul 7, 2009

The Unstandard is a split two / three column WordPress 2.6+ compatible theme.

View Demo

48. FotoFolio Free Wordpress Theme

Release Date: Year 2009

Fotofolio is a free wordpress template designed for easy creation online portfolio for Visual Workers; Photography, Graphic Design, Manga, Architect, etc. Fotofolio is very simple and easy to use, please read the instalation and usage for details. Fotofolio is created by Pupung Budi Purnama

View Demo

49. Linquist Free Wordpress Theme

Linquist is a simple, portfolio oriented theme, without the usual blogging garbage. Inspired by and partially based on the fantastic Sharpfolio theme.

View Demo

50. Portfolio WPESP Free Wordpress Theme

Release Date: January 21, 2009

Portfolio – WPESP Theme is a “minimalist” Theme based on the idea of portfolio created by DAILYWP. The Theme is a starting point in the creation of portfolios, using Wordpress as CMS.

View Demo

51. Fullscreen Free Wordpress Theme

Release Date: June 10th, 2009

Fullscreen is a free one-column photography and multimedia theme for Wordpress that can be used for portfolios, photoblogs, videoblogs, and virtually anything else where you want your content to be front and center. It provides visual artists (photographers, painters, videographers, motionographers, illustrators) a better way of presenting their latest work online using a minimalist side-scrolling homepage.

View Demo

52. Astra Free Wordpress Theme

Release Date: November 11, 2009

Striking wordpress theme with featured posts, social icons, 125×125 ads, twitter updates, threaded comments, multi page format.

View Demo

53. Bluemania Free Wordpress Theme

Release Date: May 4, 2009

This is a 2 column design that includes an extremely funky and highly prominent RSS icon to draw visitors to your syndicated news feeds.

View Demo

54. Tree House Free Wordpress Theme

Release Date: May 3, 2009

This is an extremely endearing design. If you want your Wordpress site to have more than a hint of cute and current, then this theme is worth a close look. It makes use of an adorable twitter icon that is sure to draw many of your visitors to subscribing to your twitter feed.

View Demo

55. Splendour Free Wordpress Theme

Release Date: October 23, 2009

Splendour, 3 Columns premium wordpress theme for free. It comes with greate features like login panel on homepage, featured video, Adsense ready, wp-pagenavigation integrated, post thumbnails and post excerpts and much more.

View Demo

56. Simplista Free Wordpress Theme

Release Date: June 17, 2009

Advanced clean personal portfolio type theme from WPSnow for free!

View Demo

57. Livien Free Wordpress Theme

Release Date: November 9th, 2009

Livien is an elegant designed free WordPress theme with featured content option. Suitable for any niche. Theme Options at admin panel

View Demo

58. Layer Press Free Wordpress Theme

Release Date: November 4th, 2009

Layer Press is free premium WordPress theme suitable for any niche. Dark style design. Theme Options at admin panel.

View Demo

59. Strownes Free Wordpress Theme

Release Date: October 30th, 2009

Strownes is elegant and professional designed free WordPress theme with featured content. Suitable for any niche. Theme Options at admin panel.

View Demo

60. Braw Free Wordpress Theme

Release Date: November 17th, 2009

Braw is a free premium WordPress theme suitable for any niche. Theme Options at admin panel.

View Demo

61. BrownMag Free Wordpress Theme

Release Date: October 3, 2009

2 column free wordpress theme.

View Demo

62. Magnolia Free Wordpress Theme

Release Date: 12 November, 2009

Magnolia is a Premium WordPress theme which can be used for many purposes, including personal blog or simply informative, this theme comes with many great features, which are: a beautiful dynamic slider, nice login panel with j query, 3 special developed widgets (popular posts, recent comments and twitter updates), 7 color styles ( green, marine, blue, orange, burgundy, purple, blue&purple), widget sidebar and footer and much more.

View Demo

63. ElegantRed Free Wordpress Theme

Release Date: November 11th, 2009

ElegantRed is two columns free wordpress theme with simple, clean look, Unique and modern style, having the classic combination of white, silver, maroon and red, Ideal for Autos, Cars, technology, and other niche.

View Demo

64. HexaMag Free Wordpress Theme

Release Date: November 16, 2009

HexaMag is a 2 columns mag style wordpress theme, which comes with Featured content slider, W3C valid xhtml/css and much more.

View Demo

65. Tarzine Free Wordpress Theme

TarZine, 2 Columns free wordpress theme which comes with many features like featured content slider, feedburner RSS subscription and much more.

View Demo

66. Spectrum Free Wordpress Theme

Release Date: October 1, 2009

View Demo

67. Celadon Free Wordpress Theme

Release Date: July 21, 2009

Celadon is a free theme for WordPress that focuses on great looks and usability

View Demo

68. Modern Style Free Wordpress Theme

Release Date: October 13th, 2009

Modern Style is free premium WordPress theme, suitable for any type of website with theme options at admin panel.

View Demo

69. Softy Free Wordpress Theme

View Demo

70. Moi Magazine Free Wordpress Theme

Release Date: October 26, 2009

Moi Magazine is a free 2 column magazine style Wordpress Theme. It looks very modern and elegant from the front end and offering vast Admin options at the back end.

View Demo

71. New York Free Wordpress Theme

Release Date: November 3, 2009

View Demo

72. CashZone Free Wordpress Theme

Release Date: November 25, 2009

This sleek minimalist theme comes in 2 columns with dark blue color scheme.

View Demo

73. Channel Free Wordpress Theme

Release Date: September 16th, 2009

View Demo

74. FashionPress Free Wordpress Theme

Release Date: October 9, 2009

View Demo

75. Corporate Life Free Wordpress Theme

Release Date: September 9, 2009

View Demo

76. Clean Press Free Wordpress Theme

Release Date: October 23, 2009

View Demo

77. Jungle Land Free Wordpress Theme

Release Date: September 3, 2009

View Demo

78. Mainam Free Wordpress Theme

Release Date: July 18, 2009

Mainam is a featured-packed and multi-colored free WordPress theme with TweetMeme retweet button. It has 3 columns, with an easy Options page for customization. Loaded with Social Bookmarks button, Twitter Account integration, Automatic Thumbnail Resizer without using a plugin or custom field, Adsense ready with lots of advertising blocks.

View Demo

79. Furvious Free Wordpress Theme

Release Date: 25 November, 2009

A fantastic design with 5 color styles to be choose. Who says free themes can’t have admin panel?Publishing featured contents never been this easie

View Demo

80. Profile Free Wordpress Theme

Release Date: November 30th, 2009

Profile is a light, minimalistic design which is intended for small presentational sites and works as a small business card. Establish your online presence in less than 5 minutes!

View Demo

81. Travelogue Free Wordpress Theme

Release Date: July 13th, 2009

A very simple Free Theme for WordPress blogs of travel-related topics: travel, fishing, navigation, marine, etc.

View Demo

82. Azsands Free Wordpress Theme

Release Date: June 5, 2009

The theme comes with 125×125 advertising space, “About me” space and a right widgetized sidebar.

View Demo

83. KeKo Free Wordpress Theme

Release Date: June 26th 2009

KeKo is a 2 columns fixed width Wordpress theme with theme option and twitter integrated. This urban grunge style theme is suitable for use on any niche blogs such as music, personal, social, etc.

View Demo

84. Phloggin Free Wordpress Theme

Release Date: May 28th, 2009

View Demo

85. Blue Station Free Wordpress Theme

Release Date: July 6, 2009

Blue Station high quality free premium WordPress theme suitable for daily blogging. Theme has admin options page.

View Demo

86. Marangal Free Wordpress Theme

Release Date: June 24, 2009

Marangal is a featured-packed, multi-colored and 3 columns free WordPress theme. It has an easy Options page to customize your theme. It is loaded with Feedburner Email Subscription, Twitter Account integration, YouTube Video integration, Flickr Thumbnails, Automatic Thumbnail Resizer, Adsense ready with advertising blocks.

View Demo

87. Black Motion Free Wordpress Theme

Release Date: July 15th, 2009

Black Motion is high quality free premium WordPress theme. Suitable for any niche.

View Demo

88. Dimaggio Free Wordpress Theme

Release Date: February 21, 2009

Dimaggio theme is another free WordPress theme by Led24.de for the WordPress community. The theme is a 2-column wide desing, perfect for personal and small blogs.

View Demo

89. MinaFlow Free Wordpress Theme

Release Date: June 17th 2009

MinaFlow is a 3 columns fixed width WordPress theme. It is a Magazine style theme comes with theme option to make it easier for you to customize some of the features available on this theme.

View Demo

90. VibranTech Free Wordpress Theme

Release Date: January 8th 2009

VibranTech is a two columns lime blue WordPress theme with four featured content frontpage. The four featured columns on top is best to present your featured articles or popular news to quickly catch the attention of your readers.

View Demo

91. dfBlog Free Wordpress Theme

Release Date: July 3, 2009

dfBlog is a free Theme for WordPress with a web design minimalist, clear and clean, with fixed page width in two columns and the sidebar at the right side.

View Demo

92. MonkeyPR Free Wordpress Theme

Release Date: September 7th, 2009

2 columns, right sidebar, widget ready, 125×125px ad spots ready, Ajax sliding header content, sticky post feature, footer content section.

View Demo

93. Apollo Free Wordpress Theme

Release Date: August 26th, 2009

View Demo

94. Berita Free Wordpress Theme

Release Date: May 10th, 2009

View Demo

95. Imagination Free Wordpress Theme

Release Date: 2009

Imagination is a Fully Customizable WordPress Theme and comes pre-loaded with 9 different site-wide styles to choose from, with just a click.

View Demo

96. FreeStyle Free Wordpress Theme

Release Date: June 18, 2009

Built for Wordpress 2.8+. FreeStyle has built-in support for sidebar widgets, comments, custom default avatars

View Demo

97. Simplicity Free Wordpress Theme

Release Date: August 22, 2009

View Demo

98. Zherald Free Wordpress Theme

Release Date: April 28, 2009

View Demo

99. Mystique Free Wordpress Theme

Release Date: November 30, 2009

Feature-packed theme with a solid design, built-in widgets and a intuitive theme settings interface… Designed by digitalnature.

View Demo

100. Calm Dream Free Wordpress Theme

Release Date: November, 2009

View Demo

If you’re a freelancer who works at home full time or most of the time, give yourself a pat on the back. You’re doing the planet a great service. By working at home you’re reducing the use of fuels and limiting the amount of pollution generated by modern means of transportation.

However, there is still a lot more you can do to help protect the environment. In this post, we’ll show you ten ways to make your home office more environmentally friendly and an even better place to work.

Let’s start by reviewing the three Rs of eco-friendliness.

The 3Rs of Eco-friendliness

The three Rs of eco-friendliness are:

• Reduce — Reduce the number of stuff you use and consume, as well as the amount of trash and pollution you produce.
• Reuse — Reuse whatever you can before tossing it out.
• Recycle — Participate in your city’s recycling program by segregating your garbage, or further reduce your garbage by recycling things instead of throwing them away.

Now that we’ve reviewed the basic eco-friendly concepts let’s move on to specific tips to help you make your office green. Here are the ten specific ways you can have a greener home office:

1. Use low VOC paint.

Volatile organic compounds (VOC) are chemicals that cause paint and other materials to have a strong, migraine-inducing odor. However, the smells are only part of the problem. These vapors can also have negative effects on our health, especially when you’re exposed indoors. So make sure to use low- or no-VOC paints for your home office.

2. Rest your feet on natural flooring.

Instead of a carpet, which requires a lot of energy and effort to keep clean, why not use natural tile, wood (more on sustainable wood below), or plain paint on your flooring. If you’re using rugs, look for those made of natural materials, like hemp or bamboo.

3. Choose “green” lighting.

Use natural light from a window, as much as possible. And, replace all your bulbs with CFL bulbs. Compact fluorescent lights (CFL) use up less energy, last longer, and produce less pollution than incandescent bulbs. They also give a warm, pleasant light.

4. Make sure your office furniture is eco-friendly.

For home office furniture, be creative and shop in thrift stores and garage sales for reusable or recyclable furniture. If you must buy something new, make sure it’s sustainable furniture — made from fast-growing woods, upholstered with organic fabrics, finished with non-toxic chemicals and paints, and locally made. Look for furniture made with wood certified by the Forest Stewardship Council (FSC).

5. Be wise with paper.

Home offices use a lot of paper. Reduce the impact of your paper use by buying paper made with 100 percent post-consumer waste, chlorine-free, and FSC certified. That said, use paper only when you need it, and do use both sides of each sheet. By the way, you can even find paper that isn’t made from trees. You may enjoy this list of green and beautiful stationery.

Whichever type of paper you choose, make sure to put it in the recycling bin when you do dispose of it.

6. Be environment-conscious when you print.

Printer manufacturers are becoming eco-conscious as well. For example, you’ll find specific printers from HP, Dell and Samsung that claim to be eco-friendly. In general, you want a printer that’s Energy Star compliant, has a power save mode, and ink save mode. If your printer does duplex printing, then reusing sheets of paper becomes so much easier.

Refill ink cartridges rather than buying new ones. Or, dispose of your printer cartridges through companies that recycle them, such as Waste Farmers. Funding Factory buys used printer cartridges and raises money for non-profits and schools. Ewaste recycles printers and other computer equipment.

7. Be stingy… with energy.

Challenge yourself to keep reducing your electricity bill. This is good for the earth — and your wallet. Use solar-powered gadgets. Invest in smart power strips, which detect when a piece of equipment is not in use and cut power to it automatically. Otherwise, your office equipment keeps sucking up electricity even when you’re not using it.

8. Keep your air clean, fresh, and chemical free.

Add some green to your office, literally, by bringing some plants indoors. Plants absorb toxins in the air and look pretty, to boot. Use a programmable thermostat, set on a low temperature, to regulate your use of the heater in winter. Another winter tip: humidify your air naturally by hanging wet laundry indoors. In warmer months, open your windows and use an electric fan for as long as you can bear it before switching on the air conditioner.

9. Clean your home office naturally.

Cleaning supplies can also bring plenty of VOCs and other harmful toxins into your home office. Fortunately,  green cleaning supplies are becoming fashionable and increasingly available. Look for cleaning supplies that don’t contain chlorine and other bleaches and are bio-degradable. Or, learn how to use nature’s cleaners: vinegar, water, baking soda, and borax.

10. If you must leave the house…

It’s inevitable; you’ll have to leave the house sometime. If so, consider walking, biking or taking the bus or subway to your destination instead of automatically reaching for your car keys. And, if a car is in order, find somebody who can carpool with you.

How Green Is Your Home Office?

Going green is a gradual process. If you begin taking baby steps to green your home office now, you’ll soon find yourself wanting to green your entire home and your whole lifestyle. If you’d like to learn more about going green, visit our sister blog, EcoSimply.com.

In the meantime, do tell: how green is your home office?

Photo by JeffWilcox

This year we saw a growing popularity in using content sliders as a way to display several pieces of content within a limited area or to engage the user with the sliding animation. Normally this is done in a featured banner area near the top of the page. There were several jQuery plugins written in ‘09 to accomplish this type of effect, but here are our favorites.

AnythingSlider

AnythingSlider is created by Chris Coyier of CSS-Tricks and is a fully featured slider that is widely useful.

Easy Slider

Easy Slider is a content slider that gives you the the option to choose between classic previous/next navigation or to use a numeric “pagination” style navigation.

Coda-Slider 2.0

Coda-Slider 2.0 is aimed to mimic the slider effect on the promo page for Panic’s Coda software. The original version was hacked together in 2007, but this 2.0 version is built from the ground up.

Image Galleries

The days of having to use Flash to create image galleries with cross fading or sliding transitions are long gone. Thanks to jQuery these types of effects can be easily achieved with javascript. Here are our favorite image gallery plugins from this year.

Galleria

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

jQuery Panel Gallery

jQuery Panel Gallery is a compact image gallery that can easily be configured. Not one image needs to be sliced or edited to work with this plugin. The plugin handles everything itself. You can even configure fading transitions per image.

slideViewer

slideViewer checks for the number of images within your list, and dynamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide to the next picture.

Supersized

Supersized cycles images with transitions and preloading. It automatically resizes images to fill browser while maintaining image dimension ratio.

Navigation

I believe navigation is an aspect of a web site that should kept simple and easy to use. However, if there is a need to create a more engaging nav, jQuery is your best bet. Here are a few of the best from ‘09.

jquery mb.menu

Horizontal Scroll Menu with jQuery

This isn’t a plugin, but I had to include it since it is such a cool effect. It’s a horizontal scroll menu that scrolls automatically according to your mouse axis-Y movement.

AutoSprites

Forms and Tables

Working with forms and tables is probably not the most glamorous part of web design and development, but it has to be done. There were several plugins released this year to help you spice things up a bit. Here are our favorites.

Password Strength

Password Strength tries to calculate how many possibilities the hacker needs to try to guess your password.

Ajax Fancy Capcha

Ajax Fancy Captcha is a jQuery plugin that helps you protect your web pages from bots and spammers. It introduces a new, intuitive way of completing “verify humanity” tasks.

Chromatable

Chromatable allows you to easily create scrolling tables with fixed headers.

jqTransform

jqTransform is a styling plugin which allows you to skin form elements.

Uploadify

Uploadify allows the easy integration of a multiple (or single) file uploads on your website.

jExpand

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

Related Posts

Here’s some other articles that you will definitely find useful.

The Best Free WordPress Themes of 2009

The Best Photoshop Tutorials of 2009

The Best Free Icon Sets of 2009

The Best Free Fonts of 2009

I assume you’re already familiar with some other form of Web development, whether PHP, Python, Perl or Java, and relational databases like MySQL. First, we’ll introduce Rails and Ruby and the basic ideas behind both. I’ll teach you just enough Ruby so that you understand the code samples. I’ll tell you how to get Ruby on Rails running on your computer, and I’ll give you an overview of the basic functionality of Rails and demonstrate how Rails’ main parts work together.

After reading these parts, you should have an idea of whether Rails is for you. If you get the feeling that it is, I’ll point you to some good tutorials on the Web that you can use to learn Rails. I’ll also provide a lot of further reading recommendations so you can dig as deep into the topic as you like.

You may want to take a look at the following related posts:

• Getting Started With Ruby On Rails: Part 1
• 10 Useful Tips For Ruby On Rails Developers

Get Rolling

To get your feet wet with Rails, it’s best to simply install it on your own machine and start playing around. This requires just a few steps.

On Windows do the following:

1. Install Ruby 1.8.6 using the one-click installer from www.ruby-lang.org. Make sure to select “Enable Rubygems” during installation. It’s probably a good idea to install ruby as admin.
2. Update Rubygems. Rubygems is Ruby’s package management system, and Rails needs a newer version than the one that ships with the installer. To do this, execute gem update --system in the console as admin. Next, you’ll need to add the GitHub gem server to Rubygems with gem sources -a http://gems.github.com
3. Install Rails and its dependencies with gem install rails and gem install mysql. (You can use other databases, but MySQL is the easiest to set up.)
4. Install the MySQL Database from mysql.com. If you’ve done Web development before, you probably already have it on your machine.
5. Create a Rails application. Enter rails -d mysql <appname>. “Appname” will be the name of the sub-directory your app is created in.
6. Go into the created application’s directory and execute ruby script/server. Point your browser to localhost:3000. You should see the Rails welcome page. Follow its instructions.

To edit Ruby code, you can use any text editor. If you just have to have a fancy IDE, try NetBeans. I recommend Notepad++, a great, lightweight freeware editor.

On a Mac, you’re lucky. Mac OS 10.5 comes with Ruby, Rails and SqLite3. You just need to update your packages by issuing a few commands:

sudo gem install rubygems-update
sudo update_rubygems

gem install rails
gem install mongrel

If you need more detailed help on installing Rails on 10.4 Tiger, check out the tutorial on the Rails wiki or in this blog post. Now you can create your app with rails <appname>.

On Linux, the installation depends on your distribution.

A Bird’s Eye View Of Rails’ Inner Workings

This is the part I find missing in most other tutorials about any topic. I want to present an overview of the most important components of Ruby on Rails to help you understand how they work together to process requests. I will be more detailed in the controller section because that’s the most important one, and if I left things out there I wouldn’t be able to paint the whole picture.

Controller

When the request hits your server running the Rails app, the first component handling it is the ActionController.

The ActionController and all of its parts correspond to the controller-part of the MVC stack. Before actually handling the request, the ActionController inspects it to determine which of the controllers in your application is responsible for the request.

These lookups are called routes and are defined in config/routes.rb. If you take a look in that file, you’ll see lines similar to these:

ActionController::Routing::Routes.draw do |map|
  map.resources :users
  map.connect ':controller/:action/:id'
end

The details of route definition could fill an article of their own. If you’re interested in its precise workings, take a look at the ActionController::Routing documentation in the Rails API.

Simplified, two kind of routes appear here. The last one is the traditional style of defining routes. These are formed like simple regular expressions, with the :foo part being a placeholder.

If a request’s URL matches one of these expressions, its parts are mapped to the placeholders. These are then examined to determine the correct controller, the action within the controller and further parameters like id (id always contains the id of the object that the client wants to work with). For example, a URL like /foo/bar/123 would be mapped to the FooController; the bar action and the value of params[:id] would be 123.

The first line is a shortcut to create a large number of those routes in one sweep. Routes created this way adhere to the REST principles. Again, this is a topic large enough to warrant its own article. For the sake of this introduction, let me just illustrate the effect of map.resources :users as an example. If you put such a line in your routes.rb you’re telling Rails that you want users to be a resource. That means seven routes are installed that all point to the UserController.
These seven routes match not only against the URL of the request but also the HTTP method. The mappings are:

GET      /users            # will point to the index action
GET      /users/new        # will point to the new action
POST     /users            # will point to the create action
GET      /users/:id        # will point to the show action
GET      /users/:id/edit   # will point to the edit action
PUT      /users/:id        # will point to the update action
DELETE   /users/:id        # will point to the destroy action

All of these actions of the UserController are expected to behave in certain ways.

• The index action should display a list of all existing users.
• The new action should display a form for the creation of a new user that is submitted to /users via POST.
• The create action should take the form’s input and create a new user in the database.
• The show action should display the user with the corresponding id.
• The edit action should display a form for editing the user. The form should submit to /users/:id/ via PUT.
• The update action receives the form data and updates the user in the database.
• The destroy action deletes the user from the database.

Because PUT and DELETE aren’t supported by all browsers, forms that are supposed to use these methods submit via POST and tell the server their intended method via a hidden form field named _method.

Once controller, action and parameters are determined, the action can be called. But before that actually happens, Rails inspects the filter chain for the action to see if there are any filters to be executed before the action runs. Such filters are incredibly useful for things like user authentication. To ensure that only logged-in users of your application can access certain actions, you would define a filter that checks the session for valid credentials. Such a filter could look like this:

class UserController < ApplicationController

  # Require valid login to access the update action
  before_filter(:require_login,  nly => :update)

  # Lots of actions defined here
  # ...
  # ...

private

  def require_login
    render(:text => "Unauthorized", :status => 401) unless session[:user_valid]
  end

end

Let’s analyze this example line by line. The UserController inherits from the ApplicationController. All of your controllers should. The ApplicationController can then contain code that should be shared among all the controllers in your application. You could, for example, put the require_login filter in there to require a valid log-in for all your controllers.

The next line declares a before filter. By making the declaration using the symbol :require_login, you’re telling Rails to use the require_login method as a filter. This alone would apply the filter to all actions
in the UserController. The additional parameter nly => :update tells Rails to use the filter only when the client wants to access the update action. In a real controller, this line would be followed by the definitions of all the actions your controller contains. In this example, they’re omitted for brevity.

The keyword private marks all the methods defined afterward as private to the UserController. This implies that they can’t be used as actions. We don’t want require_login to be used as an action, so we’re putting it here.

Require_login checks if the field :user_valid in the session is present. This is, of course, a pretty drastic simplification of a real authentication scheme, but it’s sufficient for the sake of illustrating filters. Unless a user is logged in, the filter renders a simple error message.

Now, here’s a detail you need to know to understand this. Rails works through all the filters applying to an action and only aborts request processing for three reasons:

1. A filter raises an Error.
2. A filter returns false.
3. A filter renders somethings or redirects.

So, this single line is all that is needed to protect our sensitive actions against malicious clients. Again, I’m simplifying this a bit. To make an application really secure, you will of course need a little bit more code to properly maintain session state. To find out more about filters, read the ActionController::Filters::ClassMethods documentation in the Rails API.

Let’s see how Rails continues with the processing of the request.

After the client’s request has passed all filters, the action finally executes. Let’s run with our example from the filters section and assume the client wants to execute the update action after editing the user in a from provided by the edit action. Both actions could be defined like this:

def edit
  @user = User.find(params[:id])
end

def update
  @user = User.find(params[:id])
  if @user.update_attributes(params[:user])
    redirect_to users_url
  else
    render :action => :edit
  end
end

Let’s work through this line by line again. First, note that actions are defined as simple parameter-less methods on the controller. Their input and output is realized a little differently from what you’d expect from a method. Actions retrieve all the information they need to process the request from their controller through a few accessors, mainly params and session. There are more (cookies, request), but they’re not used nearly as often as these two, and I don’t want to complicate matters more than is necessary here.

The params method returns all the parameters of a request. These usually result from its querystrings or the postbody, but can also be created from JSON or XML data structures. Through routes, parts of the URL can also become parameters. This is where the :id parameter in the example is read from. If the client requests /users/123/edit/ and we have a route definition map.resources :users, then 123 becomes the :id parameter for the edit action, because the route definition generates (among others) a route that looks like this:

map.route '/users/:id/edit',
          :controller => 'users',
          :action     => 'edit',
          :method     => :get

<!-- The "session" method can be used to access data in the session. Whatever you put in here will be available in subsequent actions in the same session. This is commonly used to store log-in information or things like shopping cart contents. -->

For output, an action basically has two options. It can either redirect the user or render a template. The templates for a Rails application are organized the same way the controllers are. They reside in app/templates/<controllername>/<action>.html.erb, and if no output is specified in the action, Rails renders the template belonging to that action by default. That’s why you don’t see any output code in the edit action. The only line in edit pulls the user we want to edit out of the database and puts it into an instance variable of the controller to make it available to the template.

The update action begins with the same statement, again fetching the user form the database. In its next step, the user’s attributes are updated with the data that the action received from the client-side form. The update returns true on success. In this case, the client is redirected to the list of users.

This redirection deserves closer inspection. The redirect_to command takes a URL, but instead of hard-coding these URLs (/users in this case), it is conventional to use URL helpers like users_url. The helpers are generated automatically by the route or resource definitions.

If updating the user’s attributes does not succeed, two things happen inside the update_attributes call. First the user’s errors property will be filled with details on why the update didn’t succeed, and the call will return false instead of true. As a result, the client is not redirected; instead, render is called, with :action => :edit as its parameter. This tells render to render the template belonging to the edit action of the current controller.

Why not redirect to the edit action, you may ask? We could do that, but we’d lose all the edits we made to the user and lose information on the errors that occurred. When the edit-template is rendered instead during the processing of the update action, the user that failed to update is still in memory with all its pending edits and the errors. We can use this data in the template to pre-fill the form with the values we just entered (but didn’t save to the database) and provide information to the client on what went wrong.

There’s one last important thing to note here about render and redirect_to. It is not apparent from these examples, but calling render or redirect_to does not stop the processing of the action. These are both just methods and not special control flow statements. So, when render is called, the template isn’t rendered yet; rather, the controller renders the template after the action has processed. Any statements following a render are still executed.

Model

The second important part of MVC in Rails is the Model. Its role is played by the ActiveRecord module, an implementation of the pattern of the same name. ActiveRecord::Base functions as a base class for the models in your application. If you derive your models from this class, you’ll have them automatically linked to tables in your database and can very easily load, edit, save, create, delete or list them. Mappings between the structure and behavior of your models and the tables in the database are fully automated mostly, provided that you adhere to a few rules in the design of your tables. The general principles are:

1. Your table name is the pluralized, underscored variant of your classname. So, a class User would be mapped to the table users.CookieRecipe would be mapped to cookie_recipes.
2. Your table needs to have its primary key on an integer column called id with the auto increment property.
3. Associations to other tables are stored in columns that are named after them. If you want to store posts belonging to a user, the posts table would need a user_id column

If you have a table and class that are connected via their name, like users and User, any column in the table is available on the model as a property. If you want to create a User, you’d just instantiate an object in Rails:

u = User.new

Then you can begin setting its properties:

u.name = "Michael"
u.age  = 35

You could also provide these settings upon creation:

u = User.new(:name => "Michael", :age => 35)

To store the new user in the database, tell it to save:

u.save

You can find records in a lot of ways:

u = User.find(123)               # finds the user with id 123
u = User.find(:all)              # returns an array containing all users
u = User.find_by_name("Michael") # a "magic" finder

I don’t want to go into the details of all of these options. You can find them all in the ActiveRecord::Base module documentation in the Rails API. I’d rather introduce two important features of ActiveRecord: associations and validations.

I have already mentioned associations briefly and given an example of posts belonging to users. How would you actually implement that? Well, as mentioned, you first put a user_id column in the posts table to link the two tables. Then you need to make your models aware of the link (unfortunately, it doesn’t do that automatically). But don’t worry, you only need two lines of code for that:

class User < ActiveRecord::Base
  has_many :posts
end

class Post < ActiveRecord::Base
  belongs_to :user
end

That’s it. These two lines make helpers available in both models that allow for navigating the models. Given a post, you could access its user via post.user or get all posts of a user by saying user.posts.

Validations are constraints that you can define in your model to ensure that the model is only saved to the database if those constraints are met. Rails provides a lot of predefined validations that ensure that a property isn’t empty, is within a certain numeric range or matches a regular expression. But you can basically use anything you can write down in code as a validation. Say you want to ensure that your posts have titles not longer than 100 characters and that the post body is always present. You would extend your Post class like this:

class Post < ActiveRecord::Base
  belongs_to :user

  validates_presence_of :body
  validates_length_of   :title, :maximum => 100
end

A call to the save method on a post that doesn’t comply with these restrictions will return false, and the post will not be saved to the database. You can then examine the post’s errors object by accessing post.errors and communicate to the users what went wrong. The Rails-provided validations all come with descriptive error messages that you could retrieve with post.errors.full_messages, for example.

ActiveRecord has a lot more depth and functionality than presented here. Even complex models and their relations can be handled pretty comfortably. But presenting all this exceeds the scope of this article. The API doesn’t help much if you want to explore all these possibilities; so, to get a deeper introduction, I recommend the Rails Envy ActiveRecord tutorial.

View

We’re almost at the end of our overview. The last missing part is MVC’s V, the View. All the components related to this are aggregated under the ActionView module. At the core of Rails’ views are the ERB templates, but they are backed by a large library of helpers that can be used to generate forms, URLs, sub-templates and other little tools that can make your life easier.

In the controller example, I talked about how the render method is used to render a template. An action that doesn’t explicitly render or redirect automatically renders its corresponding template in app/templates/<controller>/<action>.html.erb. The file extension .erb stands for “Embedded Ruby,” and that’s what the templates are: HTML files that are dynamically filled with content through the use of special script tags that contain Ruby code. These special tags work very similar to the ones PHP uses. Let’s take a look at an example:

<html>
  <head>
    <title><%= @pagetitle %></title>
  </head>
  <body>
    <h1>Post: <%= h @post.title %></h1>
    <p>Written on <%= @post.date %></p>

    <div id="postcontent">
      <%= h @post.content %>
    </div>

    <% if @post.user.posts.count > 1 %>
      <p>Other posts by <%= @post.user.name %>:</p>
      <ul>
        <% @post.user.posts.each do |post| %>
          <li><%= h post.title %></li>
        <% end %>
      </ul>
    <% end %>
  </body>
</html>

Tags beginning with <%= evaluate the expression they contain and insert them into the document. The little h you see sometimes is a helper function provided by ActionView that escapes characters that are not valid HTML. You should always use this if you’re displaying user-entered content to prevent cross-site scripting attacks.

Below the postcontent div, you can see another type of erb tag, without the equals sign. This means that its content is executed but not inserted into the document. We’re opening a conditional statement here. Everything between the if and the end will only be executed if the current post’s user has other posts. This affects both Ruby and HTML code.

The next tag is also pretty interesting and different from the ones used before. We’re combining the power of Ruby blocks here with ERB to iterate over a user’s posts. The each method executes its block for each of the members of a collection and makes the current member available to the block. I’ve called the block’s parameter post here, so we can refer to the current post under this name within the block. In ERB, you can put HTML within blocks just as if it were code.

You’ll notice that I’m using two instance variables in this template, @pagetitle and @post. They are the main means of passing data from the controller to the template. Instance variables that exist in the controller can also be accessed in the template. It’s that simple.

From the content of the page, you can see that we’re probably rendering the show action of a post’s resource here. The controller action to feed this template with data could look like this:

def show
  @post = Post.find(params[:id)
end

The @pagetitle could be the result of a before filter:

before_filter :set_title
def set_title
  @pagetitle = "Showing Post #{params[:id]}"
end

Rails’ templates can harness the full power of the Ruby language and have access to the full stack right down to the models. This power can easily be misused to put controller logic or model operations into the templates. But you’re only hurting yourself (and your colleagues) if you do that. You should only put code in the templates that is directly related to displaying data.

As with ActiveRecord, this only scratches the surface of what’s possible with ActionView. Three of the most useful features not introduced here are:

• Layouts that can be nested so that you don’t have to repeat identical structures in your templates over and over.
• Partials, small template snippets that can be used to render collections and inserted into other templates
• Generation of JSON and XML to create Web services, AJAX interfaces and RSS feeds.

To go deeper into the topic, check out the Layouts and Rendering in Rails guide on Rails Guides.

Learning From Rails

Rails takes Ruby’s aim of increasing programmer productivity and happiness and applies it to Web frameworks. Its debut was a truly revelatory experience because it showed developers that that power doesn’t have to come with the clumsiness that other frameworks exhibited at the time.

Today, the ideas of Rails can be found in many imitators in other languages, but if you’re not tied to any one of them, Ruby on Rails is definitely worth checking out. You’ll rediscover the fun in programming, and even if you don’t stick with Rails, you definitely won’t regret the learning experience.

The greatest thing about Rails, however, is how it can change your perception of programming in general once you understand its design and the reasons behind it.

First, simply using Ruby — a language that’s quite different from ones you’ve used before, yet similar enough not to be totally alienating — opens up your mind to new ways of thinking and new ways of perceiving programming languages. You’ll suddenly begin to question things you’ve taken for granted. You’ll frown at first on the prospect of opening up and redefining core classes at runtime, but once you’ve done it and seen that your program still runs and looks nicer than before, you’ll appreciate the flexibility and also become a more responsible programmer. You’ll curse every semicolon and every empty pair of braces that other languages force upon you.

For many programmers, Ruby even paved the way to radically different territory, namely functional programming. Ruby is an imperative language, but its treatment of code blocks as objects equal to Strings, Numbers or any other class and its support of closures will slowly prepare your mind for languages like Lisp, Haskell and OCaml, where passing around functions is the predominant way of writing programs. You’ll have a much broader palette of solutions for the problems you’re tackling each day, and those problems will stop looking like all nails.

Rails very much builds upon these wisdoms and makes much use of meta-programming (class rewriting) and functional programming principles. In this way, Rails becomes more than a framework, and becomes rather a domain-specific language for writing Web applications. The exploitation of Ruby’s dynamic features enables a brevity in Rails’ API that does not obscure your code’s intention. After using Rails for a while, you’ll start to develop your own programs in this way.

Rails encourages strict separation of code between your models, controllers and views. Once you’ve written an app in this straightjacket, you’ll begin to see its tremendous benefits. You will develop a sharper eye for the correct location of code. Things you’ve put in your controllers in the past will take their place in the models, and your design will become more fluent, cleaner and more flexible, especially if you let Rails encourage you to thoroughly test your app.

Even if your flirtation with Rails doesn’t turn into a long-term relationship, you’ll gain invaluable experiences that will improve your style in whatever you develop in future.

Further resources

In the hope that your interest has now been piqued and you have an idea of what to expect, I’d like to point you to some resources that will really teach you how to write Web application in Rails.

Further, I’ll point you to some important sources of news, because despite its maturity, Rails is moving at blazing speeds. Don’t misunderstand me: you won’t have to study new features each week to keep up with programming in Rails, but by monitoring the right news sources, you’ll learn invaluable tips and tricks that you won’t find in the tutorials.

First of all, there are books. The advantage of computer books is that they’re usually comprehensive and professionally edited. The disadvantage is that most of them are outdated by the day they hit the shelves. So, the only books you should really bother reading are the ones that are just out. Fortunately, the standard Rails manual, “Agile Web Development with Rails” is just receiving the finishing touches for its third edition, which will cover the most recent changes in the framework. It’s good for beginners and doesn’t go very deep, but that’s okay. If you want to go deep, you can just read blog articles about the subjects you’re interested in after you’re done with the book.

To learn Ruby, you could try Programming Ruby (the “Pickaxe”), the guide written by the Pragmatic Programmers that first brought Ruby to the west. Its first edition is even free and can be found at ruby-doc.org alongside the official Ruby API. The second (and upcoming third) edition is definitely worth the money, though, especially for its chapter about the inner details of Ruby’s object and method dispatch system.

People who don’t like the Pickaxe usually recommend Hal Fulton’s “The Ruby Way,” which teaches the language in a more task-oriented way.

If you’re just entering the world of Rails, you’ll also have access to what will probably be a pretty awesome library of documentation (if it isn’t already!). A few months ago, the Rails team launched an effort to provide comprehensive, up-to-date and free information about everything Rails at Rails Guides.

If you’ve taken your first steps, you should subscribe to the official Ruby on Rails blog, mainly for important announcements and its “This Week in Rails” feature, which provides a very convenient overview of the development of Rails.

If you want to keep in touch with the greater Rails eco-system, you should subscribe to the Rails Envy podcast. These guys will point you to nice plug-ins, tips, tricks and important blog posts every week.

You could, of course, just read those blogs yourself, but beware: Rails has a lot going on in it, and I prefer to have the information predigested in some form. However, if you’d like something to chew on during those boring hours at work, check out these blogs:

• Ryan’s Scraps
• has_many :through
• Robby on Rails
• Jamis Buck’s blog
• caboose
• Ilya Grigorik’s blog
• On Rails
• nano RAILS
• Railscasts

Should you get stuck in your adventures, Googling often helps because most of the problems that beginners experience are similar, and for almost any hurdle you may encounter, somebody somewhere has already written a blog post about it. If this is not the case with your problem, ask for help on the Ruby on Rails mailing list or the Ruby mailing list. The people in the Ruby community are usually very friendly and helpful.

We want to bring Ruby on Rails closer to those who want to take a peek first, without going through an entire tutorial. So, this article is structured a little different from most other introductions out there; hopefully it is more useful because of this.

I assume you’re already familiar with some other form of Web development, whether PHP, Python, Perl or Java, and relational databases like MySQL. First, we’ll introduce Rails and Ruby and the basic ideas behind both. I’ll teach you just enough Ruby so that you understand the code samples. I’ll tell you how to get Ruby on Rails running on your computer, and I’ll give you an overview of the basic functionality of Rails and demonstrate how Rails’ main parts work together.

This tutorial consists of two articles: in the current, first article we get started with some basic concepts and essential components of Ruby on Rails. In the second part (it will be published next week) you will learn how to install the engine; you’ll also take a closer look at Rails’ inner workings and discover main advantages of Ruby on Rails. Please stay tuned.

After reading these parts, you should have an idea of whether Rails is for you. If you get the feeling that it is, I’ll point you to some good tutorials on the Web that you can use to learn Rails. I’ll also provide a lot of further reading recommendations so you can dig as deep into the topic as you like.

I’m taking this approach because Rails is almost 5 years old now and has become very complex. There are a lot of “Create-your-own-blog-in-5-minutes”-type tutorials out there already, and rather than adding another one, I wanted to provide this kind of rough overview to help you decide whether to take this adventure.

You may want to take a look at the following related posts:

• 10 Useful Tips For Ruby On Rails Developers

The Idea Behind Rails

Ruby on Rails was created by David Heinemeier Hansson as a kind of byproduct of Basecamp’s development at 37signals in 2004. Basecamp was built in Ruby because Hansson found PHP and Java not powerful or flexible enough. It was quite an obscure language back then, without the large eco-system available today. To make development easier, Hansson rolled his own Web development framework, based on simple ideas that had proven successful elsewhere. Rails is founded on pragmatism and established paradigms instead of exotic new ideas. And that’s what made it so successful.

Rails is based on the Model-View-Controller pattern that splits your application into three parts:

• The Models are your business objects describing the structure and behavior of the problem your application is trying to solve. These are usually backed by an Object-Relational-Mapping framework that persists your objects to a database in the background.
• The Views are the templates that render data to the user and all the logic surrounding presentational aspects of your app.
• The Controller sits at the heart of everything, processing requests from clients, initiating changes in the models and triggering the rendering of the templates.

Rails is “opinionated software.” It doesn’t want to be everything for everyone. It focuses on one way of doing things and streamlines all its parts around that way. That’s not to say there’s no possibility of doing things differently if you need to, but you’ll definitely have it easier if you do things “the Rails way.” And that way happened to be exactly the right one not only for Hansson but for a lot of other developers, too, another important reason for Rails’ success.

Programmer productivity was the main goal during Rails’ development, not performance. This has led to a lot of controversy and claims that arise over and over about how Rails can’t scale. This is Rails’ own fault to a certain degree. In its early days, it had the image of a Web development framework messiah of hope and wonder that would lead us all to the promised land were applications wrote themselves. The Rails team didn’t do enough to keep expectations more realistic, and some people became disappointed.

While it’s true that Ruby on Rails is slower than comparable stacks on PHP or Python, it certainly does scale, as hundreds of successful deployments are proving. You’ll just need to scale sooner and put some thought into it. Remember also that Ruby’s current default implementation is terribly inefficient, but alternatives are on the way. There’s nothing inherently slow about the language, though, as blazing-fast implementations of Smalltalk (a language very similar to Ruby) prove. Ruby will only get faster. As the saying goes, you don’t have a performance problem until you have a performance problem, and all this talk should not scare you yet. You haven’t even started.

Now, before I introduce you to the framework, let’s get started with Ruby.

A Gem From Japan

Ruby on Rails owes not only half its name but its entire feel and flexibility to “Ruby,” that neat little language from Japan.

Ruby came out in 1995 and was developed by Yukihiro Matsumoto, or “Matz” as he’s called in the community. Version 1.0 was released in 1999 and slowly gained recognition in the west from then on.

A key point in the spread of Ruby was the release of “Programming Ruby,” also called the “Pickaxe” (a reference to its cover illustration), by the Pragmatic Programmers. “Programming Ruby” was the first comprehensive English guide to the language and API.

Ruby was designed with simple principles in mind. Matz took the most successful and powerful elements from his favorite programming languages — Perl, Smalltak and Lisp — and combined them into one language with easy syntax. One goal was to make Ruby feel “natural, not simple” and to create a language “that was more powerful than Perl, and more object-oriented than Python.” This results in Ruby’s core principle: Everything is an object.

Objects

Let’s stop here and examine this. Really, everything is an object in Ruby. True and false are objects, literals are objects, classes are objects. You can call a method on a numeric literal:

>> 5.next
=> 6

Operators in Ruby are nothing but methods:

>> 5 * 10
=> 50
>> 5.*(10)  # times-operator called as a method (dot-notation)
=> 50       # with a parameter (in parentheses)

Ruby is extremely flexible and open. Almost everything about it can be changed or manipulated at runtime:

• You can add and remove methods and variables to and from objects.
• You can add and remove methods and variables to and from classes.
• You can truly manipulate any class this way, even core classes like String and Integer!

Here’s an example:

>> "hi".repeat(4)
NoMethodError: undefined method `repeat' for "hi":String
>> class String     # Open the string class and add the method
>>   def repeat(i)
>>     self * i
>>   end
>> end
=> nil
>> "hi".repeat(4)   # Call it again on a fresh String literal
=> "hihihihi"       # And there it is!

Here, I defined the method repeat on the String core class, and it was immediately available on a string literal.

And he who giveth, taketh away:

>> class String             # Open up the method again
>>   undef_method :repeat   # And remove the method
>> end
=> String
>> "hi".repeat(4)           # Try to call it
NoMethodError: undefined method `repeat' for "hi":String

I could have also done this with predefined methods. They are no more “special” than the methods we have defined.

Let’s review the definition of repeat in the above example for some more interesting tidbits. Note that we’re not saying return anywhere in the body. That is because in Ruby, methods always implicitly return the value of their last expression. You could of course always jump out of a method by using return before reaching the last statement, but you don’t have to. The expression we’re returning is self * i. Self is equal to this in Java and $this in PHP and always refers to the current object. The times-operator on a string repeats the string as often as told by the second operand/parameter, i in this case.

Loops

You rarely see manual iterations in Ruby, like for or while loops. Instead, Collections come with their own iterators that you can pass blocks to, which are executed for every element in the collection:

a = "Hey "
[1, 2, 3].each do |num|
    puts a * num
end

# Outputs:
# Hey
# Hey Hey
# Hey Hey Hey

What you see here is an array literal containing numbers. On that array, the each method is called, an iterator that takes a block and calls the block for every element in the array. The block starts with the do, followed by a list of its parameters enclosed in pipe symbols. Here we have one parameter called num that will take on the value of the array element in each iteration. Inside the block, we’re simply outputting the result of a * num. The definition of * on Strings is to repeat the string accordingly. We could have put the String inside the Block, but I wanted to demonstrate that blocks have access to their surrounding scope.

Syntax

Ruby likes to keep the syntax clean and friendly. You can see this in the above examples. Although heavily influenced by Perl, Ruby doesn’t have Perl’s excessive use of special characters. You can use semicolons to end lines, but you don’t have to (and no Ruby programmer does). You don’t need to surround method parameters with braces in unambiguous situations (although it is recommended you do so if they enhance readability), and you especially don’t need to provide empty braces around an empty parameter list. That’s what makes accessors look so much like native properties.

Blocks are framed by do and end. You should only use equivalent curly braces if your blocks don’t span several lines. The only significant use of special characters is found at variable declaration. Variables in Ruby are prefixed with special characters to indicate their scope. Variables starting with a lowercase letter are local variables. Variables starting with an uppercase letter are constants. (This means that all classes are constants, too, since classes start with uppercase letters.) Instance variables start with an @. Class variables that are shared among all instances of a class start with @@. Finally, global variables all start with a $.

You’ll often find methods ending in ? or !. These are not special characters. It is merely conventional in Ruby to use question marks for methods that query an object for a Boolean condition, like Array#empty?, or exclamation marks for methods that are destructible:

>> a = [5, 1, 9, 2, 7]   # Create an array and store it in a
=> [5, 1, 9, 2, 7]
>> a.sort                # sort merely returns a new, sorted array
=> [1, 2, 5, 7, 9]
>> a
=> [5, 1, 9, 2, 7]       # a still is in its original order
>> a.sort!               # sort! instead sorts the original array
=> [1, 2, 5, 7, 9]
>> a
=> [1, 2, 5, 7, 9]       # a was changed

Conditionals

Conditionals in Ruby are very similar to other programming languages, with two notable exceptions. First, it’s possible to put a conditional after the statement it protects to make the code more readable:

execute_dangerous_operation() if user.is_authorized?

# is equal to

if user.is_authorized?
  execute_dangerous_operation()
end

Secondly, Ruby has not only an if but an unless. This is a syntactic nicety for when you want to check for the absence of a condition in a more readable manner:

unless user.is_admin?
  user.delete
else
  raise "Can't delete admins"
end

Symbols

Sometimes you’ll see names starting with a : (colon). These are a very special feature of Ruby called symbols. Symbols can be used to index hashes or mark states in a variable like you would with an ENUM in C. They are very similar to Strings but also very different. The point about symbols is that they don’t really occupy space in memory, and the same symbol literal always resolves to the exact same symbol:

>> "a".object_id  # object_id returns Ruby's internal identifier for an object
=> 3477510
>> "a".object_id
=> 3475550        # a new object on the heap
>> :a.object_id
=> 184178
>> :a.object_id
=> 184178         # the same literal refers to the exact same Symbol object

You’ll find them very often as parameters to methods, where they indicate how a method should work,

User.find(:all)   #find all users
User.find(:first) #find the first user

or as pointers to methods and variables (see the undef_method example in the “Objects” paragraph above).

Classes and Modules

Ruby supports single inheritance only, but for added flexibility it supports a feature called Mixins. In Ruby, it’s possible to define Modules that contain Methods and constants and to include these modules in a class via the include method. This way, you can extend the functionality of a class very easily.

Many of Ruby’s core classes even use this mechanism.Array and Hash, for example, both include the Enumerable module to provide a lot of convenience methods for iterating over their contents.

Often, Modules pose certain requirements to classes that include them. The Enumerable Module, for example, requires classes to provide at least an each method and an implementation of <=>, too, if its sorting features are to be used.

Modules also serve other purposes. Most importantly, they can be used to organize code into namespaces. Because classes are constants (which means you can’t assign another class to the same name), they can be stored in modules. These modules can then be nested to form namespaces.

These paragraphs probably won’t enable you to write Ruby programs, but you should be able to understand the code samples in this article now. If you want to explore Ruby a little, try the great interactive tutorial at Try Ruby, or take a peek at one of the books listed at the end of this article. If you just want to see some more code samples, check out the Wikipedia page on Ruby.

In the second part of this tutorial we will get rolling with Ruby on Rails, install the engine, take a closer look at Rails’ inner workings and discover main advantages of Ruby on Rails. Please stay tuned.

Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time – of course, if you are able to find them in time. Below you’ll find a list of techniques we , as web-architects, really couldn’t live without. They are essential and they indeed make our life easier. Let’s take a look at 53 CSS-based techniques you should always have ready to hand if you develop web-sites. Links checked: June/11 2008.

You might want to take a look at the article Powerful CSS-Techniques For Effective Coding.

1. CSS Based Navigation

2. Navigation Matrix Reloaded

3. CSS Tabs

4. CSS Bar Graphs (CSS For Bar Graphs)

5. Collapsing Tables: An Example

6. Adam’s Radio & Checkbox Customisation Method

7. CSS Image Replacement

8. CSS Shadows (CSS Shadows Roundup)

9. CSS Rounded Corners Roundup (Nifty Corners)

10. Drop Cap – Capital Letters with CSS

11. Define Image Opacity with CSS

12. How to Create a Block Hover Effect for a List of Links

13. Pullquotes with CSS (Automatic Pullquotes with JavaScript and CSS

14. CSS Diagrams

15. CSS Curves

16. Footer Stick allows for the footer of a Web page to appear either at the bottom of the browser window or the bottom of the Web page content – whichever is visually lowest.

17. CSS Image Map

18. CSS Image Pop-Up

19. CSS Image Preloader

20. CSS Image Replacement for Buttons

21. Link Thumbnail

22. CSS Map Pop

23. PHP-based CSS Style Switcher

24. CSS Unordered List Calender (CSS Styled Calender)

25. CSS-Based Forms: Techniques

26. CSS-Based Tables: Techniques

27. Printing Web-Documents and CSS

28. Improved Links-Display for Print-Layouts with CSS

29. CSS-Submit Buttons

30. CSS Teaser Box

31. CSS Tricks for Custom Bullets

32. Ticked Off Links Reloaded

33. CSS Zooming

34. Creating a Star Rater using CSS

35. The ways to style visited Links

36. PDF, ZIP, DOC Links Labeling

37. Displaying Percentages with CSS

38. Image Floats without the Text Wrap

39. Let visitors decide, whether or not will they open link in a new window

40. Simple accessible external links

41. Zebra Table with JavaScript and CSS

42. Vertical Centering with CSS (Horizontal and Vertical Centering with CSS

43. Unobtrusive Sidenotes

44. Image Caption with CSS (Styled Images with Caption)

45. Dynamic Piechart with CSS

46. Format Footnotes with CSS

47. Hierarchical Sitemap with CSS

48. Snook’s Resizable Underlines

49. Switchy McLayout: An Adaptive Layout Technique

50. StyleMap: CSS+HTML Visual Sitemap

51. Custom Reading Width

52. CSS Alert Message

53. CSS Production Notes

A non profit’s website needs to make it easy to find out more about their cause, to donate money, and to become more involved. It needs to make it easy for media contacts to find the information they need and the contact information of key personnel. And it needs to do all this in a way that’s inviting to the organization’s targeted donors and/or volunteers.

Below are a list of best practices for designing non profit websites followed by some examples of non profit websites that are getting things right.

1. Make Your Site Donor-Friendly

Donations are a necessary thing for every non profit organization out there. Your website can be a great place to solicit donations, especially from new donors. It can also make it easier for recurring donors to make additional donations. In either case, you want it to be a simple and straight-forward process for people to give you money.

There are a few things to keep in mind when creating a donor-friendly site. First, make sure your donation page is prominently linked from your home page. Whether you do this with a special banner or button or simply make it prominent in your regular navigation, donors have to see where to donate before they can do so.

Second, make the actual donation process as painless as possible. Don’t require visitors to set up an account to donate. The donation process shouldn’t be any more complicated than any other online transaction. Other than information required to process their credit card or e-check, don’t require any other information. And use a single-page donation form if possible, with just one confirmation page. There’s less chance that there will be browser or connectivity issues if there’s only a single page to deal with.

2. Make Your Site Media-Friendly

Getting media attention can have a huge impact on a non profit organization. Whether the media attention brings in more donations directly or simply raises the profile of the organization, getting attention from journalists, bloggers, and anyone else with an audience is important.

Make it easy for journalists to find information about your organization. Include profiles of your board of directors, founder(s), and other key personnel. Make sure you include contact information (email and phone) for each of these key people. Have a downloadable media kit that includes everything your print media kit does.

Offer downloadable images from your site so journalists and bloggers don’t have to contact your and wait for a response. And include press-ready quotes, both from members and directors as well as outsiders. Make it clear that journalists and other organizations may use these items in news coverage without contacting the organization for prior permission.

3. Make Your Site Volunteer-Friendly

Make it easy for visitors to your site to find information on how they can get involved. There are plenty of people out there who might not have the money to make a donation but are still passionate about what your organization is doing.

Whether you provide detailed information about volunteering directly, steps people can take on their own, or just contact information for your volunteer organizer, make sure you don’t overlook this crucial bit of information.

Providing multiple means of contact makes it easier for volunteers to get in touch, so include an email address, phone number, and a web contact form if you can.

4. Make Sure Your Organization’s Purpose is Immediately Apparent

How many times have you gone to a website and not had a clue what the site was about? This happens all too often. Designers and clients often take for granted what visitors to their site will already know about their organization.

But considering how much information is pushed in bite-size pieces on sites like Twitter and Facebook, there’s no telling how much or how little visitors will know. With some organizations it’s easy enough to figure out what the organization is about just by its name, but for others it’s not so easy.

Putting an abbreviated mission statement right on the home page is one way to solve this. Another way is to put a prominent link somewhere on the home page that takes visitors to an about page that offers concise, plain-language (not “marketing-ese”) information about what the organization does.

5. Make Sure Your Content Takes Center Stage

Design on any site should be transparent, and especially so on non profit sites. That’s not to say your site can’t have an interesting design, just that the design should revolve around your content and your mission, not the other way around. Take into account the types of information you’ll be providing on the site and the formats that will be used.

Consider up front how much multi-media elements will be used, and whether they’ll be used on every page or just in special gallery sections. If you plan to post videos and photos on multiple pages, you’ll need to make sure your column widths other elements are complimentary to the kinds of media you want to use.

Make sure your columns are wide enough to accommodate YouTube videos, for example. If they’re not, any time you embed a video (or similar element), your site design will look haphazard (and some of your site content might end up covered up).

6. Make Sure Your Website is Consistent with Your Other Promotional Materials

Your logo should use the same logo and colors as your other promotional materials. Maintaining a consistent brand throughout your organization greatly increases your chances of being recognized in passing. Your website doesn’t have to (and probably shouldn’t) match your print promotional materials exactly, but echoing the look and feel of those materials increases brand identity.

Make sure the content is consistent, too. Proofread and copyedit your website content just as you do your print materials. While it’s easier to change content on a website, it still gives a negative impression if your site is riddled with errors and inaccuracies.

7. Know Your Site’s Purpose Up Front

The leaders of your organization (or whoever is in charge of the organization’s website) should make a list of what the goals for the site are before starting the design process. Is the site primarily to allow existing members to stay updated? Is it to solicit donations? Is it to get new volunteers or members? Is it to raise awareness in general?

Whatever your purpose is, knowing it and communicating it to your designer going into the design process will save headaches and delays down the road. Make sure everyone is on board with the same vision, too, so you don’t have to make unnecessary changes down the road, which saves both time and money.

8. Include a News Section or Blog

Including a blog or news section has a couple of big advantages for non profit sites. First, it gives people a reason to come back to your site. If you offer news about your organization and your cause, people who are interested in either will come back on a regular basis (or subscribe via RSS). This keeps your site visible and makes it more likely they’ll become more involved in the future (or stay involved if they are already).

Second, blogs and news sites are often quoted by other blogs and news sites. This increases the exposure for your site and will likely bring you more traffic.

Third, constantly-updated content increases your search engine visibility. This makes it easier for people actively looking for information related to your organization to find your site.

20 Examples Of Great Non Profit Sites

Greenpeace USA
The Greenpeace website does a lot of things right. Links for donating or becoming a volunteer are featured prominently in their side navigation. Their media center page is also displayed prominently. The site features integrated mutli-media content in the form of both slideshows and videos, as well as both blogs and a news section.

Kiva
The Kiva website has a very simple and straightforward design. Right at the top of the page they explain exactly what Kiva does, and they make it very easy for visitors to lend money. They also have a featured entrepreneur on their home page, further encouraging others to join. They also feature an “About” link prominently in the header, which then links to tons of additional information, including a press center.

New York City Coalition Against Hunger
The New York City Coalition Against Hunger offers up an excellent website. Links to volunteer and donate are featured right on the home page. In the top navigation they include prominent links to both their “Media” section and an “About” section. Recent updates from the NYCCAH Hunger Blog are also included right on the home page.

ASPCA
The ASPCA website makes it immediately apparent through images and small text areas on their home page what the organization is all about. Donation links are featured both in the main content area of the home page and in the top navigation. Links to the “Pressroom” and “About” sections are also included in the top nav. Links to additional resources are also featured prominently.

One
This is one of my favorite non profit sites. A multi-media slideshow is featured prominently on the home page, showcasing featured content. Links for more information, the issues the organization is interested in, and links to join or take action are all featured prominently in the top navigation and elsewhere on the home page. The site also includes a blog (featured on the home page).

The Michael J. Fox Foundation for Parkinson’s Research
The Michael J. Fox Foundation website offers a great home page that includes tons of great information without looking cluttered. Links for living with Parkinson’s, about the foundation, research programs, and how to help are included prominently in the middle of the page. A donation link is also included in the top navigation. And news both about Parkinson’s and the Foundation are also featured prominently on the home page.

Save the Children
The Save the Children website is an excellent example of getting a lot of information into a small space while keeping everything de-cluttered and user-friendly. Links to donate or sponsor a child are included in the top navigation as well as below the slideshow on the home page. There are also links to more information and for other ways to become involved featured prominently. Information on the site is presented in a concise and user-friendly manner, providing plenty of information in easy-to-read chunks.

Oxfam America
The Oxfam America website uses color to make their donation button stand out on the home page. While the majority of the site is designed in shades of green and tan but the donation link is orange. It stands out without being garish. News is prominently featured on the home page, along with plenty of information about what Oxfam does.

Natural Resources Defense Council
The NRDC website also makes use of color to distinguish between different sections of their site. The “Donate” and “Take Action” links are denoted in orange. “Blogs” are in green and everything else, including their “About” and “Policy” page links are in blue. Multi-media content is featured prominently on the home page, as is recent news.

Amnesty International
The Amnesty International site makes great use of color, including a bright yellow header and accents mixed with shades of gray and black. A slideshow on the home page shows current news and research. Links to join, donate, or take other action are featured prominently in the sidebar and a link to media information is included in the header. The home page also includes plenty of current news and resources below the main content up top.

The Nature Conservancy
The slideshow on the home page of The Nature Conservancy’s site is one of the best I’ve seen, offering up information about various programs and initiatives they support. The site also includes other multi-media content from the home page. Links to donate, become a member, volunteer and other ways to help the organization are highlighted in yellow in the sidebar, making them easy to find while still fitting with the understated overall site design.

Witness
Witness takes a slightly different approach to their site, as monetary donations are not their primary focus. They use their site to effectively solicit video contributions showing human rights violations from countries around the world. Links to news, their media archive, and ways to get involved (including training) are included prominently in the top navigation.

Product (Red)
The Product (Red) site features products that support the organization prominently in a slideshow on their home page. They also include links on other ways to get involved, their blog, and learning resources in the sidebar. The overall site design is simple, which is primarily achieved by the limited color palette (red, gray, and white).

Susan G. Komen for the Cure
This site makes great use of space in their header for highlighting important links, including ones to pages for women recently diagnosed with breast cancer, how to make a difference, and a page to share your own breast cancer story. The donation link is featured in the header, making use of a bright pink button where the rest of the header is gray. This is another site that features a slideshow prominently on the home page.

Take The Walk
The Take The Walk site makes great use of bold graphics and a slideshow on the home page to immediately capture visitor attention. A graphic showcasing how many miles have already been walked and how many left until they reach their goal is the main highlight of the home page. Below the graphic are the different ways people can contribute and the different causes for which they’re raising money.

Change.org
Change.org is a different kind of non profit site. Their aim is to raise awareness and get individuals to take action on a variety of different causes. Because of this, their “Causes” section is the most prominent feature on their site. Causes are featured in the main content of the home page as well as in the top navigation. Other prominent features are tools to help individuals get started with their own causes.

charity: water
The charity: water site is a great example of how simple but bold design can make a huge impact. The donate button is red, while the rest of the site employs black and dark gray navigation. Three images linked to different resources on the site make up the bulk of the home page, creating a huge impact without being complicated or fussy. Links for the media, getting involved, and other resources are easily found in the top nav.

The Breadline Africa Worldwide Blogger Bake Off
The Breadline Africa Worldwide Blogger Bake Off site is one of the more Web 2.0-ish non profit sites I’ve seen. It’s easy to find information about the project right on the home page, including brief explanations of every aspect of the event. Links to join the bake off, donate, and to other resources are also featured prominently, as is a counter to show how much money has been raised so far.

Blog Action Day
The Blog Action Day site changes each year based on the cause being blogged about (as well as changing for updates before and after the actual event). In its current incarnation, it’s providing a recap of 2008’s Blog Action Day focusing on poverty. Statistics are prominently featured on the home page (including a chart showcasing the percentage of all blog posts that day focusing on the cause), as is a link to more information about what Blog Action Day actually is. The home page also includes a place to sign up for updates on the next event, press information, and information on how to donate.

Ducks Unlimited
The Ducks Unlimited site focuses on providing useful and relevant content more than anything else. The sidebar is filled with links on how to get involved, their photo gallery, newsletter, FAQs, and about information. A “Join” button is featured prominently in the header but doesn’t detract from the overall design of the site. The top navigation is filled with more links to resources provided by the organization.

Further Resources

Here are additional links that might be of use when designing your portfolio site.

• How Do I Create a Web Site for My Organization?
  A good overview of website design and development for non profits.
• (Some) Best Practices for Nonprofit Web Site Design
  Another basic rundown of best practices in non profit web design.
• Web Design Best Practices Checklist
  A very thorough list of best practices in general website design.
• Web Design and Development: Top 20 Best Practices
  Another thorough list of best practices.
• Backgrounds In Web Design: Examples And Best Practices
  A rundown of best practices in designing website backgrounds.
• Pagination Gallery: Examples and Good Practices
  A rundown on how to organize the pages of your site.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing.