View Post
The Web Designer’s Cheat Sheet

The Web Designer’s Cheat Sheet

When working on a new site, most web designers are no stranger to all-nighters, copious amounts of coffee and even repetitive strain injury (ouch!). No surprise then that the best coders are lazy coders that are always looking for anything that makes coding quicker, less tedious and more fun.

To make your life easier, we have put together the following “cheat sheet” full of must-know time and effort saving tips for the lazy coder.

Code Editor

Before you even think about writing your first head tag, download an HTML code editor such as Sublime Text 2. With useful features such as the Quick Add Next command, allowing you to quickly jump between tags to select the one you want, it also highlights problems in your code as you write, saving you from searching for a needle in a haystack later on.

The Web Designer’s Cheat SheetImage by Elliot Jackson

DRY (Don’t Repeat Yourself)

Coined by programmers Andy Hunt and Dave Thomas in their book, The Pragmatic Programmer, DRY (sometimes called Single Source of Truth) is an important principle in web design. In theory, DRY means that you can apply document changes in just one place, saving you the time and effort of changing every file.

If you currently rely on copy and paste, do yourself a favor and start using ‘includes’, either with PHP or using a code generator such as Hammer for Mac. The ‘include’ command simply allows you to insert one PHP file into another. A basic example:

   <?php include(“filename.php”) ;?>

This ‘Russian Dolls’ technique is particularly handy if you have a header or menu file that you want to use on every page without typing out the script every time.

You can also use variables or mixins to reuse chunks of CSS, properties or selectors over and over without repeating yourself.

Use a CSS Pre-Processor

Sass (Syntactically Awesome Style Sheets) is a meta-language that you can use on top of your flat CSS to simplify and ‘clean up’ your script, making it instantly more manageable and lightweight.

Sass and Compass, an open-source CSS authoring framework, can take the headache out of responsive design by automatically creating cross-browser friendly script. They also allow you to create multiple, small files, which are more manageable than a single, behemoth file!

The Web Designer’s Cheat SheetImage by Jason Vanlue

Write for Humans

Don’t forget, you will have to deal with the code you write. Will you still understand it in 6 months’ time? Make it easy for you (or a colleague) to find, change or update things by writing with humans in mind. Keep files small and name your files and folders consistently for easy location later on.
Ultimately, however, it is the machines that need to understand your code. Save yourself the extra hassle and use Codekit (Mac) or Mixture (Mac/Windows) to convert it automatically into computer-friendly language.


HTML software Emmet allows you to write an entire chunk of flawless HTML with just one line of code. Among its many useful features, it will automatically convert a CSS-like abbreviation into HTML, let you jump quickly between elements and allow you to “comment” a full tag with just one click.

Know Who to Ask

No matter how good your coding skills, there will always be a time when you need a little help. Rather than scrolling through endless forums searching for answers, you can count on MDN for useful tutorials and references, and Quirksmode for the most reliable cross-browser compatibility information. Add both to your Favorites now.

Go Mockingbird

Wireframing the layout of your site is an important part of the web design process – you wouldn’t build a house without first laying down good foundations, so why do the same for a website? A lightweight wireframing tool such as GoMockingbird is an easy way to ensure your ideas are pixel perfect and translate to the screen.

As every web designer will know, it can be difficult for clients to visualise how their website will look when it is finished. GoMockingbird creates professional looking wireframes that you can use to reassure even the trickiest of clients in the early stages. With a wide range of widgets, including sliders, checkboxes and social buttons, GoMockingbird gives your wireframe a level of detail that can make all the difference to client perception (and your own clarity).

