New Media Fuel Web Design Starter Kit

I've had this JSFiddle from CSS Wizardry open for like 2 weeks in my browser. I kept thinking about it, because before that I got an email from someone asking about essentially the same thing and it stuck in my head. They were wanting to insert a favicon next to links and use only CSS to do it. Unfortunately I haven't found a way to do exactly that, but using some jQuery we can do it pretty easily.

The "I Wish" CSS Only Technique

What would be nice is if you had simple semantic HTML like this:

<a href="http://github.com">GitHub</a>

And then you could access everything you needed to insert a background image of the favicon using a service like getFavicon.

/* Fair warning, this doesn't work */

a[href^="http"]:before {
  content: url(http://g.etfv.co/ + attr(href) + );
}

Maybe the syntax wouldn't be exactly like that, but something like it. The point is, you can't mix up the url() syntax into parts like that in CSS.

Google's Favicon Service

Google has it's own favicon service you can use. For example:

http://www.google.com/s2/u/0/favicons?domain=css-tricks.com

The trick is you need just the host name and TLD and nothing else. I searched around and found a simple regex for getting that from any URL. We'll need that because links aren't always (or even usually) the root of sites.

function getDomain(url) {
   return url.match(/:\/\/(.[^/]+)/)[1];
}

Using these things, and jQuery, we'll find all links and apply the favicon as a background image. The external link checking is pretty rudimentary, but there are more robust methods here if need be.

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + getDomain(this.href) +
        ") left center no-repeat",
        "padding-left": "20px"
    });
});

Then @travis reminded me that you can just use this.hostname instead of the fancy regex. So:

/* Nothing else needed */
$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname +
        ") left center no-repeat",
        "padding-left": "20px"
    });
});

I'm not sure what the browser support is for hostname, whether it's just as good as href or less so, not sure.

getFavicon Method

@seanodotcom showed me another similar service galled getFavicon. It's hosted by Google AppEngine, but it's not Google's own service. I did find it a bit slower. But the advantage being that you don't need to deal with host names at all, you just give them the full URL.

So then it becomes:

$("a[href^='http']").each(function() {
    $(this).css({
        background: "url(http://g.etfv.co/" + this.href + ") left center no-repeat",
        "padding-left": "20px"
    });
});​

View Demo

Performance?

As I'm sure you know, the number of HTTP requests a page makes is a huge deal in performance. Each little image in these techniques are one page request each.

@yuritkanchenko pointed out to me a cool favicon service that can automatically sprite the favicons for you so you can keep it to one request.

For instance:

http://favicon.yandex.net/favicon/google.com/yandex.ru/css-tricks.com

I'm afraid I didn't go the extra mile here and write the JavaScript needed to find all links, concatenate the domains, make the request, and then apply the images as a sprite, but I'm sure you could whip that up pretty quick if you really needed it.

Favicons Next To External Links is a post from CSS-Tricks

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!

So, you’re a website owner with several thousands of visitors monthly. Quite possibly you have asked yourself “how do I make my readers interact more on my website?” The answer? It could be through the use of gamification.

Your website has a lot of traffic but only a few people are actively engage on it?
Do you want to convert traffic into an active community?
Do you want to make your website more fun?

Why not gamify it?

I mean, convert your website into a game!

Do You have a Big Audience but little User Interaction?

• “I have tens of thousands of visitors but there are only 10 regular commenters”
• “Among my several thousand visitors no one clicks the Like button :(“
• “I have the means to make big changes on my website and try things out!”
• “ What’s wrong with my website?”
• “I want to make it more fun for my loyal readers.”

If you find yourself relating to any of the above statements about your high-traffic website, then something is definitely wrong! Visitor interaction is important if you want your website to improve!

I regularly visit several websites that have thousands of very loyal readers, many of whom came for entertainment. It is not very different for 1WD and other web design blogs, we have lots of regular readers, but only a handful actually spend a minute of their time to comment and share. We understand, of course, that not everyone who visits will leave a comment. I am guilty of this myself when visiting other blogs. What makes me comment and enter the discussion, along with the rest of humanity, is that rewarding feeling at the end of the comment.

What is Gamification?

The essence of gamification is to convert a website’s still community into a lively carnival. You may have 100,000 visitors on your website every month, but do you have an active community? A community where people actually discuss things, where they feel they are a part of your website, where people know who the top contributor is, who gives the best opinions, and who is the most loyal?

Nope? Did you just realize that the answer is…nope?

Well, that can easily be solved by gamifying your website. By awarding readers points and badges you are turning your website into a place where people will actually strive for a reward. It is proven that people love free things, and human nature dictates that having a higher number than others is better. Because, seriously, who doesn’t want to be on the leaderboard of top commenters? Or Loyal Readers?

Basically, you’re awarding points. You can, of course, shake your pocket once in a while and enable points-to-gift conversion. Even I would salivate and roam your website for several hours if you do this!

Is Gamification for You?

Hold your horses! Before doing anything else, you need to know if gamification is for you. Gamification can work for every type of website, as long as there is huge traffic involved and high-quality content is available.

Gamification is right for you if:

• If you want to leverage that huge traffic.
• If you want to reduce your website’s bounce rate.
• If you want to create a community.
• If you want to host regular gift-givings as a sign of giving back to the community that made you successful.
• If you are willing to spend money for the gamification systems subscription and prizes.
• If you want to make your website more fun.

Top Gamification Systems

Badgeville

Badgeville is one of the biggest gamification platforms that makes it easier to convert readers into loyal readers and one-time visitors into regulars by rewarding specific behaviors like reading articles, commenting, sharing posts, and by simply just visiting. It’s all about rewards!

The Next Web, one of the leading news websites out there about technology and business and culture, once had BadgeVille installed their website.

BigDoor

BigDoor is another gamification system whose goal is to help developers, publishers, and marketers make their visitors engage more and develop a solid community. It is easy to install, with a free widget that anyone can use for a test run.

I actually tested BigDoor a couple of months back and ran into a problem, but it was taken care of almost instantly by their team. They kept me in the loop of what their discussion about my problem was and how they solved it. Talk about awesome customer support, even when it’s free! For bigger websites, there is a paid version loaded with extra features.

PunchTab

Through PunchTab, loyal readers earn points for every visit, likes, share, by becoming a fan, through commenting, and by tweeting. Website owners can then specify prizes that readers can “cash out” on using their points.

I tested PunchTab too and the installation is pretty easy, anyone can use it. There’s also a very useful control panel where you can check the leaderboard, set prizes, and a lot more.

5 Ways Why Gamification Works

Online forums were one of the first to use this system to encourage their users to be more active. I’m pretty sure that by now you already know what I’m talking about. In every forum system there is a “class” system where posters receive a rank whenever reaching a specific post count. There’s also “reputation” and “thanks” on some systems signifying that “this user can be trusted”. And in the online world, being trusted while maintaining anonymity is a treasure.

So, how does gamifying your website actually work?

1. By providing points for every engagement (share, comment, or when a user reads a certain number of posts).
2. By awarding badges to loyal users, or users with high number of points.
3. By having a private section that only users with high points can enter.
4. By giving high-level users important tasks for the community.
5. By making the points convertible to gifts.

Successful Cases

Have you heard of the social news websites Reddit and Digg? They are basically the same website, but I will talk about Reddit here.

Reddit has a point system called “karma” which is acquired in two ways: through comments or through link submissions. Believe it or not, a lot of people spend several hours on Reddit just to amass thousands of karma. Imaginary points! But it works.

I’ve been laboriously trying to study Spanish using Memrise for a month now, not continuously though. The idea is to first present you with common words that you should memorize. As you get to memorize the words you are then awarded with seeds, which you can “plant” on your brain by revisiting the test. Then as things progress the seeds begin to grow into plants. The more plants you get to grow the larger your vocabulary becomes.

Facebook sort of does it too, with the Like and Share button. Admit it, isn’t it fun to see hundreds of people like your witty post? Makes you want to post more, right? That’s how it basically goes. Gamification, in its basic sense, is all about making you feel important. Because you are!

What Do You Think?

Personally, I think gamifying 1WD would bring more people to browse and actually read every post we publish. I’m also guessing that the number of comments and shares, tweets, and +1s will increase dramatically. I mean, you know, we have over 3 million unique visitors monthly!

What do you think? Would it work? Tell us!

There is an aspect to Web design that no one likes to talk about: spec’ing. We all do it, we all hate it, but we also understand that specs are vital to both designers and developers.

For those who aren’t familiar with the term in this context, “specs” is short for specifications — in the case of design, they are instructions that specify colors, fonts, sizes, spacing and so on, just like a blueprint. Specs are a crucial part of the design and development process for companies with big teams and for small companies that have to outsource some of their development. Specs function not only as instructions to developers, but also as a reference point to make sure the whole team is on the same page.

However, the process of producing specs is repetitive and time-consuming, especially for creatives. But now this can all change: Specctr, together with Adobe Fireworks, offers a quick and easy way to generate this important information automatically.

The Idea

My idea to make Specctr came from my personal experience working on a design team at a large corporation. Spec’ing was part of my routine. One day, after hours of spec’ing, my eyes hurt and I was bored and frustrated. Suddenly, I realized that this kind of intensive work should be automated, and that a designer’s time is much better spent designing rather than spec’ing.

Specctr is more than a tool: it is a business solution for any company whose designers must generate specs for developers. Specctr facilitates this communication and leaves designers and developers happier and more productive. Making this process quicker frees up the business to focus more intently on its core mission.

Possible time saved using Specctr for Adobe Fireworks.

Time saved using Fireworks and Specctr Pro.

In the process of creating Specctr, I brought my design background and practical experience in spec’ing to bear on the issues and opportunities in automating the process. Meanwhile, my colleague, Dmitriy Fabrikant, engineered the software from the ground up. Working in tandem at On Pixel, we released Specctr Pro in January 2012. Since then, it has received many favorable reviews.

Specctr Lite

In addition to the commercial version of the tool, we’re happy to release a free version called Specctr Lite as a contribution to the community. We chose to highlight width and height as well as text spec’ing abilities, because they are most common to a designer’s workflow. These two feature sets alone will save a lot of valuable time.

The Lite version includes:

• Width and height
• Text spec (font family, size, color)
• Expand canvas feature

Specctr Lite can be downloaded for free from our website, and we’re happy to say that it was created and released as a result of the involvement of Smashing Magazine!

Pro and Lite: a quick comparison

The Lite version is as easy to use as the Pro version, and its features work the same way.

Requirements And Installation

To use Specctr (Pro or Lite), you need:

• A Mac or PC
• A copy of Adobe Fireworks CS3, CS4, CS5 or CS5.1

The installation process is pretty straightforward:

1. Download the Specctr installer
2. Double-click the MXP file to open the Adobe Extension Manager
3. Click on “Install”
4. Restart Adobe Fireworks
5. In Fireworks, go to Window → Specctr to open the Specctr panel.

Please note: If you are using Windows Vista or 7, you might need to launch the Adobe Extension Manager as Administrator, otherwise the extension could fail to install.

If you still have questions, don’t hesitate to consult our online tutorial (PDF, 1.9 MB) or contact us directly!

Specctr Pro

A Brief How-To Guide

Once you install Specctr through the Adobe Extension Manager, restart Fireworks, and then open Specctr from the Window menu. Now that Specctr is open, you can spec a document in a few easy steps.

First, prepare your document by making room for your specs. Select the size of your design’s border, and click on the “Expand Canvas” button.

Select which details to display by toggling them on or off from the panel’s menu.

Now Specctr Pro will automatically display your spec with a click of the button.

To spec a shape (shape, line, dot, etc.) or a text object, select the object (or multiple objects), and click on the “Spec Object” button. The specs will be outputted to the nearest edge of the canvas.

Properties of objects in a spec

You can also spec the spacing between two objects by selecting them and then clicking the “Spacing” button. If you select only one object, Specctr will measure the object’s distance to the edges of the canvas.

Measuring the space between objects

Finally, you can also spec the width and height of any object.

Insight Into The Fireworks Extension Development Process

The process of developing Fireworks extensions consists of the following steps:

1. First, we design and build the panels in Adobe Flash Pro.
2. We import the panels into Flash Builder and add the ActionScript code, which makes them run.
3. Finally, we have to connect with the Fireworks API, which is written in JavaScript, in order to manipulate Fireworks.

Because the development process is spread over three separate environments, integrating the different pieces of the application and debugging the application present some challenges. But in the end, it’s well worth the positive response from our users.

In the next couple of weeks, Dmitriy will release on GitHub a few ActionScript libraries that he has built during the process of developing Specctr. These libraries will hopefully reduce some of the pain points of the tiered development process. We might also write another article that highlights in more detail the development process for building a Fireworks extension.

One of Fireworks’ strengths is its potential as a development platform that leverages the creativity and innovation of its community. We would love to help this process and show that Fireworks is a powerful tool for Web design.

Further Reading

Here are a few useful resources related to extending Adobe Fireworks:

Extensions

• Aaron Beall
• John Dunning
• Matt Stow
• Orange Commands, Ale Muñoz

Other Resources

Extending Fireworks blog, Grady Kelly

Extending Fireworks, Fireworksguru Forums

“Creating Fireworks Panels, Part 1: Introduction to Custom Panels,” Trevor McCauley, Adobe Developer Connection

“Extending Adobe Fireworks CS5” (PDF), Adobe Product Support

(al) (mb)

---

© Chen Blume for Smashing Magazine, 2012.

For eight months, I had the opportunity to intern with the YUI Team at Yahoo, while I was completing my engineering degree. Today, I’d like to share the top ten things that I learned from my experience with YUI.

---

A Bit of Background

The YUI Team is primarily responsible for the development and maintenance of the YUI Library. The library is a collection of user-interface components, class management tools, and utilities written in JavaScript and CSS that make it easier for developers to create web applications. Unlike other libraries, YUI is not just about DOM manipulation; it has a rich set of class management tools and a robust event system that makes it easier to develop in JavaScript.

Apart from that, the YUI Team is also responsible for YUI Theater, a very popular resource for web developers, along with a myriad of smaller tools such as YUI Builder, YUI Compressor, YUI Test and more.

My role at the team was to primarily help develop components for the library, although I helped out a little bit with YUI Theater as well.

---

1. Understanding the Library

When I walked into Yahoo on my first day, I had zero real-world experience with YUI. I was familiar with JavaScript, jQuery, HTML/CSS and PHP, but that was basically it when it came to web programming. I’m sure many of you are or have been in the same boat as me.

My first task was to learn the syntax and architecture behind YUI3. Fortunately, I had a good understanding of raw JavaScript, and this helped immeasurably. A lot of front-end engineers know certain libraries really well, but many don’t know how they works under the hood. To build plugins or modules on top of a library (such as YUI3 or jQuery), it’s useful to have a fundamental understanding about how that library works, and in this case, how JavaScript as a language works.

What I learned: Having a fundamental understanding of raw JavaScript (no libraries) forces you to understand the language better and makes you a better developer in the long run.

Think about it. Each JavaScript library is different and has its own idiosyncracies. The only commonality is that they are rooted in JavaScript. Doesn’t it make sense to understand the idiosyncracies of JavaScript first? Take some time out to build something small without using a library. You’ll be glad you did.

Js Fundamentals Links

• A Re-introduction to JavaScript by Mozilla
• Code Conventions in Javascript by Douglas Crockford
• 11 JavaScript Mistakes You’re Making by Andrew Burgess
• JavaScript Fundamentals Course

---

2. Using Git in a Team

The YUI Team relies on Git as their primarily version control system and the project is hosted on Github. Previous to my internship at YUI, I used Git for my own small projects, and this generally consisted of the following steps:

1. git pull origin master
2. git add "<insert a large number file>"
3. git commit -m "<insert some general comment>"
4. git push origin master

I’m sure many of you have done what I just described. Generally, as the project time gets longer, the commits get harder to understand! However, in a large team with a dozen developers, this method breaks down really fast. Firstly, master in YUI3 (and many other large projects) is considered to be stable code that has been unit-tested, so commits generally do not go there until a later stage. Generally, each developer works on a separate branch and merges into master once they are confident in their code.

What I learned: You don’t have to be a guru, but understanding the basics of Git (branching, merging, reverting and solving merge conflicts) can go a long way to keeping your repos clean and organized.

A lot of things are possible to do with Git and I’ve found that, rather than learning them ahead of time, it’s more useful to research when you need to do something in particular. More importantly, my experience has taught me to be careful when experimenting with Git. It’s better to ask someone when trying a new command or trying it on a mock repo instead of messing up the commit history of the live repo. :)

Git Basics Links

• Basics of Branching and Merging
• 25 Tips for Intermediate Git Users

---

3. Modular Architecture for Web Apps

Separating code into different JavaScript files to maintain a modular architecture can be painful for new developers. As a result, we often see large JavaScript files with hundreds of lines of code in them.

<DOCTYPE html>
<html>
    <head>
    <script>
        //My entire application's JS right here in one single spot. Uh oh.
    </script>
    ...

This introduces tight coupling between objects and isn’t good practice when it comes to object-oriented programming. Even worse, you may have global variables that makes your app fail in unexpected ways. We’ve all been guilty of this in the past. Luckily, libraries like YUI can help you with this.

What I learned: When writing an entire web application in JavaScript, it’s very important to have well-organized code; maintaining a spaghetti-coded project will only cause you headaches and nightmares.

One of the most important aspects of YUI3 is its modular nature. As a developer, you only pull down the code that you need. This reduces coupling, keeps file sizes small, and improves your code’s readability.

For instance, you could do this in a file called counter.js:

