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 web designer’s 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.

Image 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:

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!

Image 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.

Emmet

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 (http://www.lipsum.com/)

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.

Image by Jess Mass

Conclusion

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!