By Matty Collins
October 21, 2011
From the Studio,Web Design
We all need more time. And as web developers we have some neat tools and tricks up our sleeves to increase effectiveness. Here’s our top 6
1. Stop. Plan and collaborate.We can’t really put together time saving tips without mentioning the important of starting with a plan and collaborating with the project manager, other designers and/or developers. This is a time saving tip, because not starting here means backtracking later:
- Know what your goals are
- Map out your structure
- Work on your basic layout
Or, you could waste time by watching old 90’s film clips and have Vanilla Ice’s lyrics
stop, collaborate and listen running through your head all day. Your call.
2. Customise your workspaceYou need to have everything on hand and set up just the way you need it to work at your best capacity. Save your workspace settings, create your own profiles and move away from defaults. In your favourite design programs it’s going to be a very personal thing, at minimum in Photoshop:
- Use the windows menu and select your panels.
-
Dock the panels by clicking on the name plate and dragging it to the best position.
-
When a blue line appears let go and it will dock there. You can either have panels dock on their own or in groups.
-
For less often needed panels you can drag a panel to the side of an existing group of panels. A blue line will appear the height of the panel and by dropping it here a new column will appear. You can collapse this via the small arrows on the panel header – ready for easy access later.
-
Save your workspace via Window > Workspace > New Workspace.
- Your workspace will now appear in the Window drop down.
3. Keyboard shortcuts and menusIs it just me or is using a mouse to click on things so passé? When you’re really in the thick of a design knowing your shortcuts and having ones you’ve created yourself can really benefit your workflow. There is a neat list of
48+ photoshop keyboard shortcuts here which we like. Or, create your own:
- Either choose Edit > Keyboard shortcuts or Window > Workspace > Keyboard Shortcuts & Menus and click the Keyboard Shortcuts tab.
- You can select your shortcuts for application menus, panel menus and tools in the “shortcuts for” drop down box. Expand the lists below using the arrows to the left of the name.
- To change a shortcut, click on the line and a box will appear with a blinking curser. Pick your shortcut. Adobe will let you know if there are any issues.
- Once you have things to your liking save your set and hit the summarize button to generate a summary of all shortcuts. Click the disk button next to the set menu to save permanently.
4. Create “one stop shops”Place all similar graphics, codes and commonly used elements together for future projects. This includes common icons and images in a variety of sizes:
This will also save you having to sift through old folder to find ‘that image’.
Create a
code library where you store good frameworks, standard grid systems, CSS and JavaScript - pre built and customisable.
5. Firefox extensionsWe really don’t know where we’d be without our Firefox extensions. Probably annoyed. Maybe at the pub.
Crtl > Shift> A in Firefox will take you to the add on screen. Our must have is
Firebug.
In their words: Firebug tries to stay out of your way until you need it; it goes away if you switch to another Firefox tab. Firebug can be optimized for HTML authors, CSS designers, Javascript developers, and Site Engineers.
Once you install it you see a little gray bug in the right hand corner of your screen. Click on it to begin. In future, F12 is your shortcut to launch Firebug.
One of the main things we like Firebug for is right clicking on any element of a page, say a heading, and then select ‘inspect element’. It will then bring up all the code, as below (very handy for finding errors):
Firebug also allows you to inspect HTML and modify style and layout in real-time, use an advanced JavaScript debugger available for any browser, and analyse network usage and performance.
We also like:
6. Test early, test oftenI won’t harp on here about the importance of testing – but I will say testing needs to be built in to your plan from the beginning. Consider pre-production, during development and after-launch testing. It’s not practical to test your own coding; you’ve been staring at it for ages and are too immersed in it. Get an independent user to have a go; you’ll quickly learn where you’re on track, and what needs looking at.
A handy new development of Google Analytics is the
Site Speed report, which allows you to measure the page load time across your site. There is also a tool called
Web Page Test, based on the google code it allows you to test the speed of your site for free.
You can drill down to particular locations around the globe using real browsers (IE and Chrome) and consumer connection speeds.
With the amount of nifty free tools around at the moment – like this list of
20+ online tools for website validation and testing – not testing is really unforgiveable.
As handy as all the tools are, nothing quite beats sitting a user in front of your new design with a series of tasks. Watch and learn.
That’s our 6. I’m sure there are many more out there, feel free to shout them out below.
Like it? Follow Mintleaf Studio on Facebook and Twitter.
References and further reading: