The Future of Web Design

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Illustrator_Plug-ins]
[RGB to CMYK]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[BMP/TIFF/JPEG/GIF]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Web Design Standards, Applications and Browsers

Tom Arah peers into his crystal ball to try and see what the future of web design will look like.

css

A few years ago a new release of Dreamweaver was a major industry event as each version set a new standard for web design. By comparison the latest Dreamweaver 8 (full review last issue) is very tame. Indeed there’s so little new to it that I began to worry that Macromedia might have stopped development ahead of the company’s takeover by Adobe and Dreamweaver’s possible replacement by GoLive. In fact the only reason that I eventually decided that this doomsday scenario was off the mark was that Adobe’s recent release of GoLive CS2 (see issue 128) had been even less impressive! And it’s not just this round of releases; both Dreamweaver MX 2004 (see issue 109) and GoLive CS (see issue 111) were similarly disappointing.

dreamweaver 8

Dreamweaver development is languishing.

It’s a strange situation. Five years ago web design was almost the definition of an exciting, constantly-evolving platform, but now both the main professional authoring applications seem to have ground to a halt. Of course both developers deny it, pointing to new capabilities such as Dreamweaver 8’s XSLT-based translation of XML to HTML and GoLive CS2’s SVG-t support for mobile handsets. However, while these may well be significant for the future, only a fraction of each application’s current userbase will benefit. For the mainstream users producing the mainstream HTML sites that the web is built upon, where is the new design power to enable them to give their end users a better, richer experience?

Of course a rich HTML-based experience is, in many ways, a contradiction in terms as Tim Berners-Lee specifically devised HTML to mark up text content not design. However, as I’ve discussed before (see RW101), this original decision was actually very far-sighted enabling the World Wide Web Consortium (W3C), the standards body for web development headed by Berners-Lee, to develop a follow-up, dedicated and complementary design solution. The result was Håkon Wium Lie and Bert Bos’s Cascading Style Sheets ( CSS), a markup language for handling presentation. The first CSS Level 1 specification ( CSS1) was released back in 1996 and addressed basic text formatting and CSS Level 2 ( CSS2) released in 1998 extended this to tackle basic layout (see RW109).

csszengarden

www.csszengarden.com shows the beautiful simplicity of CSS-based design.

So the first key to providing greater web design power and a better end user experience is CSS. Macromedia and Adobe clearly agree and both have pushed CSS support as the focus of their latest releases. Despite this, I remain underwhelmed. To begin with, the much-hyped “new” CSS support in Dreamweaver 8 and GoLive CS2 mainly turns out to be relatively minor reworkings of the CSS functionality provided in the previous MX 2004 and CS releases.

More fundamentally, while building the CSS support directly into the application rather than relying on hand-coding is certainly more convenient, it doesn’t by itself provide any more power. In principle the design power that Dreamweaver and GoLive provide web authors with today is the same design power they had at their disposal seven years ago when CSS2 was released! In practice it’s still not even that complete as there are still plenty of CSS2 features, such as support for the max-width and position :fixed properties, that are still not fully supported.

So what sort of design power might we expect by now? To an extent today’s restricted design options are an inherent limitation of low-resolution screen displays – there just aren’t enough pixels to enable advanced typography (see RW98). However for headings and display text I would expect to be able to specify and provide web fonts that display when they’ve been downloaded and also to be able to control a whole host of DTP-style features and effects from kerning through to transparency and drop shadows. In terms of layout, the control offered by the first release of CSS2 is especially weak (see RW109) and by now I would expect to be able to take advantage of features such as automatically reflowing, multiple-column text blocks, fixed on-page frames, vertical justification, pages that redesign themselves according to the screen real estate available and so on.

The list of features that CSS could and should tackle is near-endless. And there are plenty of other ways that the end user experience could be enhanced. In terms of web bitmaps, the PNG (Portable Network Graphic) format (see RW71), first recommended by the W3C in 1996, was specifically designed to support variable transparency to create more integrated, graphically-rich layouts. For web vectors the SVG (Scalable Vector Graphic) format, first recommended in 2001, is especially important (see RW61). SVG has the potential to revolutionize web authoring and the end user experience by enabling user interface elements such as rollover buttons, graphical text (including CSS1 support) and imported and in situ graphics to be integrated directly into the page’s code. SVG also supports vector-based animation to bring pages to life while SMIL (Synchronous Multimedia Integration Language), first recommended in 1998, enables the control of audio, video and interactivity for richer online multimedia.

In each case the potential of the first specification is mouth-watering enough, but all of these original recommendations are now between four and nine years old. That’s eons in web terms, so how have the standards moved on and what should state-of-the-art web design be offering today? Visit www.w3c.org and the answer is astonishing – and depressing. With CSS1 released in December 1996 and CSS2 in May 1998, you might expect work to be nearing completion on CSS7. In fact work is still continuing on CSS3 with no clear date for when it will finally be formalized. Instead in June 2005 the last call was made for comments on CSS Level 2 Revision 1 ( CSS 2.1)! It’s the same story all round. W3C work on developing PNG has stopped, and the current SVG and SMIL standards are stuck at 1.1 and an error-correcting 2.0 respectively. It looks as if it’s not just the web authoring packages that have run out of steam, but the underlying technologies!

