10 Ways to Lose Less Time as a Web Designer

52 Flares 52 Flares ×

The one thing that has made me a much better front end developer has definitely been my openness to doing things a different way, never getting stuck in a rut. In the process you will find that even though it may initially take you longer to do something the “new” way, in the long run you will have saved so much time. And time is one of those things you can never technically save. You can only help yourself lose less of it. So here is a list of 10 ways that I have effectively lost less time.

Zen Coding

*Update* I now believe this is called “Emmett” formerly known as “Zen Coding”

A lot of people may have “heard” of this but not actually looked into it. I hope that changes today. Zen coding is so powerful once you can wrap your mind around it. Let me give you a quick example:

div.container>div#nav>ul>li*8>a>img

Press F1 and this expands to:

<div class="container">
	<div id="nav">
		<ul>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
		</ul>
	</div>
</div>

Once you get the hang of it you will be coding at lightning speed. To get started go here. Note that Zen Coding requires an add-on for most code editors! Not to worry though, there are add-ons for most all popular coding editors. You can find them at the above link towards the bottom of the page.

Coda Clips or Sublime Snippets

No matter what editor you choose to use, most have the ability to add snippets. Coda is both my code editor and FTP client (used to be.. now its Sublime Text 3). It has a very useful tool called “Clips” that allows you to save snippets of code and then assign them shortcut keys. I have over 50 snippets of code saved and it saves me an enormous amount of time rather than having to look it up in Google every single time (which I was doing for far too long). What I did one night was just sit down and spend some time compiling all the snippets of code I use often so that I would never have to look them up again. Rather ingenious yet underused. I believe most code editors have something similar (as I mentioned perviously).

Shortcut Keys

I tend to see a lot of people not taking advantage of shortcut keys (other than copy & paste)!!! Shame on you all! lol. This can save you SO much time! Here are some that I use constantly (by the way I use a Mac so forgive me PC users):

General Mac Shortcuts:

CMD+Shift+3 – Take screenshot of whole screen (saves to desktop)
CMD+Shift+4 – Take screenshot of selected area (saves to desktop)
CMD+Space – Search through computer (I use this to open up new apps. Just start typing the first few letters and it will find your most used app starting with those letters. Saves time rather then using mouse to click on app)
CMD+Tab – Switches applications (hold down and keep hitting tab to scroll through all apps)
CMD+` – Switches between windows in same application (for instance if you have multiple browser windows open, also if you are wondering which key that it is the key to the left of 1)
CMD+W – Closes current window
CMD+Q – Quits current program
CMD+S – Save
CMD+Shift+S – Save As
CMD+Z – Undo (accidentally delete a file? Instead of going to trash bin and restoring.. just hit CMD+Z)
CMD+Shift+Z – Redo

Mouse Pad Touch Events:

2 fingers left & right – scroll horizontally and also in browser go back and forward between pages
4 fingers left & right – scroll between desktops (Lion & Mountain Lion only)

For a full description go to your System Preferences > Trackpad

Mac Trackpad Gestures

Chrome:

CMD+F – Do a search for words on the page
CMD+T – New tab
CMD+W – Close current tab

Photoshop:

CMD+Shift+Fn+S – Save for Web & Devices
CMD+` – Switches between photoshop files open (very useful!)

There are so many more I can be taking advantage of I know, but thats it for now… having a brain fart and can’t think of more.

Wufoo

Ever take an extra few hours on a project because you had to code & style a form? Wufoo solves this problem. It’s totally worth the money you pay for it because it saves you so much valuable time. Being so very versatile is one of its major benefits. Dragging and dropping a few otherwise sophisticated elements becomes easy. Obviously there are “some” setbacks such as CSS customization (which requires and SSL certificate, since all forms are SSL) and some minor performance issues (although it is async). The standard way to use it would be to use their javascript embed code, but you can actually host the files on your server and then send the information back to Wufoo as well. Its really a sweet tool.

Starkers Foundation (WordPress specific)

Consistency across all your websites will save you so much time in the future when making updates and doing routine maintenance. Most all sites I make I use WordPress. I always make custom themes from scratch but I always build them on top of a “foundation” theme to stay consistent. Its really a creation of mine drawing from a few different places, mainly the Starkers theme. I have a version of it I like where I have already cleaned out the code I don’t want and added Bootstrap. All this to say… whenever I have to make a change to ANY one of my websites, even if I made it 2 years ago, I will know exactly where to look to make changes. This amazingly saves me SO much time and allows me to be on top of everything all the time, not wasting time on relearning how I made certain sites. Email me if you want and I will send you the theme I use.

