30 web design secrets to boost your skills!

Every web designer has a secret or two. Hard-won workflows, hidden hacks, and insider knowledge that are the mark of true experience and the stuff that separates great web design training from good.

Advertisement

Here, we've managed to persuade some of the web's busiest devs and designers to part with their most closely guarded tricks and tips. It's quite a collection.

Packed with professional know-how, you'll discover secret features of well known tools, the beta services that the design industry is buzzing about and CSS tricks that make page design for multiple platforms easy. So whether you're a beginner at online design or a web veteran, you're bound to uncover one or two tips here that will change the way you work.

Words: Karl Hodge

Faster coding

01. CodeKit for browser reloading

"If you're on a Mac then CodeKit is a must," says Keir Whitaker, co-founder of Viewport Industries. "The browser reloading feature is worth the small cost alone. The days of hard refreshing your browser to make changes take effect are long gone."

02. Apply global changes

Here's a coding tip from musician, producer and web dev Elliott Fienberg that can help speed things up at the early stages of your design work. Use the wildcard CSS rule - using an asterisk as the selector - and you can globally apply changes to an entire page. For example, to change all the fonts on a page to sans-serif, you just need: *{font-family:arial, helvetica, sans-serif;}

This is a great designer's trick to have in your pocket while you're going through the design process. Of course, it's not such a great idea to leave it in your live code, so use this trick carefully and sparingly!

03. Set garish outlines

File this in the "simple acts of genius" folder - a tip from Christopher Murphy of Web Standardistas that makes cross-platform design so much easier. "When working with media queries, set an outline in a garish colour," says Murphy. "For example: {outline:10px solid green/red/yellow/blue;}. This enables you to instantly see which exact rules are being applied to what you're currently looking at."

04. Check your character count

"45-75 characters per line is generally accepted as safe for comfortable reading," says Trent Walton, founder and designer with Paravel. "There's a quick trick to ensure your responsive or fluid design supports this. Place a line of dummy text on your page with an asterisk at character 45 and an asterisk at character 75. Now test the site to make sure it resizes within these parameters."

05. Use FitVids for video embedding

HTML5 has simplified video embedding, but designers still have two problems. The first is getting video to resize responsively, the second is to ensure resizing degrades gracefully for Flash when HTML5 embedding isn't supported. Enter FitVids, a jQuery plugin that takes care of all that for you.

Dealing with images

06. Smushit for image size reduction

It may be 2012, but sites with highly optimised images load faster and work better on more devices. "SmushIt is a great option to reduce image file sizes," says web developer and Microsoft evangelist Martin Beeby, and we agree. You may also want to give Trent Walton's fave ImageOptim a try.

07. Export images as 8bit PNG

Martin Beeby makes an old-school suggestion for handling PNG image files. "If you're exporting an image from Photoshop to PNG, and it doesn't need to be transparent, try exporting it as an 8bit PNG," he explains. "In most cases the image quality won't be affected but you will massively reduce the file size."

08. PNGQuant for image conversion

If you want to maintain transparency and minimise file size, there's a service that can help. PNGQuant can convert 24/32bit PNGs to 8bit PNGS and still maintain transparency. There's fancy for you.

Layouts

09. Use GuideGuide

"The best websites are designed to a grid," says Rhys Little, director of digital marketing agency Plug and Play. Setting up grids everytime in Photoshop can be tedious, though. He recommends Guide Guide: "It makes the process a breeze and save you a lot of time creating custom grids."

10. Use a 12-column grid

Another tip from Rhys Little: "Typically it is a good idea to use a grid with columns nicely divisible by 2, 3 and 4. Therefore, a 12 column grid is one of the most popular and versatile grids to use." Check out 960grid for more web design-friendly grid templates for a host of apps.

11. Find colour inspiration

We’re already fans of Adobe Kuler; Martin Beeby has uncovered a use we hadn't thought of: "I'm colour blind and so when I'm putting colour palettes together for a project I always reach for Kuler," he explains. He also recommends Colour Lovers - a creative community where members share colour schemes, designs and ideas.

Typography

12. ShiftIcons for icon fonts

"Use icon fonts as often as possible," advises Trent Walton. Icon fonts? Yep, font sets full of icons - quicker and more reliable than embedding a bitmap anyday. Take a look at ShiftIcons to get you started. With icons at $1.99 per set, you can use them as web fonts, directly embedded in a page.

13. Typecast for typographic palettes

Typecast, an app produed by the talented team at Belfast-based design agency Front, makes designing typographically rich sites a breeze. "It enables you to rapidly build and compare typographic palettes," enthuses Christopher Murphy. Typecast is currently in beta and registration takes a while, but we recommend it too.

14. Font Squirrel for free web fonts

Free web fonts have really come of age. With Font Squirrel, Google Web Fonts and the @font-face attribute of CSS3, there's no need to put up with the typography troubles the last generation of web designers struggled so much with.

Next: Tips for site planning, workflow, keeping clients happy and more!