YUI.add("counter", function(Y) {

    //Write code specific to my counter object

}, '1.0', {requires: ['node']); //Say what my counter object code needs to run. YUI will pull these in first.

And then in a separate JS file, such as app.js:

YUI_config = {
    modules: {
        'counter': { fullpath: 'path/to/counter.js', requires:['node'] }
    }
};

YUI().use('counter', function(Y) { //Pull down my counter module.
    var counter = new Y.Counter({…}); //Create a counter instance
});

Instead of having one big file called app.js, we’ve split it up based on functionality into counter.js and app.js.

---

4. NodeJS and YUI on the Server

The growing popularity of NodeJS made me want to start building some stuff with it. Being a front-end engineer, I like being able to use JavaScript on the server. Although NodeJS is not suitable for everything, it’s worth learning.

JS on the server does not have the same limitations as client-side JS because there is no DOM, but a library such as YUI can still help you with software architecture on the server – things such as class and object management, and custom events.

What I learned: YUI 3 is not all about DOM manipulation — it also contains a robust set of class/object management tools, not to mention our powerful custom events. All of these tools are immediately useful in server-side programming.

Being on the YUI Team, I was able to explore Dav Glass’ NodeJS-YUI3 module, which wraps up YUI functionality for use in a NodeJS environment. Remember that, apart from web sites, NodeJS is a useful tool for creating command-line utilities as well. Having good software architecture is always a big plus!

It comes down to code management

If you aren’t a YUI3 user, I still recommend finding a set of tools to help organize your JavaScript on the server. Due to the inherent async nature of JavaScript and its propensity for callbacks, you need to be careful or you’ll quickly end up with spaghetti-code.

---

5. Hacking Using YUI

What I learned: Stay focused and keep hacking.

Hacking is one of my favourite things to do when I am trying to learn something new. When trying to learn a new tool, there’s nothing like sitting down and building something with it.

Similar to jQuery, YUI3 has a distinct set of widgets, utilities and CSS frameworks. On one of the Yahoo Hack Days, I had the chance to sit down and try some of these out. As I’m a fan of cricket, I made a mobile web app called Crictainment. Let me outline some of the parts of YUI that I found to be particularly useful for hacking.

Y.ScrollView

Hacking a web app using YUI is pretty straightforward. For example, if you want a scrollview that is flickable with your fingers:

YUI().use("scrollview", function(Y) {

    var scrollview = new Y.ScrollView({
        srcNode:"#scrollable",
        height:"20em"
    });

});

And in the HTML:

<div id="scrollable" class="yui3-scrollview-loading">
<ul>
    <li>AC/DC</li>
    <li>Aerosmith</li>
    <li>Bob Dylan</li>
    <li>Bob Seger</li>
    ...
</ul>
</div>

The scrollview module figures out whether it should be horizontal or vertical based on the width and height of its container. More information on the YUI3 scrollview is here.

Y.Anim

Another useful utility when hacking something is the Animation utility. It helps to spruce up your application with some nice animation that leverages CSS on capable browsers, and defaults to JS timer-based animations on older browsers.

var myAnim = new Y.Anim({
    node: '#demo',
    to: {
        width: 0,
        height: 0
    }
});

myAnim.on('end', function() {
    myAnim.get('node').addClass('yui-hidden');
});

Y.YQL

Another really important tool that is great for hacking is YQL – Yahoo Query Language. I’m sure most of you have used it, but for those who haven’t, think of it as a way to access a whole host of different APIs using a standard syntax. YUI and YQL work really well together through the Y.YQL module. For instance, here we are getting the recent activity from Vimeo:

YUI().use('yql', function(Y) {

    Y.YQL('select * from vimeo.activity.everyone where username="basictheory"', function(r) {
        //r now contains the result of the YQL Query
    });

});

Try out this query here. I use YQL regularly to access different APIs in a consistent manner.

Regardless of whether you are using YUI, jQuery, or any other library, building something with it is a great way to become familiarized with your development toolbox. When hacking, don’t worry too much about the technical details – just set a time limit and just build it!

---

6. YUI App Framework

One of the newer additions to YUI has been the App Framework. It’s similar to Backbone.js, but with YUI’s sophisticated event infrastructure under the hood. The App Framework made it easy for me to build MVC-style web applications.

Just like any other tool, I built something with the App Framework to understand how it worked. Once again, I can’t stress the benefits of hacking on products. For the App Framework, I built TopForty with a friend of mine.

The Model

The YUI App Framework is built on the MVC design pattern. Let’s start with the model. If you aren’t familiar with MVC, take a look at this tutorial.

For TopForty, we were able to get a large JSON array of the most talked-about songs from Twitter. Each object in the array looked like this:

{
    "title": "PayPhone",
    "position": 1,
    "video_id": "5FlQSQuv_mg",
    "song_id": 627,
    "artist": "Maroon 5",
    "duration": 232,
    "images": […]
}

We wrapped this up in a Y.Model subclass called Y.SongModel. Here’s the class definition:

Y.SongModel = Y.Base.create('songModel', Y.Model, [], {

    initializer: function (config) {
        ...
    }
}, {
    ATTRS: {
        title: {},
        artist: {},
        images: {
            value: []
        },
        nowPlaying: {
           ...
        }
        ...
    }
});

This allowed us to listen for events whenever one of the ATTRS in the model changed and take appropriate action. For example, if the current song being played was changed:

//When the model's isPlaying attribute changes, call the handleIsPlayingChange function.
this.model.after('isPlayingChange', this.handleIsPlayingChange, this);

The View

Each model was represented visually by a View, which is essentially just HTML. For TopForty, we had a SongView that looked something like this:

<div class="song yui3-u" id="songModel_2">
            <img class="song-img" src="...">
            <div class="song-desc">
                <div class="song-number">2</div>
                <div class="song-movement">
                    <img class="movement-icon" src="...">
                </div>
                <div class="details">
                    <h4 class="song-name">Turn on the lights</h4>
                    <p class="artist-name">Future</p>
                </div>
            </div>
</div>

We wrapped this up in a Y.View subclass called Y.SongView. Each View requires a render() method that is called when displaying the view on the page, and a initializer() method where events are subscribed. If you want, you can establish a relationship between your view and a Model or Model List instance by attaching event handlers to them in a custom initializer() method like we see below:

Y.SongView = Y.Base.create('songView', Y.View, [], {
    initializer: function (config) {
            var model = this.get("model");
            model.after('change', this.render, this);
            model.after('destroy', this.destroy, this);
    },
    render: function() {
        ...
    },

    destroy: function() {
        ...
    },

    showSongOverlay: function() {
        ...
    }
},{
    ATTRS: {
        container: Y.one("#songContainer")
    }
});

By doing this, we were able to have songview specific methods such as displayNowPlayingIndicator() and showSongOverlay() on the Y.SongView instance rather than as separate functions.

The Router

The Router, formally known as the Controller, is what makes everything connect and work. Remember that in classical MVC, all user actions traditionally go through the controller. In web apps, the router uses HTML5 history to change URLs and controls the state of the application.

For example, in TopForty clicking on a song changes the URL to the song’s ID. The URL change is picked up by the router, which loads the YouTube video for the song in question:

Y.AppRouter = Y.Base.create('appRouter', Y.Router, [], {
  // Default route handlers inherited by all CustomRouter instances.
  index: function (req) {
    // ... handle the / route, load up the UI, etc.
  },

  loadSongFromUrl: function (req) {
    // ... handle the /song/:songId' route ...
    //Get the youtube video from the model with an id of :songId and play it.
  }
}, {
  ATTRS: {
    // The specific routes that we are interested in listening to:
    routes: {
      value: [
        {path: '/',    callback: 'index'},
        {path: '/song/:songId'', callback: 'loadSongFromUrl'}
      ]
    },
  }
});

What I learned: Leveraging the MVC design pattern can help you create anything from simple non-interactive views to rich applications.

I hope I have been able to give you a taste of what is possible with the YUI App Framework. For a more thorough walkthrough, I recommend the following links. If you aren’t a fan of the App Framework, I recommend you look into the equivalent jQuery alternatives. Backbone.js in particular has a large following with good documentation.

• YUI App Framework User Guide
• Github Repo of a YUI App Framework Project
• Slides from App Framework YUIConf Talk

---

7. Test Driven Development and YUI Test

For developers, writing code is often the easy and fun part. The hard part is figuring out how old, buggy code works and trying to fix past errors. To minimize this, a lot of organizations including Yahoo emphasize the importance of Test Driven Development (TDD). With TDD, you write the tests first, then add the functionality until all your tests pass. Want to add a new feature? Write a new test, then code the feature.

I was new to TDD when I joined the YUI team. Unfortunately, JS does not have the best testing suite. User interactions in particular are hard to test. Furthermore, we have to test in all the major browsers.

One of the primary ways we conduct unit-testing is through YUI Test.

What I learned: Following test-driven development principles makes you more productive as a programmer.

YUI Test is a complete testing framework for JavaScript and Web applications. You can use the simple JavaScript syntax to write unit tests that can be run in web browsers or on the command line, as well as functional tests to be run in web browsers.

Here’s how you set it up:

// Create a new YUI instance and populate it with the required modules.
YUI().use('test', function (Y) {
    // Test is available and ready for use. Add implementation
    // code here.

});

Now, we can start writing some unit tests!

var testCase = new Y.Test.Case({

    name: "TestCase Name",

    //---------------------------------------------
    // Setup and tear down
    //---------------------------------------------

    setUp : function () {
        this.data = { name : "Tilo", age : 23 };
    },

    tearDown : function () {
        delete this.data;
    },

    //---------------------------------------------
    // Tests
    //---------------------------------------------

    testName: function () {
        Y.Assert.areEqual("Tilo", this.data.name, "Name should be 'Tilo'");
    },

    testAge: function () {
        Y.Assert.areEqual(23, this.data.age, "Age should be 23");
    }
});

YUI Test supports equality assertions (areEqual()) which uses ==, sameness assertion (areSame()) which uses ===, special value assertions such as isFalse(), isNotUndefined(), mock objects and more.

After writing our tests, we can run it as shown below. The results of the test can be outputted as XML, JSON, jUnitXML, or TAP.

Y.Test.Runner.add(testCase);
Y.Test.Runner.run();

Don’t forget to test, regardless of what you use.

If you don’t use YUI Test, that’s fine. However, I want to stress the importance of testing your code. I’m guilty even today of writing code without writing tests and it’s probably okay if it’s your own small personal project. All of us cut corners sometime. However, if you’re programming for a client or an organization, following TDD principles will save you (and your clients) from a headache.

---

8. Minifying and Linting Your JavaScript

Serving up JavaScript files without any minification or lint step can be risky. Minification can often compress the file-size by over 30%, making your page load faster for the end-user. Linting is a good way to ensure your JavaScript follows good coding practices so that errors are minimized.

During my time at Yahoo, we used YUI Compressor and YUI Builder to compress and build our code. The build step includes concatenation and linting through JSLint. I’m sure most of you have used JSLint at some stage, and I do believe it helps improve your coding style.

What I learned: Ask yourself if a certain practice reduce your possibility of errors and if so, follow it.

Now, I’m not going to talk in depth about YUI Compressor and Builder because those may not be the tools of your choice. Usually for my own projects, I use the JSLint NPM Module to check my code.

What I want to stress on is the need to perform these steps prior to pushing code out to production. As JavaScript does not have a compilation step, many developers are accustomed to pushing their JavaScript out to production, comments and all included. Again, this is okay for small projects, but perhaps you should consider minifying and linting your code to ensure users get the best experience.

Additional Reading

• Grunt, The Build Tool for JavaScript
• Phing Build Script
• JSLint NPM Module
• YUI Builder
• YUI Compressor

---

9. Coding with the User in Mind

The YUI Team has a great following of friendly, active, and knowledgable developers just like most large open-source projects. As developers working on open-source software, I learned that I can’t sit under a rock and code all day, even if I want to. Developing is as much about writing code as it is about making sure the code you write is actually helping someone solve a problem.

This took me a while to learn, but it’s an important lesson. When writing software, the goal isn’t to use the coolest technology or the latest stack or the hottest language. It’s about the user. When writing OSS, the users are often other developers who build on top of your product. Small things such as weekly updates, tweets, and IRC communication can actually help you more than hours of coding.

What I learned: It’s not about the technology or the stack or the language, it’s about the user.

In my first month of interning at YUI, I wrote about 500 lines of code which I had to scrap because most of it was repetitive and did not address the end goal. I was guilty of coding too early without figuring out the requirements of the project. A good rule is to spend a third of your time gathering requirements, a third of your time writing tests and the final third implementing your software.

---

10. “When all you have is a hammer, everything looks like a nail.”

I want to conclude by sharing the most important thing that I think I learned in my internship. I consider it to be more important than any technical knowledge that I gained. By working on a library that is not the most popular, I realized the importance of diversifying my skills and being flexible as a developer. I’ve seen how much work it takes to maintain an open-source project and have gained a lot of respect for everyone who release their well-written code for free.

What I learned: Choose a library because it’s the right one for the job, not because it’s your favourite. Understand that different pieces of software serve different purposes, and sometimes understanding the difference is tough.

Euro 2012 is around the corner and what could be better to kick off this amazing football tournament with our readers than offering a set of football social media icons!

Today we are enthusiastic to release a new set of social icons on Onextrapixel. This release is a set of 12 social media icons designed exclusively for Onextrapixel by the designers at Design Article Writers. These social icons were created exclusively for our readers especially those who are football fanatics as well.

This Football Social Media Icon set comes with 12 popular icons (Google, Facebook, RSS, Yahoo, Twitter, Pinterest, Youtube, Stumbleupon, Delicious, Linkedin, Blogger, Digg) in 5 different sizes (32x32, 64x64, 128x128, 256x256, 360x360).

About Design Article Writers

Design Article Writers is a small group of designers working together to maintain a blog network in the design niche and contributing articles, PSD tutorials, creative freebies, templates to many top class design blogs online. They also own a network of design blogs like 2ExpertsDesign.com, Aext.net, etc…

Download This Free Icon Set Now!

Feel free to use these icons for personal or commercial projects. However, they may not be sold, rented, sub-licensed, transferred, edited, altered, or otherwise. The icons may not be offered for free download from websites other than Onextrapixel.com.

If you'd like to share this set of icons, help us spread the word by linking back to this original release. Thank you.

• File Type: PNG
• File Size: 2.8 mbs
• File Link: Download Files (.zip)

We offer our sincere thanks to the designers at Design Article Writers for creating this football social icon set and we really appreciate their efforts.

Our freebies are especially for our readers at Onextrapixel and the design community. If you'd like to release icons or any other freebies on Onextrapixel, feel free to contact us and we will be more than happy to assist you with that.

• Freebies: Social Icons Pack for Designers and Developers
• Freebies: Black & White Minimal Social Icons Pack
• Ultimate Collection of Fresh Social Media Icon Sets
• Freebies: Candy Social Media Icons

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!

Ramit Sethi is the New York Times best-selling author of I Will Teach You To Be Rich and the author of the popular personal finance blog www.iwillteachyoutoberich.com, which hosts over 250,000 readers per month. Ramit’s advice has been featured in the New York Times, the Wall Street Journal, FORTUNE, NPR, ABC News and CNBC.  Ramit graduated from Stanford and co-founded PBwiki, a venture-backed startup.

Please introduce yourself to our readers.

My name is Ramit Sethi. I run a website called I Will Teach You To Be Rich. I wrote “The New York Times” best selling book “I Will Teach You To Be Rich”, which focuses on how to manage and automate your money using psychology and systems.. And for the last few years, I’ve been teaching people how to earn money on the side using the skills they already have (e.g. web designers, photographers, project managers..).

What is your own experience with freelancing?

My experience has been pretty varied:

I’ve freelanced as a writer.

I’ve freelanced as a marketing consultant.

I’ve done some freelance work for venture capital firms.

I’ve even freelanced as a private consultant.

Over the last few years, I’ve raised my rates from around 20$/hour to 3000$/hour.

Why did you decide to teach people about freelancing?

I didn’t plan to teach material on freelancing, but..

I went on a book tour on 2009. I visited a lot of different cities across the United States. In almost every single place that I went to I met my readers and asked them “What do you wish I wrote more about?”. Almost all of them said “I want to earn more money. Yeah, I want to invest and do all that stuff, but I also want to learn how to earn more money”.

I went back to my team and we started researching all the different ways to earn money (..negotiating a raise in your current job, getting a better job, freelancing, creating products and selling them online..) and from this research, as well as from my own experience, I think that freelancing is the most effective way to earn more money (especially on the side).

It’s also interesting, because a lot of people have this delusion of passive income. They believe “Oh, I don’t want to trade my time for money! I just want to make passive income!”, but if you ask these people “Alright, so how is it going, how much have you made?”, almost none of them had made any significant amount of money. However, with freelancing you can actually take your existing skills and earn a fairly significant amount of money, like many of my students who are earning thousands of dollars a month on the side while having full time jobs.

How exactly do you help your students who are web designers?

A lot of web designers feel frustrated. They’re getting these terrible clients who don’t want to pay and are saying things like “Why would I pay you, I can just go online to some theme site and get it for 20$”. They’re getting these terrible projects that require a ton of work for not that much money. Moreover, they spend most of their time chasing new clients. As you can see, it’s very frustrating for them.

What I help my students to do is to first narrow down who they’re targeting. Many web designers have a funny idea that they should target as many people as possible, cast the widest net, because then they can potentially get more clients, but, counter-intuitively, it’s much more effective to really narrow down who you’re going after.

I’ll give you an example. Let’s pretend that you’re a new mother. Let’s pretend that you just had a beautiful baby son and you want some photos taken of you and your new son. Who are you going to hire? Are you going to hire John Jones, who takes photos of babies, animals, barnyards and cars? Or are you going to hire Richard Johnson, who specializes in baby boys between the ages of one week and three months. Who are you going to hire? It’s obvious that you’re going to hire the person who specializes in that and you’ll be willing to pay more, because the second photographer understands all the particular unique challenges and ways to make a baby boy look beautiful.

The same thing is true in web design: if your client just wants a random web designer, that’s probably not a good client for you. It’s hard for people to get that it’s okay to say no to the wrong clients, but once you’ll really internalize this, you’ll be able to focus on better clients, work with fewer clients and charge them more.. And they will be happy to pay!

Agota’s note: Here’s a case study about one of Ramit’s students, a   20-something web designer Mike, who earned extra 6000$ in eight weeks by using some of the Ramit’s techniques.

Okay, so before we get into the freelancing stuff.. A lot of people, especially creative types, hold this belief that “money is evil”, which prevents them from earning more and living the life they deserve. What would you say to people who want to overcome this limiting belief?

My suggestion is:

Look, think about something that you have paid for that you love. Maybe it’s that lipstick you buy. Maybe it’s that restaurant you go out to. Maybe it’s somebody who helps you clean your apartment, or does your laundry, or makes the product you love, whatever. Think about how happy you feel when you pay. You know, there’s always one or two things in our lives that we’ll pay anything for, right? Well.. Why can’t that be you? Your clients will be delighted to pay you if you can help them solve their problems, make more money, save time or get more clients.

When we have these invisible beliefs we often believe that we’re cheating someone and that there’s only a limited amount of money in this world, so we’re taking it away from someone. However, if you’re actually helping your clients, if you’re putting them at the center of your business, you’re actually helping everyone create more. Not scarcity, abundance! You’re actually helping them get more clients, create more revenue, save more time. They’re happy to pass a small percentage of that to you. Get three really high value clients and watch and observe as they’re more than happy to pay you, because you are solving their problems.

Also, in order to conquer this limiting belief, study people who are successful and don’t surround yourself with people who think that money is evil.

..by the way, I cover this in a lot more details in my Chase Jarvis video, you can watch it here.

Okay, great, so back to freelancing.. Most people who have full time jobs and family responsibilities are crazy busy already and they don’t want a second job on top of all that. How can these people find time to freelance? Honestly, is it even realistic for them?

This is a great question.

In my research of over a hundred thousand people, when it comes to earning money, there are two biggest excuses that people have:

Excuse No.1: “I don’t have an idea. I don’t know what I should do to earn more money.”

Excuse No.2: “I don’t have time.”

Honestly, I don’t accept that excuse. Most people can easily scrape together 5-10 hours, even if they have families, even if they have full-time jobs. I’ll give you three ways how you can do it, three ways how you can freelance even if you have a family, even if you have a full time job:

1. Implementing The Retainer’s strategy.

One of my students, Dean Soto, actually has a very demanding full-time job in a technology industry, as well as a family with children. He didn’t want to take away from his family time, but he also knew that he wanted to earn a little bit more money to provide a better lifestyle for them. He took that Earn1k module on pricing, where we talk about how to charge in different ways, and he implemented The Retainer’s strategy. Now, what this does is he basically works with the best clients, who don’t need him at any particular time, they just want him to get things done. This way, Dean gets to come home from work, play with his family and still earn money on the side by spending about an hour every couple of nights working for his clients. He can do that early in the morning, he can do that late at night. His clients don’t care:they only want him to get things done. That allowed him to earn thousands and thousands of dollars. That’s one way, implementing The Retainer’s strategy.

2. Optimize your time.

The second way is to optimize your time. We teach this in Earn1k. Most of us waste hours and hours per day. HOURS! Did you know that the average American watches several hours of TV everyday? Needless to say, there are a lot of ways to optimize our time.

There’s a whole bunch of time management strategies that we outline, but in general, I’ll just say, could you find a way to save 30 minutes a day? Are there certain things you could do, for example, could you batch certain things, so you would do them all at once instead of spread out? Could you cut back on one thing that you’re doing that is not very productive? Could you wake up 30 minutes earlier? Maybe you could pay someone in order to outsource something that you do? Let’s assume you’re making 50$/hour (I’m just making up a number here). Paying someone 10$/hour to do the same thing, or to do, let’s say, your laundry, can be a very effective time arbitrage. So that’s No.2, optimizing your time.

3. Work for higher end clients.

This is what I push my students to do. Many of web designers reading this (I know, because I’ve spoken to so many) know that it can be really frustrating to have to spend hours and hours every day on a project when you’re only getting paid a tiny amount for the work that you’re doing and you’re not getting paid what you deserve. Well, part of the reason for that is that you’re working with the wrong clients. My students who are successful and go through the program find that they’re spending the same amount of time (or even less), yet making far more money. Why? Because they’re working with clients who are happy to pay them their asking rates. So, it all comes back to how you’re helping the right clients find success.

..so you’re saying that it’s possible to earn a decent amount of money with only 5-10 hours a week (decent being more than 100$/week) ?

Absolutely. Oh, much more, depending where you live, much more than 100$/week. My students are doing exactly that. You can see it for yourself here, it’s a list of some of my students who have earned a significant amount of money on the side.

Let’s get into “how-to” part. What is the very starting point for someone who has a full time job as a web designer and wants to start earning money on the side (..and maybe someday switch to full time freelancing)? What’s the very first thing to do?

Start by understanding what skills do you have that someone would be willing to pay for and who these people might be.

This is a big foundational thing that many people miss. They start off by saying “Oh, I have this idea, I’m gonna start by getting business cards and setting up a website!”. This stuff happens much later. What matters first is being able to find those clients that might pay and really talking to them, listening to them, finding out what their big challenges are. This is where customer research comes in.

This is why my students are able to charge so much: a lot of them go from charging 10$/hour or 15$/hour to charging over 100$/hour. The difference is that they start doing a really deep research. They ask questions like (let’s say they’re looking for web design clients): “Why do you want a web designer?”, “Have you already hired one in the past?”, “Did it work out?”, “Did it not work out?”.. They’ll also do a research on their market: “Who are the other designers who are doing what I want to do?”, “How much do they charge?”, etc. They’re not just walking and talking about their idea.

The client doesn’t care about you and your skills: the client cares about how can you help them hit their business goals. You need to focus on what THEY want and what you can do for THEM. You can use my Briefcase technique for that. Once you can do that, something amazing happens: price becomes a mere triviality. A lot of people are concerned: “Oh my God! How can I charge 25$/hour when everyone else is charging 10$/hour?!”. Well, when you can figure out what the clients want better than they know it themselves, you can charge a tremendous amount and the clients is actually happy to pay. Those are the first steps that you take.

How can web designers niche it down and define their ideal customers? How niche they should target?

That’s a great question. In general, they should niche it down more than they are. When I ask you “Who’s your ideal client?”, you can’t just say “Someone who needs a web page or a small business owners”. That doesn’t mean anything. That’s everyone. How are you supposed to find those small business owners?

However.. What if you said: “I want to find small business owners who run information product marketing companies, doing revenues between 100k – 1mil per year.”? Well, guess what? It’s much easier to find those people and, by the way, those people are willing to pay, because you have skills that can help them earn more revenue.

We have this technique called Pay Certainty technique when it comes to niching it down. It’s a very simple principle which you can use right now. You know how a lot of web designers don’t know who they’re serving, so they’re just serving everyone? Or you have web designers who will say: “Oh, I want to go do web design for non-profits”..and they almost never make any money? That’s because they haven’t used something like this.

Here’s what web designers can use right away:

I’ll come to you and I’ll say: “Who’s your customer?”

You say: “I want to serve non-profits who want a new web design”.

Okay, great, we have two questions to ask:

1. Do they have the ability to pay?

2. Do they have the willingness to pay?

Let’s try to test this. Do the non profit clients have the ability to pay? No! They really don’t’ have that much money, so probably not. Do they have the willingness to pay? No! They don’t want to pay someone for web design, really. They want to trade or barter or just get it for free. So they fail the pay certainty technique.

..but what if you say: “Hey, I want to find a company who needs an improved design, they’re a small business in an automobile industry and they need an improved design to sell more cars. Oh, and they do revenue between 100k – 500k a year.”. Do they have an ability to pay? Yes, they make 500k a year. Do they have the willingness to pay? Yes, they want to make more money! They’re willing to pay a little bit. THAT is how you start niching it down..and that’s how you spend less time getting more clients.

What would you say to people who are just starting out as freelancers and are afraid to lose opportunities/lose customers by niching it down and think that they should take everything that comes their way?

It’s a classic fear and it’s one of the quickest reasons why most web designers don’t really earn what they should.

My simple answer is: try. Try it for one or two months and see if it works. Just try it, if it works, great! However, if it doesn’t work, if you find it challenging to find clients who are willing to pay what you’re asking and you find it difficult to raise your rates, then perhaps it would make sense to try a different way.

I can tell you that this isn’t just something that I’ve used, this is a classic marketing principle and thousands of my students have also used it to earn significant amounts of money. It seem counter-intuitive, because you’re saying “No” to people, but..

Think about it in a different way . Think about as if you are looking for a relationship. Do you just go out and say: “I want to marry EVERYBODY!” or are you a little bit more selective? You don’t go after anyone who has two eyes and a nose. You say, “You known, I’ve certain values, certain things that I look for in a man or a woman”. You try to find out whether you are a good fit for each other. I think so many web designers try to focus on everyone instead of focusing on the right people because they lack self-esteem, as well as marketing skills.

..by the way, I do this with my own courses. One thing I do is I don’t try to appeal to anyone: I actually don’t allow people who have a credit card debt to join my flagship courses. Almost nobody does that. Not allowing people with a credit card debt join my courses costs me hundreds of thousands dollars per years.

I do this because of these two reasons:

1. I think it’s the right thing to do. I don’t think that people with my credit card debt should be joining my very expensive courses. I think they should use my book or my free material to pay off their debt first.

2. It shows people that I don’t want everyone’s business, I just want the right business. When you do that, you actually stand for far more than just money..And, ironically, you can actually charge much higher rates by focusing on the right people.

You always say “Get your first 3 paying clients!”. How can web designers do that? How do you actually go and get those clients?

There are three most important things:

1. Eliminate time wasters.

So many web designers just waste their time. They do things like get on Twitter, create a Facebook page and make business cards. How does any of those things help you get clients? They don’t. In most cases, none of these things help you get clients.

You think client is going to randomly find your Twitter page and then decide to pay you thousands of dollars? That’s not how it works. I know, I have over 30 000 Twitter followers. So, eliminate time wasters and focus only on the things that are going to get you your first three paying clients. When you start setting something up, ask yourself: “Is this going to help me get 3 paying clients?”. No? Skip it. Do it later.

..for example, a lot of people want to build a massive website that’s going to take them three months. Skip it! You can set up a simple page or not even have a website. Well, web designers probably need websites and they need portfolios, but for other folks, they don’t need that. Do you really need business cards or can you just point them to your website? You get the idea.

2. Do your homework.

Many people are guilty of what I call the “I, I, I” syndrome. They walk up to their clients and say “I can do this, I can do that..”. The client doesn’t care about you. They care about themselves, so what can you do to help them? Have you studied their business? Have you already come up with a list of suggestions of how you can help them?

One of the most powerful ways to get a client is this: you walk into a meeting, ask about their challenges and then pull out a sheet of proposals that you’ve made from studying their website. This is called The Briefcase technique.. And it has closed people massive contracts.

3. Reach out to them directly.

Don’t wait for them to come to you, go to them!

Once you’ve identified your clients ( as in “Information product marketers who are doing 100k-1mil in revenue every year”,etc.), then you know where to find them, what they read, what sites they are on.. You can reach out to them directly and say:

“Hey, I’m a web designer, I wanted to see if there’s any possibility of me helping you out with few things, I’m more than willing to give you some suggestions on how to improve your copy..by the way, I have done this for another clients, who recorded a 55% increase in revenue.”.

Whoa, that’s pretty compelling! The clients will definitely take your call and now you can talk to them, listen to them and perhaps make some suggestions.

That’s how you can go about getting your first three clients.

..by the way, there was this concept of features vs. benefits which has helped me tremendously in getting new clients. Maybe you can explain it to our readers?

Most people focus on features.

They say: “Here’s what you get with my web design service: you get a hosting account, you get ten pages design, you get this, you get that”.

Well.. The client doesn’t care!

What do the clients want fundamentally? They want to make more money, they want to get more clients, they want to spend less time, they just want it handled.. You can find this out by talking to them and doing research.

..by the way, this is a survey that I actually used to drive well over a 100k in revenue, your readers can check it out here.

This is where you start doing your homework. You figure out what it is that they want and use it to present your services as a benefit. So, instead of saying “You get 10 web pages”, you say: “Look, my goal is to help you increase the number of subscribers by 25%” or, better yet, “My goal is to help you increase the revenue by 15%”. That is a benefit. Nobody cares about how many pages it is, or how much time you’re going to spend on it or what software you’ll use. They don’t care about all that. They want more money, more clients, in less time. Focus on what THEY want, not what you want.

Many freelancers find it very challenging to decide what to charge for their services. When to work for free, when to charge and what to charge?

Let’s start by talking about working for free.

You know, I actually believe that working for free can be great if you do it for the right reasons. I’ve worked for free for many people and it has helped to accelerate my career a lot, but..

We’re all too well aware how often creative people get taken advantage of. You know, they’ll go and work for someone for free and they’ll get nothing out of it. Moreover, the free guy wants more and more and more and he gets mad when you don’t deliver. It doesn’t make any sense. So, here’s what I would suggest..

Here are a couple of good reasons to work for free:

1. When you want to build up a portfolio.

Here’s what you can say:

“You know, I normally charge 75$/hour, but I really like your project and right now I’m looking to build a portfolio, so I’m happy to work on this for free for two weeks. All I ask is if in at the end of those two weeks I do an extraordinary job, that we discuss going back to my normal rate”.

That’s a good way of positioning yourself as a trusted high end provider, but also doing some free work to let them see how good you are.

2. When you want to work for someone who’s a connector.

A connector is someone who you might do some free work while you tell them upfront:

“Look, I’m willing to work for free, but my goal is if I do an extraordinary job for you, I’d like you to recommend me to three of your friends”.

People have actually done that for me and I’ve sent them so much business that they didn’t know what to do with it. The same thing for some other of my friends, somebody worked for them for free, these connectors connected them to multiple clients. However, you always have to be upfront.

..so you’re saying that it’s better NOT to work for free indefinitely, without that upfront agreement?

Correct.

Okay, so the next thing is how much you should charge.

You can find this out by finding out what your competition is charging. Again, if you think that your competition is every web designer in the world, you have to go much narrower than that. It pays to know who your competition is and what they’re charging. I explain how to do this in my Earn1k course.

Also, focus on the value. For example, if you come to me and say: I’m going to increase your sales by 15%”, you can charge me anything!.. and I’ll pay it, as long as you actually deliver. So, the better you are, the more examples of successes you have in the past, the more you can charge.

Let me just put it this way: I told you what my hourly rate is, right? I’m not charging that to everybody, in fact, I turn away a lot of people who can actually afford that, because I only work with people who I think I can add a lot of value to.

Think of your favorite restaurant. The restaurant where you go and there’s always a line at the door. They probably could squeeze in few more tables, but they don’t, because they don’t care about serving everyone, they want to only serve the clientele they want.

When you start positioning yourself as that, not just a commodity designer, but someone who these clients are lucky to have because you’re so skilled at what you do, then you can start at the top of that range to let them see how good you are.

You’ve mentioned that you’ve increased your own rates significantly over the last few years. How can freelancers increase their rates over time? I bet a lot of people are scared to raise their rates.

It’s interesting how many of the questions are about fear, isn’t it?

There’s fear in charging a reasonable rate, there’s fear in raising our rates, there’s fear in focusing on niche customers and turning away other clients.. However, fear is not a good way to run your freelancing career.

The very best freelancers know precisely who they are targeting and they’re very comfortable with saying “You know what, you’ re probably not the right fit for me”. Isn’t it interesting that so many web designers run their careers instead of actually studying people who have done it really well?

I mean.. Let’s just challenge you: when was the last time that your freelancing friends systematically studied the best freelancers in their field:talked to them, took them out for coffee, studied their websites to learn how they charge and position.. When was the last time they did that?

..I think they haven’t done that all..

Yes. They’re governed by fear instead. It’s not a good way to go through life and certainly not a good way to go through your career.

Here’s my suggestion how to raise your rates over time:

I had a young woman who worked for me. She started by doing some pretty basic stuff, but over time, she was so good at what she did that she started asking me: “Hey, what else are you doing, what else is going on in your business, how else can I help?” and she started doing several other things. Over time she added so much value to my business that of course I ended up paying her more, I ended up paying her tens of thousands of dollars more. Why? Because she added value to me, the client. She made my life easier and she showed the ROI.

Here’s something I want to say to freelancers and web designers in particular: you’re not just designers, you’re solving their problems. So, for example, if you find that they need help with their copy writing, either you can do it or you can refer them to someone who can. You’re solving their problems. Maybe they need help setting up and e-mail management software. You say: “Oh great, I know how to use Aweber” (or whatever you can), set that up and of course charge them. They’re happy to pay. Remember, you’re not tricking them. They’re happy to pay. Somebody who talks about it very well is a guy named Jay Abraham, he’s one of my mentors, he says: “Don’t just talk about YOUR services, put THE CLIENT at the center”. So, if they need something, figure out if you can offer it or if you know someone who can. After you do this time and time again, your client will think about you as their problem solver .. And that is an enviable position to be in.

Is there a way to systematically expand your client base once you got your first 3 paying clients in order to make sure that there’s always freelance work available?

There’s a way. It takes a lot of work, but there is a way.

The best freelancers I know always have a waiting list of clients. They actively turn people down, because they’re not the right fit, or they’re not willing to pay, or they just don’t have time. Now, I don’t want this to sound intimidating, because if you’re first starting out, it can seem insane to have a waiting list of clients. However, all of this are simple steps taken day after day and applied systematically. So, how do you do that?

1. You get those 3 paying clients.

2. You decide whether you want to charge your existing clients more or you want to get more clients.

3. You ask your clients for referrals. “Hey, I just did a terrific job, helped you increase sales by 15%, or helped you to hit that deadline on time, I’d like you to introduce me to 3 other clients, can you help me with that? I’d really appreciate it.”

That’s how you get more clients.

There are several other sophisticated ways, like partnerships, referrals, constant lead generation, etc. Anyway, there are plenty of ways to get more clients once you got 3, 5, 7, clients. It’s actually much easier to go from 10 to 20 clients than to 1 to 3 clients. We cover all this in Earn1k.

Talking about clients.. Many freelancers, especially those who are just starting out, waste a lot of time and energy working for really bad clients. Is there a way to know in advance that a client is going to be a time waster? What are the danger signs?

Well, first of all, a lot of creatives get taken advantage of by people and yes, we can blame them, but really, we need to blame ourselves. When was the last time someone in a creative world, like web designers or photographers, actually took time to learn how the business works? Instead ,a lot of creatives insist “Oh, I just need to get better at my craft and then the money will come”.. Well, that’s not how it works! I made these mistakes too, but if you simply expect the right clients to find you.. That’s not how the world works. That’s why I teach what I teach: I’m so frustrated of creative people getting taken advantage of.

Here are three ways how you can recognize and avoid bad clients:

1. Observe whether the client is clear about the project.

Bad clients often spend enormous amounts of time talking about the project instead of actually focusing on what needs to be done.

What I suggest is that you have a very clear questionnaire and a set of guidelines for your potential clients. This actually comes from studying the most successful freelancers. The best people have limited time, so they ask potential clients to fill out a questionnaire which shows that a client is serious. Don’t get on the phone for no good reason, just to chat about the project!

2. Mention the ballpark of certain work you’ve done in the past.

It’s okay to mention the work you’ve done in the past and what you’ve charged for it, because if you are charging 15 000$ for a project and the client has 500$ budget in mind, you need to find that out relatively soon. It doesn’t mean that you have to put it on your website or that you need to ask about it on your first call, but you need to be honest with them about the type of work you do.

3. Be very clear about what you’re going after.

It always comes back to your clients. Are you going after anyone? Or are you using things like Pay Certainty technique to eliminate 90% of time wasters and find people who have the ability and willingness to pay? When you can do that, you’re working with a much smaller group of people who are way more qualified.

I’ll give you a simple example:

I have 300 000 readers a month. However, when I did a  launch a couple of years ago, I made something like 80% of my revenue from my small list of 2000 people.

Let me say this again: I have 300 000 readers a month, but when I did this launch, I made 80% of my revenue from my small list of 2000 people.

In other words, going after the right people can be dramatically more effective than going after everyone.

I bet quite a few people would love to eventually become full-time freelancers. How can someone go from having a full time job and freelancing on the side to freelancing full time?

Good question.

I love the idea of freelancing on the side because it’s not as risky as jumping out and starting something on your own. I think that if you have a full-time job, it’s a great idea to spend little more time getting some clients on the side, because you can actually de-risk your own situation. Think about it: if you have a full time job and you’re fired or laid off, that’s it, it’s 100% of your income. However, a lot of my students have 4,5,6 sources of income, so even if they’re laid off, they still have have revenue coming through the door.. Also, they can still manage their time very well, because they’re working with their best clients and putting in as much time as they want.

Here are the three things I’d suggest in regards to making the transition from having a full time job and freelancing on the side to becoming a full time freelancer:

1. Get more clients.

I want to de-risk my situation before I make the jump from a full time job to a full time freelancing. That means I want multiple clients: not one, not two, but three or more clients paying regularly.

2.Have money in the bank.

I want to have money in the bank. I want at least a few months worth of money for those cold winter days, because sometimes you just don’t have any clients, so what are you going to do? You need some savings.

3. Make sure there’s a consistent upwards trajectory.

Well, if I only had three clients for the last six months and I can’t get a fourth one, that’s not a good situation. I want to get more and more clients paying more and more to me and me delivering more and more value, because that means that I really understand how to get more clients and deliver more value.

Last, but not least, maybe you could tell our readers a little bit more about your course on freelancing? Who is it for and who it is not for? What they should expect? Where they can find more information about it?

“When I went on tour to promote by book, the question readers asked again and again, in every city, was ‘How can I earn more money?’

I committed to teaching my readers the system I used to make money on the side and raise my rates to $3,000 an hour.

Like successful personal finance, the way to earn more money on the side is to follow a step-by-step system that other freelancers and businesses have already proved works.

I developed my course to help people to get their first three clients and earn $1,000 a month on the side because I knew from my psychology research those first steps were the hardest.

Since then, I’ve tested the course on thousands of students who followed the steps to earn more money, pay off debt, and even quit their day jobs and go into work for themselves.

If you want to learn more, check out http://earn1k.com/ where I give away my Idea Generator Tool and show people how to take the first steps toward making extra money on the side. The tool is free if you subscribe to my newsletter.”

Thank you very much for sharing your insights with us, Ramit!

Advertise here with BSA

An iOS mobile app often has a website associated with it. This website is often for promotional and informational purposes (i.e. to share information about the app, to offer insights on how users would benefit from the app, for hosting videos and screenshots of the app, etc.).

In this showcase, you’ll find beautiful websites of various iPhone, iPad and iPod Touch apps for web design inspiration.

If you’d like to see more iPhone app websites, please do check out this previously published showcase: 35 Beautiful iPhone App Website Designs.

Duet

Paper

Instagallery

Postmates

blip.me

76 Synthesizer

OATBook iPhone App

Fontain

Opuss

Day One

batch

Flight Card

dribbblr

Kinotopic

Nizo for iPhone

Jambalaya

Snapette App

Keypoint

Facecard iPhone App

Domino Box App

Bord

The Typography Manual

Momento

forkly

Lite Weight iPhone App

Notica

Sipp

Path

Luminance

iStudiez Pro

Related Content

• Building Mobile Web Apps the Right Way: Tips and Techniques
• Mobile UI Design Patterns: 10+ Sites for Inspiration
• How to Use Your iPad for Real Design Work
• Related categories: Mobile and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Probably the most remarkable characteristic of our Web design community is that we care about our craft. We care about best practices, about our work, about learning, sharing and improving our skills. This very spirit is the driving force behind our daily work at Smashing Magazine, and this spirit is what has prompted us to organize the very first Smashing Conference: a friendly, valuable and inspiring community event that will help us all become better at what we do.

Whether you are a designer, developer, content strategist or business owner, at the Smashing Conference you’ll explore insights hands on and gain practical tips and new perspectives on our craft. We are very happy to provide an opportunity for you to share and gain practical knowledge in an intimate, informal atmosphere — right in our beautiful home town of Freiburg, Germany, at the foot of the legendary Black Forest.

The legendary Historical Merchants Hall, a late-Gothic building built between 1520 and 1530. Its façade is decorated with statues and the coat of arms of four Habsburg emperors. An exquisite location for the very first Smashing Conference. Image credit.

When and Where?

We’re delighted to invite you to come together for this inspiring, forward-thinking event on 17 to 19 September 2012. The conference will host a two-day single-track conference on September 17th and 18th, as well as three workshops on September 19th. By “we,” we mean Vitaly Friedman, editor-in-chief of Smashing Magazine, and Marc Thiele, who has been running community events such as beyond tellerrand for over 12 years.

The aim of the event is to deliver the same high-quality content that we deliver on Smashing Magazine, in the familiar atmosphere that beyond tellerrand events are known for. This will be a high-caliber yet friendly event that brings great value to everyone involved, and we’d be honored if you took a part in it.

The conference will take place in Freiburg, Germany at the legendary Historical Merchants Hall at the foot of the Black Forest.

The main hall of the venue. 350 tickets are available in all for our two-day single-track event. Image credit

Keeping the conference affordable for everyone is important to us. All tickets includes two full single-track conference days, on Monday and Tuesday. Please note that only 350 seats are available.

We are pleased to announce that the first 70 early-bird tickets are on sale for a price of €249. The regular price after that is €349. And all prices include the German VAT of 19% and booking fees! Get your ticket now before it’s too late. We’d be honored to meet you in September!

Speakers and Topics

If you’ve been following Smashing Magazine for a while, then you won’t be surprised by the focus of the Smashing Conference. We’re aiming to cover a wide variety of Web design topics, such as visual design, front- and back-end development, UX design, mobile, responsive design, the business aspects of running a website, as well as the intricate details of the designer and developer’s workflows. We’re encouraging our dear speakers to share details on how they work, what tools they use, and what their design and coding process looks like. We’re aiming for valuable, practical and inspiring talks.

We’ve handpicked all of the speakers to ensure the high quality of the event. So far, 10 out of 15 speakers are officially confirmed. Please note that the topics presented here are subject to change. More details on the conference, speakers, talks and workshops are available on the conference’s official website.

Speakers

Speaker	Talk	Details
Aarron Walter	The Real Me
Aarron Walter is the lead user experience designer for MailChimp, where he socializes with primates and ponders ways to make interfaces more human. Aarron is the author of Designing for Emotion, the purple stripe in the rainbow of knowledge from A Book Apart. He lives with his wife and son in Athens, Georgia, and is a wannabe barista. He tweets about design under the moniker @aarron.
Chris Heilmann	To be announced
Chris Heilmann has dedicated a lot of his time to making the Web better. Originally from a radio journalism background, he built his first website from scratch in around 1997, and he spent the following years working on a lot of large international websites, and a few years at Yahoo building products and training people; he is now at Mozilla. Chris has written and contributed to four books on Web development and has written many articles and hundreds of blog posts for Ajaxian, Smashing Magazine, Yahoo, Mozilla, ScriptJunkie and many more.
Jeremy Keith	The Spirit of the Web
Jeremy Keith makes websites. He is responsible for the death of the trees used to print the books DOM Scripting, Bulletproof Ajax and, most recently, HTML5 for Web Designers. He also shot a man in Reno just to watch him die. Originally from Ireland, Jeremy now lives in Brighton, England where he pretends to work with Clearleft. Peas grow there.
Jonathan Snook	Your CSS Is a Mess
Jonathan Snook writes about tips, tricks and bookmarks on his blog. He has also written for A List Apart, 24ways, and .net magazine, and he has coauthored two books, The Art and Science of CSS and Accelerated DOM Scripting. Most recently, Snook has written the eBook SMACSS, sharing his experience and best practices on CSS architecture. Snook also works on the design team at Shopify.
Josh Brewer	Responsive Is as Responsive Does
Josh spends his time thinking about, designing and building things that live at the intersection of form, function and aesthetic. He is principal designer at Twitter and is the co-creator of 52 Weeks of UX, Ffffallback and Shares. He is also an advisor and mentor at The Designer Fund.
Lea Verou	To be announced
Lea has a long-standing passion for open Web standards and has been often called a CSS guru. She loves researching new ways to take advantage of modern Web technologies, and she shares her findings on her blog. Lea also makes popular tools and libraries that help Web developers learn and use these standards. She speaks at a number of well-known international Web development conferences and writes for leading industry publications. Lea also co-organized and occasionally lectures in the Web development course at the Athens University of Economics and Business.
Paul Boag	Better Websites, Happier Clients and Improved Job Satisfaction
Paul Boag has been working on the Web since 1993. He is Web Strategist at Headscape Ltd, a Web design agency that he cofounded back in 2002. Paul also produces and hosts the longest-running and award-winning Web design podcast at boagworld. He is a regular speaker at conferences and author of Client-Centric Web Design.
Rachel Andrew	The Future of Content Management
Rachel Andrew is a front- and back-end Web developer, author and speaker. Her books include the bestselling CSS Anthology for SitePoint, and she is a regular contributor to a number of publications both online and off, including Smashing Magazine. She writes about business and technology on her own website.
Stephen Hay	To be announced
Stephen has been designing and developing for the Web since 1995. He currently helps clients with front-end design and development, multi-platform strategy and accessibility through his consultancy, Zero Interface. Aside from his client work, he can be found speaking at industry events about Web design-related topics such as CSS layout and responsive design workflow. Stephen is co-organizer of Mobilism, one of the world’s leading mobile Web development conferences. He is also co-creator of Grip Workshops, a series of two-day intensive workshops for Web project managers on the client side. Stephen has written for publications including A List Apart and .net Magazine. He also coauthored the Smashing Book 3 with a host of super-talented folks. When he makes the time for it, he publishes his thoughts on The Haystack.
Tim Ahrens	Web Fonts Backstage and On Stage
Tim Ahrens is a type designer based in Berlin, where he runs Just Another Foundry with Shoko Mugikura. As a former architect, he is interested in the interplay between technology and design. He develops design software such as the Font Remix Tools and Web applications such as the FontFonter. Since 2010, he has been working as a consultant for Typekit.

Gallery of the speakers at the Smashing Conference.

Workshops

Trainer	Workshop	Details
Aarron Walter	Interface Design Bootcamp
Whether you are designing a Web app or website, following best practices and standard design methodologies will help ensure that your interfaces are usable and engaging. In this workshop, we’ll explore the design process in detail, including user research, wireframing, prototyping and visual design. Through real-world examples, you’ll see how an idea can evolve into an interface.
Andy Clarke	Fashionably Flexible Responsive Web Design
Responsive design has made designing flexible websites fashionable again, but there is more to being fashionably flexible than technology or using CSS3 media queries. So, this unique workshop — hosted by Andy Clarke, designer, author and speaker — puts the design back into responsive design. Andy will teach you how to design from the “content out,” instead of from the “canvas in.” He’ll demonstrate how to separate design from layout; and if you work with designs made in Photoshop, he’ll show how to deconstruct a design into its components (color, texture and typography) before reassembling it for a fluid continuum of devices, from phones to desktops and everything in between.
Jonathan Snook	SMACSS: Scalable and Modular Architecture for CSS
The SMACSS workshop is a full day of instruction and exercises on writing HTML and CSS using a flexible and modular approach that will improve team efficiency and minimize problems with growing projects. It brings the eBook to life with practical examples and in-depth discussion.

Gallery of the workshop experts at the Smashing Conference.

Further Details About the Conference

As we finalize some major details of organization, we are working hard on a plethora of small details to make the event as valuable and memorable as possible. Please expect more speakers to be confirmed soon and more topics to be announced.

Also, we are looking for sponsors of the event, so if you are interested, please get in touch with us. More details on the location, hotels, speakers, talks, workshops and after party are presented on the official Smashing Conference website.

One of the workshop rooms, with medieval decoration and statues of medieval knights. 30 seats are available for each workshop. Image credit.

Facts

• In a nutshell: The Smashing Conference is a friendly, valuable and inspiring community event that will help designers and developers become better in their work, be it front- or back-end development, UX design, content strategy or running a business.
• Dates: 17 to 19 September 2012 (workshops on the 19th, and conference on the 17th and 18th).
• Venue for workshops and conference: “Zum Roten Bären”, Historical Merchants Hall, Freiburg.
• Early-bird price (only 70 tickets): €249 ($315) (including German VAT and fees).
• Regular price: €349 ($440) (including German VAT and fees).
• Each workshop costs €349 ($440) (including German VAT and fees).
• Twitter: @smashingconf
• Lanyrd: http://lanyrd.com/2012/smashingconf/
• Facebook: http://www.facebook.com/smashingconf
• Website: http://www.smashingconf.com

“Zum Roten Bären“, one of the locations for the conference’s workshops. Large view.

We’re very excited about the Smashing Conference, and we’ll do our best to make it a valuable, memorable and useful event. We can’t wait to meet you, and please feel free to contact us if you have any questions about participation or sponsorship.

---

© Smashing Editorial for Smashing Magazine, 2012.

“Mobile Web design.” Unless you’ve been hiding under a bush for the last 18 months, you’ll know that it’s one of the hottest topics in the industry at the moment. Barely a week goes by without new tips being unveiled to help us hone our skills in making websites work as well — and as fast — as possible on mobile devices.

If you own or have designed a WordPress website for the desktop and are considering going mobile, the process can be fairly daunting. You probably know of responsive design and might have heard of the mobile-first approach developed by Luke Wroblewski, which entails planning the content and design for mobile devices first and then desktops second, rather than the other way round.

But if your WordPress website has a desktop theme in which everything is set in pixels, then the thought of adopting a responsive design might have you running for the hills.

It doesn’t have to be that way.

Here are four ways to make your WordPress blog or website mobile-friendly, ranging from the quick and dirty to the complex but potentially very beautiful. As well as outlining the pros and cons of these methods, we’ll include information on plugins that will help without actually doing all the work for you, and we’ll provide some code that you can use for a responsive design.

Plugins: The Quick Way To Make Your Content Mobile-Friendly

Designing for content is increasingly becoming more common than squeezing content into a pixel-perfect design, as documented here on Smashing Magazine.

If your website is more about content than design (say you run a blog that is content-heavy and designed for reading), then you won’t be too fussed about what your website looks like on mobile devices. You just want people to be able to read it without having to zoom in, move the viewport around or generally tie themselves up in knots until they decide to leave.

If this is the case, then a simple plugin might do the trick. Below are some plugins to consider.

WPtouch

WPtouch, which comes in free and premium versions, strips out your existing theme and displays your content and not much else, but the result is user-friendly, robust and easy to read.

WPtouch is widely used on websites, including Stephen Fry’s blog and Social Media Examiner. You can see below how the plugin renders those two websites. The premium version has options to modify the colors and some styles, including a bespoke menu at the bottom of the screen, as seen on Social Media Examiner.

Social Media Examiner desktop design

Social Media Examiner mobile design, using WPtouch

WordPress Mobile Pack

The WordPress Mobile Pack has some color options and can be used as a mobile switcher if you want a completely different theme for mobile devices. It also has a mobile interface for editing posts, although this has been superseded to some extent by the WordPress apps for iOS and Android.

WordPress Mobile Pack screenshots

BuddyPress Mobile

If your website runs BuddyPress, then you’ll need a plugin to ensure that none of its functionality is lost on mobile devices. BuddyPress Mobile has theming options, and you can edit the style sheet to make the mobile design your own.

BuddyPress Mobile

Mobile Themes: The Next Level Up

If you want a consistent design across desktop and mobile, but you don’t yet have a theme or you want to develop one, then a mobile theme might be the answer.

More and more mobile themes have sprung up over the last year. In particular, Twenty Eleven, WordPress’ default theme since version 3.0, is responsive enough for many websites.

Twenty Eleven on the desktop

Twenty Eleven on mobile

Below are some other themes that include a mobile or responsive style sheet.

Carrington

The Carrington family of themes can be used as parent themes. You can edit the CSS and functions to suit your needs, and it has a mobile version.

Carrington on desktop

Carrington on mobile

Scherzo

Scherzo is clean and minimalist and would be great to use as a parent theme. It uses a mobile-first responsive design.

Scherzo on desktop

Scherzo on mobile

Jigoshop

E-commerce websites are trickier to make mobile-friendly, but Jigoshop can help. It’s a full e-commerce plugin and theme, with a responsive layout that can be tweaked to suit your design.

Jigoshop on desktop

Jigoshop on mobile

A Different Theme For Mobile Devices

In the days before responsive design gained traction, websites commonly had two versions: desktop and mobile. The mobile version might have been on an m. subdomain or have a .mobi extension. Some websites out there still do this, mainly huge news websites that serve different content depending on the device.

Fewer WordPress administrators are choosing to do this now, but if you do want to go down this route, then serving two versions of your website from the same database is possible, by using a mobile switcher.

Here are two plugins that make this possible:

• WordPress Mobile Pack
  This tool, already mentioned above as a theme that makes your website mobile-friendly, can also be used as a mobile switcher, detecting mobile devices and using a separate theme of your choice.
• WPtap Mobile Detector
  This targets mobile devices and enables the theme of your choice.

Using one of these plugins enables you to develop a completely separate theme for mobile devices, with its own layout, navigation and content structure.

Or, Finally, Make Your Current Theme Responsive

If you don’t want to throw out your existing theme, then the best way to give mobile users an experience that is at least visually similar to the desktop version is to build responsiveness into your theme.

A responsive theme contains media queries in the theme’s style sheet to define CSS that applies only to devices of a specified maximum or minimum width. A truly responsive theme has a fluid layout that adapts to mobile devices and larger screens to some extent already, but with some extra styling to make the layout optimal for mobile devices.

1. Defining the Media Queries

To get started, you will need to define media queries in the style sheet. Most of the styles already in your style sheet apply to desktop and mobile, so you only need to add CSS that is different for mobile devices. This will go at the end of your theme’s style sheet.

Start by defining the screen width you are developing for. There are two main approaches to this:

1. Start with the narrowest screen width you are targeting (which will usually be mobile phones in portrait orientation); add all of the CSS needed for this screen width; and then add successive media queries for wider screens. This is known as the mobile-first approach, and it has the benefit of making websites faster on mobile devices because only the CSS needed for those devices is loaded.
2. Start with the widest screen width (usually desktop monitors) and work down, adding CSS that applies to each screen width in turn. While this might slow down loading on mobile devices, it has the advantage of working in IE 8 and below, which doesn’t understand media queries. At the moment, most websites are developed this way because they involve making an existing desktop design responsive, so this is the approach we’ll cover here.

A media query consists of three main parts:

1. The @media rule;
2. The media type (the most common being print and screen — we’ll use screen);
3. The maximum width of the screen you are targeting.

You could have a media query to target mobile phones (and other small devices such as the iPod Touch) in portrait orientation that have a width of 320 pixels:

@media screen and (max-width: 320px) {

}

The CSS to be applied to that screen width and any screen narrower than it would be written between the braces.

An alternative to the @media rule would be to create a linked style sheet with the CSS for each screen width. But I don’t do that because it adds another server request with the potential to slow the website down; and managing all of the styles becomes harder if they’re in more than one place.

Here are other media queries for commonly targeted screen sizes:

• (max-width: 480px)
  Works for mobile devices in either portrait or landscape mode, because they are 480 pixels wide in landscape orientation but are still narrower than this maximum width in portrait.
• (max-width: 780px)
  Works for iPads and other large tablets in portrait mode and any screens narrower than them.
• (max-width: 1024px)
  Works for iPads in both orientations, as well as for small desktop browsers.

You can run one media query after another so that each change you make applies to the screen size you’re querying, plus any widths queried further down in the style sheet. In this case, you would work with wider screens first. For example:

@media screen and (max-width: 480px) {

}

If you are ignoring tablets, you would include this media query first and add any CSS for mobile phones in both portrait and landscape modes (for example, any changes to graphics or text size). You would then follow it with this:

@media screen and (max-width: 320px) {

}

Here, we’re adding any styles that apply only to phones in portrait mode (such as layout changes). You don’t need to repeat the CSS that applies to both landscape and portrait modes because this will still apply. In the same way, you don’t need to repeat any styles that will stay the same for desktop views because they will cascade down from the earlier parts of the style sheet.

2. Making the Layout Responsive

Phew! So, now we’ve defined media queries, and we’re ready to roll with some mobile-friendly CSS. Below are the main things you will need to work on for a standard WordPress website. Let’s assume your website’s markup is similar to that of the Twenty Eleven theme (i.e. html → body → header (or div #header) → #main → #content → #primary → #secondary → footer (or div #footer). You might need to substitute your own elements and IDs for the ones in the examples below.

Overall width of website
You’ll need to change this so that it displays correctly. Add the following code between the braces of your first media query:

body {
width: 100%;
float: none;
}

This ensures that the website’s body fills the width of the device and removes any floats. At this point, you might also want to change the background image if there is one (more on that shortly).

You will now have the following code at the bottom of your style sheet:

@media screen and (max-width: 480px) {
   body {
   width: 100%;
   float: none;
   }
}

Width of content and sidebar
In portrait mode in particular, there isn’t room for a sidebar to the right of the main content. Add the following code to the media query relating to devices with a maximum width of 320 pixels:

#content, #primary, #secondary {
width: 100%;
float: none;
margin: 10px 0;
}

Footer content, especially widgets
If your footer has widget areas or other elements with floats applied, you will need to override them for mobile devices in portrait mode.

If you want the footer widgets to be full width in both landscape and portrait modes, then simply add footer.widget-area to the CSS for the sidebars and content.

However, you might want the widget areas to be laid out side by side in landscape mode, depending on how many you have. In that case, you’ll need to do the following:

1. Work out the percentages for the widths, padding and margins (some box-model maths for you!);
2. Add the relevant code to your media query for devices with a maximum width of 480 pixels;
3. Add a separate query for devices with a maximum width of 320 pixels after the one you’re working on, with the following code:

footer .widget-area {
width: 100%;
float: none;
margin: 10px 0;
}

You might also need to adjust the text alignment and borders and padding, depending on your existing theme. Margins should be set to 0 on the left and right; suit them to your theme at the top and bottom, but generally they should be smaller than in the desktop version.

Image sizes
The images in your design might still break the layout or break out of their containing elements, making your website shrink when viewed on a mobile device. There is an easy fix for this:

body img {
max-width: 100%;
}

This will ensure that images are never wider than their containing element. You might need to tweak the CSS if images sized further up in the style sheet have greater specificity.

However, this solution isn’t ideal. The images might look smaller, but mobile devices will still have to download their full sizes, which will slow down response times and possibly lose visitors, as well as annoy users on expensive data plans (more of them are out there than you might think). There a number of solutions to this, some of which you will find in this roundup of articles on responsive images. You may recall the mobile-first approach mentioned earlier; one benefit of this approach is that it serves different-sized image files to devices based on screen width.

Text size
So, our layout is working, and everything displays nicely. But now that the website is narrower, the text might appear huge. We’ll need to adjust the text’s size with the following code:

body {
font-size: 60%;
line-height: 1.4em;
}

This sets the font size as a percentage of the size set for it further up in the style sheet.

4. Changing the Navigation Menus and Creating an App-Like Interface

Sometimes mobile users will want to access specific content; for example, visitors to a store’s website will want to find the store’s location easily, and visitors to an e-commerce website will want to shop with a minimum of clicks (or taps). Sometimes you might want to adjust the navigation to make the website look more like an app.

Here are some methods you can follow to do this:

• Use CSS to turn menu items that are visible on the desktop into drop-down menus, using code similar to what you would use to create a second-level drop-down menu on a desktop website.
• Use conditional PHP or a plugin such as Mobble to display a different menu depending on the device, as seen on the website that I developed for Centenary Lounge:
  
  Centenary Lounge desktop website
  
  Centenary Lounge mobile website
• Use CSS to display menu items as a vertical list of buttons to give the website an app-like look, such as on Cafe Blend:
  
  Cafe Blend desktop website
  
  Cafe Blend mobile website
• Use a plugin such as Dropdown Menus to display menu items as a drop-down walker, freeing up screen real estate.
• Use background images combined with media queries and floats, to create a grid of visual buttons for your navigation, giving the home page an app-like feel.
• Use fixed positioning to fix the navigation to the bottom of the screen, minimizing the need for scrolling, as seen earlier on Social Media Examiner.

The possibilities are limited only by your imagination and creativity!

5. A Problem!

You’ve added the media queries above, but your smartphone still displays the desktop version. Don’t worry! This is because many smartphones use a virtual viewport that is equal to the width of a small desktop, which prevents desktop-designed websites from breaking when rendered in the browser. This can be easily fixed by placing the following code in the head of each page. Because yours is a WordPress website, you need to add it only once, to the header.php theme file:

<meta name=”viewport” content=”width=device-width”>

What this does is tell the phone to treat the size of the screen as its actual size, not the virtual size… if that makes sense.

Summary

Here’s what we’ve looked at in this article:

• Four different ways to make a WordPress website mobile-friendly: with a plugin, with a prebuilt responsive theme, with a separate mobile theme, and by making the existing theme responsive;
• Media queries for responsive design and how they target different device widths;
• Some common styles to make a WordPress website responsive in its layout, images and text.

As you can see, no one option is necessarily the best; it will depend on the website, on the budget and on the time and capability of those involved. Over time, most mobile-friendly WordPress websites will have responsiveness built into them, instead of using a separate theme, mobile website or plugin.

Hopefully this article has given you a starting point to make your WordPress website mobile-friendly. This is just the beginning of the possibilities. To further develop your mobile website, you might want to consider a mobile content strategy; a mobile-first design; APIs and native device functionality to create an even more app-like experience; and more.

Enjoy!

(al)

---

© Rachel McCollin for Smashing Magazine, 2012.

Ruby is an object-oriented language. What does that even mean? It has unique quirks and characteristics that we’ll explain clearly. This article assumes that you have no programming experience, not even HTML.

An important skill to have when creating a program is translating — translating the desires of the user into the output they are looking for. In order to do that, you have to be able to think like a developer so that you can take what you know instinctively (as a user) and morph it into what the computer needs to be able to do what you want. So, we’ll help you start thinking like a developer. When you are done, you should have a mental model of how Ruby works and be on your way to becoming a successful Rubyista.

We’ll take you through a variety of the fundamental elements of the Ruby language and explain the whys behind the hows.

For all the code samples we go over, you can test them out on Try Ruby (without having to install anything on your computer). You can follow Try Ruby’s tutorial if you want, but you don’t need to in order to understand what we’ll outline below. It’s just a quick way to get your feet wet without the headache of installing anything.

How Is Your Code Evaluated by the Computer?

The interpreter for Ruby — basically, the main brain of the programming language that makes sense of the code you write — reads the code from top to bottom and left to right; meaning, it starts at line 1, character 1, literally, and first reads across line 1 to the last character, then goes down to the next line, and repeats this process until it reaches the last line of your program. If you have any syntax errors — i.e. errors in your code, such as misspelled variable names, improper use of constants (we’ll get to constants in a bit), etc. — it will halt execution and show you an error message, usually with a line number corresponding to the code. Remembering this is important because if you encounter an error report while coding, you will need to know how to decipher it. Figuring this out isn’t always straightforward for beginners.

Fictitious code from The Matrix. (Image: Absolute Chaos)

This top-down parsing also affects the control of the flow of logic in your program. Say you want to calculate the balance of someone’s account before showing it to them. You would have to make sure that you put the method and function that does the calculation before the output of the balance; that is, if you are outputting the balance at line 10, then you would have to do the calculations somewhere between line 1 and 9. We’ll dive into this later.

Objects

An object is a thing. It is at the heart of Ruby. Going back to our earlier statement about Ruby being an object-oriented language, that means that Ruby manipulates all data on the assumption that the data is an object. There are many object-oriented languages, but very few put the object at the center of their universe like Ruby does. In Ruby, everything is an object. I mean everything: every variable, every operation. Every object has different characteristics; that’s what makes them different. A string is an object that has built-in characteristics that make it suitable for handling text. For a more technical definition, check out the article “Object” on Wikipedia.

Methods

A method is simply a definition of an action that can be performed on an object. Ruby has built-in object definitions and methods. One such method is capitalize for the Ruby class strings (we will dive into strings later).

string1 = "this string is awesome"

If you wrote string1.capitalize, the output would look something like this:

"This string is awesome".

All that the capitalize method tells the Ruby interpreter to do is convert the first character of the string from lowercase to uppercase. Check out an example directly from the Ruby documentation. As you can see from the documentation, the string object in Ruby has a ton of methods that you can use right out of the box.

Another thing you should have noticed is the way to call a method, string1.capitalize, which is basically <object name> . <method name>.

In this case, the object is a string variable. If you tried to do capitalize on an object that is not a string, Ruby would throw an error.

You can create any method for any of your objects. Here is the way to do that:

def method_name
     #Enter code here
end

The # basically tells the Ruby interpreter that this is a comment for another human and to ignore it. So, the Ruby interpreter skips lines that begin with a #.

Classes

A class is like a blueprint that allows you to create objects of a particular type and to create methods that relate to those objects. But classes have a special property called “inheritance.” Inheritance means just what you would think. When you inherit something from someone, it likely means a few things:

• That you are related in some way (in most cases, it is parent to children or grandparent to grandchildren);
• That either you are getting a bunch of stuff (land, money, etc.) or you have gotten some biological attribute (say, a nose shape or hair type).

Classes are like a blueprint for objects. (Image: Todd Ehlers)

Those principles are the same in Ruby. There are parent, grandparent and children classes. As a general rule, children classes inherit all of the attributes of a parent or grandparent class.

In Ruby, an object’s grandparent class is known as its “superclass.” In other words, if you have an object that is a string — meaning that your object inherits the properties of the String class — then the parent class of String is String’s superclass. Be careful not to miss an important distinction here: the superclass of String (which is a class that tells Ruby how to treat strings) is not the same as the superclass of a String object. Here is a demonstration:

> num1 = "this­ is a strin­g"
=> "this is a string"
> num1.class
=> String
> String.sup­erclass
=> Object
> Object.superclass
=> BasicObject
> BasicObjec­t.supercla­ss
=> nil

What we have done is set the local variables num1 to be a string. When we check the class of num1, by calling the .class method, it tells us that the class of num1 is String. Then, when we checked the superclass of String, it tells us Object, and so on.

Look at what would happen if we tried num1.superclass:

> num1 = "this­ is a strin­g"
=> "this is a string"
> num1.super­class
=> #<NoMethodError: undefined method `superclass' for "this is a string":String>

The reason this doesn’t work is because num1 is an object (a local variable) that has inherited the properties of the class String. And num1 is not a class, so it has no superclass.

Here is another way to do what we did earlier:

> num1 = "this­ is a strin­g"
=> "this is a string"
> num1.class
=> String
> num1.class­.superclas­s
=> Object
> num1.class.superclas­s.supercla­ss
=> BasicObject
> num1.class­.superclas­s.superclass.supercl­ass
=> nil

The reason the last value is nil is because BasicObject has no parent. It inherits nothing from another class, so it stops there.

One key thing we have done here that is different from before is we have “chained” methods, meaning we have continued applying a method to the current statement. That’s another beautiful thing about Ruby: every time it evaluates something, it returns a copy and allows you to continue evaluating it.

Take the last line:

> num1.class­.superclas­s.supercla­ss.supercl­ass
=> nil

Basically, Ruby did this:

• What is the class of num1? It’s a string, so return String.
• What is the superclass of String? String is a child class of Object, so return Object.
• What is the superclass of Object? Object is a child class of BasicObject, so return BasicObject.
• What is the superclass of BasicObject? BasicObject is not a child class of anything, so return nil.

All on one line, all in one command. Simple, neat, elegant.

The structure of classes and superclasses is the hierarchy of class inheritance.

Now the question is, how do you define a class and use one? Glad you asked.

class MyClass
# some code logic
end

That’s it.

Basically, you just have the opening keyword, class, followed by the name of your class (MyClass, in this case). Then you have some code. And when you are done, you close it with the keyword end. Make sure that class and end are always all lowercase (i.e. don’t write Class or End or you might get errors).

That’s all there is to it.

If you have a parent class that you want this new class to inherit stuff from, you would define it like this:

class MyChildClass < MyClass
# some code that is specific to the child class
end

Ruby interprets the < operator to mean that the class name on the right side is the parent and the class name on the left is the child (therefore, the child should inherit methods and such from the parent).

Also, remember that class names usually start with an uppercase letter; and if their name has multiple words, you do what is called “CamelCasing” — i.e. instead of using a space or underscore or hyphen, you just start the new word with an uppercase letter.

Class Instances

Now we know how to create a class, which we know is the blueprint of an object type. So, if you think of baking, a class is like a recipe (which contains a list of ingredients and instructions for creating something). But once you create something — say, blueberry muffins — then each muffin may be considered an “instance” of that class.

So, each instance or muffin is an object.

The way to create an instance is like this:

muffin = BlueberryMuffin.new

That’s it.

To be technical, the only part of the statement above that actually creates an instance of the BlueberryMuffin class is BlueberryMuffin.new. In order to use the object, you have to store it somewhere, so we’ve stored it in the local variable muffin so that we can reuse this specific instance (or muffin).

You will need to do more technical things with a class, like set up an initialization method so that whenever you create an object of the class, Ruby knows how to do that exactly. That is a bit beyond the scope of this article — just understand what a class is, how it relates to objects, how to create new objects, etc.

To read up on classes, check out the article about them on Learn Ruby The Hard Way.

Data Structures

How is data structured?

At the core of programming is the manipulation of data. Computer scientists have come up with a way to manipulate data in a structured way by inventing things called “data structures.” A data structure is simply a container for a particular type of data. Words are handled differently than formulas; likewise, characters and letters are handled differently than numbers — in most cases.

Variables

What’s a variable?

A variable is the name of the most basic type of container that you will store data in. Each variable name has to be unique to its scope (i.e. the area in which the variable is allowed to exist). Think of it as a Venn diagram, in which each variable is only valuable in the circle or square within which it is contained.

Say you wanted to create a program (or a part of a program) that is responsible for adding two numbers. From the coder’s point of view, you would need to set up a container for each of those numbers, and then set up the mathematical function between the containers. The reason to do this is because you don’t want the user to have to edit the source code every single time they want to calculate the sum. Although you could do that, the solution is neither practical nor efficient. Most users know what a calculator looks like, so they can just press the buttons or enter the numbers. But editing source code is a no-no.

In Ruby, each of those containers is a variable. So, you would do something like this:

sum = num1 + num2

As opposed to something like this:

sum = 19 + 20

Ruby and many other languages have many types of variables. We’ll go over just a few to be brief and not confuse you too much.

• Local
  This is a variable that can be used only in a finite part of the program, such as a method or function (we’ll go over what these are later). Once you have exited that part of the program, those variables are destroyed. In fact, say you have a program that has three methods; you could have the same variable — say, num1 — that is used in three different ways in each of those methods and that stores three different values. Going back to the Venn diagram, suppose there are three shapes within the diagram: Circle 1, Circle 2, Square. Also suppose that Circle 1 and Circle 2 are not connected, but both are within Square. A local variable would be confined to its respective circle and would not be able to affect anything outside of its circle. The way to use these variables is to just use them. If you want to use a local variable called sum that stores the sum of the values of num1 and num2, you would simply write sum = num1 + num2.
• Global
  This is a variable that can be used throughout the entire program. Back to the Venn diagram, these variables would be within the square. This way, if you are inside any of the circles that are within the square, you can access a variable that is outside of the circles but within the square. You use these in Ruby by putting a $ before the name. So, suppose you want to calculate multiple dimensions of a circle, and you want to define the radius beforehand. You would do something like this: $radius = 20. Then, at any other time throughout the program, regardless of whether you are in a subcircle of the square or in the square alone, you can reference $radius. Now, using global variables has a good side and bad side. The good side is that you can read the value of a global variable in any method or function within your program. The bad side is that you can also write to a global variable in any method or function within your program. If you change the value, forgetting that another method or function depends on the previous value could really screw things up. As a rule, then, stay away from global variables unless you are confident that you know where they will be used and how changes would affect the rest of the program.
• Constants
  These are “sacred” global variables. The values of these variables are supposed to remain constant for the life of your program. Say you wanted to specify a mathematical constant such as pi that you could easily use throughout your program. You would do something like this: PI = 3.14. Constants have to begin with an uppercase letter, and more often than not they are all uppercase, but they don’t have to be. Note that I said that the values of constants are supposed to be constant throughout your entire program, but they can be changed. Ruby doesn’t forbid you from changing the value, but when you do, it gives you a warning because it doesn’t like it. Going back to the Venn diagram, think of PI as being set outside of the square, and it can be used anywhere within the square and anywhere within the circles within the square.
• Class
  These are variables whose scope is limited to the class that they are defined in. Class variables are defined with @@ at the beginning of the name of the variable.
• Instance
  These are variables whose scope is limited to one particular instance of a class. They are defined with @ at the beginning of the name of the variable.

Here’s a recap on how to use the variable types:

• Local
  sum = num1 + num2
  Local variable names should start with a lowercase letter or an underscore.
• Global
  $radius = 20
  Global variable names should start with a $.
• Constants
  PI = 3.14
  Constants should start with an uppercase letter, but they are commonly written in full caps.
• Class
  @@length = 10 #
  This denotes the length of a side of an object in a class. I’ve used an imaginary class, called Square, and defined the length of each side for demonstration purposes. What’s important to note here is that all “squares” would have a “length” of 10 by default.
• Instance
  @length = 5 #
  This denotes the length of a side of a particular object. Suppose you wanted to create a red square that had a length of 5 instead of the default 10. You could use this instance variable to specify the length of this particular square, your “Red Square.”

Note that these rules are by no means comprehensive. Some words you can’t use as variable names. They are called “reserved words,” which Ruby uses internally to identify various elements of the language.

To find out more about variables and other do’s and don’ts, check out the following resources:

• “The Ruby Language,” Programming Ruby: The Pragmatic Programmer’s Guide
• “Variables,” Ruby User’s Guide
• “Ruby Programming/Syntax/Variables and Constants,” Wikibooks

Strings

What is a string?

A string is a series or sequence of characters — i.e. a “word” or sequence of words. You might say a sentence, but a string is not just a sentence. For instance:

string1 = 'a'
string2 = 'This is a string'

Two things are happening here. The first is that we are using local variables, and the second thing is that we are using single quotes to define the content of the variable. Even though string1 contains just one letter, it is still a string because it is declared in single quotes. Ruby knows how to treat a variable by the way it is declared. You can use double quotes, but you have to be consistent. You can’t start the string’s declaration with a double quote and end with a single quote, like this: string1 = "This is a string'. But you can do this: string1 = "This is a string", or string2 = 'This too is a string'. Both are valid, and it’s just a matter of taste.

num1 = 9

This sets num1 to the numerical value of 9. So, if you did num1 + 1, the result would be 10.

But if you used single quotes around the 9, like this…

num1 = '9'

… then that would say that 9 is actually a string, not a number. So, if you wrote num1 + 1, it would throw an error along the lines of: => #<TypeError: can’t convert Fixnum into String>. The Ruby interpreter is basically saying that you have given it a number and a string and that it doesn’t know how to add them.

To take that one step further, if you did this…

num1 = '9'
num2 = '1'
num1 + num2

… the result would be this:

"91"

Because Ruby would take the two strings and literally squish them together. When you specify a value in quotes (either single and double quotes), you are telling the Ruby interpreter, “Don’t translate this. Just take the exact content between the beginning and end quotes.” It treats the 9 like any other letter. So, as far as Ruby is concerned…

num1 = '9'

… is more or less the same as this:

num2 = 'a'

As a matter of fact, if you did num1 + num2, the result would be 9a.

In summary, a string is just a combination of letters, numbers and special characters.

Collections

So far, we have covered individual pieces of data, such as one or a handful of items that can be stored in a local variable, or a single object created as an instance of a class.

But what happens if we want to work with many pieces of data — that is, a collection, such as a series of numbers that we need to put in ascending order, or a list of names sorted alphabetically. How does Ruby manage that?

Ruby gives us two tools: hashes and arrays.

Arrays

The easiest way to explain an array is to show an image of what a “typical” one looks like.

Rather than having six different variables for the six food types, we have just one food array that stores each food item in its own container or element. The numbers to the right of the diagram above are the “index” or “keys” (i.e. addresses) of each element ([0] = chicken, [1] = rice, etc). Note that the keys are always integers (whole numbers) and always start at 0 and go up from there. So, the first element is always [0], and [1] is always the second element, etc. So, you will know that the range of keys of any array is always [0] to (length-1) — meaning that the last element is always total length of the array minus 1, because we started at [0].

To create the above in Ruby, we would do something like this:

food = ['chicken', 'rice', 'steak', 'fish', 'shrimp', 'beef']
=> ['chicken', 'rice', 'steak', 'fish', 'shrimp', 'beef']
> food.count
=> 6

Notice that for each element, we use single quotes (we could have used double quotes instead) because we are storing strings in each element. Ruby’s array class has some methods that we can use right out of the box, such as count, as used above. It simply counts the total number of elements in the array and outputs that value. Thus, even though the index goes up to 5, there are 6 elements because the index started at 0.

Now that we have created a food array, we can access each item by invoking the name of the array that we created, followed by the index number.

> food[0]
=> "chicken"
> food[1]
=> "rice"
> food[2]
=> "steak"
> food[6]
=> nil

The reason we get nil at food[6] is because there is no [6] — or, rather, nothing is stored in food[6], so Ruby automagically sets food[6], food[7], food[8] and so on to nil. To add another food item to this array, all you would have to do is set the next element to whatever value you wanted, like so:

> food[6] = 'carr­ots'
=> "carrots"
> food
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots"]
> food.count
=> 7

There is another way to add elements to your array in Ruby. You use the append operator, <<, which basically sticks something at the end of the array. The difference here is that we don’t have to specify an index position when using the append operator. We just do this:

> food << "irish potato"
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato"]
> food << 42
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42]

Everything that comes after the << is added to the array. This is pretty convenient because you can append variables and other objects to an array without worrying about the content itself. For instance:

> sum = 10 + 23
=> 33
> food << sum
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42, 33]

All we did here was create a local variable named sum, and then push the value of sum to the end of the array. We can even add arrays to the end of other arrays:

> name_and_a­ge = ["Marc", "Gayle", 28]
=> ["Marc", "Gayle", 28]
> food
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42, 33]
> food.count
=> 10
> food << name_­and_age
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots", "irish potato", 42, 33, ["Marc", "Gayle", 28]]
> food.last
=> ["Marc", "Gayle", 28]
> food.count
=> 11

