How many of you recon its possible to create a website and then less then 10 years later be worth billions? Well it is and today’s top list is to show of those who have achieved this. The great thing about the Internet is how in such a short amount of time you can be worth so much money and all done weiring your boxer shorts, on a laptop in your bedroom!

Top Internet Entrepreneurs

Rank	Name	Website	Year Website Launched	Net Worth
1	Larry Page	Google	1998	$18.5 Billion
2	Sergey Brin	Google	1998	$18.5 Billion
3	Jeff Bezos	Amazon	1994	$8.7 Billlion
4	Pierre Omidyar	eBay	1995	$6.3 Billion
5	Eric Schmidt	Google	1998	$5.9 Billion
6	Ronald Burkle	Yahoo	1995	$3.5 Billion
7	Mark Cuban	Broadcast.com	1995	$2.6 Billion
8	Jerry Yang	Yahoo	1995	$2.3 Billion
9	Omid Kordestani	Google	1998	$1.9 Billion
10	David Filo	Yahoo	1995	$1.7 Billion
11	Kavitark Ram Shriram	Google	1998	$1.7 Billion
12	Todd Wagner	Broadcast.com	1995	$1.5 Billion
13	Peter Thiel	PayPal	1998	$1.3 Billion
14	Niklas Zennstrom	Skype	2003	$1.3 Billion
15	Janus Friis	Skype	2003	$1.3 Billion
16	Jack Ma	Alibaba	1999	$1.1 Billion
17	Mark Zuckerberg	Facebook	2004	$700 Million
18	Simon Nixon	MoneySuperMarket	1999	$680 Million
19	Andrew Gower	Runescape	2001	$650 Million
20	Reid Hoffman	LinkedIn	2003	$500 Million
21	Zhang Chaoyang	Sohu	1996	$425 Million
22	Steve Chen	YouTube	2005	$350 Million
23	Elon Musk	PayPal	1998	$328 Million
24	Chad Hurley	YouTube	2005	$300 Million
25	Duncan Cameron	MoneySuperMarket	1999	$280 Million
26	Marc Andreesen	Netscape	1994	$253 Million
27	Reed Hastings	NetFlix	1997	$150 Million
28	Blake Ross	Mozila	1998	$120 Million
29	Andrew Michael	Fasthost	1999	$110 Million
30	Max Levchin	PayPal	1998	$100 Million

PS. Expect me to be up there one day

If you’re a Web developer who’s been curious about Ruby on Rails but has never gotten around to trying it out because you couldn’t find a suitable overview of its advantages, then this article is for you.

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.

Related Posts

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

• 10 Useful Tips For Ruby On Rails Developers

About the Author

Jan Varwig is a programming language enthusiast, currently writing his CS diploma thesis about server-side JavaScript, and a software developer with 10 years of experience working for 9elements and as an independent freelancer. His blog and CV can be found at jan.varwig.org.

(al)

© Jan Varwig for Smashing Magazine, 2009. |
Permalink |
11 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: coding, programming, rails, ror, ruby

By Glen Stansberry and Smashing Magazine Editorial Team

Google AdSense is a simple and low-risk way for publishers to quickly monetize their content. The pay-per-click ad system has created an opportunity for anyone to instantly have advertising on their website, without the hassle of having to actively sell ad space. AdSense makes up a good portion of the advertising revenue for many websites, and other websites may use AdSense to earn the bulk of their revenues. Either way, AdSense is an excellent system for monetizing your content.

In this post we present an ultimate collection of resources, tools and tips to help you make the most out of Google AdSense. Among other things, this post covers various Google AdSense tools, Firefox-extensions, WordPress-plugins and related resources.

Please feel free to suggest related tools in the comments to this post. You may also be interested in our post Google AdSense: Facts, FAQs and Tools that was published two years ago.

1. Google AdSense Tools

iPhone AdSense Statistics Application
SenseApp is a program that lets you track your Google Adsense earnings on your Apple iPhone.

AdSense Earnings Tool
Free and fast tool to monitor adsense earnings in realtime. This tool posts all the correct post fields to Googles universal Account Services login and collects information about your earnings. You’ll able to see today, yesterday, this month and since last payment earnings. You don’t need to log in to Google anymore.

