Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 14 2014


Useful Learning Resources For Web Designers


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 curios about the Web and the world 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 your local university also publishing free classes and courses on all sorts of topics you can think of — check out the list!

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

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 VideoLectures.Net 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

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.

January 20 2014

Sponsored post

December 04 2013


Speed Up Your Mobile Website With Varnish


Imagine that you have just written a post on your blog, tweeted about it and watched it get retweeted by some popular Twitter users, sending hundreds of people to your blog at once. Your excitement at seeing so many visitors talk about your post turns to dismay as they start to tweet that your website is down — a database connection error is shown.

Or perhaps you have been working hard to generate interest in your startup. One day, out of the blue, a celebrity tweets about how much they love your product. The person’s followers all seem to click at once, and many of them find that the domain isn’t responding, or when they try to sign up for the trial, the page times out. Despite your apologies on Twitter, many of the visitors move on with their day, and you lose much of the momentum of that initial tweet.

These scenarios are fairly common, and I have noticed in my own work that when content becomes popular via social networks, the proportion of mobile devices that access that content is higher than usual, because many people use their mobile devices, rather than desktop applications, to access Twitter and other social networks. Many of these mobile users access the Web via slow data connections and crowded public Wi-Fi. So, anything you can do to ensure that your website loads quickly will benefit those users.

In this article, I’ll show you Varnish Web application accelerator, a free and simple thing that makes a world of difference when a lot of people land on your website all at once.

Introducing The Magic

For the majority of websites, even those whose content is updated daily, a large number of visitors are served exactly the same content. Images, CSS and JavaScript, which we expect not to change very much — but also content stored in a database using a blogging platform or content management system (CMS) — are often served to visitors in exactly the same way every time.

Visitors coming to a blog from Twitter would likely not all be served exactly the same content — including not only images, JavaScript and CSS, but also content that is created with PHP and with queries to the database before being served as a page to the browser. Each request for that blog’s post would require not only the Web server that serves the file (for example, Apache), but also PHP scripts, a connection to the database, and queries run against database tables.

The number of database connections that can be made and the number of Apache processes that can run are always limited. The greater the number of visitors, the less memory available and the slower each request becomes. Ultimately, users will start to see database connection errors, or the website will just seem to hang, with pages not loading as the server struggles to keep up with demand.

This is where an HTTP cache like Varnish comes in. Instead of requests from browsers directly hitting your Web server, making the server create and serve the pages requested, requests would first hit the cache. If the requested page is in the cache, then it is served directly from memory, never touching Apache or the database. If the page is not in the cache, then the request is handed over to Apache as usual, whereupon Apache will create and serve the page, which is then stored in the cache, ready for the next request.

Serving a page from memory is a lot faster than serving it from disk via Apache. In addition, the page never needs to touch PHP or the database, leaving those processes free to handle traffic that does require a database connection or some processing. For example, in our second scenario of a startup being mentioned by a celebrity, the majority of people clicking through would check out only a few pages of the website — all of those pages could be in the cache and served from memory. The few who go on to sign up would find that the registration form works well, because the server-side code and database connection are not bogged down by people pouring in from Twitter.

How Does It Work?

The diagram below shows how a blog post might be served when all requests go to the Apache Web server. This example shows five browsers all requesting the same page, which uses PHP and MySQL.

When all requests go to the Apache Web server.

Every HTTP request is served by Apache — images, CSS, JavaScript and HTML files. If a file is PHP, then it is parsed by PHP. And if content is required from the database, then a database connection is made, SQL queries are run, and the page is assembled from the returned data before being served to the browser via Apache.

If we place Varnish in front of Apache, we would instead see the following:

If we place Varnish in front of Apache.

If the page and assets requested are already cached, then Varnish serves them from memory — Apache, PHP and MySQL would never be touched. If a browser requests something that is not cached, then Varnish hands it over to Apache so that it can do the job detailed above. The key point is that Apache needs to do that job only once, because the result is then stored in memory, and when a second request is made, Varnish can serve it.

The tool has other benefits. In Varnish terminology, when you configure Apache as your Web server, you are configuring a “back end.” Varnish allows you to configure multiple back ends. So, you might want to run two Web servers — for example, using Apache for PHP pages while serving static assets (such as CSS files) from nginx. You can set this up in Varnish, which will pass the request through to the correct server. In this tutorial, we will look at the simplest use case.

I’m Sold! How Do I Get Started?

Varnish is really easy to install and configure. You will need root, or sudo, access to your server to install things on it. Therefore, your website needs to be hosted on a virtual private server (VPS) or the like. You can get a VPS very inexpensively these days, and Varnish is a big reason to choose a VPS over shared hosting.

Some CMS’ have plugins that work with Varnish or that integrate it in the control panel — usually to make clearing the cache easier. But you can put Varnish in any CMS or any static website, without any particular integration with other systems.

I’ll walk you through installing Varnish, assuming that you already run Apache as a Web server on your system. I run Debian Linux, but packages for other distributions are available. (The paths to files on the system will vary with the Linux distribution.)

Before starting, check that Apache is serving your website as expected. If the server is brand new or you are trying out Varnish on a local virtual machine, make sure to configure a virtual host and that you can view a test page on the server using a browser.

Install Varnish

Installation instructions for various platforms are in Varnish’s documentation. I am using Debian Wheezy; so, as root, I followed the instructions for Debian. Once Varnish is installed, you will see the following line in the terminal, telling you that it has started successfully.

[ ok ] Starting HTTP accelerator: varnishd.

By default, Apache listens for requests on port 80. This is where incoming HTTP requests go, because we want Varnish to essentially sit in front of Apache. We need to configure Varnish to listen on port 80 and change Apache to a different port — usually 8080. We then tell Varnish where Apache is.

Reconfigure Apache

To change the port that Apache listens on, open the file /etc/apache2/ports.conf as root, and find the following lines:

NameVirtualHost *:80
Listen 80

Change these lines to this:

NameVirtualHost *:8080
Listen 8080

If you see the following lines, just change 80 to 8080 in the same way.

Listen 80

Save this file and open your default virtual host file, which should be in /etc/apache2/sites-available. In this file, find the following line:

<VirtualHost *:80>

Change it to this:

<VirtualHost *:8080>

You will also need to make this change to any other virtual hosts you have set up.

Configure Varnish

Open the file /etc/default/varnish, and scroll down to the uncommented section that starts with DAEMON_OPTS. Edit this so that it looks like the following block, which will make Varnish listen on port 80.

DAEMON_OPTS="-a :80 \
-T localhost:1234 \
-f /etc/varnish/default.vcl \
-S /etc/varnish/secret \
-s malloc,256m"

Open the file /etc/varnish/default.vcl, and check that the default back end is set to port 8080, because this is where Apache will be now.