Even though the last element is an array with three elements — Marc, Gayle, 28 — it still counts as just one element (i.e. one array) inside the food array. So, the count figure goes from 10 (before name_and_age is added) to 11.

If we wanted to find out how many elements were inside the last element of the food array, we could do something like this:

> food.last.count
=> 3

A few other interesting methods that Ruby allows us to use right out of the box are first, last, length, include? (followed by the object you want to check for), empty?, eql? and sort.

> food
=> ["chicken", "rice", "steak", "fish", "shrimp", "beef", "carrots"]
> food.first
=> "chicken"
> food.last
=> "carrots"
> food.length
=> 7
> food.count
=> 7
> food.include?("chicken")
=> true
> food.inclu­de?("filet­ migno­n")
=> false
> food.empty­?
=> false
> food[0]
=> "chicken"
> food[0].eq­l?("chicke­n")
=> true
> food[0].eq­l?("beef")
=> false
> food.sort
=> ["beef", "carrots", "chicken", "fish", "rice", "shrimp", "steak"]

In the brackets right after eql?, we put the string in double quotes because we are dealing with a string. Also, sort arranges alphabetically on strings and from lowest to highest for numbers.

We can store anything in each element, not just strings. We can even mix; some elements can be strings, others can be numbers.

Say we wanted an array of numbers. We would do something like this:

