Shared posts

09 Jan 13:59

How to Back Up Your WordPress Database

by Guest Author

The following is a guest post by Andy Adams (@andyonsoftware). Andy is writing a book on freelancing with WordPress and has some WordPress chops. This post has been on my idea list for ages, so when Andy expressed an interest in writing for the site, I was stoked to have him tackle it. This isn't one of those "a good idea for a rainy day" things, it's a "you must be doing this or you'll probably lose your entire site one day" things.

WordPress stores a ton of important stuff in the database. You probably know your actual content is in the database: blog posts, pages, custom post types, comments, etc.

But the database stores more than content. Much more. Just to name a few:

  • Plugin settings
  • Theme settings
  • Widgets & sidebar content
  • Layouts & templates (if you use a fancy drag-and-drop theme)
  • Cron schedules
  • User accounts
  • Menus

Holy cow - you can't lose that stuff! It doesn't matter if your site is big, small, live or in development - backing up is for every WordPress site.

If you're a WordPress designer or developer, think about how much care you take to save the PHP, HTML, or CSS code you write. You probably use version control. At the very least, you don't rely on a single copy of your code - that'd be risky! So let's take that same care with the much more important database.

WordPress database backups can be taken numerous ways, ranging from "highly-technical" to "supremely easy". How (and how often) you take backups will vary depending on the importance of the site you're working on.

Let's walk through some of the ways you can back up your WordPress database.

How to Back Up With mysqldump

Using the command line for backups is a manual process, and can be a bit daunting if you're not comfortable on the command line. But even if you're afraid of the shell, backing up using mysqldump isn't too awful hard. If you aren't comfortable with it, skip to the next section on using phpMyAdmin for backups.

  • Recommended for: Development & non-critical sites
  • Difficulty: Sorta hard
  • Cost: Free

mysqldump is an appropriately-named program for dumping a MySQL database. No surprises here.

With default settings, mysqldump will generate a .sql file, which is just a list of SQL commands - CREATE TABLEs, INSERTs, etc.

If you were to run each of the SQL commands in the .sql file generated by mysqldump, you'd end up with an exact copy of your WordPress database - which is what we're trying to get!

To run mysqldump, you'll need to access the command line for your server.


Some software can help you connect to your server through SSH. Here's the setup screen for that in Coda:

To run mysqldump, you'll need a few things handy:

  1. The name of the database you're backing up
  2. A database user with access to the that database
  3. The password for that user

If you don't know these by heart, you can reference the `wp-config.php` file for your WordPress site. The configuration values will look something like this:

/** The name of the database for WordPress */
define('DB_NAME', 'my_db_name');

/** MySQL database username */
define('DB_USER', 'my_db_user');

/** MySQL database password */
define('DB_PASSWORD', 'my_db_password');

With our database info in hand we can run the mysqldump command, which looks like this:

mysqldump -u my_db_user -p my_db_name > /path/to/save/backup_file.sql

If you're not familiar with command line lingo, the "dash-followed-by-letters" are called "flags". Flags give the command-line utility (in this case, mysqldump) answers it needs to run correctly.

The -u flag tells mysqldump to use my_db_user to back up our database. For our purposes, we just need to make sure that my_db_user is allowed to read the database we're trying to back up.

The -p flag tells mysqldump that my_db_user has a password, and we're going to provide that password. Note that it's possible to enter the password directly on the command line like so:

mysqldump -u my_db_user -pmy_db_password my_db_name > /path/to/save/backup_file.sql

Beware: Entering the password this way is considered bad security practice because it makes the password visible to programs that don't need to know about it. We're showing you this use of the -p flag just for completeness, so you know how each of these bits and bobs works.

The > after my_db_name is called an "output redirection symbol", which is just a fancy way of telling mysqldump to send the backup data to a specific file.

To understand output redirection better, let's see what would happen if we didn't add the > to the end of our command. This is what is printed to the screen after running the command without output redirection:

-- MySQL dump 10.13  Distrib 5.5.40, for debian-linux-gnu (x86_64)
-- Host: localhost    Database: my_db_name
-- ------------------------------------------------------
-- Server version   5.5.40-0ubuntu0.14.04.1

/* ...snip a zillion SQL commands... */


-- Dump completed on 2014-12-31 20:41:58

Whoa! Our whole database backup was printed to the screen!

By using the > operator, we can tell mysqldump where to put our backup, so we can download and use it. In this case, we're telling mysqldump to put our backup here in the file named `/path/to/save/backup_file.sql`.

If your database happens to live somewhere besides localhost (e.g. if you have a separate MySQL server hosting your database), you can use two additional flags to tell mysqldump where to look:

  • -h tells mysqldump to connect using the URL You can also use IP addresses.
  • -P 1234 tells mysqldump to use port 1234 - obviously, switch this if your database server is using a different port.

After you run mysqldump, you can find your backup file in the location you specified (in our example, /path/to/save/backup_file.sql). The simplest way to grab it is using your favorite FTP client or by using secure copy from the (local) command line.

scp user@ .

How to Restore From a .sql File

Once you have a .sql file handy, you can restore your database using the mysql command-line utility.

Here's the command you'll use:

mysql -u my_db_user -p my_db_name < /path/to/save/backup_file.sql

You'll notice this looks a lot like the mysqldump command we used to create our backup - with a couple of changes:

  1. The first command is mysql instead of mysqldump.
  2. The output redirection symbol (>) has been changed to an input redirection symbol (<). This tells our command to read the .sql file as input for the mysql utility.

All this does is replay the SQL commands written in our .sql file in order to recreate/restore the database to the state it was in when the backup was taken.

Note that mysql can be used with any .sql file - not just those you generate with mysqldump.

Locally, you can also use free software like Sequel Pro to work with your database, including running .sql.

How to Back Up With phpMyAdmin

phpMyAdmin is software that lets you view, edit, and (important for our purposes) export your MySQL database.

  • Recommended for: Development & non-critical sites
  • Difficulty: Not too bad
  • Cost: Free

Many web hosts provide phpMyAdmin access as part of regular hosting plans. If you poke around your hosting account's dashboard, you may find a link to a phpMyAdmin login screen that looks like this:

The username and password is typically the same combo you can find in your `wp-config.php` file (see above).

Once you're logged in, you can select the database you want to back up on the left hand side.

Select the database to back up

Next, you select the Export tab.

By default, phpMyAdmin uses a "Quick" option which is perfect for most use cases. If you're feeling adventurous, there are an awful lot of options you can tweak under the "Custom" section.

Click "Go" to start exporting and downloading your database.