Google AdSense Toolbox
Type any web page URL (e.g. cnn.com) or keywords (e.g. web development), select a country (optional) and hit Enter to see the latest Google Ads that are contextual and geo-targeted.

Google AdSense Preview Tool
an addition to the right-click menu for Windows Internet Explorer 6.x, allowing you to preview the ads that may show on any webpage. With just a few clicks, you can see what ads may appear on your new webpages, or make an educated decision on whether to add AdSense to your existing site pages.

Google Search-Based Keyword Tool
The search-based keyword tool allows you to find high-paying keywords to target, based on the domain name you specify.

Google Traffic Estimator
The Google Traffic Estimator is an easy way to determine the search volume of certain keywords, and it shows related keywords and their volumes as well.

SpyFu
SpyFu allows you to look up any website and see how much it is spending on AdSense, how it ranks for each keyword, and which keywords it buys. The tool is quite useful for researching competitors.

adsblacklist
Identify and block low-paying advertisers and increase ROI with AdSense.

2. Google AdSense Online Tools

Contextual Ads Preview/Comparison Tool
This comparison tools comes in handy when you compare AdSense ads to those of other advertisement services (Chitika, Yahoo). You also have the ability to customize the colors and view what ads a certain URL would be likely to display.

Google AdSense Calculator
This AdSense Calculator is designed to help you to predict changes in your earnings depending on improvement (or deterioration) of Page Impressions, Click Through Rate and Cost Per Click. You can download further calculators here.

WordTracker
During the search, people use different keywords. Using this tool, you can find the most effective words before deciding what content to include on your page. Not free, but the free trial is available.

Traffic Estimator Sandbox
To use this tool, you need an AdWords account. This traffic estimator helps you to figure out what keywords result in the highest paying AdSense ads (more details on uphook).

Pubmatic
While Pubmatic isn’t strictly an AdSense tool, it will definitely help you earn more money from your website by optimizing your ads. With each page view, Pubmatic determines whether showing an AdSense ad or an ad from a different network would be best, based on the CPM.

AlterNut Ad
Instead of earning nothing from the PSA ads that Google fills the page with when it has no ads to show, earn a set fee by giving AlterNut Ad your unused PSA ads.

3. Google AdSense Firefox Extensions

AdSense Notifier
This extension displays your AdSense earnings in the status bar.

AdSense Preview
Check what Google ads would be displayed if they were shown on a particular page with this preview tool.

Money Quake
Money Quake allows you to see your real-time earnings for many popular advertising programs, including AdSense.

GraphSense
GraphSense gives you a visual look at your AdSense reports by adding graphs to the interface. As of this post, the extension is still classified as “experimental,” so you’ll have to log in to Mozilla to install it.

4. Official AdSense Resources

Google has provided some official tools and resources to help publishers get started with AdSense.

Google AdSense Help Center
A database of questions and answers about the AdSense program.

Inside AdSense Blog
The official AdSense blog. Find news, tips and other features about the ad system here.

AdSense Community Forum
Have an AdSense question? Ask a community of publishers and the AdSense team.

Official Optimization Tips
A collection of tips provided by the AdSense team.

Official AdSense Channel on YouTube
Instructional videos and interviews by successful AdSense publishers.

Interest-based advertising with Google AdSense
Just recently Google announced the launch of interest-based advertising. This help section addresses the new mechanism and explains how you can benefit from it.

5. Getting Started with AdSense

Because of the popularity of AdSense, many so-called “experts” out there try to give “inside information” or sell their secrets in the form of ebooks. If you’re truly a beginner to AdSense, use the official AdSense help database that Google provides.

Here are some “getting started” articles by a few trusted authors.

Problogger’s AdSense Tips for Bloggers
Darren Rowse’s excellent eight-part series will get you well on your way to making money from AdSense.

The Ultimate Beginner’s Guide to Effective AdSense Link Units Optimization
A great rundown of the different types of link units and how they’re best used in a website layout.

Where Should I Place Google Ads on my Page?
The Google AdSense team has made a helpful map showing the different regions of a website layout where AdSense units perform the best.

6. Optimization Tips

Like any ad system, AdSense can be optimized to generate more clicks and revenue. Here are some tips to help boost AdSense performance.