css

CSS development seems to have ground to a halt, even reversed.

However it’s not Macromedia and Adobe, or the W3C that are to blame. There’s one fundamental reason that development has stalled and there’s little that any of them can do about it – the problem is browser support. After all there’s no point in the standards running way ahead of the practice which is why CSS3 is focused on breaking down the specification into achievable and testable modules while CSS 2.1 was specifically devised to lower the bar further, setting a minimum standard based largely on current browser practice.

Equally, there’s no point in the authoring applications adding functionality that the end user won’t actually be able to benefit from. In fact it’s even worse than this. The web author can’t realistically take advantage of features such as CSS-based positioning or SVG-based navigation unless they can be sure that all users, or at least the overwhelming majority, will see the page as intended. In other words web practice can only move ahead at the speed of the slowest ship and one browser can effectively halt the progress of all.

It’s a situation we’ve seen before as the original take-up of CSS1 was blighted by the half-baked support of Navigator 4 (see RW101), so who’s the culprit now? Look at a site such as http://nanobox.chipx86.com/browser_support.php that compares current browsers’ CSS 2.1 compatibility and you’ll see that none of the main contenders gets a clean bill of health, but that Firefox and especially Opera score relatively highly. Unfortunately the browser with much the worst record is the most important of them all: Internet Explorer 6 (IE6). And, while you might consider designing a rich page that works with the dominant IE6 but falls over in the comparatively little-used Opera, you’re certainly not going to do the reverse. So why is IE6’s CSS support so poor and, come to that, why doesn’t it natively support PNG transparency, SMIL or SVG?

IE6’s poor support for CSS is holding back all progress.

The immediate answer is very simple: IE6 is ancient. It was first released on August 27th 2001 and back then technologies like SVG and SMIL were relatively new and seen as niche interests so no-one expected instant browser support. By comparison, CSS was already long-established and clearly central and here IE6 actually led the way, correcting IE5’s disastrous misreading of the CSS box model in standards-compliant mode, and generally providing the best support then available. Indeed, combined with its market dominance, it was the main reason that CSS was finally able to take off. Now, however, IE6 is fast approaching its fourth birthday and inevitably expectations have moved on and the program has become dated.

The obvious next question is: so why hasn’t Microsoft released a new version? Having seen off Netscape to win the browser wars, why would it seemingly stop development? The answer of course is that it hasn’t. Bill Gates’ long-term aim, as soon as he’d recognized and then seen off the threat that Netscape and Java represented, was to integrate the Internet – which is a network after all - right into the heart of Windows at the operating system (OS) level. Accordingly, after the launch of IE6, the previously separate IE and Windows development teams were merged and in May 2003 it was announced that there wouldn’t be another standalone release of Internet Explorer. Instead all browser development was folded into Microsoft’s work on Longhorn, its next version of Windows.

Windows Vista: web publisher’s dream or nemesis?

So what can the web design community expect when Windows Vista (as Longhorn is now officially known) is finally launched some time in 2006? With the recently released beta it’s clear that Windows Vista’s central focus is on enhancing the end users’ overall screen-based experience whether that is hosted locally or remotely. Key to this is the new Windows Presentation Foundation previously known as “Avalon”. This is a complete re-writing of Windows current GDI (Graphics Device Interface) to take advantage of modern graphics hardware to provide far superior handling including dedicated 3D and video processing. Most importantly, it provides vector-based screen rendering (think Display PostScript 15 years-on) which should mean that windows can be rescaled as well as resized and that the higher-resolution displays of desktop computers will provide higher quality onscreen text rather than smaller text as is the case with today’s browsers. Decent web typography at last!

Richer graphics, media and text handling is one side of the story, the other is how this design power is accessed and put to work. The solution Microsoft has come up with is XAML ( eXtensible Application Markup Language) pronounced “ zammel”. XAML is “an XML-based markup language that can be used to declaratively program the Windows Presentation Foundation object model”. In other words you build up the interface elements of your applications using XAML tags. The best way to understand what this means in practice is to take a look at its nearest current equivalent, Macromedia Flex, which uses an XML-based markup language to produce all-singing-all-dancing, Flash-based Rich Internet Applications ( RIAs) on the fly!

It’s all very exciting. As the latest Flash Professional 8 shows, with its major advances in terms of graphics, effects, text and video, it’s truly amazing what can be delivered through today’s internet pipeline. With Windows Vista, Microsoft is going to put similar internet-delivered, design-rich, media-rich power right at the heart of everything that the PC is about. And with dedicated graphics processing power to call on and document-based authoring! Suddenly whether Internet Explorer fully supports CSS seems small beer as XAML is set to take the internet-based design experience onto a completely new level. So is Windows Vista the answer to the web designer’s prayers?