When the download is finished, you'll have a complete backup of your WordPress database.

Beware: If you have a large database or your phpMyAdmin is configured to limit the time allowed for a download, your backup file might be incomplete.

The easiest way to tell if your backup exported successfully is to open it up and scroll waaay to the bottom. The last few lines should have some SQL statements similar to this:

-- AUTO_INCREMENT for table `wp_users`
ALTER TABLE `wp_users`

If you see something different, your backup may be incomplete. If your export timed out, you may see some error messages at the end of your backup file. Or your backup may just cut off at an arbitrary point.

If your backups are incomplete through phpMyAdmin, you may need to tweak your export settings using the "Custom" options or ask your host if they can increase the time limit for PHP requests.

If your host won't help or you just don't want to deal with PHP's quirks, read on to learn about some different (and easier) ways to back up your WordPress database.

How to Restore With phpMyAdmin

It only makes sense that, if you can export a database with phpMyAdmin, you can import one as well. To restore from a database backup, you just need to navigate to the Import tab:

Upload your backup file (.sql or, doesn't matter) using the uploader and click "Go" to restore to backup.

Beware: If you have a large database or your phpMyAdmin is configured to limit the time allowed for script execution, your restore may not complete. If you hit timeout problems, you might want to try tweaking the phpMyAdmin settings or using another method of restoring your database (such as the mysql command-line utility mentioned in the previous section).

How to Back Up by Web Host

In addition to providing access to phpMyAdmin, many hosts provide regular backup services for MySQL databases. The host will take "snapshots" of your database at specific intervals - sometimes weekly, daily, or hourly. Your host may provide web-based access to download the snapshots of your database.

  • Recommended for: Any site
  • Difficulty: Easy
  • Cost: Varies. Some hosts are free, others have a monthly fee.

Availability varies from host to host, and from hosting plan to hosting plan. If you're on a shared hosting plan that costs less than $10 per month, backups are probably not included.

The cost and process for setting up automated backups is different for every host. Here are more details for some of the more common WordPress hosts:

How to Back Up by Plugin

One of the simplest ways to back up your WordPress site is using a plugin.

  • Recommended for: Any site
  • Difficulty: Easy
  • Cost: Varies, depends on the features you need. Free plugins can do basic backups. Paid plugins have convenient features.

There's a cornucopia of backup plugins available, but one of particular interest to developers is WP DB Migrate, and it's paid version WP DB Migrate Pro.

For simple backups, the free version is more than sufficient. Here's how to grab a copy of your database using WP DB Migrate:

  1. Install the WP DB Migrate plugin using the built-in WordPress plugin search & installation interface. Make sure to activate after installation!
  2. Go to Tools → WP DB Migrate on your dashboard.
  3. Select "Download as .zip". If you're simply looking to download a copy of the database for safe keeping, you can remove the find/replace fields:
  4. Click "Migrate" and you'll have a copy of your database saved to your computer.

If you're a developer, it's worth taking a look at the Pro version of WP DB Migrate. With Pro, you're able to synchronize the databases of two WordPress sites.

For example: Say you're working on a live site and you need a copy of the database to do development work. With WP Migrate DB Pro, you can simply synchronize the live version to your development site using the plugin's interface. If you do a lot of WordPress work, it will change the way you develop.

Another notable backup plugin is BackupBuddy by iThemes. While WP DB Migrate has a lot of features that developers can use, BackupBuddy shines for "regular" WordPress users. BackupBuddy can do scheduled backups (much like your web host) and send the backups to a variety of places, such as email, FTP, DropBox, AWS, and others.

There are lots of backup plugins on the repo, and plenty of premium options in addition to BackupBuddy and WP DB Migrate Pro.

Using a Backup Service

Finally, let's look at backing up your WordPress database using a backup service.

Using a backup service is the easiest way to keep backups of your site. Naturally, it's also the most expensive.

  • Recommended for: Live/production sites
  • Difficulty: Easiest
  • Cost: Monthly fee, from $5 to $29 per month.

Here's how it works:

  1. Pay a monthly (or yearly) fee.
  2. Provide the service with access to your site. For some, you install a plugin. For others, you provide login credentials to your host.
  3. Backups are automatically taken on a regular basis and saved to the cloud. Or the backup happens in real time in the case of VaultPress.

Here are some WordPress/MySQL backup services:

Backup services require minimal setup, are constantly backing up your site, include error checking, and (in the case of VaultPress) do security monitoring for your site.

Go Forth and Back Up

Now you're ready to back up your WordPress database. Have a backup method, plugin or service you think we overlooked? Add it in the comments.

How to Back Up Your WordPress Database is a post from CSS-Tricks

08 Jan 13:56

Animated Media Queries

by Chris Coyier

If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will transition (assuming what that class does isn't remove the transition). If JavaScript literally changes the that style property, it will transition.

Likewise, if a new media query takes affect, and that media query has something in it that changes that property on that element, it will transition. As such, there really isn't a such thing as an "animated media query" so much as elements that just transition as expected when a new media query starts affecting the page.

Simple Example

.thing-that-moves {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
  top: 0;
  left: 0;
  transition: left 0.5s; /* BYO prefixes */
@media (min-width: 400px) {
  left: 50px;
@media (min-width: 600px) {
  left: 100px;

If you were to resize your browser window across those breakpoints, you'd see a red square moving around in response.

Slightly More Complex Layout Example

A few versions ago on CSS-Tricks, I had a search form that would slowly float into position using this exact technique. I've recreated that here in a somewhat simple layout, in which a few other things transition as well:

See the Pen Animated Media Queries by Chris Coyier (@chriscoyier) on CodePen

You might have the best luck checking it out in Full Page View.

Animated GIF of it working:

p.s. LICEcap is very useful for creating GIF's like that.

What else can I do?

They sky is the limit here. It's just CSS. Change and transition whatever you want. In another version of CSS-Tricks, I drew Mike the Frog from Treehouse out of simple CSS shapes. When different media queries hit, Mike would change shape, color, expression, and position - slowly morphing into the next state through transitions. It was well liked!

What is the browser support?

IE 9+ on the media queries. IE 10+ on the transitions. I wouldn't sweat the transitions as they are strictly funcandy only (if they don't transition, it doesn't matter, they still move). If you need deeper media query support, there is always Respond.js.

Is there any actual reason to do this?

Poops and giggles, yo. This is purely for fun. It can be a little touch just to give your site some spirit. It would be hard to make a business case, but if your performance budget doesn't have a few bytes for funzies, I feel bad for you son.

Anything to watch out for?

If the stylesheet is parsed fast enough and the transitions get applied to an element while the page is still being laid out, those transitions might be kinda obnoxious. You might want to apply them only after the page is loaded.

Animated Media Queries is a post from CSS-Tricks

28 Nov 13:30

Because Reading is Fundamental

by Jeff Atwood

Most discussions show a bit of information next to each user:

What message does this send?

  • The only number you can control printed next to your name is post count.
  • Everyone who reads this will see your current post count.
  • The more you post, the bigger that number next to your name gets.

If I have learned anything from the Internet, it is this: be very, very careful when you put a number next to someone's name. Because people will do whatever it takes to make that number go up.

If you don't think deeply about exactly what you're encouraging, why you're encouraging it, and all the things that may happen as a result of that encouragement, you may end up with … something darker. A lot darker.

Printing a post count number next to every user's name implies that the more you post, the better things are. The more you talk, the better the conversations become. Is this the right message to send to everyone in a discussion? More fundamentally, is this even true?

I find that the value of conversations has little to do with how much people are talking. I find that too much talking has a negative effect on conversations. Nobody has time to listen to the resulting massive stream of conversation, they end up just waiting for their turn to pile on and talk, too. The best conversations are with people who spend most of their time listening. The number of times you've posted in a given topic is not a leaderboard; it's a record of failing to communicate.

Consider the difference between a chat room and a discussion. Chat is a never-ending flow of disconnected, stream of consciousness sentences that you can occasionally dip your toes in to get the temperature of the water, and that's about it. Discussion is the process of lobbing paragraphs back and forth that results in an evolution of positions as your mutual understanding becomes more nuanced. We hope.

The Ars Banana Experiment

Ars Technica ran a little experiment in 2011. When they posted Guns at home more likely to be used stupidly than in self defense, embedded in the last sentence of the seventh paragraph of the article was this text:

If you have read this far, please mention Bananas in your comment below. We're pretty sure 90% of the respondants to this story won't even read it first.

The first person to do this is on page 3 of the resulting discussion, comment number 93. Or as helpfully visualized by Brandon Gorrell:

Plenty of talking, but how many people actually read up to paragraph 7 (of 11) of the source article before they rushed to comment on it?

The Slate Experiment

In You Won't Finish This Article, Farhad Manjoo dares us to read to the end.

Only a small number of you are reading all the way through articles on the Web. I’ve long suspected this, because so many smart-alecks jump in to the comments to make points that get mentioned later in the piece.

But most of us won't.

He collected a bunch of analytics data based on real usage to prove his point:

These experiments demonstrate that we don't need to incentivize talking. There's far too much talking already. We badly need to incentivize listening.

And online, listening = reading. That old school program from my childhood was right, so deeply fundamentally right. Reading. Reading Is Fundamental.

Let's say you're interested in World War II. Who would you rather have a discussion with about that? The guy who just skimmed the Wikipedia article, or the gal who read the entirety of The Rise and Fall of the Third Reich?

This emphasis on talking and post count also unnecessarily penalizes lurkers. If you've posted five times in the last 10 years, but you've read every single thing your community has ever written, I can guarantee that you, Mr. or Mrs. Lurker, are a far more important part of that community's culture and social norms than someone who posted 100 times in the last two weeks. Value to a community should be measured every bit by how much you've read as much as how much you talked.

So how do we encourage reading, exactly?

You could do crazy stuff like require commenters to enter some fact from the article, or pass a basic quiz about what the article contained, before allowing them to comment on that article. On some sites, I think this would result in a huge improvement in the quality of the comments. It'd add friction to talking, which isn't necessarily a bad thing, but it's a negative, indirect way of forcing reading by denying talking. Not ideal.

I have some better ideas.

  1. Remove interruptions to reading, primarily pagination.

    Here's a radical idea: when you get to the bottom of the page, load the next damn page automatically. Isn't that the most natural thing to want when you reach the end of the page, to read the next one? Is there any time that you've ever been on the Internet reading an article, reached the bottom of page 1, and didn't want to continue reading? Pagination is nothing more than an arbitrary barrier to reading, and it needs to die a horrible death.

    There are sites that go even further here, such as The Daily Beast, which actually loads the next article when you reach the end of the one you are currently reading. Try it out and see what you think. I don't know that I'd go that far (I like to pick the next thing I read, thanks very much), but it's interesting.

  2. Measure read times and display them.

    What I do not measure, I cannot display as a number next to someone's name, and cannot properly encourage. In Discourse we measure how long each post has been visible in the browser for every (registered) user who encounters that post. Read time is a key metric we use to determine who we trust, and the best posts that people do actually read. If you aren't willing to visit a number of topics and spend time actually listening to us, why should we talk to you – or trust you.

    Forget clicks, forget page loads, measure read time! We've been measuring read times extensively since launch in 2013 and it turns out we're in good company: Medium and Upworthy both recently acknowledged the intrinsic power of this metric.

  3. Give rewards for reading.

    I know, that old saw, gamification, but if you're going to reward someome, do it for the right things and the right reasons. For example, we created a badge for reading to the end of a long 100+ post topic. And our trust levels are based heavily on how often people are returning and how much they are reading, and virtually not at all on how much they post.

    To feel live reading rewards in action, try this classic New York Times Article. There's even a badge for reading half the article!

  4. Update in real time.

    Online we tend to read these conversations as they're being written, as people are engaging in live conversations. So if new content arrives, figure out a way to dynamically rez it in without interrupting people's read position. Preserve the back and forth, real time dynamic of an actual conversation. Show votes and kudos and likes as they arrive. If someone edits their post, bring that in too. All of this goes a long way toward making a stuffy old debate feel like a living, evolving thing versus a long distance email correspondence.

These are strategies I pursued with Discourse, because I believe Reading Is Fundamental. Not just in grade school, but in your life, in my life, in every aspect of online community. To the extent that Discourse can help people learn to be better listeners and better readers – not just more talkative – we are succeeding.

If you want to become a true radical, if you want to have deeper insights and better conversations, spend less time talking and more reading.

Update: There's a CBC interview with me on the themes covered in this article.

[advertisement] Stack Overflow Careers matches the best developers (you!) with the best employers. You can search our job listings or create a profile and even let employers find you.
19 Feb 22:25

Useful Learning Resources For Web Designers

by The Smashing Editorial


Fortunately, learning is not limited to only a small minority of people anymore; it is not even limited to visiting a school or a university. The Internet makes it possible for us to distribute knowledge at a small price, and is full of resources to expand everyone’s knowledge on an enormous variety of topics.

Since learning is a lifelong task that doesn’t stop after pursuing a certain academic certificate, this round-up is not only dedicated to beginners. It’s for everyone who wants to become an expert in a certain field or is simply curious about the Web and the latest tools and techniques around them.

We hope that this round-up will bring you closer with many of the valuable resources that are available out there. Some are completely free while others can be obtained through quite affordable memberships. You may also be surprised to find that your local college or university is also publishing free classes and courses on all sorts of topics you can think of — make sure to keep an eye open!

Here are the topics of learning resources we’ll cover today:


Code Avengers
Code Avengers’ courses are a fun way for students to learn computer programming and Web design. Participating in interactive coding challenges, bug hunts and robot missions takes the pain out of learning JavaScript, HTML5 and CSS3. The lessons are designed for students of all ages.

Code Avengers

Thousands of developers share their achievements and current projects on Coderwall. Connect with them, share your own pro tips, and get feedback. Learning new programming languages, tools and technologies has a playful twist and is far from boring. Discover how others are solving their challenges, and gain badges for every completed project.


The Starter League (formerly Code Academy)
Trying to build Web apps without the necessary support and guidance can be painful. The Starter League provides you with expert instruction and mentorship. They also paired up with 37signals (creator of Basecamp and Campfire) to provide hands-on knowledge on building successful Web apps.

The Starter League

Pluralsight was created by a group of developers with the goal of providing the highest quality training possible — for developers, by developers. The library is huge, with courses on nearly every topic you could ask for.

Pluralsight - Hardcore Developer Training

TekPub was created with the goal of educating developers. The mini-casts topics range from JavaScript to Ruby on Rails, with more in-depth tutorials available. (Note: Tekpub has been acquired by Pluralsight; old videos can be accessed via Pluralsight).


PeepCode offers high-quality one-hour screencasts on development resources. Learning the most important techniques is quick and easy with these tutorials. (Note: Peepcode has been acquired by Pluralsight; old videos can be accessed via Pluralsight).


Hacker Rank
On Hacker Rank, coders compete to beat high scores by solving little challenges accross the whole science universe, including areas like algorithmy, code gold or artificial intelligence. How do you match up against others when coding a bot to win at tic-tac-toe?

Hacker Rank

Mozilla Webmaker
Mozilla Webmaker wants to help you move from merely using the Web to making something amazing with it. It has new tools for you to use, projects to help you get started, and a global community of creators — educators, filmmakers, journalists, developers, youth — all making and learning together.


Google Developers University Consortium
The Google Developers University Consortium features courses on mobile and Web development. You will find many usful resources, especially if you’re working with Android and Google Maps.


Android Training
On Android Training, you will find a collection of classes to help you build Android apps. The classes explain the steps to take in order to solve a problem or implement a feature, using code snippets and sample code.

Android Training | Android Developers

Programr is an online lab for students and enthusiasts who want to learn programming. The platform’s goal is to give you the skills you need in order to write sophisticated programs. Test your coding skills by mastering assignments, build your own app right in the browser, and check out contributions by other users. You can even show off your know-how in programming contests. It supports coding languages for console, Web and mobile.


Learn Code the Hard Way
“Less talk, more code” is the credo of Learn Code the Hard Way. Students start by getting code to work; learning the theory comes second. The website focuses on practice by featuring exercises and rote repetition, which will help you gain confidence in whatever you want to do.

Learn Code The Hard Way

Dash teaches HTML, CSS, and Javascript through fun projects you can do in your browser.


Hack Design
Hack Design is an easy-to-follow design course. You can simply receive a design lesson in your inbox each week, which is hand crafted by a design pro. A great resource if you love learning at your own pace. No fake projects.

Hack Design

Code School
Code School teaches Web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts.

Code School

At Codeacademy, you can build your own projects and learn how to create interactive websites, games, and apps. You can also join groups to code with your friends and show off your progress with points and badges.


At Codewars you can challenge yourself on kata, created by the community to strengthen different skills. Kata are ranked to approximate difficulty. As you complete higher ranked kata, you progress through the ranks so Codewars can match you with relevant challenges.


LearnStreet makes learning to code easy for anyone. Whether you would like to start off with JavaScript, Ruby or Python, the platform has got you covered. Build your skill base in the interactive courses, and use it in fun little projects.


PHP Academy
PHP Academy provides free tutorials on PHP and other Web development topics, including MySQL, JavaScript (including jQuery) and CSS. There are free video tutorials, optional premium membership and a forum to ask for help.

phpacademy | Free Video Tutorials | PHP, MySQL, CSS, jQuery Tutorials

PLAYterm is a platform where CLI users share their skills and inspire others. It can replay your terminal sessions online, and it provides embed codes that you can put on your website. Share your knowledge and help others improve their skills.


The New Boston
With his project, The New Boston, Bucky Roberts makes high-quality education available for everybody. His YouTube channel features a lot of computer-related tutorials on topics such as Java, C++, After Effects or Phyton.

The New Boston

gotoAndLearn is a free video tutorial resource for Flash, Game development and HTML5 by game developer evangelist Lee Brimelow.

On, you can explore more than 15 programming languages in your browser — even on the go with your phone or tablet. Just type an expression into the console and wait for the results. The Web application also lets you save your session and share it with others.


The Pragmatic Bookshelf
The Pragmatic Bookshelf’s mission is to improve the lifes of developers by offering text books, audio books and videos for training. The content is produced by programmers for programmers, addressing relevant cutting-edge topics.

The Pragmatic Bookshelf


30 Days to Learn HTML and CSS
Do you want to learn HTML and CSS but don’t know where to start? 30 Days to Learn HTML and CSS is a free course consisting of one video daily for 30 days. All you have to do is spend 10 minutes a day on a new topic. By the end, you’ll have the necessary building blocks to code an entire website.

30 Days to Learn HTML and CSS

A Beginner’s Guide to HTML & CSS
This simple and comprehensive guide will help novices take their first steps in HTML and CSS. Outlining the fundamentals, it teaches you all of the common elements of front-end design and development.

A Beginner’s Guide to HTML & CSS

Don’t Fear the Internet
For those who don’t want to learn to code, this website provides a brief introduction to WordPress, CSS and HTML, even throwing in some PHP trickery. Jessica Hische and Russ Maschmeyer have prepared short chunks of technical information in concise videos.

Don't Fear the Internet


Backbone Screencasts
If you’re learning Backbone.js, these screencast will be very useful. The extensive live coding sessions will walk you through, from the beginning to more advanced stuff like using Backbone.js with Ruby on Rails.


JavaScript and jQuery skills are becoming more and more sought after. By offering a number of lessons, appendTo helps you develop those skills. Signing up isn’t even necessary; just watch the free screencasts (each around 10 minutes long), and start building your foundation of JavaScript and jQuery knowledge.

.appendto, Developer Learning Center

JavaScript Garden
JavaScript Garden is a growing collection of documentation about the most quirky parts of JavaScript. It offers advice on avoiding common mistakes and subtle bugs, and it lays out performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language. The resource is dedicated to professional developers, rather than beginners, and it requires some basic knowledge of the language.

NodeSchool offers interactive lessons for Node.js, including core concepts and electives. There is also a list of free/affordable in-person NodeSchool events around the world which are .


Eloquent JavaScript: A Modern Introduction to Programming
The book “Eloquent JavaScript” by Marijn Haverbeke introduces the JavaScript programming language and programming in general. A free digital version is available in HTML format and you can order a paperback version from Amazon. Furthemore, the book has been translated to French, German and Polish. (Note: A second, more modern edition is currently in process.)

Eloquent JavaScript: A Modern Introduction to Programming

Node Tuts
Node Tuts by Pedro Teixeira offers free webcasts exclusively about Node.Js.

Node Tuts - Node.js

Ruby on Rails

Ruby on Rails Tutorial
Michael Hartl has written a tutorial book named Ruby on Rails Tutorial. Visit the website to find the free online version, along with screencasts.

Ruby on Rails Tutorial

Ruby is a revolutionary programming language from Japan known for its simplicity and power. On TryRuby, you can experiment with it right in your browser. A 15-minute interactive tutorial will help you get started.


Hackety Hack
Hackety Hack teaches you the basics of programming by introducing the Ruby language. Build your skills from scratch, and use them to build desktop applications and websites.

Hackety Hack

Virtuous Code
Avdi Grimm is a software “cultivator” who publishes a screencast series on Ruby development. When you subscribe, you get new screencasts every Monday and Thursday (or access to the full scripts if you prefer reading to watching), the source code for each video and access to the complete archive of episodes.

Virtuous Code

RubyMonk is an interactive Ruby learning plattform. You will learn the basics of the programming language right in your browser. The tutorials are free but donations are very welcome.

RubyMonk- Interactive Ruby tutorials

Rails for Zombies
Learn Ruby the zombie way with Rails for Zombie. You don’t have to worry about configuration. After watching short introductory videos, you can start experimenting right in the browser. The course is aimed at beginners, but there are also courses for more experienced Ruby developers.

Rails for Zombies

RailsCasts by Ryan Bates, offers a free weekly screencast featuring Tips and Tricks for Ruby on Rails. The topics are targeted for intermidiate users, but beginners and experts can also get something out of it. You may subscribe for additional screencasts.



Drawspace is a community of drawing enthusiasts, professional artists and art educators. It features a huge library of free downloadable lessons that teach you how to draw or enhance your current abilities. With a profile, you can track your progress, from beginner to advanced levels.


Miscellaneous Lessons From The Web Industry

Treehouse is for beginners and experts. It offers material for learning everything you need to be successful in the Web industry. This includes technical knowledge, but also skills for starting a successful business. You can learn via specific tracks (i.e. Web developement) or topics.


Tuts+ Premium
Tuts+ Premium is a subscribers-only platform that offers resources for learning creative and technical skills such as design, Web development, motion graphics and photography. The content is created and constantly revised by leading experts. Choose whether to learn by video or articles with screenshots. A large community is behind Tuts+ Premium that you can connect with and ask for further help.

Tuts+  Premium | The best way to learn creative and technical skills.

Ontwik gathers the latest lectures and conferences from Web developers and designers in one place. It covers topics such as JavaScript, NodeJS, jQuery, Ruby, Rails, HTML5, CSS3, UI, UX and more. There are also lectures on creativity, marketing and startups.


Because technical knowledge is not enough

A Student’s Guide to Web Design
Here is an attempt to better equip graduates in the design industry. It provides resources and information to help young Web designers with life after graduation.

After graduating from art college, Jamie Wieck realized that he had no clue about professional life. So, he started #The50 to help students and graduates in the same situation learn what every creative should know. The tips are made up of 140 characters and a hash tag, making them easy to share on Twitter.

The Web Design Community Offers Advice to Beginners,” Smashing Magazine
We asked, “What is the single best tip from your experience that you would give to a newbie developer?” This article compiles all of the amazing responses we received.

The Web Design Community Offers Advice To Beginners

Jessica Hische’s Thoughts
Illustrator Jessica Hische doesn’t have a traditional blog, but she shares answers to frequently asked questions about her and her work. You’ll find useful advice on random topics regarding the Web industry such internships, pricing, non-creepy networking, and so on.


The Secret Handshake
The creative industry is very different from traditional companies and applying only traditional methods in the application process won’t bring you too far. The Secret Handshakes is a resource for students and young creatives looking for insiders insights, honest answers and solid solutions to help you go pro.


WaSP InterAct Curriculum
Designed to keep up with the fast-moving industry, WaSP InterAct is a living curriculum that prepares students for careers on the Web. Courses are divided into several learning tracks, covering everything from the foundations to professional practice. Recommended reading lists, assignments and exam questions help you to become a real Web professional.

WaSP InterAct Curriculum

Conference Organiser’s Handbook
Are you planning to organize a conference? Then, the Conference Organiser’s Handbook is the best place to start. The website was put together by Peter-Paul Koch and provides information on everything you need to know, from start to finish.


Expanding Your General Knowledge

TED is devoted to “ideas worth spreading.” You can watch talks on technology, design, business, global issues, science and entertainment. Get inspired by other thinkers, and get involved in a community of curious people!


Khan Academy
The Khan Academy wants to provide anyone anywhere in the world with a world-class education — for free! All you need is an Internet connection. A huge video library provides you with lessons on a wide array of topics, covering everything from basic maths to macroeconomics to programming basics and even art history. Test your knowledge, track your progress and earn badges.

Khan Academy

University of Reddit
The University of Reddit is an open-source peer-to-peer learning platform. The courses are free and range from computer science to mathematics to languages.

University of Reddit

Registering on this site gives you free access to educational video lectures. The videos cover many fields of science and feature distinguished scholars and scientists at conferences, workshops and other events. The high-quality content is aimed at both the scientific community and the general public.

The Peer 2 Peer University is an open-education project that encourages lifelong learning, following its credo “We are all teachers and we are all learners.” Everybody can participate and make use of the content. It also features a School of Webcraft, with some basic tutorials.

P2PU | School of Webcraft

Online Courses
Online courses offers 100 open courses for tech geeks. Among them, you will find general computer science topics and courses on Web design and development. The website also provides information on accredited schools, college finances and studying.

Online Courses

Lynda helps you learn software, creative and business skills. As a member, you get unlimited access to a huge library of high-quality video tutorials, taught by working professionals. Topics also include design and development.

Software training online-tutorials for Adobe, Microsoft, Apple

Who do you want to be? An entrepreneur? A mobile developer? A better photographer? A yoga instructor? On Udemy you can become what you want to be by learning from an expert in an interactive online course filled with other passionate students. All courses on Udemy are developed, created and owned by the experts themselves.


Learners TV
Learners TV provides a huge collection of free downloadable video lectures on all sorts of topics, including computer science. The website also features science animations, lecture notes and live, timed online tests with instant feedback and explanations.

Learners TV

ReadWrite covers all things Web, tech and social media. Its list of tech-focused instructional websites links you to platforms that teach a wide array of topics. The topics are pretty general, ranging from computing to hacking.


Learn a new language

Radio Lingua
Radio Lingua is a podcast that helps you learn languages where, when and how you want. There are quick starter courses if you want to learn the absolute basics of a language, or you can take your skills to the next level by diving into grammar and vocabulary. The episodes are aimed at learners of all ages and conducted by experienced teachers and native speakers.

Radio Lingua Network

Learning a language with Busuu is completely different from what you are used to. As a member of the platform’s community, you learn directly from native speakers via video chat. That way, everyone is not only a learner, but also a teacher. To keep you motivated, the language you are learning is represented as a tree, which grows with the effort you put in. Joining Busuu is free.


Open University classes & University-style classes

Udacity’s learning experience is different from other education platforms. Learn by solving challenging projects and by interacting with renowned university instructors and other students. The courses are as demanding as studying at a real university, but a range of certificate options are available.


OnlineCourses (formerly know as Lecturefox)
On OnlineCourses you will find high-quality classes from renowned universities such as Harvard, Berkeley and MIT. Topics range from biology to accounting, foreign languages to science.


Education Portal
Making education accessible is the goal of the Education Portal. The platform offers articles and videos on researching schools, degree programs and online courses. Covering everything from arts to sciences, it also has a list of free Web design courses that lead to college credits.

Education Portal

Stanford University’s OpenClassroom provides videos of computer sciences courses. You can watch the videos for free, and the lessons are split up into short chunks of quality information.


MIT OpenCourseWare
MIT OpenCourseWare publishes virtually all MIT course content. The open platform doesn’t require any registration, and it features free lecture notes, exams and videos.


The OCW consortium is a collaboration of higher-education institutions and associated organizations from around the world to create a broad and deep body of open-education content using a shared model.


The Faculty Project
The Web isn’t be the only thing you are interested in. If so, then the Faculty Project might be for you. It brings lectures from leading university professors to anyone with an Internet connection. The free courses are taught through video, slideshows and reading resources, and they cover lessons from maths to economics to history.

The Faculty Project

Academic Earth
Whether you want to advance your career or just take classes that interest you, Academic Earth provide anyone with the opportunity to earn a world-class education. The website offers free lessons and learning tools from many disciplines. If you would like to study further, it also connects you to universities and scholars.


Course Hero
Course Hero has a mission to help college students get the most out of their education by giving them access to the best academic content and materials available. Search for study documents by department, keyword and even school. After registering, you can use the resources for free.

Course Hero

edX is a not-for-profit enterprise by MIT, Harvard, Berkley and the University of Texas System. Take part in high-quality online courses from different disciplines — including computer science — and obtain a certificate from one of the renowned universities. The institutions use the insights they gain from the platform to research how technology can transform learning.


Partnering with the top universities from around the world, Coursera offers free online courses. The lectures are taught by renowned professors and cover a variety of disciplines. Assignments and interactive exercises help you test and reinforce your knowledge.


Since 2001, Webcast.berkeley has been a window into UC Berkeley’s classrooms, publishing courses and campus events for students and learners everywhere in the world. View audio and video recordings of lectures online, or download them to your device.

webcast.berkeley | UC Berkeley Video and Podcasts for Courses

The Open University
The Open University is open to anyone and offers over 570 courses at many different levels, from short introductory courses to postgraduate and research degrees. Studying is flexible and adapts to your lifestyle. You can even connect to other learners online and use the activities to assess your progress.

The Open University

Last Click…

Do you have a small project or idea in mind but need a little help? WeekendHacker is a place to reach out to designers and developers who may be able to assist. Simply sign up, post your project, and sit back and wait for someone to help.

Until Next Time!

We hope that this list of learning resources will help you to further develop your skills and open doors for you. Of course, you’re more than welcome to share other resources that are missing in this round-up in the comments section below! Also, we look forward to hearing which resource you find most valuable, and why!

By the way, you may also want to check out Melanie Lang’s list of inspirational podcasts — we highly recommend it!

(sh, ml, ea, il)

Front page image credits: Programmr.

© The Smashing Editorial for Smashing Magazine, 2014.

27 Dec 13:34

50 sensational freebies for web designers, December 2013

by Juan Pablo Sarmiento

thumbnailWe love web design resources, and we love them even more when they’re absolutely free. so each month we scour the Internet to bring you the very best free resources for web designers and developers.

This month we’ve included PSD resources, social network buttons, ribbons, mockups, guis of music players, app concepts, icons, plugins, fonts, templates, and much much more for you to amuse yourself creating everything you want, from personal blogs and experiments, to professional projects for your clients.

PSD ribbons

15 ribbons for all your projects.

50 sensational freebies for web designers, December 2013


High Tide

Unique linear font family.

50 sensational freebies for web designers, December 2013


600 Twitter buttons

Fully editable vector psd.

50 sensational freebies for web designers, December 2013


Time graph UI

Simple dashboard UI with all kinds of design elements.

50 sensational freebies for web designers, December 2013


Seasons ribbons

Realistic PSD graphic ribbons.

50 sensational freebies for web designers, December 2013


Play music player

Innovative music application interface.

50 sensational freebies for web designers, December 2013


Free flat devices PSD

A collection of different devices in flat style.

50 sensational freebies for web designers, December 2013



Condensed geometric sans serif font with uppercase, small caps, numbers & symbols.

50 sensational freebies for web designers, December 2013



Free PSD app concept.

50 sensational freebies for web designers, December 2013


Nauman regular

A modern humanist sans serif made for the screen.

50 sensational freebies for web designers, December 2013



Theme for pages about cooking.

50 sensational freebies for web designers, December 2013



Generate SVG backgrounds for web projects.

50 sensational freebies for web designers, December 2013



A handdrawn serif web font.

50 sensational freebies for web designers, December 2013



250+ scalable vector icons for developers.

50 sensational freebies for web designers, December 2013


Weather icons

40+ line weather icons for GUIs and mobile projects.

50 sensational freebies for web designers, December 2013


Mission Gothic

Retro styled typeface.

50 sensational freebies for web designers, December 2013



Javascript API for gmail.

50 sensational freebies for web designers, December 2013


36 tiny icons

Useful package of 32×32 icons for office apps.

50 sensational freebies for web designers, December 2013



SEO enhanced WordPress theme.

50 sensational freebies for web designers, December 2013



Wide and clean theme for personal web pages.

50 sensational freebies for web designers, December 2013


48 rounded icons

Useful pack of line icons for dark backgrounds.

50 sensational freebies for web designers, December 2013


Zebrasil font

An elegant serif font.

50 sensational freebies for web designers, December 2013


50 glyphs

Icons for all kinds of purposes.

50 sensational freebies for web designers, December 2013


Wireframe kit

AI file with elements portraying web, tablet and mobile devices.

50 sensational freebies for web designers, December 2013


Flat admin template

Awesome looking interface with several types of visual statistics.

50 sensational freebies for web designers, December 2013



Decorative sans serif family of three completely different weights.

50 sensational freebies for web designers, December 2013



A library of animated SVG icons for the web.

50 sensational freebies for web designers, December 2013


Feather icon set

100 simple yet beautiful line icons.

50 sensational freebies for web designers, December 2013



Theme for small and medium businesses.

50 sensational freebies for web designers, December 2013


iPhone 5s & iPad air mockups

A set of various mockups for presentations.

50 sensational freebies for web designers, December 2013



Flat portfolio template PSD.

50 sensational freebies for web designers, December 2013


Nice things

A set of daily icons.

50 sensational freebies for web designers, December 2013



All caps typeface for large point settings.

50 sensational freebies for web designers, December 2013


Social subscribe widget

Widget with animated buttons.

50 sensational freebies for web designers, December 2013



50+ small flat and colorful icons.

50 sensational freebies for web designers, December 2013



Image lazy loading.

50 sensational freebies for web designers, December 2013


Vintage grunge textures

6 high resolution textures for all your projects.

50 sensational freebies for web designers, December 2013



20th century geometric font.

50 sensational freebies for web designers, December 2013


Timeline menu

Modern timeline slider made in CSS3.

50 sensational freebies for web designers, December 2013


Tipue search

Site search engine plugin.

50 sensational freebies for web designers, December 2013



Slab rounded font.

50 sensational freebies for web designers, December 2013


Touch gesture icons

Cool set of mobile gesture icons.

50 sensational freebies for web designers, December 2013



Minimal homepage PSD.

50 sensational freebies for web designers, December 2013


AC big serif

Font made combining big, thick serifs.

50 sensational freebies for web designers, December 2013


Social media badges

Package of 20 brilliant social media badges.

50 sensational freebies for web designers, December 2013


jQuery serial scroll

Versatile plugin that has several uses.

50 sensational freebies for web designers, December 2013


5 o’clock shadow icon set

Textured set of icons with a 5 o’clock long shadow.

50 sensational freebies for web designers, December 2013



Plugin to flex images like paper.

50 sensational freebies for web designers, December 2013


Stationery mockup

Essential elements to showcase your brand.

50 sensational freebies for web designers, December 2013


Which of these freebies is your favourite? Have we missed a resource you rely on? Let us know in the comments.

Become a Successful eBook Author with ‘Authority’ – only $19!
50 sensational freebies for web designers, December 2013


13 Nov 22:30

CSSOff 2013

by Chris Coyier

It's live!

If this is the first you've heard of it, it's a contest where you get a Photoshop document and have two weeks to convert it into HTML and CSS. You're judged on an established set of criteria.

The design this year is by Daniel Mall.

You have to submit your design through CodePen. As you'll need to host files (like images) to make it happen, and you'll want to be working privately, you'll need a CodePen PRO account, which you can have for free for the duration of the contest. Just log in and then go here and get the free upgrade.

Direct Link to ArticlePermalink

CSSOff 2013 is a post from CSS-Tricks

03 Jul 13:10

Taming The Email Beast

by Paul Boag


In the 1950s, when consumer electronics such as vacuum cleaners and washing machines emerged, there was a belief that household chores would be done in a fraction of the time.

We know now it didn’t work out that way. Our definition of clean changed. Instead of wearing underwear for multiple days, we started using a fresh pair every day, and so the amount of washing required increased. In short, technology enabled us to do more, not less.

Our work environments have followed a similar path. Tools such as email enable us to communicate more, rather than make life easier. In fact, many people are now overwhelmed by the amount of email they receive.

The Problem Of Email

Email has changed our expectations of communication; most of us feel like we need to be constantly available. We are tied to our email-enabled devices, and, like Pavlov’s dog, we have to check email every time the bell rings.

We are constantly available, constantly interrupted and continually overwhelmed.

Going offline isn’t the answer. As Web designers, we do not just build websites; we provide services to our clients. Therefore, we need to keep our clients happy, and that can only be done by regular communication. Clients need constant reassurance that their project is in hand, and they need continual chivying to provide the feedback and contributions we require to do our job.

Like it or not, email is a necessary evil. But that doesn’t mean it needs to rule us. We can tame the beast, and it all starts by doing less.

Like any beast, the more you feed email, the bigger it becomes. It’s time to put email on a diet. We can achieve this in a simple way: by using email less.

Send Less

Believe it or not, doing considerably less with email while still effectively communicating with our clients and colleagues is perfectly possible.

You probably don’t need to send out nearly as many emails as you do. You could almost certainly reduce the number of people you copy in your emails. Remember that the more email you send out, the more email you will get back. It’s that simple.

Email is not always the best form of communication. A face-to-face meeting or a phone call is usually much more effective. After all, what we actually say is the minority of communication. Tone of voice and body language are critically important.

Instant messaging (IM) is another option to consider. While it is intrusive at times, it can be perfect for quick questions. Email encourages long-form communication, while IM tends to be shorter.

That being said, there is no reason why emails need to be long.

Write Less

The less you write in emails, the less people will write in reply. People tend to mirror the behavior of others; so, if you want to receive more concise emails, start writing emails that are to the point yourself.

You might feel that short emails are less friendly and come across as cold, but these problems can be worked around.

Try linking to in your signature. That website will perfectly explain the brevity of your emails.

Linking to makes it clear to clients that you keep your emails short because you value their time. Larger view.

An even easier option is to adopt the “Sent from my phone” signature that many people use these days, a good excuse for getting to the point.

Please don’t misunderstand. Being friendly and personable with clients is important. But email is not the place to do that. If you want to chat, pick up the phone.

Email should feel more like Twitter than traditional mail. In fact, many people are abandoning email entirely and turning to Twitter as their primary communication tool.

If this step feels too big, try summarizing your email at the top. This will make it easier for the reader to get the gist of your message if they are busy. Also, you will find that people start doing the same in their emails, making reading much quicker.

In addition to sending less email and shortening your messages, reducing the amount you receive is possible.

Receive Less Email

The easiest way to cut down on replies is to tell people that they do not need to reply. Putting abbreviations such as NRN (no reply necessary) or FYI (for your information) in the subject line will help with this. But that won’t stop unsolicited email.

Most of us get a lot of unsolicited email, despite the excellent spam filters that most email services provide. These emails are often newsletters that we’ve never subscribed to or announcements from companies from which we once made a purchase. Regardless of whether we ever did agree to receive these emails, they are now cluttering our inbox.

You might be tempted to just delete these and keep wading through the rest of your email. But take the time to find the “Unsubscribe” link, because these companies will not contact you just once. They will email you again and again until you stop them.

If they don’t include an “Unsubscribe” link, create an email rule that automatically deletes them. Those couple of minutes now will save you time and distraction in the long run. If you really are too busy to find those “Unsubscribe” links, then try out, which makes unsubscribing even easier.

Unroll.me_500 makes unsubscribing to emails easier than ever. Larger view.

However you do it, unsubscribing from mass emails will dramatically reduce your load. But don’t stop there; consider unsubscribing from newsletters that you did sign up for.

Keep Email For Communication Only

Part of our problem is that we have turned email into something it naturally is not. For example, many people use their inbox as a place to read news. Email was never really meant for that. Ample apps (such as the wonderful Feedly) provide this functionality.

Use an app like Feedly to read news, rather than your email client. Larger view.

Others use their email client as a repository for files that they want to keep. This makes little sense because a much more powerful filing system is built into their operating system.

And yet others use their inbox as a task manager, marking emails as starred or unread to remind themselves to take some action. However, dedicated tasks managers will help you work much more efficiently.

Omnifocus 2_mini_border
Your email client is not nearly as good a task manager as applications such as OmniFocus. Always use the best tool for the job. Larger view.

Turning email into something else merely clutters our inbox, making the job of reading and writing actual email less efficient.

To tame the beast, use email as a communication tool, not as a way to manage files, read news or schedule tasks.

While the techniques above will reduce the amount of email coming in, they address only the symptoms and not the root cause of our problem — which is our addiction to email.

Breaking Our Addiction

The reference earlier to our Pavlovian response to the audio notification of incoming email was slightly tongue in cheek, but accurate nonetheless.

Upon hearing that beep, we find it hard not to look. But checking email every five minutes adds up to over 32,000 interruptions a year! That is a phenomenal number.

Do we really need to check email that much? Almost certainly not. The majority of email that comes in either is unsolicited or can wait a few hours. The number of emails that genuinely require urgent action is relatively low.

The problem is that we perceive certain emails as being urgent when they are not. It’s just a matter of training our clients not to expect an immediate response. Of course, that is not always possible.

What we need is a way to be notified of only the important emails. Fortunately, achieving this is relatively easy. Start by turning off notifications in your email client. They are just too indiscriminate, notifying you of every single message that comes in.

Instead, sign up for a service, such as AwayFind, that will notify you by text or app notification when an email comes in that meets certain requirements. For example, you could choose to receive notifications only of emails from a particular client or about that day’s meeting.

AwayFind notifies you about only the most important emails, freeing you from the shackles of constant alerts. Larger view.

If you don’t want to pay for this service, you could try IFTTT.

The point is to free yourself from constant interruption. Knowing that important messages will reach you instantly, you can comfortably check email only a couple of times a day. I check email first thing in the morning, at lunchtime and at the end of the business day. That way, I can respond reasonably promptly without having my workflow interrupted.

And when you do check your email, be organized in the way you deal with it.

Organizing Your Email

A lot of people make email more complicated than it needs to be because they are not organized. The biggest offenders are those who never move email out of their inbox.

Having an inbox filled with hundreds or thousands of emails increases the time it takes to process new messages. With so much clutter, figuring out what needs to be dealt with and what has been read becomes confusing. No matter how in control you may feel, things are bound to fall between the cracks.

Your inbox is where email arrives, but it shouldn’t stay there. Instead, clear your inbox every time you open your email client. You don’t necessarily have to act on every email right away — just read it and decide what to do with it.

You have five options upon reading an email:

  • Act on it.
    If you have time to act on the email immediately, then do so. This could mean responding or completing a task. But don’t feel obliged to act immediately if you have higher priorities.
  • Defer it.
    Too busy to deal with the email immediately? No problem. Turn it into a task that sits in your task manager. You can then deal with it on your own time and view it alongside your other tasks.
  • File it.
    Many emails we receive require no particular action, but merely provide useful information. In such cases, archive the post for future reference. With today’s powerful search tools, there is little need to tag it or add it to a folder. But do move it out of the inbox.
  • Delete it.
    If the email is spam or has no long-term value, delete it.
  • Delegate it.
    Some emails require action, but you might not be the best person to do it. In those cases, delegate the task by forwarding the email to the relevant person.

The lesson in all of this is that your inbox is just a holding place for unprocessed email. Once you have read it and decided what to do with it, move it out of your inbox to make room for future emails.

Start Today

You might be intimidated by the prospect of having to process all of those emails staring back at you in your inbox. This might all sound like too much work. I promise you it will be worth it.

If the inbox is too overwhelming, just declare bankruptcy. Archive everything except this week’s email. If any emails from more than a week ago haven’t been addressed yet, replying to them now would probably be too late anyway.

Archiving all of that email will leave you with a manageable load. Work through each email and decide what to do with it. If you get a lot of email, this could take some time, but it will be worth it. Remember that you don’t have to act on everything immediately. Defer actions until later by bouncing them to your task list. The trick is to process everything out of your inbox. Do that and I promise you will never look at email with the same horror again.

So, those are my tips on managing email. What are yours? What do you think of email clients such as Mailbox? Or have you a completely different approach? Let us know in the comments. We’d love to hear your perspective.


© Paul Boag for Smashing Magazine, 2013.