Five Quick Web Design Tips From Team Envato

I recently had the pleasure of spending two weeks in Malaysia at the 2012 Envato Meetup. What a place! During our stay there I took the opportunity to glance over my colleagues’ shoulders, picking up tips and tricks as they worked. Here are five brilliant web design tips from the Envato team which I reckon you’ll love..

Jump to Each Quick Tip:

• Stuart Richardson: Multiple variants of one theme using Sass and Compass.
• Cameron Jones: Test your layout for responsiveness in seconds.
• Rodney Blackney: Gimme Bar FTW!
• Jacob Zinman-Jeanes: Never let your iPad out of your sight..
• Jeffrey Way: Don’t close your list items, let the browser do it for you.

Stuart Richardson
Tuts+ Front End Developer

Stu’s a big advocate of using CSS Preprocessors, specifically Sass with Compass. During the Envato conference he walked us through how he used them when building the marketplace themes, perfectly demonstrating how efficient Sass can be when working on large, multi-site projects.

Our marketplaces are all variants of the same theme:

A standard CSS approach would have you (for example) building base stylesheets to hold most of the structural styling, with additional stylesheets to alter the colors and graphics for each site. At best, you’d be maintaining multiple copies of very similar (if not identical) CSS files.

Not so with Sass. By writing a single set of base SCSS stylesheets (partials), plus a Sass variables file for each site variant, your project structure would look more like this:

Partials are chunks of style rules which can be included in your main file – they can be reused in other files too. By preceding the file name with a “_” the partial SCSS files won’t be compiled into deployable CSS themselves, they’ll just contribute to the application files you choose to build.

For example, you may have a Sass file which dictates all the form styles within your project. You name the file “_forms.scss” and bring it into your application file without the underscore or the file extension:

@import "forms";

No “_forms.css” will be generated, but the rules within “_forms.scss” will contribute to the file you’ve pulled it into.

Your variable files will set all the aspects of the theme which can alter, such as link colors, logos etc. They may look like this, for example:

/*themeforest variables*/
$link_color: #FFE59E;

This value can then be used in the main application Sass file, or any partials which are imported:

a {
  color: $link_color;
}

To generate a whole new theme all you have to do is alter the variables in one file (or drag in a different _variables.scss). To alter a feature across all the themes, you only need maintain one file; the partial where that particular style occurs.

We’ve introduced Sass and Compass on Webdesigntuts+ before now, so take a look if you’ve yet to make the jump.

Cameron Jones
Front-end Developer

Cameron has made it his personal crusade to make everything we do responsive. He’s already left his RWD mark on the new Rockable Press and Creattica sites, and will soon be working his magic on Tuts+..

Here’s a great tip to help you visualize your web layouts, at multiple resolutions, in seconds.

Get yourself over to Benjamin Keen’s site where he has a great JavaScript “Responsive Design Test Bookmarklet”. Alter the sizes of the viewports you’d like to test, then generate the bookmarklet.

All you need to do now is drag the link provided into your bookmarks. Whenever you’re viewing a site in the browser, hit the bookmarklet and the layout will appear in all the various resolutions!

But wait! There’s more! Cameron has taken this one step further and assigned a hotkey to this bookmarklet; all he now needs to do is type the appropriate phrase (for example “rwd”) in the url bar and the bookmarklet takes effect. Perfect if (like me) you prefer not to have a bulky bookmark toolbar on display at all times.

Cameron was using Firefox, which allows you to assign bookmark hotkeys with its handy Smart Keywords feature. I usually work in Chrome, which is sadly lacking this feature. However, there is a way round this, because it is possible to assign hotkeys to trigger search engines. Let’s now add our bookmarklet to Chrome in this fashion:

First, right-click the url bar and go to “Edit Search Engines..”

Then you’ll be given the option to add a search engine or query. This will act as your hotkey, so give it a name (whatever you fancy), assign a phrase (such as Cameron’s “rwd”), then paste the bookmarklet JavaScript into the final input.

Note: Your bookmarklet will have to be URL encoded, so make sure it looks like this:

javascript:document.write('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Cmeta%20charset=%22utf-8%22%3E…

not this:

javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8">...

Erik Meyer has a handy tool for encoding URLs if you need it.

So that’s it! Visit the page you’re working on, type the keyword into your url bar and bang! Instant RWD test!

Rodney Blackney
Designer

Pinterest not macho enough for you? Delicious too.. (wait, do people still use delicious?) Need a way to bookmark actual content, back it up to your Dropbox, and get visually inspired by what others are bookmarking? Rodney reckons there’s nothing better than Gimme Bar:

The modular interface will be a familiar sight to those of you who pin and bookmark with other services. Follow, favorite, backup, then share through all the social channels you’ve plugged in..

Check out what else Rodney gets up to on Twitter and Dribbble!

Jacob Zinman-Jeanes
Designer

Here’s the thing; when I asked Jacob for a quick tip, he lamely suggested a lorem ipsum extension, which will help you pump filler text into your designs.

But Jacob unwittingly taught me an alternative, invaluable lesson during the Envato conference: “Don’t entrust your iPad to Jess Hooper”. Jess works in the Melbourne office and is a member of the review team. She kindly offered to look after my iPad when she left the group and returned to the hotel one night.

The following day, while I was fighting my way through the Malaysian jungle, this came through on someone’s mobile:

See what Jess, Jacob and my iPad got up to..

A Tumblog dedicated to my iPad and its shenanigans that fateful day.

Joking aside, Jacob is a very talented designer. You’ll have seen his work in places such as the million.envato.com and 1,000 WordPress Themes sites, along with many of the Marketplace bundle and Rockable sites. The tip to take away from this is:

Build a Tumblog whenever you have the chance.

It’s straight-forward, it’s quick, it’s fun and you can practice your theming skills. Jess, I will get you back.

Jeffrey Way
Tuts+ Premium Course Producer

Watch Jeff work and, even if he’s not teaching you, you’ll learn from him. What I picked up from him this time might not sound like the biggest time-saver in the world, but here it is:

You don’t have to close your list item tags, let the browser do it for you!*

*by no means compulsory..

This feels kind of unnatural, a bit like omitting the quotation marks from your html attributes:

<input type=email>

but relax, it’s fine. Next time you find yourself churning out list items, try doing them like this:

<ul>
	<li>Here's my first list item
	<li>And here's number two
	<li>I'll finish with this one
	<li>Or maybe this one.
</ul>

Many aspects of HTML markup which we’ve been trained to think of as compulsory, are in fact, entirely optional. We tend to think of this as invalid because of the way XHTML validation used to beat us up over it. If you prefer to leave </li> tags out, if it saves you time, ditch them. Browsers will still know exactly what you mean.

The same is true of </html>, </head> and </body> . For more information on exactly why this is the case, check out Jeff’s recent Rockable book on HTML5.

Conclusion

Well, I hope you found these random tips helpful in some respect (I know I did)..