Adsense Success Stories
Several examples of websites that increased their earnings significantly with Adsense. The success stories talk a lot about ad optimization, etc.

Google AdSense Tips
Google Blogscoped provides an excellent collection of AdSense tips based on its experience with implementing Google ads.

My top 5 tips for increasing adsense earnings (without increasing traffic)
Experiment with color and position, use different adverts for different dates, use content targeting, referrals and take care of the SEO.

Eye-Tracking Studies by Jakob Nielsen
Great eye-tracking examples that show where users’ eyes start and end up on a page.

Adsense Tips, Layout Optimization Tricks for Higher CTR
A collection of excellent do’s and don’ts for new publishers, as well as advice for more advanced AdSense users.

Rotate Google AdSense Ad Colors : Reduce Ad Blindness
One of the many enemies of publishers who rely on ads is banner blindness. Rotating ad colors is a good way to combat banner blindness, resulting in more clicks on ads.

Google AdSense Tips, Tricks and Secrets
Popular SEO blogger Michael Gray has an extensive post on various AdSense tips and performance boosters.

How to Display Ads Only to Search Visitors
Click-through ratios are much higher if you show your AdSense units only to visitors who were referred by search engines. Here’s an article on how to implement that functionality on your website.

Using the Competitive Ad Filter to Increase AdSense Earnings
Learn how to block made-for-AdSense websites as competitors, allowing only the best and most relevant ads to show on your units.

100 Google AdSense Tips
While this article is a few years old, it still has some very valuable tips on how to optimize Google AdSense. Perfect for the beginner.

20+ Practical and Ethical Tips to Earn More Revenue from Google AdSense
eTechBuzz shows us some useful and ethical AdSense tips.

Blogmitize!
The Official AdSense Blog has a post on how to make the most money from your blog layout.

Little Known ‘Boring’ Websites that Make Incredible Money with AdSense
An article highlighting that nearly anyone with a niche website can make money from AdSense.

7. AdSense WordPress Themes

WordPress is the most popular blogging platform, so it’s no surprise that a few themes come AdSense-ready, with ad placements already determined.

Pro Sense

Get Some!

CognoBlue

TechBlue

Elite Circle

Amazing Grace

Amazing

8. AdSense WordPress Plug-Ins

If you want to integrate AdSense in your existing website, here are some plug-ins to help display your ads.

AdSense Manager
The AdSense Manager widget allows for the automatic creation of AdSense ad zones on your WordPress blog. The plug-in also supports other ad networks, such as YPN, AdBrite and Commission Junction.

Easy AdSenser
Easy AdSenser is a feature-filled plug-in that allows you to easily insert AdSense into your posts and layout. It has an extremely user-friendly interface, with lots of features that make adding AdSense much easier than it is with other plug-ins.

AdSense Revenue Sharing
Share AdSense earnings with co-authors using the AdSense Revenue Sharing plug-in.

All in One AdSense and YPN
Use the All in One AdSense and YPN plug-in to automatically insert YPN and AdSense ads into your existing blog posts.

AdSense Under Image
If a post has an image, this plug-in automatically inserts an AdSense block under the image.

AdSense Deluxe 2
Another plug-in to automatically insert AdSense ad units into blog posts.

Google AdSense for Feeds
A simple plug-in that places AdSense in your blog’s feed.

Ozh’ Who Sees Ads
Determines what type of visitor will see ads on your website. This plug-in allows publishers to hide ads from regular visitors and show them only to search visitors.

9. AdSense Books

If you’re looking for an entire collection of tips and advice on making the most out of AdSense, you might want to try a print book instead. Plenty of excellent AdSense articles are available online, but on the whole, it is easier to find more accurate information in print media. Here are some of the most popular books on AdSense.

The Best Damn Google AdSense Book

Google Advertising Tools: Cashing in with AdSense, AdWords and the Google APIs

The AdSense Code

Google AdSense Secrets

The Google AdSense Millionaire

10. AdSense Forums and Communities

Webmaster World AdSense Forum
The WMW forum is by far the best forum for getting expert advice on AdSense. A member of the Google AdSense team actually reviews all the threads and answers questions, so the information is legitimate.