Lorem Ipsum (

Let’s face it, who can be bothered to memorise lines and lines of ‘Lorem Ipsum’ dummy text? The Latin words, which are taken from Roman Philosopher Cicero’s De finibus bonorum et malorum (On the Boundaries of Goods and Evils), have been used since the 1960s (possibly earlier) as placeholder text in design. Lorem Ipsum provides ‘natural’ looking text without the distraction of actually having to read and understand it. Although most designers are well-acquainted with dummy text, the handy Lorem Ipsum generator saves you the time and effort of copy and paste, providing you with anything from a few words to multiple paragraphs and even lists, all ready to use at the touch of a button.

The Web Designer’s Cheat SheetImage by Jess Mass


We hope that you will find these tips useful and that they will make you even more lazy – and therefore more efficient – as a web designer. Happy coding!


View Post
Why Getting Feedback is Vital for Freelance Web Designers

Why Getting Feedback is Vital for Freelance Web Designers

Freelance designers often have to take on more types of responsibilities than those of us who work as part of a larger design agency or design team. Freelance designers don’t always get the benefits of being able to delegate a portion of their design projects to another, or to lean on other individuals when it comes to administrative and managerial duties like invoicing/billingproject planning, taxes, sales, etc.

Because freelancers have so much on our plates, we need all the help we can get, regardless of where this help comes from, or what part of our creative process we can get it on.


Which is why, while generally helpful to all web professionals, feedback is very crucial to freelance workers in the web design industry.

One need not even be a freelance web designer to see and understand how much weight feedback carries in our work.

In this article, I’ll discuss my main reasons for why I think feedback matters so much to freelancers.

Feedback Makes You a Better Designer

Feedback gives us an avenue for sharpening our skills and honing our craft. When engage with the users we are building our designs for, we gain insights and viewpoints that help us improve our current and future products and services.

Many of us in the industry hand off a design, and then move on to our next contract without giving the previous one much of a second thought.

Out of sight and out of touch with the client, then certainly out of mind. However, is that really helping us move forward with our creative and professional abilities?

I can understand the view that once we have handed off our deliverables, technically and legally, our work is done.

But, to me, until a web design has real people using it, our duties aren’t complete yet. That final step of having real users interacting with our product is very important in allowing us to develop our skills further.

Once the design is actually in use, we can then garner important insights as to what we did well in the project. And what we didn’t.

We can harvest this valuable resource of information through the implementation of feedback-gathering tools, by reading comments on social media with the use of social media monitoring tools, teasing out trends indirectly via website analytics, and so on.

In addition to getting feedback from our users, we can also get feedback from our peers. Doing so also helps us improve our design work too.

Getting feedback from other designers in the industry isn’t difficult these days. There are many places to turn to, to get that to happen. From community sites like Dribbble to dedicated online critiquing sites and forums such as Please Critique Me and Reddit’s r/design_critiques subreddit (which has over 9,700 readers), we have a lot of opportunities in our grasps for obtaining peer-feedback on our work.

Feedback Keeps You Humble

Receiving feedback from our clients, our users, and our peers can be humbling. That’s a good thing.

Staying humble helps keep us on a dedicated and continual path towards improving and learning our craft with unending drive and passion.

If we become complacent with our creative processes, or if we start to believe that we have pretty much advanced to the top of the game, then we grow stagnant in our abilities and we stop pushing ourselves to innovate.

Idleness and passivity, being fine with the status quo, is dangerous ground to tread on for anyone in any professional field; but this is even more true in a competitive and fast-moving profession like the web design industry.

Feedback from our users does not pull any punches whatsoever. None at all. There is no sugar coating. Or any attempt at gently and politely giving feedback from a constructive place.

You will often get feedback from a user who is already frustrated about something in your web design that’s broken or that’s preventing them from getting the thing they want done.

That type of user feedback can brutal and raw, but what it is also, is that it is honest. It will contain things you need to hear about your work that other people in other situations will be too polite or too unconcerned to tell you.

True, this type of feedback I’m talking about will more than likely contain some things that you probably don’t need to hear too, but that’s where our work lies: In deconstructing feedback to draw out that which we need to take away from it.

Feedback Can Help with Your Business Process

Let me share a story with you, about how user-contributed feedback has helped my freelance design business.

After learning (in a particularly frustrating way) from a client of mine that trying to handle the domain registration and hosting setup for my clients can become a major headache, I ended up deciding to drop that service as part of my web design packages.

Dropping the service of registering my clients’ domain names and setting up their website’s hosting for them didn’t seem like a big deal at first.

However, you should also know that many of my clients are small businesses who have no employees or resources to route towards website administration and management.

So, initially, after this decision was made, we had a lot of problems because our clients were having a tough time with web hosting.

What would happen was they would be overwhelmed with how to find the right web hosting solution for their specific needs.

Or worse.

They would bargain basement shop on web hosting services — thinking that hosting companies were all equal and that the price was the most important distinguishing factor between them — without having a look at what people were saying about the web hosting service they would get. Which, as almost anyone with even basic experience in website administration can tell you, doesn’t always produce the best results.

Oftentimes, my clients would end up with a bad hosting solution on an oversold shared hosting service because all they could see was the price of the service, without knowing to consider the other factors that also matter in choosing web hosts, such as reliability, reputation, features like disk space and bandwidth, and so forth.

So I started directing my clients to helpful online resources like Web Hosting Geeks (a web hosting review site) to help them pick their web hosts.

Reading user-contributed feedback and reviews from other people gave my clients true, unbiased insights about the web hosting solutions they were considering.

Feedback in the form of reviews from actual people or third-party organizations is more reliable and impartial compared to reading about a web hosting company through the company’s own website and marketing team.

Think of how often we turn to user-contributed reviews these days for making purchasing decisions (e.g. via social commerce or our social networks). How many times have you ordered a product off Amazon or downloaded an app on your smartphone without first reading through what some of the existing customers have had to say about it?

I now have fewer clients having trouble with their web hosting because of user-contributed feedback.

User-generated feedback and reviews can relieve freelancers from some burdens in our business processes, and all we have to do is take advantage of them when we can.

Feedback Gives You a Different Perspective

The value in receiving feedback lies in its fundamental nature, which is that feedback comes through a different set of lenses.

Trying to see a design of ours without the tinted lens we lovingly tend to view them through is not easy to do.

Users, clients, friends, colleagues, and other people come to look at our designs with a unique set of lenses, and it’s those lenses that will expose the things we may be overlooking in our work.

Let me share another story with you. I once had a user contact me about a navigability issue he was having with a web design I created.

The feedback completely floored me.

Having developed the design, I couldn’t imagine anyone being unclear about how the site’s navigation worked.

But that was because I had put the whole design together, and I knew exactly what to expect and do to move around it. I made the design, and I made it in a way that made sense to me.

I forgot that other people would not be viewing the design through the same lens as I was.

That was a wake-up call.

I had failed to consider another person’s perspective, and it cost me more time to go back in and make the correction.

And that will happen. We will make those sorts of mistakes, and we will fail to consider other people’s perspectives at some point in our design process.

Listening to feedback from others effectively helps us avoid or remedy these types of situations.