*Update* Now using child themes enhances this further, so that I am able to update my “core” code without effecting any of the layout or other custom features built into the child theme.

Staying Organized

If your not organized, get organized. Period. Stop everything your doing and just spend a day and organize things, and then take the time to maintain it. There I said it. Being organized has helped me respond quicker to requests for files when someone needs something, I can quickly attach it to that email, instead of digging and digging for it wondering where the heck I saved it. It also helps with workflow and ongoing projects as you could imagine.. just visualize all the files as they pile up over the weeks. If you are not proactive in organizing them you will find a mess on your Desktop and Download folder. Take time to organize your Finder so that the folders you use often are bookmarked on the left like in the screenshot below.

Mac Finder

One other thing I didn’t touch on is check-lists, priority lists, to-do lists, etc. An all in one solution for all of this that I use is Omnifocus. It’s expensive but amazingly powerful.

LESS

LESS is a CSS Preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. Personally I use a WordPress plugin that allows me to run LESS live on the server, so that I don’t have to always work locally. If your are not already using a CSS preprocessor, start! So worth the time to learn.

Outsource

I never like to say no to opportunities. If at all possible I hire temporary and part time help to finish things so that I don’t become too overwhelmed. I also always like to keep someone at hand to hand off tasks that don’t require web design skills to do for instance input content into a site, etc. This frees up time so that you can spend it doing more productive things. I’ve tried a lot of outsourcing websites such as odesk.com and freelancer.com but I’ve had the best luck believe it or not on Craigslist. I would just be honest and post that I’m a freelancer looking for some extra help. You’d be surprised at the quality applications you will receive. If you even want to take it to the next level, use Wufoo to create an online application and ask very open ended questions so that you can better differentiate the good applicants from the bad.

Inspector

Most web browsers these days have a web inspector built in. Learning how to effectively use the Inspector (especially in Chrome) will most definitely increase your productivity and efficiency. You can make CSS changes right in your browser that will immediately show you the changes on screen which is great for troubleshooting. This is also a great way to figure out the class or id names of elements, dimensions of certain divs, links to background images, javascript, console errors etc. etc. I don’t know what I would do without the Inspector (probably not much.. hah).

Working Live

Then there is working live a.k.a. “Cowboy Coding”. If your in a rush, this will definitely speed things up, especially for smaller projects. Although, I really shouldn’t be recommending this as its perceived as a “bad practice” and rightfully so. Many things can go wrong. So there are some caveats. For new projects I like to create a hidden site with a secret URL & set the robots.txt to disallow. For updates & maintenance there are some conditions to working live. 1) You are working on the site alone. 2) You really can’t afford to make any mistakes… 3) Have a good, reliable internet connection. 4) You’re not working on a high traffic site. 5) You keep very regular backups of both files & databases.

Personally I work live at times because it saves me a LOT of time. 99% of the time I’m flying solo so I don’t have to worry about other people editing files at the same time. I also don’t make many mistakes if any (at least most of the time hehe) and keep regular backups. It just works for me (at the moment). Find what works for you but do what you can to get a fast & efficient workflow. Especially if you crank out websites, lets say you save 15 minutes per website & make one website a week. That will save you 13 hours over the next year. It all adds up!

I’m sure there are other time saving techniques.. mind sharing them with me in the comments? Thanks all!

About Frank Apicella

Frank Apicella is the founder of Snippet Central and HtotheML. He helps people make websites. However and whichever way he can accomplish it. With a strong background in Wordpress he can most certainly help you out.

3 comments

  1. Frank –

    This was incredibly helpful – organization is crucial – doing this manually – will look into Coda clips.

    Note: working live is not feasible in a business environment – but production servers work well.

    Looking at other options to manual backups for all work. Any ideas on reputable vendors? Just started designing in WordPress – looking into backup buddy – do you have any experience with this vendor?

    1. Hey Tracy, I’m glad you found this information useful. I put a lot of thought into what has helped me the most over the years, and I’m happy its going to help someone else :). As far as backup solutions. I have “heard” of backup buddy and also Vaultpress. Both I believe are paid though, but both are good or so I hear. Sorry I couldn’t be of more help. But do me a favor, when you figure out a good one, let me know! Thanks :)

Leave a Reply