Digital Point AdSense Forum
Digital Point’s AdSense forum isn’t as strict as the Webmaster World forum, so there is a lot of engagement but less experienced users and less informed advice.

Jowl Comm’s AdSense Chat

SEOChat
SEOChat doesn’t have an entire forum dedicated to Google AdSense, but it does have a thriving forum for affiliate marketing in which many AdSense topics come up on a regular basis.

11. Those Against AdSense

It’s always a good practice to hear the other side of the story when rounding up resources on a topic, especially one as controversial as AdSense. Many experts argue that AdSense isn’t the best choice for publishers to monetize their content. Here are a few articles that criticize AdSense.

Dear AdSense, You Broke My Heart
Problogger Darren Rowse’s open letter to AdSense about why he was disappointed in its decision to change the referral policy for publishers outside the US.

Have You Weaned Your Blog from AdSense Yet?
A convincing argument for moving from AdSense’s cost-per-click structure to CPM ads and other affiliate programs.

Why You Can’t Make Money Blogging
Copyblogger’s Brian Clark provides some compelling reasons to ditch AdSense and sell products that solve real-world problems.

10 Reasons Why People Hate Google AdSense
A round-up of thought-provoking reasons as to why Google ads repel publishers. Some of the reasons include: the ads are ugly, Adsense is everywhere, poor email support with the Google team and many others.

About the author

Glen Stansberry writes about creative web development at Web Jackalope. You can get to know him by following him on Twitter.

(al)

© glenstansberry for Smashing Magazine, 2009. |
Permalink |
40 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: adsense, google, tools, useful

Ready for this? Here’s how it works: you tell us what icons you need, and then we design them together with SoftFacade (which recently created the beautiful Smashing Retro Icon Set) and release them for free. And to make it a bit more interesting, we’ll smash six commenters and forum participants with original nerdy gifts.

To participate, just suggest an idea for a great useful icon set in the comments to this post or in this forum thread. Details are below.

How do I participate?

Participating is very easy: just let us know what icon set you would like us to design (and, if possible, what specific icons the set should contain) in the comments to this post or in this forum thread. The set may contain at most eight icons.

On the 20^th of March, we’ll select the most popular ideas and requests and publish a poll in our magazine, inviting our readers to vote on their favorite theme. Once it’s done, the creative minds behind SoftFacade will carefully design the set and submit drafts of its work in progress to the forum, documenting the design process. Hence, you can observe how the set is created and, if there is something you would like to change, communicate with the designers directly. You can keep track of updates on Twitter @smashingmag and @softfacade.

Awards

A total of six commenters and active participants in the forum will be awarded Mac Dock Icon Throw Pillows (see images below). The winners will be picked randomly and announced in the forum and on Twitter after the theme of the icon set has been chosen.

Finally, we’ll release the set as a free download, which you can freely use for personal and commercial use.

Smashing Magazine Is All About Our Readers

At Smashing Magazine, our readers have always been our highest priority. We respect our readers; we listen to them; we are always open to their suggestions; and we always appreciate constructive criticism. This is why we created a number of ways to interact with our readers:

• We created a friendly Smashing Forum to make it possible for our community to exchange ideas and help each other in problem solving.
• We are using Twitter to share useful resources and knowledge with, and get feedback from, our readers (e.g. deciding which article should appear next), and we now have almost 20,000 followers.
• We are preparing the Smashing Book, in which our readers can decide what topics will be included.

And now we would like you to decide what icon set we should design and release next, especially for you. We hope to get great feedback from you, and we would like to thank SoftFacade for its cooperation in this event! Please spread the word, too; we would like the design community to decide what would be most useful and interesting for designers out there!

So, what icon set is it going to be, folks?

(al)

© Vitaly Friedman & Sven Lennartz for Smashing Magazine, 2009. |
Permalink |
321 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags:

by Matt Cronin

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the information in the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily.

In this post, we’ll explain some Web typography terms and how they play into readability; we’ll present numerous tips to help improve the readability of your content; and we’ll showcase very readable websites, layouts and articles.

You may also be interested in the following related posts:

• 5 Principles and Ideas Of Setting Type On The Web
• 50 Useful Design Tools For Beautiful Web Typography
• Fantastic Typography Blogs For Your Inspiration
• The Showcase Of BIG Typography