numbers = [1, 2, 3, 4, 5, 6]
=> [1, 2, 3, 4, 5, 6]

Remember what we said earlier about always starting the index at 0. You can see here why that is so important. In order to reference the number 1 in this array, the array reference has to be [0] because that is the first element in the array.

> numbers[0]
=> 1
> numbers[1]
=> 2
> numbers[6]
=> nil
> numbers.fi­rst
=> 1
> numbers.la­st
=> 6
> numbers.co­unt
=> 6
> numbers.le­ngth
=> 6
> numbers.in­clude?(3)
=> true
> numbers.in­clude?(10)
=> false
> numbers.em­pty?
=> false
> numbers[1]
=> 2
> numbers[1]­.eql?(1)
=> false
> numbers[1]­.eql?(2)
=> true

Because we are evaluating numbers, the objects in the brackets should not be wrapped in double quotes. In fact, if we did use double quotes, Ruby wouldn’t find the items because it would be looking for a string and not a number. Be careful with those quotes!

> numbers.in­clude?("3")
=> false
> numbers[1]­.eql?("2")
=> false

To see what other Ruby methods are included in the array class, check the documentation on “Array.”

Everything we’ve just discussed covers one-dimensional arrays (i.e. arrays with just one column). These are best used to store lists of items.

As you can imagine, there are multi-dimensional arrays. We’ll just touch on a 2-D array. Once you understand how to use them, you can then extrapolate to 3-D and beyond (if you ever want to go there).

