[Articulate Presenter 5]
Tom Arah finds a surprising solution to the problems of good site design.
Judging from the response to my recent article on Web site navigation its a subject on which many of you feel strongly. The central issue is the best way of designing the ideal end-user access to the information in your site. For a simple business site, for example, your main interest is naturally to post information on your products. However your site visitors might come at your site from many different angles looking not for a particular product, but for a broad product category, or for recent launches, or for special offers and so on, and you need to cater for this. Even more importantly, you cant afford the chance that your readers might narrowly miss the information theyre looking for; ending up at one page when the page next door would clinch the sale. To help prevent this you really need to provide instant access from each page to every other related page.
In other words, to fully cater for your audience, you need to have the same page accessible from different site sections and you need to provide links to all "sibling" pages at the same level in the site structure. OK - so whats the problem? The problem is scalability. Now when you add a new product you dont just have to add it to your product section but also to the relevant product category section, the whats new section and the special offers section. More importantly, to provide the all-important instant access, you have to update the links in every page of every section that your new page will appear in. Suddenly every time you add or delete a single page youre having to edit the vast majority of pages in your site!
Clearly this situation isnt feasible - so what are the alternatives? The first suggestion I received was to return to the basics. The Web guru Jakob Nielsens PR department sent me a copy of his recent Designing Web Usability. This makes a strong case for simplicity. After all, one of the many beauties of the Web is that its core parent-child structure is inherently scalable. Without sibling links, each page is independent of all others and so to add a new page anywhere in your site you only have to add a single link from its parent. Provide clear structures and your readers will find what they are looking for. This Zen argument is certainly compelling, but it largely depends on the user knowing what they are looking for and drilling down to it. To ensure every visitor gets the most out of your site and you get the most out of every visitor - you really need the more proactive, instant access prompting of sibling links.
This is exactly what the second group of correspondents stressed with their arguments in favour of frames. In many ways the use of frames solves both scalability problems at a stroke as separate framed navigational link pages enable both multiple approaches to the same content page and also the maintenance of all sibling links by updating just the one navigational page. Frames arent just more maintainable, with the navigational structure largely fixed onscreen, the resulting site feels much more responsive as there are no blank screens while waiting for downloads. More to the point, without their navigational overhead, content pages are inherently smaller so framed sites actually are more responsive. For TV-style sites the frame system is ideal, but experience has disillusioned me. Essentially the Web was built on the idea of independent pages and splitting the screen into separate framed pages produces a number of knock-on problems from the inability to bookmark to the added complexity of frame targeting. In other words, frames developed as a workaround and workarounds only provide temporary fixes.
TV-style framed sites can offer both multiple access routes and maintainable sibling links.
This was the point made by the third group of correspondents who argued convincingly that the only long-term, fully scalable solution is a data-driven site with pages delivered to the end user on the fly. Of course theyre right and for those looking at their Web site as a serious money-making concern, its the only sensible advice. Unfortunately to set up a site in this way really demands expert advice which is a seriously expensive business. For smaller businesses where their Web site is just an addition to their core activities thats not an option. There are alternatives designed to enable DIY Web data-processing, most obviously Macromedias Drumbeat, but I still cant quite bring myself to embrace it. Partly its down to the practicalities of needing a site there for search engines to index. More importantly, as a designer I just dont like the idea of giving up all hands-on design control.
While accepting the undeniable merits of each alternative drill-down sites, framed sites and data-driven sites Im back to square one. As I explained two months ago, what I really want is for one of the major Web design packages to take on all the navigational responsibility and leave me to get on with the page design. I didnt have long to wait. As a couple of contributors to PC Pros CIX conference pointed out, the program I was looking for already existed NetObjects Fusion 5. Frankly I was sceptical. The one thing Id picked up about Fusion was that its main selling-point was its DTP-style freeform layout designed to protect users from the underlying HTML a major downside in my book. Oh well. I decided to investigate.
First impressions of the program confirmed my prejudices. The program looks simple in the extreme with its central Web-style control bar divided into five main categories - site, page, style, assets and publish. When working in each of these modes you only need to make use of up to three tabbed views, up to three context-sensitive commands provided on the control bar, and a single floating property palette. Its simple but its undoubtedly efficient. Working in the Site view for example all you need to do to build up the structure of your site is to select a parent page, hit the single New Page command on the control bar and then name your new page with the property inspector. To copy a page, or multiple pages, to multiple locations within the site all you have to do is to select the pages, copy them, paste them onto the desired parent and, where necessary, reorder them.
Working like this it literally takes minutes to map out the ideal structure of your site complete with different approaches to the same core page information. Of course now comes the hard part as you have to add the necessary links. This is done in Page view which you enter by double-clicking on any page icon in the Site view. This immediately provides a pleasant surprise as you find that, surrounding the central blank layout area, the navigational structure of your site has already been begun. By default each page already has a navigation bar listing the top level pages in your site and a banner based on your page name. Significantly these components arent text-based but rather are attractive bitmaps that have been automatically generated by Fusion. In fact, if you click on the control bars Page Preview view, youll find that the links are actually fully working graphical rollovers.
Fusion 5s customisable MasterBorders and navigation bars automatically maintain top, parent, child and sibling links.
So far so good, but theres a lot more to good site navigation than links to the top-level site section pages. What we really want are the instant access links from each bottom-level page to all of its sibling pages. With Fusion thats simple. Using the special Navigation Bar tool you can simply drag onscreen to create another navigation bar. By default this duplicates the existing top-level links but, using the property inspector, you can set the bar to automatically link to all Top level, Parent level, Child level or hooray Current level pages. To indicate that the sibling links are different to the top-level links you can choose a secondary style of automatically-generated button or, to cut down on download time, use text-based CSS rollover links. Even better the navigation bar remains live, so that as pages are added, deleted or moved in the site view, the links are automatically updated.
Best of all, if you switch to any of the other bottom level pages, youll find the new navigation bar is already in place as Fusion works on a system of shared "MasterBorders". It looks like weve permanently sorted the nightmare of creating and maintaining sibling links in just four clicks! Not surprisingly, its not quite as simple as this. If you now open a top-level page youll find that the sibling links we added are still there, but arent appropriate as they just duplicate the existing top-level links. What we actually need here are child links. This is the problem that FrontPage 2000s automatic navigation bar system completely fails to address - you actually need a different mix of child, parent and sibling links depending on where you are in the web site structure. With Fusion thats not a problem, however, as it supports multiple MasterBorders. All we need to do is to create a new MasterBorder for each level in the site, each with its automatic navigation bars set appropriately, and then we really can completely forget about navigation and leave it all to Fusion.
It gets better. If you now switch to Style view youll find just how much control the automatic navigation system gives you over the overall appearance of your site. Fusion ships with over fifty professionally-designed (and I mean professionally-designed) "SiteStyles" that control the appearance of your title banners and the primary and secondary buttons. Swap between them and every page on your site is instantly updated. Each SiteStyle can also be fine-tuned so that you can change the typeface or alignment or background of each button and banner. Switching to the Text Styles tab, you can also control the appearance of the text across your site or on an individual page through CSS formatting. The control isnt quite absolute theres no way of controlling button size, for example, so that if you swap styles your layout might need some adjusting. Even so, it only takes a few minutes to sort out each of the relevant MasterBorders and youve completely changed the entire look and feel of your site. For traditional hands-on authoring such site refreshing is yet another nightmare, but with Fusion its simple.
Using SiteStyles the look and feel of an entire site can be updated in minutes.
With Fusion taking on so much of the structural, navigational and overall design work, we can concentrate on the individual page layout. This is where Fusions DTP-style reputation comes into play as, rather than sticking to the conventions and restrictions of traditional authoring packages, Fusion allows text and images to be placed anywhere onscreen. This design flexibility is perfect for beginners and also for experts wanting to produce eye-catching layouts, but there are downsides. To replicate the desired DTP-style layout in the end users browser, Fusion automatically generates complex nested tables complete with transparent GIF spacers. Such code looks fine in the browser but is intrinsically bloated and so slower to download - the Web designers biggest enemy.
If Fusion could only produce layouts in this way it would really rule the program out as far as I was concerned, but in fact such freeform layout is only one of the choices on offer. By setting a text-block to automatically fit the layout you can create traditional Web pages that re-flow as you resize the browser or using tables you can create more disciplined and streamlined layouts. Using Fusions data objects you can even move painlessly into data-driven design. Fusions split design-then-generate approach also provides a whole range of benefits through its ability to swap between producing code targeted at version 2 vanilla browsers, version 3 DHTML browsers or version 4 CSS-aware browsers. At some point in the future, no doubt, you will also be able to target SVG or SWF-supporting browsers. Even more impressive, with just a few clicks you can turn your MasterBorders into AutoFrames to produce fully working frame-based sites. With the use of alternative layouts you can even manage text-only or multiple language versions of the same site simultaneously (though bizarrely this can only be managed on a page-by-page rather than site-wide basis).
Unfortunately Fusions design-then-generate approach does have one unavoidable drawback. As the final HTML isnt fixed until the final site is generated according to your target specifications, theres no way to edit your HTML code directly. There are a number of internal workarounds including the inclusion of a new HTML Source view, but this only enables you to add your own code in between the huge greyed-out chunks of Fusion-only code. This is useful for adding metatags and the like, but its not exactly hands-on control. For beginners and occasional designers theres no doubt that Fusion offers more than enough power as it stands, but not many professional Web designers are going to be happy forgetting everything theyve ever learnt about HTML and putting their end code entirely into the hands of a third-party middleman.
It looks like weve hit an impasse where we have to choose between the automated structural, design and navigational strengths of Fusions site-wide approach and the absolute HTML control of the traditional page-based packages. Happily thats not the case. Fusion has one more trick up its sleeve. As well as creating its own designs, Fusion can also "reference" externally produced HTML. When a page is referenced in this way its <head> code is optionally added to the final Fusion page and all referenced images are automatically imported and managed as assets of the current site. Working like this has a number of advantages. To begin with, Fusion doesnt alter the referenced HTML in any way so that you keep absolute control. Even better, you can now edit the referenced code in Fusions HTML source view and every other page on which the reference appears will also be automatically updated. Best of all, you can right-click and open up the referenced page in any external editor, such as HomeSite, so that your own favourite editor can effectively work in tandem with Fusion.
Working with referenced files allows Fusion to work with external editors.
This means that whatever your current skills and tools, from beginner to expert, Fusion can help you automate the production of a working site design. However it doesnt mean that Fusion will automatically produce the best design. After I created the ideal navigational MasterBorder layout for my own site, for example, I found that each page was already 12k in size even before the rollover and graphic banners were taken into account, let alone the pages own text and graphics. Ideally that should be cut down considerably which could mean simplifying the site into a more drill-down structure, converting to a framed layout or moving to database-driven stacked pages. In a way its right back to square one. The real beauty of Fusion though is that, whichever option you choose, the program will help you to achieve it as painlessly as possible. More importantly, when your site requirements change, Fusion will help you to redesign it just as easily.
Ultimately there isnt a single best Web site design as a web site is a dynamic and evolving entity. And at least with Fusions site-wide approach your structure, navigation and design are always ready to adapt.
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]