In Depth: 60 essential tools every web designer and developer needs: "
Most industry figures suggest starting design and development jobs with a pencil, paper and a semi-optional flurry of sticky notes. However, the internet is a digital medium: sooner or later you have to move to software. So which tools are best?
We canvassed opinion among web designers and developers to find out which apps and products would have to be prised out of their cold, dead hands. The results were varied and sometimes surprising.
Many big apps were ignored entirely, with smaller products instead being favoured. The ones chosen also point towards interesting trends. A few years ago, most people in the web industry were Windows users, and many didn't even thoroughly test sites on Macs.
Today, roughly four years after machines from Apple's transition to Intel were released into the wild, the vast majority of those we spoke to are Mac users, who test in Windows and Linux browsers via virtual machines.
However, the Mac OS itself isn't all encompassing, and web services are gaining serious traction, especially for project management, file storage and synchronisation and office suites. So join us as we look at some great apps for design, coding, testing, getting things done and working on the move.
And if we've missed out one of your favourites, let us know on our forum or via our Twitter feed: @netmag.
Graphic design
Adobe might have turned into the company that many in the web industry love to hate (see 'Apps we'd like to see', above right), but there's no escaping its products. Creative Suite remains popular; Flash is still the go-to tool for online animation and games; and Photoshop raced to third place in our top five (below left).
'While it crashes too often and I'd replace it if anyone made a decent competitor, I can't currently design without it,' says Dan Rubin of Sidebar Creative, summing up many designers' thoughts.
However, sleeker and lighter apps are making progress. The cross-platform Pixel is reminiscent of a Photoshop of old, while on the Mac, a fight's brewing between pixel editors, with Pixelmator and Acorn being two standout contenders.
The former is like a modern take on Photoshop from a bygone era, and leverages core Mac OS X technologies for effects, while Acorn has tools for quick-fire vector shapes, photo editing and screen-grabbing. It's worth consideration even if you own Photoshop, as it's great for quick jobs that you could probably complete by the time Adobe's giant launches.
On the subject of screengrabs, today's designers look for more than hammering Print Screen or prodding Command+Shift+3. If you're inspired by something online, you want to grab it, store it and find it later.
On Windows, that's the territory of Snagit. Instead of spraying grabs around your hard drive, Snagit enables you to capture regions, windows and 'tall windows' (such as full web pages, even if most content is off-screen), make basic edits, and then tag items for easy retrieval, or share them with colleagues via Flickr or FTP.
On the Mac, Snagit's in public beta, but LittleSnapper offers similar functionality, and was almost as popular as Coda and CSSEdit among the designers we spoke to. Web Snapper is a handy, lightweight, grab-only alternative for Mac, which outputs full-height web pages in a number of formats, including PDF with selectable text and working links.
For initial wireframes, various desktop favourites exist, but for collaboration, online apps are a better bet – Hot Gloo and Mockingbird are particularly good.
Online tools also rule the roost for creating colour schemes. COLOURlovers provides palettes created by real people, which Brendan Dawes of magneticNorth notes 'allows you to integrate human-chosen colours into projects without a lot of pain'. Adobe's Kuler is also impressive.
If you're flush and a Windows user, try Color Wheel Pro for offline use, and rival ColorSchemer Studio, which connects to COLOURlovers and is available for Mac.
Coding tools
Once, Dreamweaver was the coder's favourite, dealing with most aspects of building and deploying websites, but that behemoth's time appears to have passed, especially on the Mac.
For Apple kit, several high-quality coding tools are fighting it out, including Coda (see 'Coding Coda'), TextMate, BBEdit and relative newcomer Espresso.
Of these, Coda's single-window approach has won over fans of streamlined UIs and efficiency, but TextMate beats it in terms of recommendations, finishing second in our top five. 'It's my weapon of choice for any editing, including writing,' says Yahoo developer evangelist Christian Heilmann.
'Keyboard shortcuts and tab completion make editing fast, it doesn't distract me with lots of menus and panels, and it's extensible – the ability to run scripts from your editor makes it very powerful, and you can create documentation automatically from a folder of files.'
Elsewhere, freebie TextWrangler shares BBEdit's old-hat interface, but has perhaps the best find-and-replace ever created.
On Windows, the field is wider when it comes to coding apps and products are mostly cheaper (or free), but designers appear less excited about what's on offer.
However, EditPlus is a lean, efficient editor that's distraction-free and offers essential tools for coding websites. Scintilla-based Notepad++ has more fans, though, perhaps because of its mature feature set and multiple views that enable fast scripting and coding. Also, the TextMate-inspired E is impressive and modern, but, like its Mac cousin, comes at a price.
The increasing importance of CSS has seen some developers create specialist tools for working with this technology. On Windows, there's TopStyle, which has 'site upgrading', 'site reporting' (detailing where styles are used in your site) and an embedded preview; and on Mac and Windows, Stylemaster has its 'XRAY' feature for single-click access to style information for layout components.
But CSSEdit for Mac OS X is the leading app for CSS, largely thanks to its ability to download any website's style sheets and enable you to edit them locally, while previewing how your changes would affect the live site.
Figuring out where problems lie in websites used to be a case of trial and error, but all of the biggest browsers – even Internet Explorer – now include built-in development tools. Opinion seems split regarding which tools are the best.
Safari's web inspector gets points for looking great and being surprisingly feature-packed, but Firefox is the browser almost all developers argue should be your first port of call, due to its sheer extensibility.
Recommended extensions include Web Developer, colour picker ColorZilla, on-screen ruler MeasureIt, performance analyser YSlow, and Firebug.
On Firebug, Ian Routledge of Edible Code told us via Twitter that it 'saves hours of debug time and has features for everything – DOM, network, JavaScript, as well as add-ons for Flash and cookies'. If you're using an Intel Mac, you also have the ability to run Windows in a window, in order to test sites on Internet Explorer.
Boot Camp is pointless for this, unless you like rebooting constantly between Mac OS X and Windows, so check out Sun's free VirtualBox. If that doesn't cut the mustard, have a look at Parallels Desktop or VMware Fusion.
Regardless of your choice of platform, chances are you'll have moved away from static HTML websites for most projects. If so, investigate installing an xAMP solution stack. A WAMP package will enable you to run an Apache server and sites built using MySQL and PHP on Windows PCs.
Similar solutions exist for Mac and Linux (MAMP and LAMP, respectively). A popular distribution is XAMPP, although for Macs, MAMP is a good bet.
Mac users should also investigate Mac OS X's built-in webserver. To run more than a single site, you must edit some config files; but if you don't fancy getting your hands dirty, VirtualHostX makes it easy to run multiple sites, and it works with MAMP and XAMPP too.
As a final entry in this category, it's heartening when developers create something unique but also essential. ARTIS Software did this a few years back with a set of slightly clunky screen tools for Mac, which Iconfactory subsequently spruced up and compiled as xScope. This utility is now an utterly essential purchase for any Mac-based web designer, particularly because of its Guides and Dimensions tools.
The former enable you to overlay horizontal and vertical guides on your screen – perfect for checking whether sites adhere to a baseline grid. The latter provide the means for measuring the dimensions of anything on your screen, including distances between components within a Photoshop document.
Getting things done
For most people in the web industry, designing and building websites is only part of the job. Luckily, today's designer has access to a huge array of tools for project management, collaboration and communication, and the best are distinctly web-oriented.
The undisputed favourite app in this area (in fact, the app that topped our top five) is Dropbox, an online tool for file backup and synchronisation. The free version provides 2GB of storage, and you can sync files across several computers, work on files offline, share links with others and control access to shared folders.
'It's changed the way I work,' says Dawes. 'My projects are now stored inside Dropbox, which syncs across the Macs I use. There's built-in version control, and I can access files via my iPhone and the web. I couldn't live without it.'
Another service likely to become ubiquitous in designers' toolkits is Evernote. This is effectively an app for thought capture – it's designed to house notes and clippings, PDFs and URLs, which can be tagged or automatically organised. Like Dropbox, Evernote's power lies in its all-devices approach – there are clients for Windows, Mac and the five most popular mobile platforms. The basic ad-supported service is free.
Other online tools are favourites for enabling collaboration with clients in a more direct sense. 'I wouldn't be able to function without shared spreadsheets and documents,' claims Jared Plummer, founder of HAUS (madeinhaus.com) referring to Google Documents.
He says that while his clients have joked about moving from Microsoft Office to Google's online apps, they're 'quick to come around and love being able to collaborate and see our progression through projects by viewing our Google tracking spreadsheets'.
He notes that while Google's online apps aren't as robust or feature-packed as desktop equivalents, they do what's needed well.
Plummer recommends anyone requiring a hosted project management solution to try Unfuddle: 'Unfuddle uses a ticketing system for tracking things that need to get done. We use it for managing design projects, software development and for tracking customer service requests.'
The best modern smartphones enable you to access the majority of online services via a browser, and sites often provide a mobile-optimised layout for doing so. However, some apps provide an opportunity for you to do a little more work while you're on the movie, especially if you own an iPhone or a device running Android.
For Android, AndFTP provides the means for managing FTP servers on the go. You can download and upload, create folders, open documents and amend permissions.
The same developer, Lysesoft, has also released S3Anywhere, an Amazon S3 file manager.
On the iPhone, web designers and developers are well catered for. There are excellent clients for Dropbox and Evernote, sketching app Brushes for scribbling ideas down on the go, and Air Sharing, which turns your device into a wireless hard drive and document viewer.
The standout app for web designers, though, is FTP On The Go. This enables you to rummage around FTP servers, download files, view and edit them, and upload changes, saving the original document as a backup.
In effect, it's Notepad and a Safari instance welded to a workmanlike FTP client – but it hints at the future of mobile apps for web designers. When you're on the train and hear that something's 'gone wrong' with a client's site, it's an essential app to have.
Designer top fives: Which apps can't they live without?
James Whittaker - UI/UX architect, TweetDeck
Flash Builder 4: 'The IDE and RIA creation goodness of Flex and AIR projects.'
Fireworks CS4: 'The undisputed king of graphics preparation for the web and apps.'
Firefox: 'You can't beat Firefox with web developer add-ons.'
TextMate: 'The best text editor for Mac.'
Google Quick Search Box: 'App launcher and search – saves me valuable time every day.'
Brendan Dawes - Creative director, magneticNorth
Coda: 'Elegantly fuses a hand-coded approach with FTP, site management and a lovely CSS GUI.'
Evernote: 'For storing code snippets I can later quickly grab from the web.'
Dropbox: 'Changed the way I work.'
Fresh: 'Shows recently-modified Mac files, so you needn't search – simple, but effective.'
COLOURlovers: 'My colour API of choice. Enables me to integrate human-chosen colours into projects easily.'
Leisa Reichelt - Freelance user experie nce consultant
Tweetie: 'News, inspiration, occasional distraction, and connection to my design and UX community.'
Spotify: 'Can't work without music!'
OmniGraffle: 'Complete with the 960 grid template and Konigi's sketch stencils, a great wireframing toolkit.'
Colloquy: 'I'd forgotten how much I enjoyed IRC until I jumped back when I was working with Drupal.'
Google Documents: 'A great, universally available, free set of collaboration tools.'
Dan Mall - Senior designer, Big Spaces hip
Photoshop: 'The best tool to communicate visual ideas quickly and effectively.'
Flash: 'For animation, but also for quickly prototyping ideas that need to be expressed over time.'
Mail: 'My favourite writing tool – through drafts and IMAP, my writing is synced and available on my iPhone.'
TextMate: 'My code editor of choice.'
TextWrangler: 'The most powerful 'find and replace' around.'
Jon Wiley - Senior user experience designer, Google
Photoshop: 'I've been using it for 15 years – fits like a glove.'
xScope: 'An array of simple tools that never fails to elicit oohs and aahs from people peering over my shoulder.'
Firebug: 'Before Firebug, web development was drudgery, misery, darkness.'
TextMate: 'Essential for making quick work of complex markup.'
Google Reader: 'For efficiently keeping up with the rapidly evolving field of web design.'
Guy Moorhouse - Interaction designer, Airside
Dropbox: 'Perfect for picking up work to finish after you've had to dash home.'
CSSEdit: 'The best CSS editor around. Great mode for overriding live sites with local code.'
Firebug: 'For tracking down JavaScript and DOM problems, as well as checking site latency and overheads.'
Tweetie: 'Useful for working with personal/work Twitter accounts.'
Spotify: 'The future of music – it's genius.'
And the .net top five (as recommended by everyone)
Dropbox (cross-platform)
TextMate (Mac)
Photoshop (cross-platform)
Firebug (cross-platform)
Coda (Mac)
Related Stories
 |  |
(Via TechRadar: All latest feeds.)
No comments:
Post a Comment