A 2-D array looks like this:

We are storing two things: the name of the dish, along with a price related to that item.

As the diagram suggests, in order to access each element, you would use both keys.

This is how we would declare this array:

> food2 = [["ch­icken", 10], ["ric­e", 5], ["ste­ak", 20], ["fis­h", 15], ["shr­imp", 18], ["bee­f", 9]]
=> [["chicken", 10], ["rice", 5], ["steak", 20], ["fish", 15], ["shrimp", 18], ["beef", 9]]

A few key differences should jump out at you. Essentially, food2 is an array of arrays (meaning that it is an array whose elements are themselves arrays). Huh? Well, look at each element.

> food2[0]
=> ["chicken", 10]
> food2[1]
=> ["rice", 5]
> food2[2]
=> ["steak", 20]
> food2[3]
=> ["fish", 15]

When you access each “single” element, you notice that each has an array inside of it; ["chicken", 10] is an array that has a string (chicken) in the first element and a number (10) in the second element.

So, to access each individual element, we would do something like this:

> food2[0]
=> ["chicken", 10]
> food2[0][0]
=> "chicken"
> food2[0][1]
=> 10

First, food2[0][0] is saying, “Show me the first element of the first element of the array food2.” And food2[0][1] is saying, “Show me the second element of the first element of the array food2.”

You can also use the same methods of the Ruby class array on subarrays.

> food2
=> [["chicken", 10], ["rice", 5], ["steak", 20], ["fish", 15], ["shrimp", 18], ["beef", 9]]
> food2.coun­t
=> 6
> food2[0]
=> ["chicken", 10]
> food2[0].count
=> 2
> food2.last
=> ["beef", 9]
> food2.first
=> ["chicken", 10]

Keep in mind one important distinction for multi-dimensional arrays: Ruby will check whatever you call the method on.

For instance, if you wanted to check whether chicken is in the food2 array, you could not do this:

> food2.incl­ude?("chic­ken")
=> false

The reason is that food2 is just an array of arrays. So, you would have to do something like this:

> food2
=> [["chicken", 10], ["rice", 5], ["steak", 20], ["fish", 15], ["shrimp", 18], ["beef", 9]]
> food2[0].include?("chicken")
=> true

We had to specify the particular element ([0]) that we wanted to check for the string chicken.

In this case, we knew that the string chicken was stored in food2[0] because we put it there. How would we find it if we didn’t know? We’d have to use an iterator.

Iterators

An iterator is a mechanism in Ruby that enables you to cycle through data structures that store multiple elements (such as an array) and examine each element. One of the most commonly used methods is named each. Each is a method in the array class that comes with Ruby.

Let’s start simple. Suppose we wanted to print a list of all of our food items stored in the food array. How would we do this?

> food
=> ["chicken", "rice", "steak", "fish", "beef"]

food.each do |x|
puts x
end

chicken
rice
steak
fish
beef

A few things to be aware of here:

1. You can only call each on a collection of data.
2. Once you call each, you have to pass a block to it. A block is just a contained bit of code. Basically, you are saying to apply the code contained within the block to each element that you look at.

Block

There are two ways to use a block. The first is similar to the example above, where you just do this:

do |variable|
#some code
end

Note that you have to use a block with an iterator. You can define a block outside of an iterator, but in order to execute the block, you have to use it in conjunction with an iterator. That’s why we called do |x| after food.each earlier.

You can use one or more variables in your block. Those variables are local to the block alone, so they will be destroyed once you leave. Thus, if you had two blocks, you could use the variable x in both, and one wouldn’t affect the other.

In the example above about food, we have said, for each element in the array food, print it to the screen.

Another way to use a block is on one line, like this:

food.each { |x| puts x }