The Terms, And What Each Means For Readability

There are many factors that play into the readability of text. There are also a number of terms, all very important. Here are a few of the more common Web typography terms and an explanation of how each term affects readability.

Hierarchy
Every typographic layout needs the essential element of hierarchy. Hierarchy defines how to read through content. It shows the user were to start reading and where to read through. It differentiates headers from body text. Although colors of text boxes can be used to contrast headers and body text, hierarchy refers to the difference in size between these elements. Hierarchy plays a huge part in how scannable a layout is. It is an important technique that needs to be mastered to achieve readable Web typography.

UXBooth uses a very clean hierarchy to achieve readable Web typography.

Contrast
Contrast is the core factor in whether or not text is easy to read. Good contrasts will make text easy on the eyes, easy to scan quickly, and overall more readable. On the other hand, poor contrast will force the user to squint and make reading the body text almost painful, not to mention a lot slower.

As shown in the following illustration, black on white is very readable. Black on white is obviously the standard contrast colors, and to achieve readable content it is good to stay in the range of black-on-white contrast.

This one, however, pink on blue, is nearly impossible to read. This example my be a little extreme, but it shows how such an awful contrast can have a major impact on the text. You probably won’t see websites using such poor contrast, but it still shows why you need to be very smart about it.

Line Height
Line height is a very common term meaning the space between individual lines of text. Line height is another factor in the readability of body text and even headers. Sufficient line height is especially important in Web design because it makes the text ultimately more scannable. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one.

Letter Spacing
Like line height, letter spacing affects readability in Web typography. Letter spacing is, as the name suggests, the space between each letter in words. In print layout, negative letter spacing is a common technique to add a more fun feel to the layout, but it should never be used in body text. In any text, letter spacing is an obvious factor in legibility.

Line Length
Line length is often overlooked in Web typography but should not be. Line length is, of course, the number of words per line. A good line length is one that allows the reader’s eyes to flow from the end of one line to the beginning of the next very easily and naturally.

The Keys to Readable Typography

Achieving readability is relatively easy; all it takes is to follow a few key practices. A readable Web page can go a long way with your users, and readability has a huge impact on their experience. Designing for the Web is all about making the user’s experience as pleasant as possible. Here are 9 tips that will help you work towards readability.

1. User-Friendly Headers
Headers are a key element in typography, Web and print alike. As mentioned, they are part of the text hierarchy and a major factor in scannable content.

First off, header size is just as important as the size of the body text. Going too big with the header with a large amount of content can throw the user off balance when reading and cause them to lose their spot. It will ultimately ruin the flow of the content and be a distraction. Headers that are too small will ruin the hierarchy of the article, too. If the header is too small, it will not draw the user’s attention as it should.

Next, it is important to provide ample space between the header and body text.

2. Scannable Text
I have already mentioned “scannable” text many times, and you have surely heard it elsewhere. Scannable text goes hand in hand with readable text. Making copy scannable consists of good use of headers, hierarchy and focus points to guide the user through the content.

So, what makes copy scannable? Well, there are many factors, most of which have already been mentioned. Header size and position, body text size, text line height, text contrast and the way focus points are differentiated all impact how scannable copy is.

Focus points are certain elements or objects within the layout that attract, or are supposed to attract, the user’s attention. This could be a header, a graphical element, a button, etc.

3. White Space
In content-heavy layouts, spacing contributes to the readability of content. White space helps to offset large amounts of text and helps the user’s eyes flow through the text. It also provides separation between elements in the layout, including graphics and text.

In the example below, white space and only white space is used to separate text elements. The layout is very clean and efficient. The user’s eyes flow from text element to text element with ease, because of the large amounts of white space.

4. Consistency
Consistency is often regarded as an important technique for usability, but it also applies to readability. Consistency in the hierarchy is important to a user-friendly layout. This means that all headers of the same importance in the hierarchy should be the same size, color and font. For example, all <h1> headers in an article should look identical. Why? This consistency provides users with a familiar focus point when they are scanning, and it helps to organize the content.

