As to the tools you should consider for
working on websites, there’s surprisingly little consensus. In part, this is
because of web design’s rapid evolution; the software has never really kept up.
Boulton says he still uses Photoshop for layout design, but as the process
becomes more abstracted he’s moving more quickly to the browser to ensure his
designs will work on different screens, or ‘viewports’ in the jargon. ‘In a
browser, you can deal with the reality of the design’s end point. Type renders
differently in a browser than in Photoshop. Pixels, and pixel density, are
different on different devices. Trying to account for and control the design,
given these variables, is practically impossible.’
To that end, web designers often work up
‘atmospheres’ in Photoshop or another graphic design tool: basic concepts half
way between a mood board and a fixed layout, which inform an in-progress
browser-based mockup rather than being something that’s later slavishly
recreated in code. Notice that the aim here is not to actually build anything
in Photoshop that will form part of the finished product; it’s just used as a
glorified sketching tool.
There’s along and continuing tradition of
graphic and print design tools purporting to offer web design facilities,
allowing you to doll up layouts with interactive elements and export them
directly to HTML. The appeal to experienced print designers, who already know
these tools inside out, is almost irresistible – but it’s not an approach favored
by many, indeed any, of the web professionals we spoke to.
Designers
can build a site very quickly with few new skills
Kirby is typically skeptical about this
kind of facility. ‘It can lead to a designer believing they can create web
sites without thinking about them. To design an optimized site that loads
quickly, works on multiple platforms and is easily maintainable, you need the
deep understanding that comes from hand-coding HTML and CSS. Unless the
designer is willing to put in the web development learning time that’s
required, they should team up with a coder. There are no shortcuts to building
great sites.’
Others wouldn’t go quite that far. Between
raw code and awkwardly cross-media lay-out apps, there’s a tenacious class of
tools aimed specifically at the web but offering a simplified visual method of
page creation. Apple’s iWeb is one familiar example, but far from the best
(even before it was effectively abandoned). A couple of more comprehensive
packages, each with a substantial community of enthusiastic users, are
Softpress Freeway and Realmac’s RapidWeaver.
RapidWeaver
Freeway, explains MacUser contributing
editor and media lecturer Keith Martin, offers ‘an alternative to tweaking code
or putting up with templates that someone else made and don’t quite fit your
needs’. Its DTP-style approach is anathema to coders, since you have no sight
of the underlying code while you work – ‘it tends to freak out those who like
to keep tabs on their tags,’ as Martin puts it. But if you’re a traditional
designer who wants quick results, the page layout metaphor feels highly
practical.
Arrange picture boxes and text boxes, apply
type styles, scale and crop images (including TIFF, PDF, Illustrator and PSD
files – the software does all the necessary conversion). When you’re ready,
Freeway publishes what should be standards-compliant HTML code along with
web-optimized media to recreate your designs both for conventional browsers and
in iOS-ready form. Upload management is included within the app to keep the
process simple from end to end, once you’ve organized webhosting.
‘The message isn’t that you should pretend
HTML doesn’t exist,’ clarifies Martin. ‘Understanding a little about how it
works is useful when it comes to choosing exactly how to build your layouts,
and with some coding skills you can add custom mark up or extend the attributes
of items.’ This is not a CMS-based system, but if you don’t need a
database-driven site, Freeway is a serious option. ‘You can’t edit existing
sites with it, and it’s not ideal for multi-user site editing, but it’s a great
design tool. Approach it like that and see what you think.’
Rapidweaver, from Realmac Software, offers
a simple drag-and-drop interface that will appeal to anyone who doesn’t have
the time or inclination to code from scratch. Besides basic layouts, features
like blogs, sitemaps, photo albums and contact forms are catered for. Look and
feel can be customized via CSS and JavaScript, and you can add new elements if
you know some HTML or PHP. The open source WebKit Developer Tools are also
accessible within the app, providing powerful debugging facilities to help you
improve style and performance.
‘You can build a professional website very
easily without a single line of code,’ enthuses Joe Workman, web developer and
author of The RapidWeaver Book (rapidweaverbook.com). ‘But code-loving power
users also have full access.’
Joe
Workman - ‘You can build a professional website very easily without a single
line of code’
A well-established ecosystem of developers
extends the RapidWeaver platform with themes and plug-ins. Themes can be
applied to your site without changing the content, and the Stacks plug-in
system allows you to build pages from hundreds of widgets such as images,
textboxes, videos and content sliders. ‘You’ll never want to build a web page
any other way once you’ve done it with Stacks,’ reckons Workman. It’s simple to
publish from RapidWeaver to almost any web host.
There are limitations. While plug-ins let
you edit your content online, you don’t have the full control you would with
Word-Press, and working with a database will be challenging unless you can
write PHP – although some add-ons are starting to make it easier.
Any snags needn’t be insurmountable, since
RapidWeaver’s active user base is a great source of guidance. ‘The user
community is like with no other app,’ says Workman. ‘Realmac’s forums are by
far the most active I’ve seen. Users and developers spend hours helping each
other out.’