In this case, the opening curly brace ({) replaces the do, and the closing curly brace replaces the end. If your operation is just one line, then this way is convenient, although I have found that rereading such code in future is sometimes harder; so, I usually just use do and end, but that’s a personal preference. Do whatever makes you most comfortable.

The reason that blocks use variables is because the elements of the collection are actually not modified — unless you specifically chose to do so. Basically, what happens is that for every single iteration through the array, a copy of the new element is stored in x, and then x is used in the block.

Going through the food array, the local block variable x would look something like the following.

First iteration:

food[0] = 'chicken'
x = food[0]
x = 'chicken'

Second iteration:

food[1] = 'rice'
x = food[1]
x = 'rice'

Third iteration:

food[2] = 'steak'
x = food[2]
x = 'steak'

Using numbers would more clearly illustrate that the values aren’t changed in the original array:

> numbers = [1, 2, 3, 4, 5]
=> [1, 2, 3, 4, 5]
> numbers.each do |x|
… x = x + 2
… puts x
… end

3
4
5
6
7

> numbers
=> [1, 2, 3, 4, 5]

Here we’ve printed out the numbers 3, 4, 5, 6, 7 (i.e. 1+2, 2+2, 3+2, etc.); but at the end, the numbers array is the same.

Hashes

A hash is another collection type. It is a collection of “key-value” pairs. A key-value pair is a combination of the name of a container (i.e. the key) and the contents of the container (i.e. the value).

a => "Marc"

In the key-value pair above, the key is a, and the value is Marc.

A hash, then, is basically a list of these key-value pairs, separated by commas. A hash looks like this:

a =>"Marc", b => "Cheyenne", c => "Alexander", d=> "Mia"

Hashes and arrays have some key differences, though, and some things to note:

• The keys are not integer keys. They can be characters, integers, strings, etc. — basically, any Ruby object type.
• The keys are not ordered. So, you couldn’t say that a is “first” or that it “comes before” b in the example above, because Ruby does not look at the order of keys in hashes.
• Even though the keys are not ordered, if you were iterating through a hash (which we will do shortly), Ruby would go through them in the order in which they were added to the hash. In our example, if we were printing out each value, Ruby would print out Marc, Cheyenne, etc. But don’t confuse this with the way in which array keys are ordered.

There are multiple ways to initialize (or initially create) a hash, but the most popular ways look something like the following.

To create an empty hash (i.e. a hash with no values):

> day = Hash.­new
=> {}

To create a hash with particular values:

> names = Hash[­"a" => "Marc­", "b" => "Chey­enne", "c" => "Alexander", "d" => "Mia"­]
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia"}
> names2 = {"a" => "Marc­", "b" => "Chey­enne"}
=> {"a" => "Marc", "b" =>"Cheyenne"}

You will notice that to create the hash, you don’t have to use the keyword Hash or square brackets ([]). You can use them if you like, or you can just use = { }.

For the keys and values, you also don’t need to put the keys in quotes. You need to do that only if you want to use strings as the key. Ruby also requires a => (pronounced “rocket”) to assign the value on the right side of the rocket to the key on the left side.

If you tried to do names2 without the quotes around the keys, you would likely get an error like this:

> names2 = { a => "Marc­", b => "Chey­enne"}
=> #<NameError: undefined local variable or method `a' for main:Object>

To access values within the hash, you have to specify the name of the hash, along with the key for the value you are trying to access.

> names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia"}
> names["a"]
=> "Marc"
> names["c"]
=> "Alexander"
> names[a]
=> #<NameError: undefined local variable or method `a' for main:Object>

Because we didn’t use quotes for names[a], the Ruby interpreter thinks that a is a local variable or a method and so can’t find a value for it, thus throwing an error.

If you tried to access a seemingly legitimate value via a legitimate key that has not been assigned a value, then Ruby would usually return nil.

> day["a"]
=> nil
> day[9]
=> nil  #For you Day9 fans, don't worry… I am a fan too :)

Suppose you wanted to create a hash in which every value has a “default” value. You could do something like this:

> year = Hash.­new("2012"­)
=> {}
> year[0]
=> "2012"
> year[12]
=> "2012"

All we’ve done was call the method new on the Ruby class Hash and pass the default value of 2012 into that method. So, when trying to access a value that doesn’t exist, instead of returning nil, Ruby would return the default value (2012).

You can use a number of methods with hashes:

> names.keys
=> ["a", "b", "c", "d", "e"]
> names.values
=> ["Marc", "Cheyenne", "Alexander", "Mia", "Christopher"]

As you can guess, the keys just returns all of the keys in the hash, and the values returns all of the values.

> names.leng­th
=> 5
> names.has_­key?("a")
=> true
> names.has_­key?("z")
=> false
> names.has_­key("a")
=> #<NoMethodError: undefined method `has_key' for #<Hash:0x55c797d7>>

Note that the name of the has_key method is actually has_key?. If you left out the ?, it would throw an error like the one above.

All that has_key? is doing is checking the hash to see whether any key matches whatever is in the brackets. If it finds a match, then it returns true; if it doesn’t, it returns false.

> f_names = names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher"}
> l_names = {"g" => "Gayl­e", "h" => "Gayl­e", "j" => "Jack­son", "m" => "Brow­n"}
=> {"g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}
> f_names.me­rge(l_name­s)
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle","j"=>"Jackson", "m"=>"Brown"}
> f_names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher"}
> l_names
=> {"g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}

All we’ve done above was create a new hash, f_names, by assigning it the existing names hash. Then, we created another hash, l_names, that has a few last names. Then, we just merged the two hashes to create a master hash. However, because we just ran the merge method without assigning the result to any variable, it wasn’t stored. If you check the values of f_names and l_names after, you will see that they look exactly the same as before we ran merge.

If we wanted to store the value of the merge, we would have had to do something like this:

> master_has­h = f_nam­es.merge(l­_names)
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}

Another approach is to do a “destructive” merge. This is an interesting feature of Ruby. For many (perhaps most) methods, if you add an exclamation point to the end of the method’s call, you actually replace the value of the method’s caller with the returned value. For example:

> f_names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher"}
> l_names
=> {"g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}
> f_names.me­rge!(l_names)
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}
> f_names
=> {"a"=>"Marc", "b"=>"Cheyenne", "c"=>"Alexander", "d"=>"Mia", "e"=>"Christopher", "g"=>"Gayle", "h"=>"Gayle", "j"=>"Jackson", "m"=>"Brown"}

As you can see, the f_names value after we ran the destructive merge method (merge!) is now the same value as the merged hash.

Another method that you can use with hashes is each. But it is slightly different. With arrays, you just have to pass in one variable to the block (which essentially represents the index of the array). With hashes, you have to pass in two variables: one that represents the key, and another that represents the value.

> f_names.ea­ch do |key,­ value­|
.. puts "#{ke­y} is #{val­ue}"
.. end
=> "a is Marcb is Cheyennec is Alexanderd is Miae is Christopherg is Gayleh is Gaylej is Jacksonm is Brown"

This looks a little messy. Here is what’s happening:

• Reading from left to right, Ruby reads the left-most and oldest value first, and it stores those values in key and value. So, after the first iteration, key would be a, and value would be Marc.
• Then, Ruby goes inside the block and executes top down. The first command is puts, followed by a string. In other words, it will print everything in quotes to the screen.
• What is that strange syntax in the quotes after the puts? That’s called “string interpolation.” It basically says, stick the value of this variable into my string at this exact position. Thus, after the first iteration, puts would do this:
  1. Look for the key variable.
  2. Print the key variable to the screen (i.e. a).
  3. Then print a space (because we put a space between the key and the is).
  4. Print the next word (is).
  5. Then print another space.
  6. Then print the value variable (Marc). (The entire string, after the first iteration, would be a is Marc.)
  7. Go to the next command because this puts command is done.
  8. Sees end, so goes back to the beginning of the block to see whether any more elements are in this hash object.
• Because it is in a block, it just repeats this entire process for every key-value pair in the hash until there are no more.
• Because we didn’t add a space before the last double quotes on the puts line (and we didn’t put a space after the first quote on the puts line), no space will be between the last character of the first iteration and the first character of the second iteration.
• In other words, if puts looks like puts " #{key} is #{value}", then the resulting string might make more sense: a is Marc b is Cheyenne c is Alexander etc.

I intended for the output to make sense, but when I saw the result, I realized that this has tripped me up many times in my career, so I figured to highlight it.

You can use a lot more methods on hashes, many of which you should be familiar with because they look like others we have covered here, such as value? (note the ? — I’m not asking a question here), and they look similar to the methods we went over in the arrays section, such as include?, empty?, eql?, size, etc.

The last element of Ruby that you should be familiar with is an object type called a symbol.

Symbols

A symbol is an object type that resembles a string, but is not quite one. The major difference between a symbol and a string is that a symbol always begins with a colon (like :name). (For more information, see the “Symbol” article in the Ruby documentation and “The Ruby_Newbie Guide to Symbols” on Troubleshooters.com)

Symbols work nicely with hashes because you can use them as the keys instead of strings.

> f_names
=> {:a =>"Marc", :b =>"Cheyenne", :c =>"Alexander", :d =>"Mia", :e =>"Christopher"}
> f_names[:a­]
=> "Marc"

The good thing about this is that you no longer have to worry about all of those quotes for both the keys and the values… but you can still remember the words for the keys.

> pets = {:dog­ => "Cook­ie", :cat => "Snow­y", :fish­ => "Gold­ie"}
=> {:dog=>"Cookie", :cat=>"Snowy", :fish=>"Goldie"}
> pets[:dog]
=> "Cookie"
> pets[:fish]
=> "Goldie"

Symbols make dealing with hashes much simpler than using strings as keys. You can, of course, use hashes for anything else in the Ruby language; their main function is to store values and make retrieval easier on the interpreter (since handling strings has many rules).

Conclusion

I hope you have learned a lot here. Remember that this guide to Ruby is not comprehensive, but simply an introduction tailored to those with little or no programming experience. It’s not written in the typical programming tutorial style because I’ve always found that to be a bit difficult. I need to understand the whys behind the whats, so I’ve taken that approach here. I also don’t profess to be a Ruby ninja; I just wanted to learn how to build Web products myself, so I taught myself Ruby and Rails.

You now have the foundation to play with Try Ruby some more or to install Ruby on your system and get started (Google it).

Good luck, and remember that true learning often happens when you are struggling with a problem. When you spend one week stuck on a “very simple” problem and you eventually figure it out, you are guaranteed not to make that mistake again. And when you get stuck, don’t panic. Just take a break; maybe Google it and see what solutions others have had. But don’t just copy and paste code. Figure out why it does what it does and how it can help you. That’s how you learn.

If I was unclear with anything, please let me know in the comments.

Additional Reading

There are fabulous books on Ruby to help get you started. Here are some of my favorites.

• Why’s (Poignant) Guide to Ruby
  This wonderful comic has become a classic in the Ruby community. In fact, its author (Why the Lucky Stiff — yes, that’s his name) disappeared a few years ago, which created a somewhat cultish mystique around the work that he did. His wife let the world know that he is fine, but he is no longer an active member of the Ruby community (Google him if you are interested in the saga).
• Humble Little Ruby Book
  Buy the PDF or read it free online. The writing style is engaging.
• Eloquent Ruby
  This book really helped me wrap my brain around “the Ruby way” of programming. It is a little more advanced than the two resources above, but once you have some of the basics down (i.e. once you have a solid understand of everything we’ve covered in this series), you should be able to learn a lot from this book. Russ’ tone is engaging and his writing easy to understand.
• Programming Ruby: The Pragmatic Programmer’s Guide
  This is a little drier in presentation and tone, but rich in content. It is also known as Ruby Pickaxe and the Ruby Bible. A solid encyclopedia of all aspects of the Ruby programming language. The reason it is called Pickaxe is because it had a picture of a Pickaxe on the cover. The first version is free to read, although it is a bit outdated.
• Programming Ruby 1.9: The Pragmatic Programmer’s Guide
  A more up-to-date Programming Ruby (aka Pickaxe). While not free, this one is a must have for all Rubyistas.

(al) (km)

---

© Marc Gayle for Smashing Magazine, 2012.

There many benefits to having an online web design portfolio, but there is something more than beneficial to displaying web design work online, in the arena in which it was intended; it just feels at home. Optimized and ready to show off its full potential. A high-quality portfolio can leverage the same interactive, responsive features that a well designed website uses, letting you show clients your strengths and capabilities.

A successful online portfolio will use the same rich media functionality that a great website would, too — and with these hosting services, templates, and themes, you don’t have to be an experienced developer to do set yours up. These tools allow designers at all levels of expertise to create a sleek, functional online web design portfolio worthy of the work it displays, from low-maintenance to highly customizable.

We’ll start off by taking a look at portfolio hosting services that allow for a wide range of customization. For those who use WordPress to host their portfolio or personal website, we’ve collected responsive and rich media capable themes and templates that are specially oriented toward portfolios.

Portfolio Hosting Services

Behance

Behance is perhaps the best-known and highest-visibility portfolio hosting service on the Web. They emphasize the fact that the Behance network gets “fifteen times the traffic of all other leading portfolio websites combined” — a powerful asset for designers looking to gain more exposure and a wider audience.

Behance offers fully customizable portfolios for creative professionals of various disciplines, and its graphics-heavy layouts and multimedia options are well suited for web designers. A free account offers unlimited images, video, text, and audio, and its social-media integration lets you share your work across multiple platforms. You can display work on your LinkedIn profile, promote it on Twitter and Facebook, or use Behance’s community tools to follow other users, and gain followers, too.

You’ll find curated sites, collections, and galleries from big names to independent designers, as well as active job boards and groups. Behance aims to connect talented designers and professionals with each other and with career opportunities.

Behance ProSite

ProSite.com is Behance’s paid portfolio hosting service that features even more customization options, personal domain names, white-label branding (no Behance logos), and syncing with the Behance network. The service costs $11 per month and functions as a personal website for creative professionals; you can import your blog and develop your personal branding vision. Behance ProSite is accessible to designers with all levels of development experience: no programming knowledge is required to build a site, and you can choose from a large variety of layouts and templates.

Viewbook

Portfolio hosting service Viewbook is embracing the mobile revolution: it’s available on Web and mobile and offers iPad-app integration, so you can display your work on the go. The interface is clean and minimalist, though the portfolios feature plenty of customization options.

Viewbook focuses heavily on social media: you can share and publish your work to Tumblr, Twitter, Facebook, and more with one click, or embed Viewbook albums in your personal website or Facebook timeline. Support is available for Adobe Lightroom, Google Analytics, and Wufoo forms for freelancers. Pricing is three-tiered, ranging from $4 per month for a basic gallery to $19 per month for a personal domain, unlimited websites, full customization, and Viewbook’s iPad app.

Cargo Collective

Cargo Collective is a web publishing platform with an emphasis on portfolio capabilities and support. The service offers public website hosting and “Personal Networks” for users, as well as a support and development forum. Some basic programming skills are needed to complete customization, though many templates are available as well. However, Cargo is best suited for those designers with more development experience.

Cargo sites offer built-in video and audio players for externally hosted content, as well as cloud-based image hosting. An expansive directory lists experienced designers and developers to aid other users in customization. Like Behance, Cargo Collective is community-oriented.

Wix

Wix is a DIY website-building service that lets users create a custom site — with no knowledge of coding necessary. Based on a drag-and-drop format, Wix now offers rich media capabilities, with both Flash and HTML5 support. Hundreds of free templates are available, and the service is based on a freemium model: users create free accounts, and upgrades cost between $4 and $16 per month for features like custom domains and e-commerce designs.

Fresh.li

Fresh.li, like Wix, offers creative-professional portfolio services without requiring programming experience. They boast that users can create “a new website in five minutes,” using either a fresh.li subdomain or a personal URL. Free portfolios aren’t as extensively customizable as other options, and just six templates are available, but paid options allow for customization using HTML and CSS.

Carbonmade

Carbonmade, with its simple but sleek interface, is strictly a portfolio-hosting service: no networking or career services are included, though it’s a useful option for designers who might have less experience and are primarily looking for a place to display their work.

Carbonmade portfolios are functional and relatively minimalist in design, though the site itself features whimsical graphics and illustrations. Free and paid options are available; the latter, at $12 per month, offers domain binding and technical support.

Specialized Portfolio Hosting Services

Certain portfolio-hosting services are geared toward particular categories of creative professionals, or toward goals like career building. The services below are for designers who are looking for specific capabilities from their online portfolios.

The Creative Finder

The Creative Finder is a division of DesignTAXI, a news site with a focus on web design. It offers portfolio hosting and integration with networking and career services, letting creative talent find employment opportunities and professional connections. Portfolios on The Creative Finder function essentially as galleries of a user’s work, allowing for professional contact, networking, private messaging, and linking to profiles on social-media platforms.

Sortfolio

Sortfolio is career-focused, as well. The service offers listings for designers rather than full portfolios. It offers the most functionality to designers who are already relatively established, but who want to expand their reach to big-name clients. Free listings are available, and $99 per month will get you large, interactive display ads and personal-branding options.

Krop

Krop is a tool for job-seeking web designers and creatives; it brings together job listings from recruiters and paid portfolio hosting, at $9.99 per month. Portfolios are fully customizable, and Krop’s back-end creative database lets recruiters target designers by specific capability, location, availability, and professional level.

Subfolio

Subfolio, a DIY portfolio tool, allows users to configure portfolios on their own servers. The service is best for designers with significant development skills: it’s a PHP5 file browser application that lets users manage settings, file types, themes, and more. Subfolio reads the files you place within a directory folder and then turns the content into a website, turning folders into sections and files into pages. It’s currently in private beta, though you can request an invitation here.

Themes and Templates for WordPress

Many web designers choose to host their personal websites and portfolios on WordPress. The platform’s open-source software and powerful CMS offer extensive customization options for users of all development skill levels. Many portfolio-specific themes and templates are available for WordPress, and, as with the hosting services detailed above, options are available for those looking for all degrees of customization. Below are a number of themes and templates that are particularly well suited to web designers.

Responsive Themes

Responsive themes allow portfolio content to be displayed correctly — and attractively — on multiple devices, screen sizes, and resolutions. Given the rapidly increasing importance of the mobile web, it’s crucial for web designers to optimize their portfolios and content for mobile devices if they want to reach a broader audience.

Theme Trust

ThemeTrust.com offers premium WordPress themes with responsive, minimalist interfaces, many of which are optimized for web-design portfolios. Some examples of portfolio themes (all ThemeTrust themes below cost are priced at $49):

Infinity

Infinity, a responsive portfolio theme, features a grid layout and infinite scrolling capabilities. The image-heavy interface allows designers to showcase their work front and center. Among its features are a built-in lightbox, social-media integration, and threaded comments.

Solo

Solo, a single-page portfolio theme, leverages jQuery effects within a minimalist layout. The theme features expanding project displays, automatic scrolling, and integration with Flickr and Twitter.

Reveal

Reveal offers an Ajax-powered portfolio with a responsive layout; the theme features animated jQuery drop-down menus, smooth portfolio filtering animations, and extensive customization options. The image-heavy, grid-system layout displays well on all devices.

Hero

Hero’s parallax home-page banner lets designers prominently feature their best work. The responsive theme includes templates for pagination and archive pages, making it easy to organize a larger body of work.

ThemeForest

ThemeForest.net offers themes and templates for designers with programming backgrounds: for WordPress, Joomla, HTML/HTML5, Magento, and more. Below are examples of responsive themes and templates which work particularly well for web-design portfolios.

Tinfoil

Tinfoil is a one-page portfolio template that includes jQuery tools and minified CSS and JavaScript. Beyond the portfolio itself, the template features a gallery, blog, contact form, and more.

Parallax

Parallax, an HTML portfolio template, offers (of course) a parallax slider, a skeleton grid system, and a three-layered background that creates the illusion of depth. The WordPress version focuses more on blog capabilities, though it also offers extensive customization options, with an intuitive interface.

Milestones

Milestones, a single-page template for either personal or commercial portfolios, is a colorful template with a host of features especially useful for web designers. It offers valid HTML5, a contact form, a jQuery slider for the portfolio itself, and various social-media integration options.

Themify

Themify.me provides WordPress themes that are extensively customizable — without requiring coding knowledge. Theme packages do include PSD files and Themify frameworks if you have programming experience and would like to further customize them.

Folo

For designers focusing primarily on networking, Folo is a useful theme: it allows designers to display their work samples and available services, and features the same customization options as other portfolio themes. Folo’s circular slider and twenty-one layout options — lists or grids — make it a flexible option for designers looking for business opportunities.

Blogfolio

Blogfolio’s interface combines a web-design portfolio with blog posts, turning your portfolio into an integrated personal website. The theme’s image-heavy layout features threaded comments, custom menus, feature boxes, and various grid or list options.

Simfo

Simfo, a responsive portfolio theme, offers full customization for designers with programming experience; it’s coded with HTML5 and CSS3. The theme offers a feature slider, a plugin-free lightbox gallery, and optional search options, RSS, and social-media icons.

In the End

Whether your development skills are as well honed as your design abilities or whether you’re looking for a simple, straightforward online portfolio, there is an array of choices available for hosting services, themes, and templates. The best part? Flexible customization options mean that you can change your portfolio as your skills, needs, and experience changes — all with the support of design communities and networks. What are some of your favorite web design portfolio options?

(rb)

Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week’s collection, we have designs from Finch, Google Ventures, Andy Chak, Loft Resumes and A Student’s Guide to Web Design.

Finch

View the website

Google Ventures

View the website

Andy Chak

View the website

Loft Resumes

View the website

A Student’s Guide to Web Design

View the website

Question Time is back! After hearing how many people found my old question time videos useful I decided to get back into the swing of creating them, this time with some fancy new equipment. In this week’s video I talk about websites I submit my new blog posts to and give an overview of different images resolutions.

This week’s questions

Richard Carpenter:
Whenever you release new content on your blog do you spend time submitting your content to other websites such as article directories and tutorial submission websites? If you do it would be nice to know which sites you are using.

Anonymous:
Hi Chris, I find it hard to get to grip on terms like resolution, PPI and DPI when I make pixel based designs. Often I get stuck with questions like “Is this picture large enough to use?”, “Will my design look pixelated in the end?” Do you have any tips on this?

Ask a question

If you have a question you would like to submit for an upcoming episode with add it to the comments below, or send it to me on my Formspring account.

<?php

function build_calendar($month,$year,$dateArray) {

    // Create array containing abbreviations of days of week.
    $daysOfWeek = array('S','M','T','W','T','F','S');

    // What is the first day of the month in question?
    $firstDayOfMonth = mktime(0,0,0,$month,1,$year);

    // How many days does this month contain?
    $numberDays = date('t',$firstDayOfMonth);

    // Retrieve some information about the first day of the
    // month in question.
    $dateComponents = getdate($firstDayOfMonth);

    // What is the name of the month in question?
    $monthName = $dateComponents['month'];

    // What is the index value (0-6) of the first day of the
    // month in question.
    $dayOfWeek = $dateComponents['wday'];

    // Create the table tag opener and day headers

    $calendar = "<table class='calendar'>";
    $calendar .= "<caption>$monthName $year</caption>";
    $calendar .= "<tr>";

    // Create the calendar headers

    foreach($daysOfWeek as $day) {
         $calendar .= "<th class='header'>$day</th>";
    }

    // Create the rest of the calendar

    // Initiate the day counter, starting with the 1st.

    $currentDay = 1;

    $calendar .= "</tr><tr>";

    // The variable $dayOfWeek is used to
    // ensure that the calendar
    // display consists of exactly 7 columns.

    if ($dayOfWeek > 0) {
         $calendar .= "<td colspan='$dayOfWeek'>&nbsp;</td>";
    }

    $month = str_pad($month, 2, "0", STR_PAD_LEFT);

    while ($currentDay <= $numberDays) {

         // Seventh column (Saturday) reached. Start a new row.

         if ($dayOfWeek == 7) {

              $dayOfWeek = 0;
              $calendar .= "</tr><tr>";

         }

         $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT);

         $date = "$year-$month-$currentDayRel";

         $calendar .= "<td class='day' rel='$date'>$currentDay</td>";

         // Increment counters

         $currentDay++;
         $dayOfWeek++;

    }

    // Complete the row of the last week in month, if necessary

    if ($dayOfWeek != 7) {

         $remainingDays = 7 - $dayOfWeek;
         $calendar .= "<td colspan='$remainingDays'>&nbsp;</td>";

    }

    $calendar .= "</tr>";

    $calendar .= "</table>";

    return $calendar;

}

?>

Usage

To print a table of May 2005, just do:

<?php echo build_calendar(05,2005); ?>

And you'll get a table like this:

May 2005

S	M	T	W	T	F	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Where are we at right now in terms of the best markup for using icon fonts? Let's cover some options I think are currently the best.

1. You want the icon to enhance a word
2. You want the icon to stand alone but still be functional or informational

And our major goals here are:

1. As good of semantics as we can get
2. As little awkwardness for screen readers as possible

This ground has been treaded before, but I think the following techniques are a small step forward.

Enhancing a word

Let's say we have a header like "Stats" and we want to set it apart from other headers on the page and emphasize it's meaning. Semantic ideal:

<h2 id="stats" class="stats-title">Stats</h2>

Result:

So to get that icon in there (remember we're talking font icons here, we can't just pad the left and use a background) we'll need to insert some content.

Using a pseudo element is tempting because 1) they aren't read by most screen readers 2) we don't need dedicated markup for the icon which is a semantic ideal. Unfortunately, VoiceOver on OS X does read the content of pseudo elements. (reference 1, reference 2) Well, perhaps "fortunately" as if I'm reading the spec correctly that's what it is supposed to do. Psuedo elements just aren't in the DOM and thus that probably makes it harder for third-party apps to do.

The good news is that if we use a bit of markup, we can use aria-hidden attribute to prevent it from being spoken.

One more dash of bad news, even with aria-hidden on the markup surrounding the icon, VoiceOver on OS X will announce "HTML Content" when in focus. #dammit.

But alas! We can still win here. If we combine the markup technique and pseudo element technique, we can insert the icon with no VoiceOver weirdness. And as a double-win freebie, this combined technique is ideal for keeping our CSS lean and mean as it requires no class-name-bloat and works well with the next use case we need to cover.

So the final markup for this becomes:

<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h2>

And the CSS is:

