Viget Inspire

Let me start by saying that I am not a developer. Sure, I can write some pretty solid HTML and CSS, but beyond that I defer to our great team of developers. So when I first heard about Sass, the right side of my brain freaked out. While the idea of Syntactially Awesome Stylesheets sounds pretty cool, I was afraid that Sass was going to make writing CSS more like programming Ruby, PHP, or Javascript. If you've been scared away from using Sass for the same reason, I'm here to tell you that nothing could be farther from the truth. Sass actually gives us some really powerful ways of writing CSS more efficiently.

If you're looking for a tutorial on getting started with Sass, this isn't it. You can find everything that you need to get rolling on the official Sass tutorial. This post is also less technical and more about my experience, some lessons learned, and a few tips from an actual project. I'll be referring exclusively to Sass 3, the latest syntax that is also known as SCSS. This new syntax uses semicolons and brackets to specify blocks of code, so any standard CSS file is already a valid Sass file. (You're feeling better already, aren't you?)

Continue reading "Sass: A Designer’s Perspective"

Leave a comment ( 15 )

If you’ve ever been in a situation where you need to make modifications to a page or a site’s HTML, CSS or JavaScript but don’t have direct access to the source code, it can be pretty frustrating. Whether you're working on client’s live site or if you’re helping someone remotely, you have to somehow make the contents of the site editable locally.

There are tons of tools out there to automate the process of crawling a site and downloading all the necessary files. There are Unix command line tools like wget that have plenty of tutorials for downloading websites, and graphical interfaces like Net Vampire for Windows and SiteSucker for Mac OS X. But if you want a faster method with fewer files to download, the HTML spec has you covered.

Continue reading "A Little Debugging Magic with HTML’s Base Tag"

Leave a comment ( 7 )

Yep, it's me again. The pro-process designer who wants you to use smart objects and break those awful Photoshop habits. Are you noticing a theme yet? I love efficiency. And organizing. And most of all, organizing efficiently. So I've got yet another process-tweaking post for you, and this time it's epicly long and comes with free PSD templates. FREE PSD TEMPLATES, people. And I didn't just write that for the search traffic. They really exist.

This time I'm breaking down my techniques for designing large sites and sharing tools for efficient comp production. I'll walk you through my process, and then you can add your ideas to the mix.

Continue reading "Design For Efficiency: Photoshop Techniques & Templates"

Leave a comment ( 32 )

Hi! This the first in a series of simple design & front-end techniques that you can put to use on a daily basis. OKAY LET’S GO!

“The time required to move to a target is a function of the distance to and the size of the target.”

That's Fitt’s Law. Larger, closer targets make interaction faster, simpler, and friendlier. This is especially evident on an touchscreen device with no hover states — the bigger the hit area, the more confidently you can tap, and the better the experience feels. On the iPhone, Apple even extends the hit area of the bottom tabs and highly-used letters to reduce the likelihood of missed taps.

Continue reading "Max Out Your Hit Areas (Everyday Techniques No. 1)"

Leave a comment ( 8 )

I like to think I'm a pretty ambitious person, but there's something I find myself abhorringly lazy about. It's the stupidest kind of lazy because it actually makes my job harder and less enjoyable. It's counterproductive to productivity. So what is it? I'm horrible about learning shortcuts. I use very few keyboard shortcuts, even for applications I work in constantly. I am glued to my mouse and don't have custom preferences set up for most programs. When the Viget developers watch me navigate through menus and folders, they must be dying inside.

I've been working on improving in the shortcut area, though. One easy fix came to my attention recently while working with Git, Viget South's favorite version control system. It's a change so easy and helpful, I was embarrassed by how long I had avoided doing it. Thought I'd share so you can stop being lazy too.

If you work with Git on a Mac, you probably run some or all of your commands through Terminal. And in Terminal, you probably find yourself typing out some long and tedious commands over and over again in full. If you watch developers tooling around in there you'll notice they have a set of shorthand commands they use. Git Status becomes "gst", Git Checkout becomes "gco", etc. It seemed pretty magical to me, which I took to mean complicated and too technical to bother with. Turns out those little shorthand commands are called aliases, and it takes about 30 seconds to add a few to Terminal. The payoff is lots and lots of saved keystrokes.

Step 1: Open .profile from Terminal

I do this by typing the following command in Terminal: open /users/username/.profile (where username is the name of the user profile you want to edit)

The open command uses the same default application to open a file as Finder. If for some reason it's not opening in the program you want it to, you can force it to open in TextEdit by changing the command to "open -a TextEdit /users/username/.profile

This should open your hidden .profile file in TextEdit where you can easily make changes. Just don't go crazy within this file. Leave existing items untouched, lest you screw up another application's preferences. Hidden files are hidden for a reason, so proceed with caution.

Step 2: Add your aliases

All you have to do is type "alias [shortcut]='[original command]'

Here's a list of general ones I have set up for Git. You could copy and paste these directly or make your own.

alias gst='git status'
alias gc='git commit'
alias gco='git checkout'
alias gl='git pull'
alias gpom="git pull origin master"
alias gp='git push'
alias gd='git diff | mate'
alias gb='git branch'
alias gba='git branch -a'
alias del='git branch -d'

You can create aliases for anything you type frequently into Terminal, not just Git commands. I also added a few shortcuts to the directories i use most often. Example: alias mamp="cd /applications/mamp/htdocs/"

Save the changes, then fire up Terminal to test out your new cool alias commands. That was painless, wasn't it? Share your suggestions for quick life-energy savers like this one in the comments below!

(Not using Git, but curious about it? Check out this post from the Inspire archives - Git: A Designer's Perspective. You'll also find lots of Git goodness on the Viget:Extend blog, including A Gaggle of Git Tips. Thanks to Chris, who showed me this trick last week, and to David who showed me the same thing about a year ago when I was too lazy to bother putting it into action.)

Leave a comment ( 15 )

In my "Breaking Bad Habits in Photoshop" post, I briefly talked about Photoshop's Smart Objects. It seems like many designers are still ignoring them. Maybe you're confused about how and when to use them, or too ingrained in your existing ways of doing things to explore. I sympathize. But whatever the excuse, if you aren't using Smart Objects for your comps you're missing out. They are an easy way to save yourself from tedious maintenance tasks in your Photoshop docs. Keep reading for ideas on speeding up your workflow with smart use of Smart Objects.

Continue reading "Genius Ways To Use Photoshop Smart Objects"

Leave a comment ( 27 )

Recently, some people have asked me how we build ExpressionEngine sites. Although how we build a site varies with each project, there are definitely certain add-ons we find ourselves using all the time. There are so many great ones out there (and new ones being released all the time) I thought it would be cool to share some of them in a blog post. Feel free to add your comments about the ones you like to use.

Continue reading "Insanely Awesome ExpressionEngine Tools You Can’t Live Without"

Leave a comment ( 31 )