Let’s not get carried away. To begin with, we still have to see the final product and such an ambitious attempt to simultaneously rework the desktop, web, documents and applications could well prove a step too far (imagine the security implications), or be scaled back out of recognition. More importantly, even if Windows Vista does succeed as hoped, there are major questions for web designers in particular. After all, producing a successful Flash-based RIA is a much more demanding operation than producing an HTML/ CSS site which explains why the number of Flash sites is tiny compared to the number of traditional organically-grown, page-based sites. And the number of Flex-based RIAs is smaller still. Based on the information released so far, and remembering that Bill Gates’ primary interest in the Internet has always been in Java-style programming rather than web-based publishing, it looks as if Windows Vista is aimed squarely at the developer. That’s a fundamental problem for a publishing platform: Flash Professional is bad enough for the average designer; Visual Studio is out of the question.

Windows Vista suffers from another, even more fundamental drawback as a publishing platform. Perhaps the major benefit that Flash provides is its cross-platform Player that 98% of Internet users have installed and which is also available for mobile handsets and desktop boxes in the form of Flash Lite. By comparison, Windows Vista’s integration of the internet at the OS level is specifically designed to ensure that the Windows desktop alone provides the richest experience available. In short, Vista is inherently a Windows-only solution. Of course for Bill Gates that’s not a problem, it’s the whole point - he wants to tie the rich experience to the platform and so drive future sales. No doubt Apple will have to do something similar if it wants to stay in the game. For web publishers though, splitting the web audience into non-compatible camps is potentially disastrous.

This puts matters in a very different light. Rather than the web publishers’ dream, Windows Vista could prove a nightmare, attacking the whole principle of the single, open, publishing-oriented, browser-based Web and replacing it with multiple, proprietary, programming-oriented, OS-based Internet spaces. So is this the end of the World Wide Web as we know it? I doubt it. After all, publishing is all about getting your message over to as many people as possible. As we’ve seen repeatedly in relation to CSS, given the choice between providing a richer experience for a section of the audience or a less-rich experience for everyone, most publishers will go with the larger audience.

In other words, the fundamental simplicity and universality of the World Wide Web as originally envisaged by Berners-Lee are values that shouldn’t be underestimated. HTML/ CSS is here to stay for a while yet, living alongside Flash SWF and Microsoft XAML. However, as we’ve also seen, there’s a real danger that it will only survive as a stagnating lowest common denominator. That’s why it is so important that these open standards and others, most notably SVG, should move on and be made richer. And that makes it all the more frustrating that Microsoft, via IE6, is effectively stifling any progress while it works on its future alternative. Thankfully the argument must finally have got through to Microsoft - or more likely IE6’s declining market share - and recently it announced that it had reversed its earlier decision and that a new standalone version of Internet Explorer would be released before the end of the year.

So what can we expect in Internet Explorer 7 (IE7)? All the talk is of Firefox-style tabbed browsing, RSS support and improved security, with hardly any mention of standards such as SVG or CSS 2.1 (though PNG alpha is finally supported). Ultimately though, even if IE7’s standards support does leap forward, the overall state of web design still won’t be able to progress with it for one simple reason: Microsoft has announced that IE7 is only going to be available to XP SP2 users. That means IE6 is going to remain a significant player for a long while to come, quite possibly stopping HTML/ CSS web design from moving on for another four years!

Internet Explorer 7 is on its way – but don’t hold your breath.

Of course there are cross-platform alternatives to IE6/7 and the situation could change if users defect en masse to Firefox or Opera. Significant in this regard is the announcement that both developers are working on in-built SVG support which could just unlock the must-have richer web experience necessary to overcome the average user’s inertia. However it’s very unlikely that these smaller players will be able to quickly drive IE6 out of the system. While it’s certainly not dead then – and it’s important to remember that good work is done everyday with the tools currently available - the future for rich (X )HTML/ CSS-based design is not looking healthy. I’m not holding my breath to see what Dreamweaver 9 pulls out of the hat.

So is there an alternative to the current stagnation apart from the mixed promise held out by Windows Vista and XAML? Well there is one tempting possibility. The one potential rival with enough clout to take on Microsoft is Adobe, especially after its takeover of Macromedia. The key to any challenge would be the all-pervasive, cross-platform Flash player. By incorporating the functionality of Adobe’s existing standalone SVG reader and adding new XHTML/ CSS support, this could be used to display not just Flash-authored screen-based applications but modern Dreamweaver-authored page-based sites (while leaving the messier job of supporting backwardly-compatible HTML to the host browser).

Crucially the fact that the player is necessary for viewing the latest Flash content would drive take-up and quickly ensure near-universal access. Once this was established, the real benefits would flow as Adobe would be free to develop page-based design at the same sort of pace as Macromedia is currently developing Flash. Essentially each new release of Dreamweaver and its corresponding player would bring in new page-based design capabilities that designers could immediately and reliably put to work and which would benefit all users. Compared to the horrible mess that is currently holding back the progress of web design, this would suddenly enable authoring application, web standards and browser/player to all move forward together in lock-step.

Who knows - Dreamweaver 11 might just be a real jaw-dropper.

Tom Arah

October 2005

 


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:

Google
Web designer-info.com

       
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]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.