[data-icon]:before {
  font-family: icons; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

Holy cow that's easy eh? Notice we aren't using a specific class name for the icon (e.g. like .icon-stats or something), we're using a data-* attribute to hold exactly which character we want to insert. In our icon font, we map those special characters to the icon we want to use. I find this perfectly semantic and even future proof (you could always select uniquely down the line even if you change the character). But if you prefer class names, more power to you, that's fine and doesn't change this technique drastically.

We'll cover mapping characters at the end.

Stand-Alone Icons

Say we have an icon that is a link or in some way functional, but it isn't accompanied by any text. For instance, a shopping cart icon that you can click to go to your shopping cart. Hopefully that functionality is obvious visually, with some kind of rollover state or general design obviousness. But that functionality also needs to be audibly obvious.

Instead of crafting a totally new technique to deal with this (which I've dabbled with in the past) let's lean on what we've already started. A span that inserts the character with a pseudo element, and text that sits right next to it that we kick off the page visually.

<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

We need very little in additional CSS, just a little usability fix applied via class, and a toolbox class for hiding the text but leaving it accessible.

.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Hey, it works

View Demo

In VoiceOver, anyway. Would be great to hear from people who use other screen readers how this holds up.

Building / Mapping Your Icon Font

One "issue" in the world of icon fonts right now is that the majority of them available come pre-mapped to letters. Used with improper markup, the letters become "content" and a part of the semantics of the document. Or worse, read outloud by screen readers.

It almost never makes sense for an icon to be mapped to a letter. Instead, I recommend mapping icons to the closest unicode symbol you can find. For instance, mapping a heart icon to ❤ is a splendid idea. The meaning of symbols is rather relative anyway, so close counts and will be a semantic improvement immediately.

Even better, I like the idea of mapping icons to the "Private Use Area" of Unicode. As I understand it, this is exactly why it exists, to use for your own special characters. Mapped this way, you're in no danger of the character being spoken by a screen reader. Unfortunately at the time of this writing icons mapped this way don't work in even the latest Safari, so it's not yet recommended. Here's the scoop on the Private Use Area issues paraphrased from Keyamoon:

There is a difference between PUA (Private Use Area) and SPUA (Supplementary Private Use Area). The difference is explained a bit here. In my testing, PUA mapping works perfectly in all browsers. SPUA mapping borks in Safari only on Windows. The IcoMoon app only maps to PUA, which is recommendable at least for the short term future.

Here are the steps to follow:

1. Pick out an icon font.
2. Go to IcoMoon and load it up (or use their icon set)
3. Choose the icons you want.
   
   
4. Map them to the characters you want. Best to map to a relavant symbol or PUA.
   
5. Download the fonts/demo.

You can also use Pictos Server to do the icon-picking and mapping, but it only works with Pictos and doesn't help you with choose symbols (you could copy and paste from here). It is a very nice set though and hosts for you and makes it very easy to existing sets without manually swapping out font files.

The Future

In the future, hopefully we can rely on speak: none; working perfectly everywhere so we can go back to using pseudo elements and perfect semantics.

HTML for Icon Font Usage is a post from CSS-Tricks

If this message appears to another site than 1stwebdesigner ,it has been stolen, please visit original source!

Imagine if you had a sea of potential clients who were one click away from working with you. How would it impact your web design business? The secret is building email lists that you can turn to to build relationships and generate leads.

There are many ways to grow and expand your freelance business and one of the most powerful is an email list. For little to no money, you can start a list, build your traffic, and gather more potential leads who will be pining to work with you.

If you are really serious about jumpstarting your web design business, consider email marketing as one of the strategies that will help you get to the top.

WHAT are email lists?

An electronic mailing list allows online webmasters and marketers to send electronic posts, announcements and messages to a list of subscribers at one time. Mailing list software saves subscribers’ email addresses and publishes messages automatically as determined by the webmaster’s schedule.

Twenty years ago, businesses had to stamp, address and physically send mailings to all of their customers. This not only cost money, but also required a lot of manpower.

Fast forward to today and email marketing not only costs pennies to implement, but it is also the one trend that has stood the test of time. While SEO, social media and even PPC have gone through major transformations, email marketing remains one of the most effective strategies to gaining leads and building an online reputation.

WHEN do I start an email list?

Most designers think they need to wait until they have a blog or more of an online presence before starting an email list. But, this simply is not true.

In fact, if you can manage to acquire some email addresses before you start your blog, you will have a number of readers ready to share. This will give you a head start along with instant traffic!

WHY do I need an email list?

Why would web designers need to build mailing lists? There are many reasons why, but we will cover the two most important here:

1. What happens to those potential leads/clients who visit your website but may not be ready to pull the trigger to contact you for services? The worst thing that can happen is they leave your website.

A potential client may be more inclined to give an email address than commit to starting a design job.

An email opt-in box will help you capture those leads and give you the ability to nurture them a little more to urge them to work with you. Your messages will be targeted towards giving helpful advice and also to remind them of your services.

2. Future Work – Potential clients may not need services the moment they subscribe to your list. But when they do, they will know where to come because they will remember who you are from your email messages.

An email list allows designers to build relationships with subscribers and offer advice which makes potential leads to want to work with them.

By building relationships you are creating a reputation for your business which leads to more customers and more revenue!

Are you ready to start a list?

First things first…

You will need an autoresponder. An autoresponder is the software that sends your messages to your subscribers.

Here are a few popular services:

• AWeber
• Mailchimp
• Constant Contact
• Get Response
• iContact

Now that you are hopefully convinced about starting an email list, here are some first steps to get the ball rolling:

• Invite your current contacts – Chances are you already have a list of past clients and their email addresses. Do not automatically add these addresses to your email list. Politely send an email with a link to the page where they can subscribe. Tell them you are starting a newsletter and state the benefits they will receive.

• Subscribers – If you already have a blog, invite your current subscribers via a blog post to subscribe to your list.

How to Get People to Subscribe

To get people to opt in to your list, you must give them an incentive.

Some marketers simply offer updates and this strategy does work for popular websites. But, if you really want to boost your email marketing campaign, I recommend you give away a free gift.

Many marketers offer a free ebook, report, video or course. The gift can be anything as long as it offers value to the subscriber.

Here are some best practices to remember:

• Make it Valuable! You can wrap a green rock in an emerald cover to make it look like a rare gem, but once people receive it, they will know it is a fake. Don’t view your freebie as simply something to give away to get more subscribers. If you do, that’s all it will be and though you will acquire a few subscribers, you will do nothing for your reputation and potentially harm it.

• Who? Your freebie must solve a need for your subscribers. The first step to knowing what to offer is KNOWING your audience.

Who are your customers?
What are their needs?
What are their problems?

As web designers, your audience is not other web designers—unless you are a web design instructor or teacher. Therefore, giving away a report on web design that includes complex programming and tutorials will not be successful.

If your audience is composed of small business owners who run websites but need assistance with marketing, consider a report about optimizing websites for conversions, split testing, usability testing, or the latest internet trends.

The trick to nailing your conversions is to become intimately acquainted with the people you service!

Find out what their specific pain points are and you will find a stream of success.

• Make it substantial! This is not the time for a two-paragraph report on what Aunt Matilda said about web design. If you are giving away a free report, it should be at least eight pages in length and look professional. Use a company logo and professional graphics throughout.

• Edits are Crucial! Many of our readers hail from all over the world and we welcome a diverse group of people. Some, however, are not fluent in English, or they know English, but not well enough to write with perfect grammar. If you fall into these categories, I suggest you hire an English editor to proofread your report or ebook so it has maximum impact.

Hubspot published this short newsletter to further discuss Top Incentives for Driving Email Subscribers.

The Opt-in Box/ Sign Up form

The Opt-in box is the site of the email address query where subscribers add their email addresses. The design and look of this box is very important and will influence conversions.

Design

The design of the subscription box should look like an extension of your website, but stand out from the page just enough to be noticed.

Here are some important design elements to remember:

1. Attention-grabbing headline

The headline must catch your web visitors’ eyes immediately. It should be in a different typeface than the rest of the copy and solve a problem for your visitors. After reading your headline, your web visitors should feel that you know their problems and your newsletter/mailings will help them.

2. Graphics

The graphic is not necessary in all cases, but it is a good practice when you are giving away a report or ebook. The graphic should look like the 3D physical form of the item you are offering in return for a subscriber’s email address.

3. Benefits

Mention a few benefits or even one so visitors will know what to expect. Inform them of what they will receive and why they will want it. If you are not offering a freebie, use the copy space to tell potential subscribers the benefits of joining your newsletter and what they can expect.

Remember that an email address is someone’s private possession. You have to earn the right to receive it.

4. FREE

IF you are offering a freebie, add the word “Free” to make a bigger impact. Also, don’t forget to tell your visitors to enter their email to receive free access to their gift.

Tip: It’s a good practice to inform your subscribers that you will never share their email and you hate spam just as much as they do.

5. Call to Action

Your call to action should be interesting and attention-grabbing. Consider text like “Get Instant Access” or “Sign Me Up”.

Location

The location of the subscription form will also influence your conversions. It is recommended to test the placement to determine the optimal position.

Here are the most popular locations:

Below Blog Post

Notice how John Chow speaks DIRECTLY to the person by stating, “Did you enjoy this blog post?” This gets the reader’s attention more than a generic form.

Blog Sidebar

This is the most popular place to put an opt in because it is visible without being obtrusive to readers.

About Page

Don’t ignore the chance for conversions on your About page. As long as you are not overusing your opt-in box, the About page is a great place to capture email addresses.

Pat Flynn of SmartPassiveIncome.com performed a test and saw a marked increase in subscriber opt-ins when he added a form to his About page. He explains his results here.

Footer

Many marketers use a footer opt-in as a secondary source. However, some web designers use the footer opt-in exclusively. You will need to test to see which scenario works best. It may be a good place to start.

Pop Up

Popups actually perform very well even though they can be annoying. My advice is to use them at your own risk. Some very prominent marketers swear by them and others stay far away.

Dan Zarrella, social media scientist, has been using the popup for years now. It annoys me because every time I click on a new page it continues to disrupt my reading, but he offers incredible value with his information. If you want to try the popup, make sure to test different positions to see which location performs the best.

The Messages

The main goal of your email campaigns is to develop relationships, nurture leads and offer value WITHOUT selling repeatedly and spamming your subscribers’ inboxes.

What should the email messages consist of?

Here are some ideas:

• Recent blog posts
• Helpful industry tips
• Recent projects
• Links to helpful resources
• Company news
• Contests and promotions
• Special offers
• Incentivized surveys
• Personal stories (occasionally)

When composing your messages, here are some important tips to keep in mind:

• Don’t send the same old content everyone reads. Even if it is similar, find a way to make it creative and interesting.

• Keep it short! Use bullets and one to two sentence paragraphs.

• Make your subscribers feel exclusive. Use their name, and address them directly as if you are talking only to them. Similar to how people feel when they pay thousands of dollars to be part of a club membership, your subscribers will feel special if you make an extra effort.

• Don’t know where to start? Curate! If you are not a writer and you do not have the budget to hire anyone, consider researching the web for the top information and send the links to your readers.

• Give people the option to unsubscribe.

• Don’t take unsubscribes personally. Sometimes I unsubscribe from a list simply because I am trying to streamline my emails. It happens to everyone. However, when you notice a bundle of them at one time or a continuous flow, it may be time to adjust your campaign.

• Be careful not to use words that trigger SPAM filters or your email will end up in your subscribers’ junk mail. Here is an extensive list of email SPAM trigger words.

What NOT to do

Worried about making mistakes? Hubspot published this free Ebook that addresses the top 12 mistakes made by email marketers.

Dirty Dozen: Email Newsletter Mistakes Nearly Everyone Makes

Are we done yet?

We’ve just scratched the surface of the depth of email marketing. Here are some more fantastic resources to help you create highly effective, traffic-driving email marketing campaigns.

Need some more ideas on how to grow your email list? Here are 25 more ways

The Complete Guide to Email Marketing
7 Steps to an Email Optin Page That Works
Free Guide: How to Optimize Email Marketing for Conversions
How to Segment and Integrate Your Emails for Better Results
The CAN-SPAM Act – The Compliance Guide to Email Messaging

Success Stories

Here are three true life success stories of people just like you who grew their businesses by using email marketing:

Bella Web Design

Desiree Scales started Bella Web Design as a tool to make money while staying home to spend more time with her growing family. She touts her email list as the turning point in her business and the tool that helped her generate more leads and expand her horizons. She was also able to attract bigger clients which increased her revenue.

QuickSprout

Neil Patel started QuickSprout as a blog to teach others how to market online. He also started many software companies such as Crazy Egg and KISSmetrics. He is known as a mover and a shaker in the industry and his huge subscriber list is proof of his success.

Smart Passive Income

Pat Flynn started from nothing and has built his list to over 25,000 subscribers. With his blog he teaches people how to make a passive income online and he has built quite a reputation for himself in a short period of time.

Let’s Get to It!

So now that you have nothing holding you back from starting a list, let’s get going! Actually, I know how difficult it can be to focus and work on a new business building strategy. I am in the middle of creating my free download so I understand how hard it is to juggle more work into an already hectic schedule. But if we keep putting it off, we will never accomplish our goals.

Let’s be accountable to each other and make starting an email list our goal for the rest of 2012! Who’s with me?

CSS3 has changed the way of representing websites, with lots of advanced properties like border-radius, box-shadow, border-image, transform etc. CSS3 gives web designers complete independence to achieve the desired results. CSS3 has opened up many exciting options to refresh the creativity levels of a designer. Despite being futuristic web styling technology, CSS3 has not yet been accepted completely, or in other words we can say CSS3 still has a long way to go to prove itself to the entire community of web designers.

The main problem with CSS3 is its compatibility issues with web browsers, most of the modern web browsers have full or partial support for CSS3 and other related web technologies. If you are an Internet Explorer user or you want your site to be IE compatible then you have to think twice before using CSS3, because IE has major compatibility issues regarding some CSS3 properties.

Now you have two options to solve the problem – first change your choice of Internet Explorer and adopt other browsers like Firefox, Chrome or Safari or second, use the following tools and resources for Internet Explorer to beat the compatibility issue.

CSS3 Compatibility Tools, Resources and References for Internet Explorer

Transformie
Transformie renders CSS Transforms by mapping the native IE Filter API to the CSS transitions as proposed by Webkit.

CSS3 PIE: CSS3 decorations for IE
Use CSS3 Pie to add rendering support to Internet Explorer 6, 7 or 8 for the more popular CSS3 rendering features: border-radius; box-shadow; border-image; multiple background images; linear-gradient as background image.

CSS3 Support for Internet Explorer 6, 7, and 8
This script rebuilds some of the elements in Vector Markup Language (VML), an IE-specific vector drawing language.

Sizzle JavaScript Selector Library
Supports virtually all CSS3 Selectors – this even includes some parts that are infrequently implemented such as escaped selectors (“.foo\\+bar”), Unicode selectors, and results are returned in document order.

cssSandpaper
This script is not only useful for developers who want to support CSS3, it is also useful in other browsers which implement their own vendor-specific variants of these properties.

CSS Compatibility and Internet Explorer
If your website targets browsers that include earlier versions of Internet Explorer, you want to know the level of CSS compliance for those versions.

Modernizr
Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more.

YUI 2: Selector Utility
The YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing compact shorthand for collecting, filtering, and testing HTML elements.

eCSStender
eCSStender enables developers to patch CSS support in browsers and experiment with new features. It also enables designers to keep browser-specific hacks out of their CSS files.

52Framework
The 52Framework provides an easy way to get started using HTML5 and CSS3 while still supporting all modern browsers (including IE6).

Curved Corner (border-radius) Cross Browser
This is a behavior .htc file for Internet Explorer to make the CSS3 property “border-radius" work on all browsers.

CSS3 Please! The Cross-Browser CSS3 Rule Generator
CSS3 Please! is a small utility that allows you to edit the document in real-time and create your own personalized cross browser CSS3 rule.

When can I use…
When can I use… is a compatibility table for features in HTML5, CSS3, SVG and other up and coming web technologies.

FindMeByIP – CSS3 Properties

Internet Explorer 10 Test Drive
You can try the Internet Explorer Platform Preview, it includes HTML5 & CSS3 demos and speed demos.

More Useful Resources

• CSS3 Compatibility Tools, Resources and References for Internet Explorer

Conclusion

Despite being among the preliminary browser category, Internet Explorer has taken downfall against tough competition from Google Chrome and Firefox which have more robust browser engines and are more supportive to latest web technologies like CSS3 and HTML5. Internet Explorer still has a long way to go to prove itself against these advanced technologies and needs to build something extraordinary.

Meanwhile you can use the above mentioned resources and tools to make your Internet Explorer more energetic and responsive to CSS3.

• 7 Non-Web-Based Wireframe Tools
• ProtoShare: Effective and Efficient Website Wireframing and Application Prototyping
• MightyDeals Giveaway: 5 Winners of Any Current Deal!
• Top 10 Ways to Embed Video into a Web Page

The story of usability is a perverse journey from simplicity to complexity. That’s right, from simplicity to complexity—not the other way around.

If you expect a “user-friendly” introduction to usability and that the history of usability is full of well-defined concepts and lean methods, you’re in for a surprise. Usability is a messy, ill-defined, and downright confusing concept. The more you think about it—or practice it—the more confusing it becomes. We learned that the history of usability is a “perverse journey from simplicity to complexity”.

What Is Usability?

Early Roots of Usability

If we go far back in history, Vitruvius (1st century BC) was probably the first person to lay forth systematic and elaborated principles of design. His three core design principles became very influential:

1. Firmitas: The strength and durability of the design;
2. Utilitas: A design’s usefulness and suitability for the needs of its intended users;
3. Venustas: The beauty of the design.

Vitruvius’ work was an inspiration to people like Leonardo da Vinci, who drew the well-known Vitruvian Man (fig. 1 below). By empirically measuring and calculating the proportions of the human body, and emphasising the “utilitas” principle, Vitruvius may be considered the first student of ergonomics and usability.

Figure 1: The Vitruvian Man drawing was created by Leonardo da Vinci circa 1487 based on the work of Vitruvius.

Military Roots

The discipline of usability is also rooted in the discipline called Human Factors, which started as military personnel asked themselves the very morbid question:

“What design do we need to kill more enemies through better matching soldier and weapon? And thus avoid getting killed ourselves.”

Both World War I and World War II fueled research into Human Factors. When designing artillery cannons, for example, usability yielded more precision, greater kills, and shorter training of personnel.

Thus, military designers could extract some very concrete usability metrics. For example:

• How quickly will a new crew member learn how to use the artillery cannon (now that the former crew member is dead)?
• How many rounds per minute (ordnance) is the cannon able to fire with an inexperienced versus an experienced crew?
• How will improving the design of the cannon improve target acquisition (and thus kill more enemies)?
• How does a design improvement decrease soldier fatigue (as a consequence of a lighter cognitive load)?

Figure 2: Photograph of the French 320 mm railway gun Cyclone, taken in Belgium in 1917. The gun required not only trained personnel to fire it, but also trained personnel to drive it.

Figure 3: A 155 mm artillery shell fired by a United States 11th Marine Regiment’s M-198 howitzer. The setup time (and thus usability) is essential as anti-artillery weapons necessitate that the position of the howitzer be changed very quickly after firing.

Recent Roots of Usability

The concept of usability has its more recent and direct origins in the falling prices of computers in the 1980s, when for the first time it was feasible for many employees to have their own personal computer. In the 80s, most computer users had practically no, or only basic, training on operating systems and applications software. However, software design practices continued to implicitly assume knowledgeable and competent users, who would be familiar with technical vocabularies and system architectures, and also possess an aptitude for solving problems arising from computer usage.

Such implicit assumptions rapidly became unacceptable. For the average user, interactive computing became associated with constant frustrations and consequent anxieties. Computers were obviously too hard to use for most users, and often absolutely inpractical. Usability thus became a key goal for the design of any interactive software that would not be used by trained technical computer specialists.

The current understanding of usability is different from the early days in the 1980s. Usability used to be a dominant concept but this changed with research increasingly focused on usage contexts. Usage quality no longer appeared to be a simple issue of how inherently usable an interactive system was, but how well it fitted its context of use.

Usability Evaluation: What’s Good And What’s Bad?

Usability is a contested historical term that is difficult to replace. User experience specialists have to refer to usability, since it is a strongly established concept within the IT landscape. In simplified terms, usability work is about finding out what’s good and what’s bad. However, when we examine the hundreds of usability evaluation methods in use, we do see that different approaches to usability result in differences over the causes of good and poor usability. That may sound complicated but let’s take two different approaches to usability:

1. If you think usability is a feature of an interactive system, your approach to usability may be called essentialist—i.e. poor/good usability resides in the “essense” of the system. You will typically find yourself saying things like “that website is not user-friendly”, “a website or system has poor usability when there is no visibility of system status”, “I can reliably measure which website has the best usability”, etc. This means you think that all causes of user performance are due to technology. In that case, you will typically use system-centered usability inspection methods to identify such causes.
2. On the other hand, if you think usability is a feature of the interaction between user, computer and the context, your approach to usability is contextual—i.e. depending on the context. This means that you think questions of user performance have different causalities, some due to technologies, and others due to some aspect(s) of usage contexts, but most due to interactions between both. Several evaluation and other methods may be needed to identify and relate a nexus of causes. You will often find yourself saying vague things like “that depends…”, “well… this website checkout procedure is great for male, fact-oriented, middle-aged buyers, but not for an impatient teenager doing the purchase on his smartphone sitting in the bus”, etc.

The reason I mention the essentialist/contextual distinction is that anyone involved with usability should—ideally—be able to say “this website/technology/system is good, that one is bad”. After all, isn’t that what your client or boss is paying you to do?

To answer if the usability of a website is good or bad you have to employ a usability method. And your choice of usability method will depend on your approach to usability—whether you admit it or not. Maybe you’ll deny it and say, “I’ve never heard of any essentialist/contextual approaches to usability.” However, that would be like selling French wine without ever having spent time in a French vineyard. You can do it, but at some point your client or boss will start asking questions you can’t answer. Or your decisions will have unexpected side-effects.

So what usability method should you choose to determine “what’s good and what’s bad”?

Analytical And Empirical Evaluation Methods

Usability work can involve a mix of methods and the mix can be guided by high level distinctions between methods, for example the distinction between analytical and empirical evaluation methods.

1. Analytical evaluation methods are based on examination of an interactive system and/or potential interactions with it. You analyse the system or analyse the interaction with the system.
2. Empirical evaluation methods, on the other hand, are based on actual usage data.

Analytical evaluation methods may be system-centred, like Jakob Nielsen’s Heuristic Evaluation or interaction-centred, like the Cognitive Walkthrough method. Design teams use the resources provided by a method (e.g. heuristics) to identify strong and weak elements of a design from a usability perspective.

Three types of analytical evaluation methods:

• Inspection methods tend to focus on the causes of good or poor usability.
• System-centered inspection methods focus solely on software and hardware features regarding attributes that will promote or obstruct usability.
• Interaction-centered methods focus on two or more causal factors (i.e. software features, user characteristics, task demands, or other contextual factors).

Figure 4: Jakob Nielsen’s Heuristic Evaluation is a good example of an analytical evaluation method. Heuristic Evaluation became the most popular user-centered design approach in the 1990s, but has become less prominent with the move away from desktop applications.

Empirical evaluation methods focus on evidence of good or poor usability, i.e. the positive or negative effects of attributes of software, hardware, user capabilities and usage environments. User testing is the principal project-focused method. It uses project-specific resources such as test tasks, users, and also measuring instruments to expose usability problems that can arise in use. Also, empirical experiments can be used to demonstrate superior usability arising from user interface components (e.g. text entry on mobile phones) or to optimise tuning parameters (e.g. timings of animations for windows opening and closing).

Such experiments assume that the test tasks, users and contexts allow generalisation in regards to other users, tasks and contexts. Such assumptions are readily broken, e.g. when users are very young or elderly, or have impaired movement or perception.

How To Balance The Mix: Why Is It Difficult?

Achieving a balanced mix of evaluation methods is not straightforward, and involves more than simply combining analytical and empirical methods. This is because there is more to usability work than simply choosing and using methods.

Evaluation methods are as complete as a Chicken Fajita Kit, which contains very little of what is actually needed to make Chicken Fajitas: no chicken, no onion, no peppers, no cooking oil, etc. Similarly, user testing ‘methods’ miss out equally vital ingredients and project-specific resources such as participant recruitment criteria, screening questionnaires, consent forms, test task selection criteria, test (de)briefing scripts, target thresholds, data analysis methods, or reporting formats.

There is no complete published user testing method that novices can pick up and use ‘as is’. All user testing requires extensive project-specific planning and implementation. Much usability work is about configuring and combining methods for project-specific use.

Figure 5. Chicken Fajita Kit. Copyright Old El Paso. All rights reserved.

The Only Methods Are The Ones That You Complete Yourselves

When planning usability work, it is important to recognise that so-called ‘methods’ are simply loose collections of resources better understood as ‘approaches’. There is much work in getting usability work to work, and as with all knowledge-based work, methods cannot be copied from books and applied without a strong understanding of fundamental underlying concepts. All methods must have unique usage settings that require project-specific resources. For user testing, for example, these include participant recruitment, test procedures and (de-)briefings. There are no universal measures of usability that are relevant to every software development project.

The Position So Far

1. There are fundamental differences on the nature of usability, i.e. it is either an inherent property of interactive systems, or an emergent property of usage. There is no single definitive answer to what usability ‘is’.
2. There are no universal measures of usability and no fixed thresholds above or below which all interactive systems are or are not usable. There are no universal, robust, objective and reliable metrics. All positions here involve hard won expertise, judgement calls, and project-specific resources beyond what all documented evaluation methods provide.
3. Usability work is too complex and project-specific to admit generalised methods. What are called ‘methods’ are more realistically ‘approaches’ that provide loose sets of resources that need to be adapted and configured on a project by project basis.

Readers could reasonably draw the conclusion from the above that usability is an attractive idea in principle that has limited real-world application. However, the reality is that we all continue to experience frustrations when using interactive digital technologies, and even we would say that we find them difficult to use. Even so, frustrating user experiences may not be due to some single abstract construct called ‘usability’, but instead be the result of unique complex interactions between people, technology and usage contexts.

Usability In The Design Room

In well directed design teams, there will not be enough work for a pure usability specialist. This is evidenced by a trend within the last decade of a broadening from usability to user experience expertise. User experience work focuses on both positive and negative value, both during usage and after it. A sole focus on negative aspects of interactive experiences is becoming rarer. Useful measures of usage are extending beyond the mostly cognitive problem measures of 1980s usability to include positive and negative effect, attitudes and values, e.g. fun, trust, and self-affirmation. The coupling between evaluation and design is being improved by user experience specialists with design competences.

Many user experience professionals have also developed specific competences in areas such as brand experience, trust markers, search experience/optimisation, usable security and privacy, game experience, self and identity, and human values. We can see two trends here. The first involves complementing human-centered expertise with strong understandings of specific technologies such as search and security. The second involves a broadening of human-centered expertise to include business competences (e.g. branding) and humanistic psychological approaches (e.g. phenomenology, meaning and value).

As such, a usability person is not a lone judge who makes the call “is this usable?” Instead, the usability proficient person will often be a team player taking on many roles in the product development lifecycle.

Figure 6 A-B. From Solo Specialist to Team Member: User Experience—as opposed to Usability—as an integrated part of design teams. Copyright of leftmost picture: Flickr user ‘Tety’ through the Creative Commons Attribution Share-Alike 2.0 licence

Conclusion: Are You Confused?

This Smashing Magazine article is a digested version of the monstrous 25,000 word encyclopedic introduction to the history of Usability Evaluation at Interaction-Design.org. It’s available in a special version for Smashing readers.

Did this article confuse you more than it informed you? Well, it should! If you want an answer to the question of “what is usability?”, it’s just as complicated as asking “what is beauty?” The more you think about it, the less you feel you know. I don’t believe you will ever find the answer to the question “what is usability?”, but I nevertheless hope you—as I—will continue to ask that very question. And be confused again and again. Confusion is—after all—the mother of wisdom.

The concept of usability is a product of millions of designers trying for decades to describe what they are doing to make technology easier and more pleasant. As such, the concept is immensely complex. It may have started out as a simple concept but the more people who are involved with usability, the more multi-faceted the concept will become. Therefore, the history of usability is a journey from simplicity to complexity. Is that journey worth the effort? Certainly! Anyone who masters usability—and all its facets—has a power position when it comes to designing easy/pleasant/cool/useful/usable/etc. technology. As confusing as that endeavour may be!

(jc) (il)

---

© Mads Soegaard for Smashing Magazine, 2012.

There are some illustrators who take their talents a little bit deeper, while still scratching the surface. Bad pun aside, scratchboard illustration is an amazing artform, one that we our turning our inspirational spotlight on for this new post. By scratching their works from these special surfaces, and at times combining them with paints or inks, these creative illustrators give life to some truly inspired pieces.

Below is a collection that features just a few of these very talented artists working with this breathtaking, and time consuming artform.

Scratching the Surface

Mark Summers

Mark Summers has a gallery that is full of so many sensational illustrations that it was hard to narrow it down for the post. His caricatures and illustrations are richly detailed and overflowing with creativity.

Madhatter

Lincoln

Wagner

Brahms

Gilbert & Sullivan

George Eliot

Edgar Allen Poe

James Joyce

Heather Lara

Heather Lara (also known as heatherzart on DA), has an overly impressive body of work which tends to focus on animal portraits. Her scratchboard illustrations, those with color and those without, highlight the delicate pieces that can be etched from the surfaces of these boards.

Gotcha! by Heatherzart

Love Me The Most by Heatherzart

Izu 4

Billy

Narmada 3

Pombe 1

Tiger 1

Cheetah Snuggle

Unexpected Guest

A Glimpse of the Past

Eric Sabee

Eric Sabee has a gallery of work that differs from some of the others on the list. Not only are they some of the more colorful scratchboard pieces showcased, the illustrative characters and imaginative fantasy works show another side of this inspiring technique at play.

Great Omen Raven

Dimension Diver

Jimi Hendrix

Black Watch Elite

Sadranis

Arbiter of Fate

Cristina Penescu

Cristina Penescu is another artist whose work focuses on animals, with an impressive collection of work in her portfolio. So many pieces that are not only finely crafted, but that also capture so much emotion. Brilliantly capturing the heart and beauty of nature and her subjects.

Desperation

Hunger Crisis

Cautious Observation

Bearly Interested

Into the Light

Hopeful

Focused

Within Reach

Other Fine Works and Artists

Scratchboard & Clayboard by Patrushka

SCRATCHBOARD by Kevin Fleming

Walden Scratchboard by Caitlyn Knepka

Steeplechase Jump Jump by Tifani Carter

Walls of Separation by Carl Licence

SCRATCHBOARD by Kevin Fleming

kitteh by ohin

Tall Girl – Colored by shonechacko

Walls of Separation 2 by Carl Licence

scratchboard flamingo by rah-bop

SCRATCHBOARD by Kevin Fleming

Your Turn

Now that we have wrapped up this end of the showcase, we want to hear from you. What were some of your favorite pieces or artists from this collection? Do you know of any other pieces or scratchboard illustrators that didn’t get a mention? Feel free to let us know in the comment section.

(rb)

If you’re in software development, new techniques, languages and concepts pop up all of the time. We all feel those nagging doubts every now and then: “can I keep up with the changes and stay competitive?” Take a moment, and sum a line from my favourite movie, Casablanca: “The fundamental things apply, as time goes by.”

What’s true for love, is true for code.

What’s true for love, is true for code. The fundamental things will always apply. If you have an understanding of the underlying ideas of software development, you will quickly adjust to new techniques. In this tutorial, we will discuss three basic principles and mix them with many more. They provide a powerful way of managing the complexity of software. I’ll share some of my personal opinions and thoughts, which, hopefully, will prove useful when it comes to applying them to code and real-world projects.

---

Principle – Don’t Repeat Yourself

A basic strategy for reducing complexity to managable units is to divide a system into pieces.

This principle is so important to understand, that I won’t write it twice! It’s commonly referred to by the acronym, DRY, and came up in the book The Pragmatic Programmer, by Andy Hunt and Dave Thomas, but the concept, itself, has been known for a long time. It refers to the smallest parts of your software.

When you are building a large software project, you will usually be overwhelmed by the overall complexity. Humans are not good at managing complexity; they’re good at finding creative solutions for problems of a specific scope. A basic strategy for reducing complexity to managable units is to divide a system into parts that are more handy. At first, you may want to divide your system into components, where each component represents its own subsystem that contains everything needed to accomplish a specific functionality.

For example, if you’re building a content management system, the part that is responsible for user management will be a component. This component can be divided into further subcomponents, like role management, and it may communicate with other components, such as the security component.

As you divide systems into components, and, further, components into subcomponents, you will arrive at a level, where the complexity is reduced to a single responsibility. These responsibilities can be implemented in a class (we assume that we’re building an object-oriented application). Classes
contain methods and properties. Methods implement algorithms. Algorithms and – depending on how obsessive we want to get – subparts of
algorithms are calculating or containing the smallest pieces that build your business logic.

The DRY principle states that these small pieces of knowledge may only occur exactly once in your entire system.

They must have a single representation within it.

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

Note the difference between the piece of knowledge, and its representation. If we’re implementing the database connection in our CMS, we will have a code snippet that will initalize the database driver, pass the credentials, and save a reference to the connection in a variable. The code snippet is part of the knowledge, it’s about how something is achieved. The variable with the reference to the connection is the representation of that knowledge – and this can be used by other parties. If the database credentials change, we will have to change the snippet – not its representation.

In a perfect application, every small piece of business logic encapsulates its knowledge in a representation, namely a variable or a class property.
This variable itself is encapsulated in a class that can be described as a representation of a responsibility. The class is encapsulated in a component that can be described as a representation of functionality.

This can be proceeded until we reach the top level of our software project – that is, a stack of representations with increasing complexity. This way of looking at the complexity of software is called modular architecture, and DRY is an important part of it.

Achieving DRYness

DRY is a philosophy that packages logic into representations.

There are many ways of achieving DRYness. Hunt and Thomas suggested (among other things) code generators and data transforming. But, essentially, DRY is a philosophy that packages logic into representations.

As every part of your application can be seen as representation, every part exposes specific fragments of your underlying logic: The user management exposes access to registered users of the CMS, the user class represents a single user and exposes his properties (like the username). It retrieves the properties, via the representation of the database.

DRY and modular architecture require good planning. To achieve a representational hierachy from bottom-up, divide your application in a hierarchy of logically separated smaller parts and let them communicate with each other. If you have to manage larger projects, organizing them into components and using DRY within the components is a good idea. Try to apply the following rules:

• Make a visual hierarchy of your software application and map the main components to it. Complex projects may require a dedicated map for each component.
• If you’re arriving at a level of connected responsibilities, you may want to switch to UML diagrams (or similar).
• Before writing a chunk of code, name its hierarchy in your software project. Define what it’s representing, and be sure you know its role in the surrounding component.
• Define what the representation should expose to other parties (like functions to execute SQL in a database driver) and what it should hide (like the database credentials).
• Ensure that representations do not rely on representations of another complexity level (like a component that relies on a class in another component).

The database driver is a simplified example, as there are many more layers involved in the real world (such as a specific database abstraction layer), and there is much more you can do to encapsulate logic – especially diving into design patterns. But even if you’ve just started with coding, there’s one thing to keep in mind:

When you find yourself writing code that is similiar or equal to something you’ve written before, take a moment to think about what you’re doing and don’t repeat yourself.

In the real world, applications that are a 100% DRY are hard, if not impossible, to achieve. However, applications that are unDRY to an unacceptable degree – and therefore hard to maintain – are quite common. Hence, it’s not surprising to learn that more than 50% of all software projects fail – if you’re taking a look at the code.

Many people tend to think that bad code is produced by bad coders. In my experience, this is very much an exception. More often than not, bad code is produced by bad account managers and an overall misconfiguration of process management in companies.

Bad code is rarely produced by bad coders.

An Example

DRYness is achieved by good planning.

As an example, say you’re hired as a technical consultant by a company that has problems with code quality and maintenance. You review the source and you see hacks and code duplication – the code is not DRY. This is a symptom of bad code quality, it’s not the reason. If you take a look at the version control system – aka the history of the code – chances are that you may find hacks that were introduced at times near deadlines and milestones. Take the time to review what changes are made, and you will likely be confronted with a change in requirements.

As noted above, DRYness is achieved by good planning. Forced changes on a tough deadline are forcing developers to implement dirty solutions. Once the code is compromised, the principle of DRY is likely to be sacrificed completely upon further changes.

There’s a reason why the most successful corporations in the IT business were founded by people with very good technical understanding – or even coders themself: Bill Gates, Mark Zuckerberg, Steve Wozniak, Steve Jobs, Larry Page, Sergey Brin and Larry Ellison know (or knew) what efforts are needed to implement something. Contrary, many companies tend to lay the requirements for engineering into the hands of account managers, and the conceptual part in the hands of business consultants…people who have never implemented anything.

Hence, many technical concepts work only in Powerpoint, Photoshop, and on 27″ widescreen displays. This may have been a successful approach in the days of, more or less, static websites, but it’s not nowadays – with interactive applications on multiple devices. Because coders are the last in the line, they are the ones who have to apply quick fixes on errors in the concept. If this is accompanied by an account manager, who can’t stand up to a client that likes to make last-minute changes, plans are thrown in the garbage, and something quick and dirty is implemented. The code becomes unDRY.

This example is a bit extreme (nevertheless, I have witnessed such scenarios), but it demonstrates that DRY is a theoretical concept, which is challenged by various parties in the real world. If you’re working in a company that forces you to work in this manner, you might suggest some changes to the process (like introducing technical expertise at an earlier stage of technical projects).

If you have a hands-off approach, keep reading! The You ain’t gonna need it principle will come to the rescue.

---

Principle – Keep it Simple Stupid

The simplest explanation tends to be the right one.

In the late 19th century, physicists struggled to explain how gravity, magnetism and optics interact, when it comes to large distances – like the distances in our solar system. Hence, a medium named aether was postulated. It was said, that light is traveling through this medium, and that it’s responsible for effects that couldn’t be explained otherwise. Through the years, the theory was expanded with assumptions that adjusted the aether postulate to the results of experiments. Some assumptions were arbitrary, some introduced other problems, and the whole theory was quite complex.

An employee of the swiss patent office, Albert Einstein, suggested to get rid of the whole aether theory when he introduced a simple, yet revolutionary idea: All the oddness in calculating with large distances would fade away if we’d accept that time is not a constant; it’s relative. This incredibly of out-of-the-box thinking to come to the simplest explanation with the fewest assumptions to select between competing scenarios is referred to as Ockhams’s Razor.

There are similar concepts in many areas. In software development (and others), we refer to it as KISS. There are many variants for this acronym, but they all mean that you should strive for the simplest way of doing something.

HTTP

The Hypertext Transfer Protocol is widely considered to be a perfect example for a simple solution: designed to transfer hypertext based documents, it is the backbone of highly interactive and desktop-esque applications nowadays. Maybe we have to find solutions for limitations in the protocol, and maybe we have to replace it someday. However, status quo is: based on a few request methods (like GET and POST), status codes and plain text arguments, HTTP has proved to be flexible and robust. That’s why HTTP has been repeatedly pushed to the limits by web developers – and is still standing.

We take this approach for granted, but the history of software development and standardization is full of overly complex and half-baked solutions. There’s even a dedicated made-up word for it: bloatware. Software like this is also described to be DOD, dead on arrival. I have a theory that is very similar to my theory of unDRY code, when it comes to bloatware … However, the success of the internet can be described as a success of simple, yet efficent solutions.

So what’s required to come to the simplest solution possible? It all comes down to maintainability and comprehensibility in software development. Hence, KISS kicks in during the phase of requirements engineering. When you think about how to transform a client’s requirements to implementable components, try to identify the following parts:

• Functionality that has an inappropriate ratio between benefit and efforts.
• Functionality that is highly dependent on other functionality.
• Functionality that is likely to grow in complexity.

There are many people involved in the conceptual process, who do not have the technical expertise to make a reliable cost-benefit analysis

I was once working on a project, where the client wanted to import Excel spreadsheets into his crew management software. This was a clear match. Excel is a proprietary software with a complex document format. The format is complex, because it’s feature-rich: You can add graphs and other things to it – features that were not needed by the client. He was simply interested in the numbers. Thus, implementing the Excel import would require the implementation of a lot of unnecessary functionality. On top of that, there are multiple versions of Excel versions, and Microsoft fires off another release each year. This would have been hard to maintain, and it comes with additional costs in the future.

We ended up implementing a comma-separated-value import. This was done with a few lines of code. The overhead of the data was really small (compare an Excel sheet to it’s CSV equivalent) and the solution was maintainable and future-proofed. Excel was ready to export CSV anyway (as well as other programs that the client might want to use in the future). Since the solution was low-priced as well, it was a good application of the KISS principle.

To sum up: try to think out-of-the box if a task looks complicated to you. If someone is explaining to you his requirements, and you’re thinking that it’ll be tough and complex to implement, you’re right under almost any circumstances. While some things are just that – hard to implement – overcomplicated solutions are quite usual. This is the case because there are many people involved in the conceptual process, who do not have the technical expertise to make a reliable cost-benefit analysis. Hence, they don’t see the problem. Double-check the requirements whether they are really stripped down to the essence that the client needs. Take the time to discuss critical points and explain why other solutions might be more suitable.

---

Principle – You “Ain’t Gonna Need It

Coding is about building things.

When Google+ launched, Mark Zuckerberg – founder of Facebook – was one of the first who created an account in the social network that was aiming to take his own down. He added just one line to the About me section: »I’m building things.«. I honestly think that this is a brilliant sentence, because it describes the pure essence of coding in a few simple words. Why did you decide to become a coder? Enthusiasm for technical solutions? The beauty of efficiency? Whatever your answer is, it may not be »building the 1.000.001th corporate website with standard functionality«. However, most of us are making money that way. No matter where you are working, you’ll likely be confronted with boring and repetitive tasks every now and then.

80% of the time spent on a software project is invested in 20% of the functionality.

The You ain’t gonna need it principle (YAGNI) deals with these tasks. It basically translates to: If it’s not in the concept, it’s not in the code. For example, it’s a common practice to abstract the database access in a layer that handles the differences between various drivers, like MySQL, PostgreSQL and Oracle. If you’re working on a corporate website that is hosted on a LAMP stack, on a shared host, how likely is it that they will change the database? Remember that the concept was written with budget in mind.

If there’s no budget for database abstraction, there’s no database abstraction. If the unlikely event of a database change does occur, it’s a natural thing to charge for the change request.

You may have noticed the difference between You ain’t gonna need it and DRY-driven modular architectures: The latter is reducing complexity by dividing a project into manageable components, while the former is reducing complexity by reducing the number of components. YAGNI is similar to the KISS principle, as it strives for a simple solution. However, KISS strives for a simple solution by trying to implement something as easily as possible; YAGNI strives for simplicity by not implementing it at all!

Theodore Sturgeon, an American sci-fi author, stated the law: »ninety percent of everything is crap«. This is a very radical approach, and not overly helpful in real-world projects. But keep in mind that “crap” can be very time consuming. A good rule of thumb is: roughly 80% of the time spent on a software project is invested in 20% of the functionality. Think about your own projects! Everytime I do, I am surprised by the accuracy of the 80:20 rule.

If you’re in a company that is notorious for tight deadlines and imprecise concepts, this is a powerful strategy. You won’t be rewarded for implementing a database abstraction layer. Chances are that your boss does not know what a database abstraction layer even is.

While this concept may sound simple, it can be hard to differ the necessary from the unnecessary parts. For example, if you’re comfortable with a library or a framework that uses database abstraction, you won’t save much time in dumping it. The key concept is another way of looking at software: we’re trained to write future-proof and maintainable software. This means that we are trained to think ahead. What changes may occur in the future? This is critical for bigger projects, but overhead for smaller ones. Don’t think into the future! If a small corporate website does fundamental changes, they may have to start from scratch. This is not a significant problem compared to the overall budget.

Planning a Project

When you’re preparing your to-do list for a project, consider the following thoughts:

• Achieve lower complexity by reducing the level of abstraction.
• Separate functionality from features.
• Assume moderate non-functional requirements.
• Identify time consuming tasks and get rid of them.

Let’s go a little bit into detail! I already provided an example for the first item in the list: don’t wrap a database driver around a database abstraction layer. Be suspicious of everything that adds complexity to your software stack. Notice that abstraction is often provided by third party libraries. For example – depending on your programming language -, a persistence layer, like Hibernate (Java), Doctrine (PHP) or Active Record (Ruby) comes with database abstraction and object-relational mapping. Each library adds complexity. It has to be maintained. Updates, patches and security fixes have to be applied.

We implement features everyday, because we anticipate them to be useful. Hence, we think ahead and implement too much. For example, many clients want to have a mobile website. Mobile is a term of wide comprehension; it’s not a design decision. It’s a use case! People who are using a mobile website are, well, mobile. That means they may want to access other information or functionality than a user who visits the site laid back at his desktop. Think of a cinema site: Users on the bus will likely want to access the starting time of upcoming movies, not the 50 MB trailer.

Bad concepts can often be identified by the lack of non-functional requirements.

With an appropriate budget, you would perform a dedicated analysis of the requirements for mobile. Without this analysis, you will simply provide the same information as is on the desktop site. This will be just fine for many circumstances! Because mobile browsers are very clever in adjusting desktop sites to their display, a radical YAGNI approach might be to not write a mobile site at all!

Non-functional requirements do not describe behaviour of a software, they describe additional properties that can be used to judge the quality of software. Since describing software quality presumes knowledge about software, bad concepts can often be identified by the lack of non-functional requirements. Maintainability, level of documentation, and ease of integration are examples for non-functional requirements. Non-functional requirements should be measurable. Hence, »The page should load fast.« is too inconcrete, »The page should load in two seconds max during an average performance test.« is very concrete and measurable. If you want to apply the YAGNI principle, assume moderate non-functional requirements if they are not mentioned in the concept (or if they are mentioned, but inconcrete). If you are writing the non-functional requirements yourself, be realistic: A small corporation with 20-50 page visits a day does not require three days of performance tweaking – as the page should load fast enough because the server is not busy. If the corporation can increase the number of daily visits, a better server or hosting package shouldn’t be too expensive.

Last, but not least, remember the 80:20 rule-of-thumb!

Last, but not least, remember the 80:20 rule-of-thumb! We have to identify the time consuming parts. If a part is absolutly necessary, you have to implement it. The question should be: how will you implement it? Does it have to be the latest framework with a small community? Do you need to switch to the just-released version of a library if the documentation is not up to date? Should you use the new CMS, when not all extensions are available? How much research will be necessary to do so? »That’s the way we have always done it.« is not an exciting approach, but it’ll get the job done without surprises.

It’s important to understand that all of this does not mean that you can start writing dirty code with hacks along the way! You’re writing a lightweight application, not a messy one! However, You ain’t gonna need it is a practical approach. If it would cause many lines of code to reduce a few lines of code duplicates, I personally think that you may relate efforts to budget and some unDRYness is ok. It’s a small application. Hence, the added maintenance complexity is acceptable. We’re in the real-world.

Let’s come back to the inital thought: we like building things. When Beethoven wrote the Diabelli Variations, it was contract work. I don’t think he made compromises on budget. He ran the extra mile, because he did not want to write average music; he wanted to write a perfect composition.

I’m certainly not implying that we’re all geniuses, and that our brilliance should shine through every line of code, but I like to think of software architecture as compositions. I’m a passionate developer, because I want to build perfect compositions, and I want to be proud of the things I’m building.

If you want to be an experienced and business-proofed developer, you have to master the You ain’t gonna need it principle. If you want to keep your passion, you have to fight against it every now and then.

---

Summary

Software principles are a way of looking at software. To me, a good principle should be based on a simple concept, but it should evolve to a complex construct of ideas when confronted with other techniques and philosophies. What are your favourite software principles?