I came across an article a while back on 30 web design tips to make your life easier that was just a wonderful source of ideas to help us web designers out in really simple and easy ways but could have a profound impact on your website. Some of these are truly inspirational- like the ones where you say to yourself, “I wise I thought of that” kind of good. I went ahead and picked my favorites and collected them down below for you all. Enjoy!
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 ofWeb 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.”
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.
64KB PNG!!! Smallest file size and high-fidelity transparency (Holy crap!)
17. Put your site on a Post-it
Does your design idea fit on a Post-it note, asks Elliott Fienberg? “One exercise I like to do is to write down your core content on a small piece of paper like a Post-it note,” he says. “This will help you figure out what is really important and what can be omitted. The small piece of paper simulates the attention span of most users these days.”
18. Plan your user flow
Want to know what to do with the rest of those Post-its? “You can expand this exercise by planning out your user flow on a series of Post-it notes,” adds Elliott Fienberg. “I guarantee your project will be far more focused.” Other sticky notes are available, of course, including virtual Sticky Notes on Windows and Stickies on OS X.
24. Use Pinterest for moodboards
Pinterest is a great way to get started collaborating on moodboards with your client
While we’re talking about keeping clients on your side, we all know that clients love moodboards. They’re a great way to collect elements together quickly and clue your client in – or even get them involved in the initial design process. The easiest way to get started? Create a shared board on Pinterest and invite your client to pin away.
29. Say yes to new challenges
Ben Howdle has another strategy for keeping the work flowing: say yes to work even if it’s outside your comfort zone. “Taking on jobs that challenge you helps you to develop and expand your skills much more than any tutorial. And deadlines are a powerful motivator to learn on the job.”
What about you? Do you have any little tweaks that really make your life easier? List them below!
Cheers!
-Matthew Vazquez