5. Density of Text
Density of text refers to the amount of words you place in one area. Density of content has a major impact on your content’s readability. Density is affected by spacing options such as line height, letter spacing and text size. If you find a balance between all of these so that the content is neither too compact nor too widely spaced, you will have perfect density that is both readable and scannable.

6. Emphasis of Important Elements
Another key factor is emphasis of certain elements within the body content. This includes highlighting links, bolding important text and showing quotes. As mentioned, focus points are essential in Web typography. By emphasizing these objects, you provide focus points for the user. These points and objects help break up monotonous text.

Scannable text is extremely important. By providing these focus points,, you make the body text extremely scannable. Bolding key lines of text immediately attracts the user’s eye and is therefore a very important element in presenting important information.

Pictured below is an article from UXBooth. This article uses bolding and italics to point out important information in the article. This is a very readable article and very easy article to scan for information.

7. Organization of Information
Believe it or not, the way you organize information in an article can strengthen readability. Users are guided with ease through content that is properly organized because information is easier to find. This veers into issues beyond the scope of this article but is still very important.

8. Clean Graphical Implementation
Every text body needs some sort of visual support, be it an image, icon, graph or illustration. Placing the graphic in the article can be challenging. Sufficient space is needed between the graphic and text.

If the graphical element is an image, then a clean border is a good idea for providing a clean separation from the text. Borders can help guide the user’s eyes and are good for adding style to content. It is important, however, to keep borders in content simple. They should have a subtle color palette and shouldn’t be too large.

In the case of graphical elements such as icons and illustrations, space is the only separator that should be used. The content should move cleanly around the graphic without disrupting the text.

9. Use of Separators
Separators are a simple and easy way to divide text into sections in a clean and organized manner. They can be used to divide hierarchy elements, such as headers and body text. They can also be used to divide content into sections.

The simplest form of divider is a single line. These are most often used to divide hierarchy elements and are very useful for making subtle divisions that still play a big role in readability.

Another common way to divide content is to use boxes. Text boxes are excellent for separating unrelated content on a single page. They help move the user’s eyes through a complex layout. Below is an example of this on Pixelmator’s website. It uses boxes to separate content in a clean way. Notice how the boxes are defined by their background instead of a border.

10. Good Margins
You hear people say that you should use white space, but why? White space actually helps draw the user’s eye to the text. The blank area (white space) forces the eye to focus on the text. So white space will influence the flow and readability of content. Margins are one of the best white space elements and support text elements well. Margins on either side will force the user’s eye to focus inward on the core content of the article.

Margins also support the article in another way. They help separate content from the rest of the design and layout. Text shouldn’t bleed into other layout elements, especially if it is a long article. Margins help define the article and its separation.

In the grid-based layout below, margins and only margins are used to set apart bodies of text. The result is a clean, clear and concise page.

Effects To Give Typography Some Flair

For the most part, text is text, simply words on a plain single-colored background. Not too complex, but it works. Occasionally, though, the text layout will need some styling and decoration. This may be a header or typography used in the overall design of the website (as opposed to the article content). No matter what the form, it is important to always stay within the limits of readability. Yes, it is essential to be creative and use decorative styling, but the typography must be legible or else it becomes almost useless.

Fancy Text
One good way to style typography is to use a fancy or unique font within the layout along with standard fonts. It is important to use simple and standard fonts for body text, but using fancy fonts elsewhere is an easy way to mix it up and add a little more to the theme. Using a single font throughout the entire website gets boring and, although readable, shouldn’t be done.

Letterpress
Another very common form of Web typography styling is letterpress. The example below uses a letterpress technique to add depth and embellish the layout. It looks very nice and flows cleanly, and the text is still completely readable.

Style the Background
Adding a nice background can be just as effective as styling text. By decorating the text body background, you are styling the text. Styling the background can be visually beautiful but can also reduce legibility. This is potentially a big problem but easily avoidable.

Keep the Contrast
First and foremost, it important to keep contrast within a readable range. For the background, use colors that are much subtler and duller than those of the text. This will allow the user’s eye to focus on the text and not be distracted by the background.

Textures Work Nicely
The best road to take with the background is to use a nice texture, which won’t detract from the typography.

Here is a dark website with a good typographic style. The typography has a decorative background, but the contrast still works nicely. The text itself has no styling, but the background makes up for it.