backend default {
.host = "";
.port = "8080";

Restart Apache and Varnish as root with the following commands:

service apache2 restart
service varnish restart

Check that your test website is still available. If it is, then you’ll probably be wondering how to test that it is being served from Varnish. There are a few ways to do this. The simplest is to use cURL. In the command line, type the following:

curl --head

The response should be something like Via: 1.1 varnish.

You can also look at the statistics generated by Varnish. In the command line, type varnishstat, and watch the hit rate increase as you refresh your page in the browser. Varnish refers to something it can serve as a “hit” and something it passes to Apache or another back end as a “miss.”

Another useful tool is varnish-top. Type varnishtop -i txurl in the command line, and refresh your page in the browser. This tool shows you which files are being served by Varnish.

Purging The Cache

Now that pages are being cached, if you change an HTML or CSS file, you won’t see the changes immediately. This trips me up all of the time. I know that a cache is in front of Apache, yet every so often I still have that baffled moment of “Where are my changes?!” Type varnishadm "ban.url ." in the command line to clear the entire cache.

You can also control Varnish over HTTP. Plugins are available, such as Varnish HTTP Purge for WordPress, that you can configure to purge the cache directly from the administration area.

Some Simple Customizations

You’ll probably want to know a few things about how Varnish works by default in order to tweak it. Configuring it as described above should cause most basic assets and pages to be served from the cache, once those assets have been cached in memory.

Varnish will only cache things that are safe to do so, and it might not cache some common things that you think it would. A good example is cookies.

In its default configuration, Varnish will not cache content if a cookie is set. So, if your website serves different content to logged-in users, such as personalized content, you wouldn’t want to serve everyone content that is meant for one user. However, you’d probably want to ignore some cookies, such as for analytics. If the website does not serve any personalized content, then the only cookies you would probably care about are those set for your admin area — it would be inconvenient if Varnish cached the admin area and you couldn’t see changes.

Let’s edit /etc/varnish/default.vcl. Assuming your admin area is at /admin, you would add the following:

sub vcl_recv {
   if ( !( req.url ~ ^/admin/) ) {
     unset req.http.Cookie;

Some cookies might be important — for example, logged-in users should get uncached content. So, you don’t want to eliminate all cookies. A trip to the land of regular expressions is required to identify the cookies we’ll need. Many recipes for doing this can be found with a quick search online. For analytics cookies, you could add the following.

sub vcl_recv {
  // Remove has_js and Google Analytics __* cookies.
  set req.http.Cookie = regsuball(req.http.Cookie, "(^|;\s*)(_[_a-z]+|has_js)=[^;]*", "");
  // Remove a ";" prefix, if present.
  set req.http.Cookie = regsub(req.http.Cookie, "^;\s*", "");

Varnish has a section in its documentation on “Cookies.”

In most cases, configuring Varnish as described above and removing analytics cookies will dramatically speed up your website. Once Varnish is up and running and you are familiar with the logs, you can start to tweak the configuration and get more performance from the cache.

Next Steps

To learn more, go through Varnish’s documentation. You should understand enough of Varnish’s basics by now to try some of the examples. The section on “Achieving a High Hit Rate” is well worth a read for the simple tips on tweaking your configuration.

Speed Up Your Mobile Website With Varnish
Keep calm and try Varnish to optimize mobile websites. (Image source)

(al, ea, il)

© Rachel Andrew for Smashing Magazine, 2013.

September 23 2013


How To Create Flat Style Breadcrumb Links with CSS

With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

CSS breadcrumb links

The breadcrumb links we’ll be creating are styled with chevron shapes to support the idea of drilled down content. Previously a background PNG image would be used to create this chevron shape, but with the help of clever border techniques the same effect can be created purely with CSS.

View the CSS breadcrumb links demo

<div id="crumbs">
		<li><a href="#">Breadcrumb</a></li>

We’ll begin by quickly fleshing out the breadcrumb navigation links as an unordered list. Each breadcrumb link will appear as an <li> with a nested anchor element.

#crumbs ul li a {
	display: block;
	float: left;
	height: 50px;
	background: #3498db;
	text-align: center;
	padding: 30px 40px 0 40px;
	position: relative;
	margin: 0 10px 0 0; 
	font-size: 20px;
	text-decoration: none;
	color: #fff;

The initial CSS code styles up each list item anchor as a neat blue rectangle. The text is positioned centrally within the space and equal padding is added to either side. In order to position elements absolutely later, position: relative; is added so those absolutely positioned objects will display relative to this parent element.

#crumbs ul li a:after {
	content: "";  
	border-top: 40px solid red;
	border-bottom: 40px solid red;
	border-left: 40px solid blue;
	position: absolute; right: -40px; top: 0;

We’ll now recreate the chevron effect in CSS that would previously only be achievable with a background image. Use the :after selector to create an extra element that can be styled up individually. The triangle shape is generated through the use of various CSS borders, so as you can see in the initial demo a single blue triangle can be created by applying top and bottom borders to intersect the overlap. These are currently coloured red for demonstration, but making these transparent will produce a single blue triangle. This border effect is then moved into place through absolute positioning.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

The border effect with the correct colour values will produce the desired triangle which gives the breadcrumb link the popular chevron shape.

#crumbs ul li a:before {
	content: "";  
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #d4f2ff;
	position: absolute; left: 0; top: 0;

Using the same principle another triangle shape can be applied to the left of the breadcrumb link. This time the border colour is set the same as the page background to disguise parts of the blue link background colour.

padding: 30px 40px 0 80px;

This additional triangle before the link affects the appearance of the text, but a simple padding adjustment will quickly rectify its appearance.

<div id="crumbs">
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>

As more links are added to the HTML the series of breadcrumbs increases, each separated by the cool chevron shape thanks to the CSS border triangle effect and a touch of right margin.

#crumbs ul li:first-child a {
	border-top-left-radius: 10px; border-bottom-left-radius: 10px;
#crumbs ul li:first-child a:before {
	display: none; 

#crumbs ul li:last-child a {
	padding-right: 80px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
#crumbs ul li:last-child a:after {
	display: none; 

The full breadcrumb navigation list can be further styled by removing the triangle effect on the first and last items with the help of the :first-child and :last-child selectors, then given subtle rounded corners with border-radius.

CSS breadcrumb links

#crumbs ul li a:hover {
	background: #fa5ba5;
	#crumbs ul li a:hover:after {
		border-left-color: #fa5ba5;

All that’s left is to apply a hover effect to the links. Don’t forget to change the border-left-color on the hover state of the triangle effect so the whole breadcrumb link changes colour.

View the CSS breadcrumb links demo

September 02 2013


August 12 2013


Getting Started with the Sass Preprocessor

Preprocessors are a popular way of simplifying and writing more manageable CSS, as well as making use of frameworks to write better CSS. Let’s take a look at the basics and learn how to create a fully loaded CSS3 button with gradients, shadows and transitions while making use of the Sass preprocessor and Compass framework to do all the hard work for us.

Wait, Prepro-wha?!

I guess if you’re new to this, the sound of ‘CSS Preprocessor’ is confusing! But rest assured, it’s nothing big to worry about. A CSS Preprocessor takes your CSS written in a specific file, compiles it, and writes out your CSS into a separate file. It helps for writing your CSS in a developer-friendly way, but can also help simplify and manage your CSS better.

CSS3 button made with Sass and Compass

In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

View the CSS3 Button Demo

What you need and how to get started

The first thing to do is get a program to help compile your code, and while you could install everything by command line, it’s easier to keep control of it using a compiling application. I highly recommend trying out CodeKit for this tutorial, so grab a trial copy and we can get started.

Make a folder for our project, complete with a index.html file ready to put some code in. Next, enter CodeKit, go to the File menu and select ‘New Compass Project’. You will then be presented with a dialog box asking where your project folder is located and where to compile to, and make sure it is set to the following.

Compass Configuration

What we’ve set up is where our Sass files are located, where they compile to, and how Compass will write out the CSS. Here, I’ve set it to the expanded view so I can see how my CSS looks, while setting it to compressed will minify the CSS. It’s up to you how you want to organise your project. Compass will then create the project, as well as the location of our CSS and Sass folders.

Compass Configuration Result

Getting started with the Sass code

In our HTML file, all we need is some very simple code, and a link to our CSS file in the CSS folder of our project.

<!doctype html>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

<div id="container">

	<a class="button">Click Me!</a>


That’s all the HTML we need! Now, onto writing with Sass. Enter your preferred text editor, and make a new file, save it into the sass folder, and name it style.scss. We’re going to be writing everything out in SCSS, which Sass can also process, to keep things simple and SCSS isn’t as strict on the beginners. :-)

At the start of our file, we will write out a basic reset for the HTML, an import for Compass, and write out our colour variables for the button.

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

At the top of the file, we’re calling on Compass to be included into the file so we can make use of some mixins for later. We’ve also written a simple reset, and we’ve made use of one feature already: variables. This allows use to store values we will constantly use in our CSS, including colours, font values, and more! Here, I’m using it to store the colours used on the button to simplify writing them out but also for re-use throughout the stylesheet.

Styling the Button

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

Onto styling that button! We’ll start off by applying the base styles to the a tag with the class of button. Here I’ve set the base styles for the button, and notice how I am making use of the variables from earlier.

Now, onto the fun part! Remember the Compass import placed at the beginning of the Stylesheet? Here we make use of it, as Compass has a mass library of built-in mixins, which include CSS3 prefixes for browsers that still need prefix support.

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

	//Compass Mixins
	@include background(
		linear-gradient(top, $button-start 20%, $button-stop)
	@include border-radius(3px);
	@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
	@include transition(all 0.3s ease);

After the initial styling, we can include some mixins for the background colours, linear gradients, border radiuses and transitions. The best part is it will compile with only the necessary prefixes, and save us from writing them all! The class so far will compile into the following in the style.css file.

.button {
  width: 158px;
  height: 30px;
  margin: 120px auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #fff;
  padding: 7px 0 0;
  border: 1px solid #163861;
  text-shadow: 0 -1px 0 #06304b;
  position: relative;
  background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

Writing Styles with Nested Elements

Another great feature of a Preprocessor like Sass is the ability to nest elements and appending classes with a parent element you’re styling. This is then compiled into the necessary CSS to make it work.

.button {
	&:hover {
		@include background(
			linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
		@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
	&:active {
		@include background(
			linear-gradient(bottom, $button-start 20%, $button-stop)
		text-shadow: 0 1px 0px $text-shadow;
		@include box-shadow(inset 0 2px 8px $focus-shadow);

After the main button styles, we can nest the pseudo-class selectors for the element’s :hover and :active states, with the ampersand to tell Sass that it’s a nested class appended to the parent element. In the :hover state, we can add a little bit more emphasis to the gradient and inner shadow using Compass Mixins, while the :active state reverses the gradient and changes the box shadow to give the impression that the button is pushed in.

.button:hover {
  background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
  background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
.button:active {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
  text-shadow: 0 1px 0px #06304b;
  -webkit-box-shadow: inset 0 2px 8px #0b3c5f;
  -moz-box-shadow: inset 0 2px 8px #0b3c5f;
  box-shadow: inset 0 2px 8px #0b3c5f;

The above is what happens after the :active and :hover states are compiled by Sass; they are written as pseudo-class selectors to the parent element in valid CSS, as well as the desired CSS complete with fallbacks, completing our 3-state button.

CSS3 button made with Sass and Compass

View the final CSS3 Button Demo

The style.scss file and compiled Stylesheet

Full SCSS Stylesheet

This is all that is written in our whole style.scss file, as we have an organised file which is written simply, as well as carrying mixins and variables that do some of the work for us, which then compiles into the final style.css file Stylesheet.

Final CSS Stylesheet

Learning more about Preprocessors

Hopefully this hasn’t been too much of a headache, and has given you the ambition to write more in Sass and Compass, as well as try CSS Preprocessors. There are many great articles by CSS-Tricks, NetTuts, The Sass Way, and many more on the subject to help you on your way to write more efficient, simple and easier CSS.

August 05 2013


How To Create a Set of Vector Weather Line Icons

Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a weather app. Follow this step by step Illustrator tutorial to see how the most simple of tools can be used to create a set of trendy glyphs.

Creating a cloud icon

Let’s begin with a basic cloud. Open up Adobe Illustrator and draw three circles on the artboard. Overlap each one but pay attention to its outline along the top edge.

Drag a selection around all three objects and use the Align palette to make sure they all sit along the same baseline.

Draw a rectangle to fill in the gaps on the lower edge. Turn on Smart Guides (CMD+U) to help align the rectangle to the circles then hit the Unite option from the Pathfinder tool to merge everything together.

Clear out the fill colour and increase the stroke weight to around 5pt. Turn on the round cap and round corner options to create a smooth outline.

Creating a sun icon

Elsewhere on the artboard draw a circle using the same stroke configuration options, then add a short line above it.

Copy (CMD+C) and Paste in Place (CMD+Shift+V) a duplicate then move it vertically to sit underneath the circle. Copy/Paste the two lines then rotate the duplicate by 90° (hold Shift to constrain the angle).

Paste in two more duplicates and rotate these shapes by 45° to form a set of evenly spaced ray lines. Group all these individual lines together.

Select both the group of lines and the inner circle and align the objects along the horizontal and vertical axis to centre them up.

Combining the icons

One advantage of working with basic style icons is elements can be reused to aid consistency between the icons. A “sunny spells” icon can be created by combining the cloud with the sun. Rotate the sun slightly to balance the gaps between the ray lines.

Use the Scissors tool to clip the path of the sun’s circle, leaving a small gap between each element. Select and delete the unwanted portion.

Ungroup the set of sun ray lines then delete any unwanted copies.

The combination of the two separate icons creates consistency between the icons.

The same principle can be used to create other icons based on existing elements, such as a “heavy cloud” icon.

A moon icon is often used to represent “clear skies” at night. Use duplicates of the sun circle to create a crescent moon shape with the help of the Minus Front Pathfinder option.

Variations of the weather icons using the moon create nighttime alternatives for the cloudy icons. The rounded edges and the even spacing continues the consistent style of the set.

Draw one short and one long line at 45° underneath a copy of a cloud to represent “heavy rain”. Select and drag out a duplicate of these lines while holding the ALT key, then repeated press CMD+D to repeat the transformation.

A “light rain” variation of this icon can be created by deleting some of the rain symbol lines.

Create a small stylised snowflake by crossing two short lines. Duplicate the flake symbols into a 45° pattern, then select and rotate each flake randomly to reduce the uniform appearance.

“Light Snow”, “Thunder Storms” and “Sleet” variations can also be created by altering and combining existing icons.

The final icon pack

Vector weather line icons

The final icon pack contains a set of consistently styled icons to represent various common weather conditions (plus a special one for “British Summer”). Download the source file to get to grips with how they’re put together in Illustrator or to use the icons in your own projects.

Download the vector weather line icon pack

July 22 2013


July 15 2013


July 03 2013


Building A Portable Design Toolkit


It’s easy to get overwhelmed by the staggering array of resources and options available to designers. In this article, we’ll explore the idea of consciously restricting yourself to a set of core tools that you know, love and trust.

Take a traditional craftsman — let’s say a carpenter. While they may have access to a wide range of tools in their workshop, they will take a bag with just a few carefully chosen tools when working away. Similarly, an artist may have a wide range of paints, brushes and accessories in their studio, but will carefully select a limited palette and a few choice brushes when painting in the field.

In the same way, as a digital designer, you should know what your most precious tools are, and keep a portable set close at hand.

Recently I’ve been doing some oil paintings outside, away from the studio (a technique called en plein air). To facilitate this, I put together a pochade box to hold paints, brushes, palette and canvas panels. This needed to be small enough to fit in a backpack to be easily portable so that I can cycle around the countryside with it. The factors of space and weight force me to select a limited palette and a few choice brushes, and the size of the box determines the size of paintings I can make.

Working outside also forces me to work quickly — there’s no time to dally and over-think things. But, rather than being restrictions, these factors become the parameters for the work, directing me to work in a certain way, and helping me to develop a personal style and approach.

plein air
Working outdoors forces you to set limits.

Working With A Limited Palette

The benefits of working with a restricted range of tools and options are that you really get to know and understand your core set and can continually refine it over time. This is the path to mastery in your chosen discipline, as opposed to being a jack-of-all-trades but the master of none.

By mastering a limited number of tools and techniques, you will develop your own personal, identifiable style and workflow. It enables you to hit the ground running with each new project, to draw on your previous experience and to get something down quickly, which you can then refine, rather than face the blank screen and not know where to start.

A Lean, Portable Toolkit

What should be in your toolkit? This will obviously depend on your particular area of expertise, whether you are a designer or a developer, and the software applications you use. Each person will have their own software preferences, so I am not going to talk much about particular applications in this article. Instead, the focus will be on areas where you can consciously refine your choice of tools and assets within applications. I’ll also look at how, once you have created this limited palette, you can access your carefully selected toolkit wherever you are.

Keeping It All Together

Keep this lean, mean toolkit in a place you can access from anywhere. My preference is Dropbox, although any cloud-based hosting service, such as Google Drive or Microsoft Skydrive, would be great. Create a folder named Design Playbook, or whatever, and add subfolders for all of the assets you want to store in there. Sync it to the cloud and you’re good to go. For text and notes, I use Evernote — again, allowing me to access it from anywhere.

Folder structure
A sample folder structure of the toolkit

Graphic Resources

Grabbing every free resource you come across on the Web is tempting, whether it is vector art, Photoshop brushes and actions, bitmap textures and backgrounds, fonts, etc. But the downside of amassing such a huge collection is that it can become overwhelming and can lead to a lot of wasted time looking for just the right resource. If you are a download junkie, like me, then be prepared to pare down your collection, and put the ones you love and trust into a separate folder from all of the others, which you can review from time to time. Think of this separate folder as a special place where only the best assets and resources go.

Fonts are a prime cause of bloat. Over 300 fonts are in my font library, which I manage using Font Agent Pro (available for both Mac and Windows), but I find myself using the same 10 or so for most commercial work, and many of the 300 I’ll probably never use. Sifting through all of them is a real time sink, so I have a couple of sets with all of my go-to typefaces, which I have copied in Dropbox. The same applies to Web-based type management, such as Typekit. Find great type combinations that work for you, and use them repeatedly. It’s a part of how you establish your own recognizable style. Add new typefaces to your core collection sparingly.

Brushes (which are customizable plugins to apply paint effects in applications such as Photoshop, CorelDraw and Painter) are another resource for which too wide a choice would be overwhelming and inefficient — you’d find yourself scrolling through a huge list trying to find the one you’ve used before. Don’t be afraid to trim down the brush sets that you download, deleting the ones you have no use for. Save a consolidated set of brushes as a new set to your mobile toolkit and you’ll be good to go. The same approach can be applied to symbol libraries for Illustrator and Photoshop.

Illustration is one area in which your personal style can really shine through, so build a resource of vector elements. Having a collection of killer elements on hand is a great way to dive into a project and get inspiration. I’ve been slowly adding elements to my vector doodads Illustrator file for a couple of years now, inspired by the efforts of DesignBum, who has made a number of his project files available for downloading.

Designbum design elements
Great design explorations by Issara Willenskomer (aka DesignBum)

You’ll find yourself reusing certain background elements and textures; so, again, carefully select a few ones, and add them to your toolkit. Don’t worry about overusing these images — use them in comps and mockups, and then, once you have finalized the design, if you feel that you need a fresh image, go and find one. This will save you time from hunting for new images for every mockup.

Illustrator Elements
Build your own elements file.

You may find an online repository such as LayerVault or Pixelapse to be useful for storing image and vector assets, especially if you collaborate with other designers and want to share your toolkit with them.

LayerVault is version-control software for designers.

Code Resources

As with graphics, you’ll inevitably find yourself wanting to use the same bits of code from one project to the next. Rather than constantly reinvent the wheel, reuse classes and functions and keep refining them.

If you work with a language such as Java or ActionScript, which support classes, then you’ll find yourself returning to the same third-party classes and libraries time and again, so keep them handy in your toolkit, and take the time to really understand them.

For other languages, such as JavaScript, group together functions that you commonly use in a self-contained .js library file. You can then keep this as part of your toolkit, or use a content delivery network such as, so that you can directly reference it from your project.

Add to this, of course, essential third-party libraries, such as Modernizr and Require.js — I’m sure you have your own favorites — and any add-ons, such as small JavaScript libraries. Keep them somewhere handy, to be able to quickly drop them into a project.

Another place to put code libraries and classes is on a hosted version-control website, such as GitHub, Beanstalk or, my personal choice, Bitbucket. This is especially useful if you like to tinker and refine code or if you want to share your toolkit with other developers. If you want to open-source your code and make it publicly accessible, then GitHub or Google Code is ideal.

Another place to store code is Snipplr. As the name suggests, it’s great for storing little snippets of code — for example, code to retrieve the current date — that you’ll need time and again. You can make your snippets public or keep them to yourself. Snipplr is ideal for storing those little code hacks that you keep forgetting.

Snipplr is great for storing and sharing useful code snippets.

Template Resources

Using Web templates and frameworks will help you create prototypes more quickly and will also ensure that those prototypes bear a close resemblance to your comps and mockups. Whether you develop your own framework from scratch or use a popular one, such as Foundation or Bootstrap, get to know it inside out, and keep refining it to suit your needs.

Also, build your own “boilerplate” HTML5 file, which is a minimal basic file that serves as the starting point for any Web page you create. HTML5 Boilerplate is a good place to start. You’ll also find it worthwhile to create a skeleton website, set up with a file structure for images, CSS and JavaScript. Build yourself a basic CSS file that you can drop into any project. Add it all to the toolkit.

Mastering Your Tools

It might sound like I am suggesting that you keep reusing the same look and techniques across all of your work, but that is not the case. I am suggesting that you consciously limit your toolset, and then absolutely master those tools. You can then refine them according to project briefs, client feedback and your own inclination.

Kevin Dart Colouroid
Kevin Dart’s Colouroids are a great example of self-set limitations.

Keep experimenting with your favorite tools. This year, inspired by Kevin Dart’s Colouroids, I set myself a challenge to create one vector image a day, to really master Illustrator. In these self-set projects, go outside of your comfort zone and try a new approach, process or technique.

Create A Playbook

“Design today has reached the stage where sheer inventiveness can no longer sustain it.”

– Christopher Alexander, 1963

Seek to master not just your tools but also your techniques. Understanding and refining your design process is critical, and the way you work will determine the work you produce. I call this your “playbook,” the guide to your design process. Each technique is a “play,” a set of instructions to follow.

The playbook can exist purely in your head, or be as formal as you like. My playbook is a series of notes and sketches on an iPad, using Evernote and Paper. Some are simple aphorisms — “Work from light to dark,” “Remove one element” — to make me think about the way I work, a kind of personal set of Oblique Strategies, but used less to break a creative block than to reinforce a working method I trust.

Other “plays” are more practical guides, such as step-by-step instructions on how to set up event listeners, or how to optimize images, or how to change copy on a live website. Developing conscious design patterns is the key to understanding the way you work, whether in visual design, interaction design or programming.

Formalizing your creative processes, tools and techniques is a critical step in becoming a better designer or developer. Just as football teams practice their plays, practice your techniques on self-set work, ready to be deployed in client work once you have mastered them.

The playbook is also the place to refine your workflows. How do you get from a paper sketch to a working website? How do you wireframe your code? Analyzing your process is all part of the playbook.

Evolving The Playbook And The Toolkit

In addition to refining your playbook, you will also need to update it and evolve it gradually over time, adding some elements while removing others. Obviously, the world of Web design is changing rapidly, both aesthetically and technically, so make sure to update your playbook, too. And by using elements you know and trust, you are still bringing your own style, rather than slavishly following fashion.

The Path Towards Mastery

If you look at the portfolios of designers you admire, you will see common elements and ideas that unite each person’s work. This applies not only to Web designers but to graphic designers, architects, industrial designers and visual artists. While the work evolves over time, a common thread — and a conscious decision to set self-imposed limits of exploration — runs through it all. Each creator has developed and refined their own design process, which defines the resulting work, the designer’s style. Poor designers will leap from one style to another, from one way of working to another. Lacking conviction, they will follow trends and the latest fancy technique, rather than develop their own style.

Learn to limit your choices and set parameters. These are not constraints, but rather guidelines to lead you to better work. Building a toolkit and developing a playbook is a way to help you define your own style and to master the tools you need to make your work unique, personal and memorable.


© Martin Gittins for Smashing Magazine, 2013.

June 24 2013


How I Increased My Subscriber Rate by 10x Overnight

A few weeks ago I explained how I migrated my Feedburner email subscribers to a newsletter service. Since then I’ve been busy experimenting and optimising my new mailing list to continue growing my sites into the future. After implementing a couple of popular techniques I saw my daily subscribers dramatically rise from around 10 per day to a healthy 100 per day, so I thought I’d share these tips to help others grow their audience.

AWeber daily growth graph

A little background…

I own and create content for two design blogs. The first, Blog.SpoonGraphics is home to my Illustrator & Photoshop tutorials, as well as a range of inspirational showcases and free design resources. You’re reading my second blog right now here on Line25, this site has a specific focus on web design and is home to HTML/CSS tutorials and roundups of cool website designs and trends.

RSS Subscribers breakdown

As I described in my Feedburner to newsletter post, I wanted to begin growing my subscribers beyond RSS due to the demise of Google Reader and the possibility that Feedburner will follow a similar fate. I signed up with AWeber and spent many hours creating my custom email templates, which was actually one major advantage of a newsletter service as opposed to Feedburner. Customising the appearance and content of your emails not only improves the user’s experience, it also results in more click throughs and engagement in your broadcasts.

At first I just switched over my Feedburner email subscriptions signup link to an AWeber form and saw my daily subscriber rate average at up to 10 per day. It wasn’t until after I had a chat with fellow design blog owner and all round nice guy Tom Ross that I realised I could drastically improve this figure. Tom gave me some fantastic tips and techniques and after implementing them I saw that 10 subscribers per day figure rise to between 80-100 per day! If you’re looking for some email marketing consultation of your own I’d definitely give Tom a recommendation, otherwise I know he has some great projects of his own in the works, so give him a follow on Twitter to keep up to date with his online ventures.

Sign up form placement

Initially I only had a sign up form on my subscribe page, but one obvious step to increasing the number of sign ups is to put your form right in front of your users in various places on your site. I created 3 more sign up forms and placed in them in the following areas:

Sidebar signup form

Sidebar sign up form

Despite having a link for users to subscribe by email right at the top of the page, I didn’t have an actual complete signup form visible on the page. Tom recommended I revised the layout of my sidebar menu and use the prominent space for an eye catching form to greet new visitors.

End of post signup form

End of post signup form

One of the forms that has proved really effective on my sites is the placement at the end of every post. New visitors who have stumbled across your content and made it all the way to the end of the article have a high potential of wanting to stick around for more, so it makes sense to prompt them with the option of subscribing with a conveniently placed signup form.

About page signup form

About page signup form

Your about page is probably one of your least trafficked pages, but those who are browsing it have a particular interest in you, your website or your company. A strategically placed signup form slap bang in the middle of your bio is really effective to recruit those interested to receive more of your content. Despite having much lower display rates, my about page signup forms have amazing conversion figures (30x higher than the other forms!).

Free gift incentive

The additional sign up forms on my site no doubt prompted a decent number of readers to sign up, but the one technique that really boosted my daily subscriber rate was the creation of a free gift. Everyone loves freebies, and the offer of a gift to every new subscriber is enough to grab the attention of the average viewer and give them the incentive to subscribe for more. Sure, some people will sign up just to get their hands on the free goodies and have no interest in your new post notifications, but every day you’re growing your audience with people who had an interest in your site, who would have otherwise left and never returned again had it not been for the free gift hook.

Free web shadows pack gift

My Blog.SpoonGraphics site has been around since 2007 and during that time I’ve posted numerous freebies such as Photoshop brushes, textures and vectors. It would take a visitor ages to dig through the archives and download all this stuff, so I used this as an opportunity and created a bundle of my design resources as my free gift. For Line25′s free gift I was a little stuck for ideas, so I browsed the stock resources websites and gained inspiration from the most purchased items lists. Presentation is key, so I spent time mocking up the products and creating eye catching banners to tie the free gift promotion to the sign up forms.

How to set up a free gift download with AWeber

After all the hard work of creating your free gift and its promotional material the actual process of adding it to your mailing list is pretty simple, you essentially just create a special page on your site containing a download button and set this page as your mailing list’s opt-in success page.

AWeber's success page field

In AWeber, this option is found under List Settings > Confirmed Opt-In. It’s the Success Page field right at the bottom of the page. Users will be automatically sent to this page once they’ve clicked the activation link in their email.

Button wording

Split testing Download Now vs Get Email Updates

Recently I’ve been playing around with a split test of one of my signup forms. With the free gift being featured alongside the ability to receive new posts by email I wondered if there would be any difference in performance between the words “Get email updates” and “Download now!”. I expected the “Download now!” button to be more effective at attracting signups purely for the free gift, but the results were pretty extraordinary! The split test was run for around 40,000 impressions and during that time the “Download now!” button achieved 3 times more signups than the words “Get email updates”. It would be interesting if there’s any way to keep an eye on unsubscribe rates relative to each form to compare the quality of subscribers, but at the end of the day it’s 3x more people who are potentially viewing your content.

Final words

These tips are really just scratching the surface when it comes to growing an email list, but they’re all effective techniques that could be implemented by any website owner to optimise their email subscription signups. Most importantly these techniques aren’t deviant or intrusive, and help grow your mailing list with true followers who have a long and happy experience receiving your free content. While newsletter services do incur monthly fees, the ability to convert this investment into additional traffic and readership is definitely worthwhile.

May 27 2013


How to Move From Feedburner to a Newsletter Service

Things are going downhill fast for RSS. First Google shut down Feedburner’s API in 2012, then they announced the closure of Google Reader earlier this year (2013). The future isn’t looking too bright for the Feedburner service as a whole and chances are it will also be completely shut down sometime in the near future. In today’s post I’ll show you how I’ve personally prepared for doomsday and gained a bunch of new subscribers in the process by migrating from Feedburner to an email newsletter service.

The future of Feedburner

If you’re a long time blog owner you’ll likely have used Feedburner since well before it was acquired by Google. By burning your original feed with Feedburner you gained a bunch of handy features such as user friendly subscribe pages, subscriber counts & stats and the all important email delivery option. Google bought Feedburner in 2007 then shut down the API in 2012. Feedburner’s interface has remained unchanged in that time and with the recent demise of the popular Google Reader you would be wise to expect the same fate for this small niche service.

How to prepare for doomsday

Every blog will see a dip in readership after 1st July 2013 when Google Reader is officially laid to rest. Google Reader is the tool over 94% of my readers use to stay up to date with my content. Even if you publicly prompt users to switch to an alternative service such as Feedly, you can bet that a substantial proportion of your readers will be lost. We’re just going to have to take that one on the chin, but the knock out blow will come if Feedburner is shut down too. The second largest group of subscribers after Google Reader users, our Feedburner email subscribers, will then be lost too. Therefore, it makes sense to start building a reserve readership today and rescue our Feedburner email subscribers from their potential doom by creating an alternative email mailing list with a newsletter service.

To me, email newsletters seemed a little outdated compared to RSS. I personally use email for emailing and RSS for content reading, but email newsletters are still really popular and bring along some new opportunities for your blog. Here’s a few pros and cons:


  • Customise the appearance of your email updates
  • Allow users to sign up using forms on your site
  • Stay in touch with readers with follow ups & updates
  • Run much more detailed reports on delivery and readership


  • It takes a fair amount of time to set up
  • You pay a monthly fee for the service

The three big names in the email newsletter business are AWeber, MailChimp and Campaign Monitor. Comprehensive comparisons of all three can be found elsewhere on the web, but I chose AWeber for my own mailing lists.

How to migrate your Feedburner email subscribers

We already have a core bunch of subscribers who signed up to receive our content by email, so rather than start from scratch with a newsletter service, we might as well migrate our users over.

To begin, you’ll need to export your subscriber list from Feedburner. Log in at, head to Subscribers > Feedburner Email Subscriptions. In the fly out options select Manage Your Subscriber List then export as a CSV.

Your Feedburner list contains both verified and unverified addresses. Some newsletter services may allow you to import your unverified users, but AWeber in particular request that these entries are removed, seeing as they didn’t go through the complete double opt-in process. You can do this with some spreadsheet trickery in Excel or Open Office by filtering out the rows with the word “Active”. Save your edited list as a new CSV file.

I know MailChimp allows you to import lists without the subscribers having to opt-in, but AWeber will send out a confirmation to everyone (again). However, seeing as our Feedburner subs have already confirmed their subscription and we’re providing the same kind of newsletter service a quick email to AWeber’s support team will mean you can import your lists without the second double opt-in after a few quick checks.
Once your subscribers have been imported it’s time to create your newsletter template designs and set up your broadcast messages. AWeber’s templates are pretty ugly, whereas MailChimp and Campaign Monitor offer some really nice off the shelf layouts. Being an AWeber user myself this article is going to focus on their features, so I’d advise finding a ready made newsletter template elsewhere on the web and customise it.

To replicate Feedburner’s functionality of sending out an automatic email copy of your RSS posts you’ll need to head to Blog Broadcast in AWeber’s menu structure. Seeing as Feedburner is still alive and kicking you can safely enter your FB feed URL, this will mean your newsletter subscribers will be added to your total RSS subscriber count. If Feedburner is ever shut down, just change this to your original RSS feed. Use AWeber’s RSS tags to specify where it should inject the relevant content into your newsletter layout. For the full blog post, make sure you use {!rss_item_content}, for the excerpt use {!rss_item_description} (their templates seem to use the description by default).

Set the option to send updates when the number of items reaches 1, then disable Send Automatically for now (so you don’t end up spamming everyone while setting things up). AWeber’s process is a little confusing, it “sends” updates to your Broadcast page where these entries will wait until you press the Queue button, unless you check “Send Automatically”. The problem is when you save your Blog Broadcast it generates 10+ emails from your RSS feed. You definitely don’t want these being sent out to your entire list, so delete them, test your setup then turn on the Send Automatically option when you’re confident it’s all working correctly. This will set the process to autopilot when new content is posted and work just like Feedburner did (but with much prettier emails!).

Once your new AWeber mailing list is set up with an automatic blog broadcast you’ll want to head back into Feedburner and turn off Email Subscriptions, otherwise your readers will receive the same update twice from the two separate services.

In order to continue growing your list, make sure you add sign up forms to your website. Don’t forget you also have all kinds of options and features at your fingertips. Set up a welcome email and a follow up series to interact with your readers and provide additional content; send out standard Broadcast messages to spread the word about new updates and news; or use marketing strategies to dramatically increase your subscriber count such as providing a free gift or a sign up incentive.

Now you’re paying for your newsletter service you’ll want to give it a spring clean to keep the costs down. All services charge based on the total number of users in your list, but sometimes these users aren’t even receiving your messages. Run searches and remove any entries that have never opened an email to decrease your bill and increase your performance stats.

May 20 2013


May 06 2013


How To Create an iOS App Icon for Your Website

Did you know you can give your website its very own app icon for iPhones and iPads? It only takes a few seconds and it makes your site look really smart when it’s saved on a user’s home screen, or when viewed in popular apps such as Reeder.

Why create an app icon?

Specifying an app icon is one of those little finishing touches that isn’t really noticeable but makes all the difference if you take it away. Without an app icon if you bookmark a site on your iPhone or iPad you’re left with an ugly screenshot of the page crammed into the little rounded square, but with one line of code you can choose your own icon design, such as a logo. It’s much like a favicon, but on a larger scale.

Having someone bookmark your site onto their device home screen is probably a rare occurrence, but as I discovered today there’s another major benefit of creating an app icon. Roberto Alanís tweeted me recently asking how I achieved such a nice icon in Reeder app. My first response was “I don’t know!”, but then I realised it was my apple touch icon that was being used.

How to create an Apple touch icon

The specified dimensions of a touch icon directly from Apple is 114x114px, this will compensate for Retina displays and produce a nice crisp home screen icon. However, as you can see from the Reeder screenshot, other sites using 114px touch icons don’t fill all the available space. Reeder is one of the most popular RSS apps, plus the touch icon may be used elsewhere too, so it’s worth creating your icon at much larger dimensions.

I chose the dimensions of 512x512px, which is probably a little overkill, but apparently 241x241px would suffice.

Next you need to decide whether you want Apple to add their glossy highlight effects to your icon. If you do, name it apple-touch-icon.png, if you don’t, name it apple-touch-icon-precomposed.png.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

You don’t actually need to write any code to get your touch icon working, just pop it in the root directory of your website and it will automatically be used by Apple devices. It might be worth linking it in your <head> though just as a reminder that it’s there. If you ever redesign you might end up forgetting to update it. Once again, make your choice of glossy or precomposed.

April 25 2013


Responsive Layouts: How To Maintain Hierarchy Through Content Choreography


One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post “Content Choreography,” which showed how visual hierarchy gets lost when columns are dropped below one another.

While techniques exist to help with part of the problem, the solution also requires conscious thought in how you structure blocks of content in your HTML. You need to think about how you’ll want to rearrange blocks of content as your design moves from single to multiple columns.

What Is Content Choreography?

As a layout changes from a widescreen to a tablet to a smartphone, the number of columns is usually reduced from three or four down to one. The typical and easiest solution is to drop the columns one by one and stack them on top of each other.

Diagram showing how columns drop in a typical 3 column responsive design
The figure above shows three columns of content. The lines below the two right columns indicate that each will drop below the main content as the screen’s width decreases.

Once you’re down to a single column, the layout is constrained by the source order of the content blocks in the HTML. Whichever column comes first in the HTML is displayed at the top; whichever column is next in the HTML goes right below; and so on down the stack.

Unfortunately, this means that information that is highly visible at the top of the page when multiple columns are present ends up being far down the page as one column drops below another. If content is important enough to show at the top of the page when viewed on a widescreen browser, do we want to bury it on a smartphone screen?

All of the information in your sidebar column probably isn’t as important as all of the information in your main content column, but some of the sidebar content is likely more important than some of the main content.

Two examples of single column responsive designs
The left side of the figure above shows a single column layout, where each column drops in its entirety below the previous one. The right side shows elements from each column mixing with other elements.

The left side of the image above shows the typical column drop. As the design is reduced to a single column, the content inside each container or column is dropped below all of the content in another container.

Ideally, the visual hierarchy would be maintained, and the content in different columns would intermix as the design moves from three columns to two to one. We’d also like more control over the display order of content, beyond the HTML source order. Both scenarios are illustrated on the right side of the image above.

This greater control over the blocks inside containers is what’s considered content choreography. I assume Trent chose the word “choreography” as a metaphor for how we’d like to orchestrate the movement of blocks of content as our layout changes.

Our current development practices don’t make this choreography easy. What they do make easy is dropping entire columns one below the other, which means that everything inside one column must always end up in its entirety above or below everything in another column.

Two Problems in One

What I’ve described above are really two separate problems:

  • Source order
    In a single-column layout, blocks of content will display in the same order as they’re located in the HTML structure. Unfortunately, the best source order for one layout isn’t necessarily the best source order for another.
  • Intermixing content
    Instead of having to drop entire columns of content below one another, we’d like to mix blocks of content from the different columns in the single-column layout.

The first issue has some technical solutions on the way, one of which is just about here. The second issue will require that we change our thinking in how we develop layouts.

Solving The Source-Order Problem

In time, there will be several solutions to the source-order issue, in the form of new CSS specifications. Depending on which browsers you need to support and what you’re willing to do to support them, one of those specifications may already be here.

Three specifications that we’ll likely find ourselves using in the future are:

The second and third of these specifications have almost no support in current browsers. Surprisingly, Internet Explorer is leading the way with both. IE 10 supports regions and grid layouts with the -ms vendor prefix. No other browser offers any support at the moment, so we’ll have to wait on these specs a bit longer.

Flexbox, however, has pretty good support. The spec has undergone some changes, and two versions are currently supported by browsers. If you don’t mind mixing the old and new syntaxes, you can get flexbox to work in the current versions of almost all browsers.

Opera mini and IE below version 10 don’t support any flexbox syntax. However, you can use the Flexie polyfill to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I’ll point you to some articles I’ve written showing the old syntax and the new syntax, as well as one that walks you through the new syntax to set up a responsive layout that overcomes the issue of source order.

Suffice it to say that with a single CSS property, we can essentially tell our documents to display blocks of content in a different order than how the source code orders the blocks in the HTML. Jordan Moore has also written about flexbox and content choreography, and he’s created a demo to illustrate.

What you should take away from this section is that solutions to the source-order problem are coming soon — one of them very soon. It won’t be long before we can easily rearrange blocks inside a single container. However, rearranging blocks inside one container isn’t the same as rearranging them across several containers.

Solving The Intermixing Content Problem

Unlike the source-order problem, the issue of intermixing content across columns doesn’t have a technical solution. It’s up to us, and, ultimately, it means we need to wrap content in fewer HTML containers.

We’ll have to dig a little deeper into the problem to understand why this is so.

CSS Visual Formatting Models

CSS offers several visual formatting models, such as the normal document flow, floated elements and positioned elements. Flexbox is part of another, the flexible box layout model. In all of these models, elements are located relative to a containing element.

We can make it look as though elements are not bound by their containers, but they still are. For example, you could float an element that’s inside one column and give it a negative margin so large that it appears to be located in another column, however, elements in that other column won’t reorient themselves. To these elements, the floated element is still in the first column.

Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won’t. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won’t get out of the way. We need them to get out of the way, though, if we’re going to intermix page elements.

With a little thought and CSS, you can usually figure out some way to rearrange elements inside one container however you like. With a little more thought, you can even make elements in one container appear to be located inside another, although you’ll usually have to position the elements in that other container with more complex CSS and with what Harry Roberts refers to as “magic numbers.”

If the term is new to you, magic numbers are those numbers we use to make something work in a single particular instance. They typically stop working as soon as some other value changes, and, given the nature of responsive design, other values are always changing. Magic numbers in CSS are best avoided.

We Need to Give Up Containers

For the last few years, whenever we’ve wanted to move a group of adjacent elements to a certain part of a layout, we’d wrap those elements in a container and write CSS to display the container somewhere in the design. I’m sure you’ve used CSS selectors like #wrapper and #container more than once.

We need fewer of these HTML containers and more CSS virtual container classes that we can apply to different elements as needed.

In other words, instead of this…

<div id="container">
  <div>Content here</div>
  <div>Content here</div>
  <div>Content here</div>

… we need more of this:

<div class="container">Content here</div>
<div class="container">Content here</div>
<div class="container">Content here</div>

In the latter block, each division might have a different class name or perhaps different additional classes applied. This allows for greater flexibility in rearranging them in the layout. In the first block of code, the three content divisions will always reside inside their parent container.

I’m not suggesting that the first block of HTML above should never be used. There will absolutely be times when wrapping several divisions of content with a container makes sense. However, if you want some of those blocks to intermix with elements in other columns, then you’ll have to think more in terms of the second block of HTML above.

With CSS, we have the ability to rearrange blocks inside a container. We don’t have the ability to break content out of one container and move it inside another container. If you want more mixing of blocks, then you’ll need fewer containers.


While there are currently far more instances of websites that are dropping columns wholesale, there are certainly websites that mix content in one column with content in another column.

Let me first offer a detailed look at my own website, since I’m most familiar with it. I’ll follow this up with a few other websites that intermix content in slightly different ways.

A Personal Example

Around the time that Trent coined the term “content choreography,” I was working on a redesign of my website and was trying to figure out how to mix content blocks as the layout changed.

The image below shows the top of a typical blog post on my website when the browser is wide enough to accommodate two columns. Click the image to see the live post.

Meta information such as my name and the publication date are in a column to the left, while the article’s title, main text, images, headings and so on are in a column to the right.

Screenshot of post from Vanseo Design with two-column layout
My website when the browser is wide enough to accommodate two columns.

Seeing the layout, you might instinctively think each “column” is wrapped in its own container and that I’ve floated both columns left or right; it’s how I would have developed this layout a few years ago. But doing that leads to the problem of one of the columns being forced to drop below the other on small screens.

Below is the same page as a single column on a narrower screen. The meta information from the left column sits below the article’s title from the right column but above everything else in that right column. Both “columns” of content have actually been inside the same container all along.

Screenshot of post from Vanseo Design with single column layout
My website as a single column on a narrower screen.

The image below presents a more abstract view of what’s going on. On the left, you see the layout as it appears when displayed as a single column. On the right is the two-column version of the layout.

Every element is its own unique block and serves as its own container. The page’s main heading is its own contained block. All of the meta information is inside another container directly below it. After that, every paragraph, subheading and image is also its own self-contained block of content. The same goes for anything else that might end up in a post, such as a block quote or code block.

Abstract diagram showing content on Vanseo Design with single and 2 column layout
A more abstract view of what’s going on.

On small screens, all of the blocks display in the source order. On wider screens, I shift this entire single “column” to the right by adding a left margin to each individual block. In the CSS, I have a long list of selectors with a single line of declarations. When I want something to appear in the “left column,” I float it left and reset its margin to zero.

The solution is hardly perfect. Blocks pulled into the virtual left column won’t slide up or down. They simply move to the left. This solution doesn’t enable me to display something from the bottom of the article at the top of the left column. But, hopefully, this illustrates how rethinking containers can help us intermix content from different columns into a single column.

The Next Web

The Next Web mostly drops columns down as it rearranges from three columns to one, but it does intermix elements at the top of the page.

Screenshots of The Next Web

The image above shows the website displayed as two columns (on the left) and a single column (on the right). The blue outline shows the container around elements at the top of the page. You can see that the secondary stories to the right of the top story drop below it but remain above the other stories, due to the way the containers have been set up.

In the single column, the images in all of the first three stories are now physically the same size, so the hierarchy has changed. However, the second and third stories are still seen as “less important” because they come after the top story.

This intermixing is achieved by thinking in advance of which elements will shift columns and by placing elements that need to be rearranged in the same container, separate from other containers of content.


Time magazine intermixes content across columns and containers. Notice how the “Latest Headlines” section (in the green container) moves from the right column at the top to just below the main image and story links in the single column.

Screenshots of Time Magazine website

While not shown in the image above, the row of four images on the left follows the “Latest Headlines” in the single column. The remaining content in the right column drops much further down. You can see this by viewing the website directly.

The website achieves this intermixing by ignoring most of what I’ve said in this post about using fewer containers. Instead, it uses JavaScript to rewrite the HTML, moving elements in and out of different containers as the layout changes. It is another solution to this issue, although better planning up front is preferable.

Enoch’s Fish & Chips

The navigation on Enoch’s Fish & Chips’ website integrates with the logo and company blurb when the layout is a single column:

Screenshot of Enoch's Fish and Chips with single column

The navigation (and the tagline further down) moves to the right column when the browser is wide enough to accommodate multiple columns.

The website rearranges these elements similar to the way I rearrange elements on my own website; the logo, navigation, blurb and tagline are each a separate container. To move them around, the website uses positioning instead of floats, but otherwise, the principle is the same.

Screenshot of Enoch's Fish and Chips at 2 columns

Closing Thoughts

Many of us have, understandably, been taking the easy way out with responsive layouts. When the width of a screen cannot accommodate a column, we’ve been dropping the column in its entirety below other columns. In some cases, this is perfectly fine. In others, it breaks the carefully designed hierarchy.

We face two issues in maintaining the hierarchy. The first is having to follow the HTML source order when the layout is a single column. The solution to this problem is a technical one and is coming in the form of new CSS specs that will allow the display order and the HTML source order to be different.

The second problem is less technical and more a challenge to how we think about structuring our HTML, particularly to how we use containers. Elements can’t move from one container to the next. We can fake it with complex CSS, or we can rewrite the HTML with JavaScript; but, ultimately, if we want to intermix elements, we’re best of using fewer HTML containers to create columns. Instead, we should leave more of our content blocks in their own containers and use CSS to create virtual columns in the layout.

This solution doesn’t confine our elements to structural containers and instead enables us to more easily rearrange the elements in different layouts.


© Steven Bradley for Smashing Magazine, 2013.

April 08 2013


March 04 2013


February 25 2013


How To Clean Up & Optimize Your WordPress Install

WordPress is a pretty robust application that is kept up to date with regular bug fixes and security patches, but it really benefits from a bit of maintenance to keep it running fast and efficiently. Over time WordPress saves snippets of information to its database, which can become bloated with unnecessary values, thus slowing down your site and putting more stress on your server setup. In this post we’ll look at 10 ways you can give your WordPress install a spring clean to trim the fat and put everything in its place.

Backup your database

Hopefully you will already have some kind of database backup system in place. If not, your entire site is at a serious risk of being completely lost. There are lots of plugins available that not only make backups on command, but can also be set to take scheduled backups and send them to your email account. I recommend WP-DBManager for its combination of useful abilities. Before following any of the other steps in this post, make sure you have a current backup and ensure your saved backups aren’t all residing on your server.

Backup your files

The most important parts of your WordPress install are saved within your database, this includes the post content and all the options you’ve configured for your site. If you’re creating database backups you’ll have safe copies of all this information, but you should also be taking backups of the files on your server. Core WordPress files and plugins can all be re-downloaded from the web, but any images you’ve added to your posts will need backing up so they can be restored should the worst happen. Make manual backups of your wp-content > uploads directory using an FTP app, or use plugins such as WordPress Backup to Dropbox to make scheduled backups for you.

Remove unused settings from old plugins

If your site has been live for a number of years, think of all the plugins you’ve installed and since removed in that period of time. Well built plugins will clean up after themselves, but others might have left their settings as values in the options table of your database. These settings are useless if you’re not even using the plugin they’re related to, so clearing these out will shave a few kbs off your overall database size. I like to install and run the Clean Options plugin every now and again to view the list of values and remove any I know for sure aren’t in use.

Disable & delete post revisions

WordPress automatically saves multiple copies of your posts while they’re being written so they can be restored if an editing mistake is made. This can be quite handy if you’re running a multi-author blog, but for most of us it means there’s an insane number of duplicate posts bloating our databases. You can easily delete existing post revisions using plugins such as WP CleanFix and turn off the post revision feature by adding the following line to your wp-config file:

define('WP_POST_REVISIONS', false );

Delete unused Post Meta information

Every post in your database is saved with a collection of information. Such information can bloat your database with values that are no longer relevant. One such example is the Post Meta Edit Lock values which prevent a post from being altered if another author is currently working on the same post. Seeing as I’ve never used multiple authors this meant every post in my database had a series of lock values associated with it. Deleting these saved a few hundred kbs. The WP CleanFix plugin also has the ability to check and remove these options built right in.

Disable image resizing

Whenever you upload an image using the built-in media tools of WordPress it automatically generates a thumbnail, medium and large variants. If you prepare your images beforehand at the correct dimensions these images are just taking up more and more space on your server. They’re not causing any major harm and don’t slow down your website, but they will make file backups take much longer. Stop these duplicates from being created by changing the dimensions of the thumbnail, medium and large settings to 0 under Settings > Media.

Empty the spam queue

The Akismet plugin does a great job of capturing spam comments before they go live on your posts. Since we don’t see this spam we often don’t think to empty the net. Every spam comment is saved so you can make the final decision as to whether it was wrongly accused, it’s not until you actually empty the spam queue that you’re saving this extra space in your database. Head to Comments > Spam and hit the Empty Spam button to nuke all the junk in a single click.

Reduce spam by closing comments

If you’re running a fairly large site you’ll know that discussion tends to drop on posts as they get older. Usually the only comments added to posts way back in your archives are dirty spam messages, so a simple fix to avoid letting this add bloat to your database is to close comments after a number of weeks. Under Settings > Discussion check the option of Automatically close comments on articles older than X days and enter your desired time period to allow discussion on your latest posts.

Optimize your database

After deleting so much bloat and removing hundreds of unnecessary values your database will now benefit from optimization more than ever. Optimizing your database essentially defrags it and reclaims the unused space. Many of the plugins we’ve talked about so far include a Repair and Optimize feature. WP-DBManager in particular is a good choice that includes the option of scheduled optimization every month.

Check your security

After a good spring clean it makes sense to give your site’s security a quick check over. Use the WP Security Scan to check for vulnerabilities in your setup and protect yourself from common brute-force attacks with the likes of the Login Lockdown plugin.

September 03 2012


Changing Perspective: A New Look At Old Problems // Approach to innovative solutions


Insanity: doing the same thing over and over again and expecting different results.

– Albert Einstein

There is an old story of blind men and an elephant. The blind men all meet and are asked to describe the elephant. One says that an elephant is long and skinny like a snake. The other says that the first doesn’t know what he is talking about and says an elephant is like the trunk of a tree, round and thick. The third says they are both wrong, that an elephant is wide and circular like a giant disc.

In some versions, they stop talking, start listening and collaborate to “see” the full elephant. When a sighted man walks by and sees the elephant, they also learn they are blind.

It doesn’t take us very long to figure out that each of the men is talking about a different part of the elephant (trunk, leg and ear, respectively). The men are blind, so they fail to take in the whole elephant. Because their experience was limited to a certain part of the elephant, they assumed that the elephant was the part they could see. One could only feel that the elephant was a trunk, so he thought it was like a snake.

Blind Men And Elephant

Being a creative is often like being a blind person. We are dealing with a problem that we cannot see. We talk about it, we look at it, and then we try to solve it understanding only the parts that we can see. The problem is that we can get in a rut and start seeing the same problem and offering the same solution. What happens, though, when, either by choice or by circumstance, we need to come up with new solutions? What happens when we need to innovate? Innovation by its very nature entails coming up with a new approach to an old problem.

To come up with a new approach to an old problem, we often need to look at the problem differently. If we do the same things, we will get the same results. If we use our same bag of tricks, we will end up with the same magic show. In my experience, when a new solution was required, the best thing I could do (whether I was stuck or not) was to change my perspective on the problem. This could mean looking at new visuals, asking different questions or simply refining my language. Once you have explored new angles of a problem, be they visual, functional or strategic, you will often see something new, which will set you off on the road to creativity and true innovation. When all you see is the ear and leg, you usually just need the trunk to complete your view of the elephant.

A Little Neuropsychology

To answer the question of how a different perspective leads to a creative solution, we need to understand a little neuropsychology and what happens in the brain when you are solving a problem. According to Jonah Leherer in his book Imagine, the “A-ha” moment is essentially an abstract connection that the right brain makes between two disparate ideas. History has countless stories of people having amazingly innovative ideas from seemingly insignificant events. One of my favorites is the story of how Robert Sherman came up with the song “A Spoonful of Sugar” when his son came home from school one day after having his blood taken (they had given him a cube of sugar). Another story is Newton theorizing about gravity after an apple dropped on his head, or Archimedes and the bathtub, and on and on. Some event triggers an idea and the brain makes a connection to creatively solve the problem.

How does this process work? When you are faced with a puzzle, be it visual or functional, you solve it by first running through all of your usual solutions that are obvious — such as the e-commerce layout that you have used a million times, design patterns that you know, the button style that you love, the font that always works, etc. You first engage your left brain by recalling the obvious tried and true solutions. Sometimes these ideas work, sometimes they don’t. As soon as your left brain has exhausted all ideas that don’t work, you get frustrated and you hit the wall. The wall is the inability of your left brain to create new connections from your old ideas. You are unable to connect the old ideas with fresh ones, to find different solutions with the same methods. The only way to get unstuck is to try to see the problem in a new way.

At the point of total frustration, your right brain engages. Your right brain solves problems with images. Once the left brain has gotten out of the way in total frustration, your right brain is able to freely associate in the language that it knows: pictures. Then, it hits — the connection is made, and all of a sudden, like magic, you are off and running, and everything falls into place. What you have just done is create a new connection in your brain, literally.

It usually happens at the most unlikely of times — when a participant in a research session says something that tips you off, or when your spouse shows you something, or when a friend tells you of a frustration and how they solved it. It comes unexpectedly, and two different objects are connected to create something new. Ultimately, most of the research and strategy phase is simply there to create these “A-ha” moments, which we then execute on once we reach the concepting phase.

How To Gain New Perspective

Below are a few of the tricks I have learned to inspire creative thought and to look at problems differently in order to help the brain create connections. While the first few suggestions are mainly for visual design, I find all of these useful for figuring out feature sets and defining scope, and they are completely appropriate for UX and visual designers alike.

Print Out Visuals

Printing a bunch of stuff and throwing it up on a wall is the single best way to see a new solution to your problem. Recognizing patterns is much easier when you are able to see visuals in close proximity than when relying on memory. Print-outs laid out in close proximity help the brain to make connections and generate ideas instead of merely retaining information.

What to print out? Two things in particular help: competitors and inspiration.


For competitors, if you are working on a product detail page for an e-commerce website, pick out 10 to 15 product pages from competitors and print them out on 11 × 17-inch paper, and look for things that work well. Also, observe things that do not work well. Your competitors have done you the good service of trying ideas before you, and you get to test drive their websites and evaluate their ideas without putting in months of development. Group together methods and design ideas that work well for competitors — and note your findings. There will also be a lot of failures to learn from, so note those as well. Seeing what is wrong on other websites could cause you to try something completely new. Seeing the cliches will free you from those tired ideas and allow your brain to run free on different ideas. Even if you are not in “competition” with anybody else, find the nearest verticals and you will make connections faster.

For inspiration, take 10 to 15 pages with various UI elements, print out the pages, cut out the pieces that you want to use, and put them on a board. Record your ideas on sticky notes, After doing this, you will start to see patterns, which you can use to visualize a solution. If you have done this and you are still stuck, put up some other relevant inspiration — be it a vibe, a similar layout or a design pattern — and see what happens. Just keep printing stuff out and rearranging it until you see something. When printing out inspiration, include some things that are totally different from what you saw in competitors to avoid copying what they did.

Refine Your Language

People often describe the same thing using different language. Individuals will get attached to the words they use to describe a problem, and then the group will get stuck on semantics. This is especially true when defining new products and features. We’ll often use a different word or two, and then everything will freeze. It could be the language used to describe user instructions, or it could be the label for a button. It could also be your names for particular objects in your project or particular attributes of those objects. Language is incredibly powerful. As visual designers, we might not be as tuned into it as we need to be, and we’ll shrug it off as the domain of copywriters. But copy and visuals are intertwined so intricately that separating one from the other in Web design is impossible.

So, we need to make sure we’ve got exactly the right language, and we need to experiment. Start by changing the language on the page or refining the instructions. Additionally, you could labels things that did not previously have labels or update existing labels.

If you are working with a copywriter, get them involved in refining any language issues you have with the website. They will be a fabulous source of ideas on language, product terminology and refining instructions.

Language can also block teams. Using different words or phrases for the same thing, especially when working on products that don’t yet exist, can lead to internal confusion. Using different terminology will divide a team rather than unify it. So, having team members define their use of words could help. If you step back and take a deep breath, you might find that you have already solved the problem and just needed to clarify the language in order for everyone to see it.

Ask Different Questions

If you are stuck, it is probably because you need an answer. Trouble is, you might not be asking the right question. If you ask the same question over and over, you will most likely get the same answer. So, how do you rephrase the question or ask a new question to gain new insight?

Sometimes the problem is visual. Something in the layout is distracting or causing it not to work, so you need to address a different part of the layout. The root of the problem might be not the element you are working on but the surrounding elements. Here are a few things to try:

  • Delete or remove other items on the art board and see what happens. This could reveal a solution to the problem.
  • Try an illustration instead of a photo.
  • Change colors.
  • Break the grid.
  • Emphasize different parts of the page.
  • Try a whole new approach to the navigation, not just a new menu bar.

Document Data in a New Way

On a project I was on, we were having trouble pinpointing how to compare feature sets between products. We had several options but kept going around in circles debating on the right direction. Finally, I found a new way to display the comparisons and tried it out as an experiment. Wham! It showed the information in a new way that made sense to the team, and we all got it. So if you are working with data, how can you display or visualize the data in a new way? Could you look at new parameters? Could you reformat your deliverables? Looking at the data in different formats enables you to see new things.

Competitive Analysis
The magical data visualization: overlaying rankings of competitors based on key opportunities.

Analyze Something New

With there being so many techniques and models to display data, exhausting the entire bag of tricks in every project is impossible. If you are looking to see the problem differently, put the problem in a new model: a storyboard, a mental model, a new analytics report, perhaps even changing the format of the data. You will see different things with different models. It will add more detail to the strategy and help you understand the design challenge in the big picture, helping you discover new risks and solutions. Adding data models could also help the business’ decision-makers and team members uncover crucial risks earlier in the process.

Zoom Out to the Next Largest Context

Looking at the big picture can also lead to a new way of seeing the problem. When a problem is very specific, look at how it fits into the next largest context. In product or Web design, this could mean storyboarding how the app or website is to be used, including the location and psychographics of the user and what they are trying to accomplish. Better understanding how the business works might also help. Understanding design in the context of how the app fits into the big picture of the business can help you refine the strategy and eliminate options to arrive at a solution more quickly.

Zooming out sometimes helps me realize that I am asking the wrong question. If you are asking how your problem (say, one about a feature set or product requirements) fits into the big picture, you might find that the big picture is not big enough and has to be expanded (such as by revising the strategy or the user flow). Perhaps the feature set or product requirements don’t make sense because you haven’t zoomed out wide enough and don’t understand the product in context. Once you look at it in the big picture, your entire team might realize that its approach is wrong — or perhaps right!

Final Thoughts

When approaching your next project, try to build in new ways to look at the problem. We’ve explored just a few here. You could also try new project workflows (such as lean or agile) or new tools (such as eye-tracking or usability tests or different software) or new music or whatever.

Going back to our story of the blind men, where is your team blind? Where can you look to make this elephant a little clearer. Design work is very much about feeling your way around and imagining the elephant. By looking at different dimensions (data, competitors, inspiration, language, context), you are able to see a problem more three-dimensionally. No design challenge is so simple that it lacks additional facets for exploration. You might just find the “A-ha” moment you were looking for or discover a major innovation as Newton did or uncover something small that allows you to focus and prioritize your team.

Remember, if you do the same thing, you will usually get the same results. Conversely, if you try new techniques, you may never go back.


© Stuart Silverstein for Smashing Magazine, 2012.

August 13 2012


How To Create a Pure CSS Dropdown Menu

With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu.

View the pure CSS dropdown menu demo

The menu we’ll be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action.

View the pure CSS dropdown menu demo

The HTML Structure

		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a></li>
		<li><a href="#">Articles</a></li>
		<li><a href="#">Inspiration</a></li>

First up we’ll need to create the HTML structure for our CSS menu. We’ll use HTML5 to house the navigation menu in a <nav> element, then add the primary navigation links in a simple unordered list.

		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a></li>
		<li><a href="#">Articles</a>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
		<li><a href="#">Inspiration</a></li>

The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option.

		<li><a href="#">Home</a></li>
		<li><a href="#">Tutorials</a>
				<li><a href="#">Photoshop</a></li>
				<li><a href="#">Illustrator</a></li>
				<li><a href="#">Web Design</a>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
		<li><a href="#">Articles</a>
				<li><a href="#">Web Design</a></li>
				<li><a href="#">User Experience</a></li>
		<li><a href="#">Inspiration</a></li>

The secondary sub-menu is nested under the “Web Design” option of the first sub-menu. These links are placed into another unordered list and inserted into the “Web Design” <li>.

HTML menu

So far this leaves us with a neat layout of links with the sub-menus having a clear relation to their parents.

The CSS Styling

nav ul ul {
	display: none;

	nav ul li:hover > ul {
		display: block;

Let’s begin the CSS by getting the basic dropdown functionality working. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a UL with the display:block; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.

nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
	nav ul:after {
		content: ""; clear: both; display: block;

We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

HTML menu

nav ul li {
	float: left;
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		nav ul li:hover a {
			color: #fff;
	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;

The individual menu items are then styled up with CSS rules added to the <li> and the nested anchor. In the browser this will make the link change to a blue gradient background and white text.

HTML menu

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
			nav ul ul li a:hover {
				background: #4b545f;

The main navigation bar is now all styled up, but the sub menus still need some work. They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.

HTML menu

nav ul ul ul {
	position: absolute; left: 100%; top:0;

The final step is to position the sub-sub-menus accordingly. These menus will be inheriting all the sub-menu styling already, so all they need is to be positioned absolutely to the right (left:100%) of the relative position of the parent <li>.

The Completed Pure CSS Dropdown Menu

View the pure CSS dropdown menu demo

View the pure CSS dropdown menu demo

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...