This is another great texture that supports the typography. The background texture resembles a canvas, and the typography takes on the form of a watercolor.

Link Styling
Within long text, links are one more type of focus point, and you should find a way to make them pop. In sum, the best way to do this is to use underlining, a different color than the body text, italics and a different font. You can combine these to great effect or just use one. The example below underlines and uses a different color for links.

Showcase of Help Elements

Help elements are integrated in many websites, and you often don’t notice them. Here are a few examples of usable help elements.

Blog Articles
Readability is important in blog articles especially. Here are a few excellent examples.

PSD.TUTSPLUS
PSD.TUTSPLUS and every Envato blog have very readable content. This particular example showcases a good use of headers in a well-structured hierarchy.

AppStorm
This website uses very good colors and header sizes to show hierarchy, and the articles flow very smoothly. Also note the significant amount of spacing above each sub-header.

Macalicious
This article makes good use of alternating colors in its headers. The body text is also very readable and has a legible contrast.

Tutorial9
Pay attention to how this article on Tutorial9 provides a good amount of spacing and a nice border around images. The text flows, and the image doesn’t detract from the text.

Fuel Your Creativity
Articles on Fuel Your Creativity have very smart spacing between the headers and sub-headers. The white space supports the text.

Good Graphics Use
The following examples show how to make graphic elements support the readability of the content.

Apple
Apple’s core content plays very nicely with the visual layout. All images blend into the background of the website. This allows for a visually pleasing layout that flows smoothly and looks awesome.

Pixelmator
The layout of this page is perfectly spaced. The text moves around the image.

Checkout App
This beautiful and minimalist website uses detailed icons to support the titles and information. The icons improve the scannability of the content.

Highrise
A readable and scannable layout that packs a large amount of information into a clean layout. They also use large icons as focus points.

Mint
This is an all-around beautiful website. It uses a significant amount of white space, dashed divider lines and large visuals.

Kupferwerk
Nice images between paragraphs and good borders around images.

Web Designer Wall
A well-spaced image layout, with a slight but noticeable border and ample padding, which looks great.

Well-Styled Typography

The following examples show creative uses of typography.

IAAH
Fancy header text and a good background highlight the body here.

OakesDesign
Good contrast of typography and color makes for a striking website.

The Cosmic Machine
An example of letterpress that fits the style of the website.

Web Designer Wall Job Board
This text is well styled. The sketched style works nicely with the rest of the website and is still completely readable, because the sketching texture is used only for text and does not disrupt it.

Bern
This is a good example of typography used cleanly in a grunge layout. You may notice that the letterpress style is also used here.

Digimurai
Here is an example of styled typography with a good hierarchical structure beyond the article.

Product Planner
This header has a clean gradient that contrasts well with the dark background.

Paramore Redd
More simple but beautiful text effects.

Tao Effect
A beautiful and scannable layout, with icons and different text styles to break up the article.

Take the Walk
Readable but strongly textured text.

Flash Gaming Summit
Good coloring and a perfect hierarchy.

Brynn Sheperd
A header hierarchy similar to what you would find in a print layout, but it flows seamlessly here.

Northtemple
Using images for text is another excellent technique.

Miles Dowsett
Extremely beautiful typography, with a nice background, a good color pallet and plenty of focus points.

Design Loom
Good frilly typography that flows with the illustration.

Powerset
Another example of letterpress style.

Matt Dempsey
Amazing typography with a painted background.

Carbonica
A sketched style that works with the rest of the website.

Gary Nock
One last example of hand-drawn text, this time on a paper background.

Related Posts

You may also be interested in the following related posts:

• 5 Principles and Ideas Of Setting Type On The Web
• 50 Useful Design Tools For Beautiful Web Typography
• Fantastic Typography Blogs For Your Inspiration
• The Showcase Of BIG Typography

About the author

Matt Cronin is a freelance Web and graphic designer as well as developer. He is the author and owner of Spoonfed Design, a design blog with great tips, how-to, inspiration, tutorials, and more. Spoonfed Design is part of the VAEOU Creative Network, a new start-up in progress with new services coming soon.

(al)

© Matt Cronin for Smashing Magazine, 2009. |
Permalink |
41 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine

Post tags: design, Design Showcase, typography