Web Design Tutorial - HTML

[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!

 

 

Using HTML for Page Design

Tom Arah looks at the past, present and future of the Web from a design perspective.

The purpose of design is to aid the transmission of information. For the last five hundred years this has largely meant working with a single medium: print. Over the last ten years, however, the arrival of the Internet has changed everything. With its promise of near instant, near free and near universal access, the Web has already begun to replace paper as the most powerful medium for spreading information. But how does the Web compare in terms of its design capabilities; in terms of the typographic and layout power it offers to control the appearance of text and page?

When producing visually attractive, dynamic and interactive layouts with a modern application like Dreamweaver 3, it might seem that the standards of traditional paper design have already been surpassed. It’s certainly true that at its current rate of change, the Web will soon become not only the most important but also the richest design medium available. But it’s not quite as simple as this. The Web as it stands now is the product of its history. To truly master the Web’s current and future design potential you have to understand where it’s coming from. And to do that you have to start at the beginning.

HTML 2.0

Logical Tags

Tim Berners-Lee is a genius but it’s pretty clear that the right-side of his brain dominates his left. Back in 1991 when he devised HTML as a vehicle for sharing scientific information he concentrated almost exclusively on the delivery of content rather than of presentation. The fundamental and ubiquitous unit in HTML is therefore the logical tag. Open any Web page in a text editor and you’ll see these tags marked off within angled brackets before and after the element being described. Each body paragraph, for example, is marked with <P> at its beginning and </P> at its end. Other fundamental tags include the six levels of hierarchical heading from <H1> through to <H6>, ordered lists <OL> and unordered lists <UL>.

The crucial point about each of these tags is that they are logical and content-based rather than design-based. Of course for the end user to be able to distinguish one tag from another they still have to be differentiated visually, but this design function is handed over entirely to the browser software. In other words the first HTML 2.0 standard offers no absolute typographic control at all. With a bulleted <UL> unordered list, for example, you not only have no control over the precise bullet character used but no control over the paragraph’s point size or even typeface. Using the <B> tag you can mark off text to be shown in bold but even this is frowned upon in favour of the more logical <EM> and <STRONG> tags for marking text to be emphasized in any way that the browser software sees fit.

The situation is exactly the same when it came to HTML 2.0’s layout control – there isn’t any. You can forget about producing interesting layouts as all text flows within a single column. You can’t even control the width of this column – the line width depends on the width of the browser window so that resizing automatically reformats the page. Vertically you have no control either with no way of setting interline or interparagraph spacing. No wonder the early guides to Web design made so much of the horizontal rule <HR> tag as this at least allowed you to divide the page into clear sections.

Of course the huge strength of this lack of formatting power is the system’s simplicity. All you need to create a Web page is a basic text editor like Notepad. To produce a simple home page for my own site, for example, I want to pick out the page title and the major categories of software that the site covers - web design, DTP, photo-editing and drawing. I clearly want these paragraphs to be bigger and bolder than the body text. I can’t do this precisely but I know that for the majority of browsers the heading tags will take advantage of HTML’s in-built range of 7 text sizes centred around the default body text size of 3. By marking off the title paragraph as <H1> and each category as <H2> I can produce a basic hierarchy that can be made more apparent, and given a slight visual lift, with <HR> rules. Within each category I want to list reviews, articles and tutorials which is best done as <LI> items within an unordered list <OL> as this will prevent excess interparagraph spacing and at least provide a bullet of some description to give a little visual interest.

The advantage of the HTML 2.0 tags is their simplicity rather than their design strength.

The end results can’t be called eye-catching or attractive but they are functional. In particular these HTML 2.0 tags act as a lowest common denominator that you can be sure will appear across all platforms and browsers. Unfortunately, although you can be confident they will appear, you can’t be confident how they will appear. Final layout depends on text flow which depends on window width. Final typography is even more uncertain with the typeface - usually the uninspiring Times – determined by the browser and the text size determined by the user-controllable default body setting. In many ways Web design at this level feels like trying to sculpt jelly – you have precious little control in the first place and the results are distinctly wobbly. The system is hardly ideal but you have to come to terms with it as the same core logical tag system remains essential to modern Web design, acting as the infrastructure on which everything that has come since is built.

Generally HTML 2.0 is well suited to the layout of scientific theses, but little else. If you were looking for more control over typography and layout this left two main options. To begin with you could give up on HTML completely by producing pages as Acrobat PDFs or by choosing to embed all design elements as <IMG> GIFs. Alternatively you could try and work around the limitations of HTML. Using the block quote <BQ> tag, for example, you could be pretty sure that you would end up with indented paragraphs while the monospaced <PRE> preformatted tag provided rudimentary tabular control. With a bit more imagination you could even take HTML 2.0 into new levels of layout power. With a transparent GIF as an <IMG> tag, for example you could create a first line indent and even control interparagraph spacing. Well you could so long as the viewer had chosen to display images.

 

HTML 3.2

<TABLE>

Clearly the need for more dedicated design control was intense and the next version of HTML, stabilized as 3.2, grafted on some much needed new power that is still important today. To begin with it adds new layout control. A new ALIGN attribute for the heading and <P> tags enables these to be repositioned so that <H2 ALIGN="RIGHT"> can be used to right align my sample page’s section headings. The same attribute can be used with the new <DIV> division tag to control the alignment of whole sections of the page so that <DIV ALIGN="CENTER"> will centre all elements between it and its closing </DIV> tag. Much the most important introduction is the <TABLE> tag, an official endorsement of the browser-specific Navigator 1.1 extension. With its associated table row <TR> tags and cell-based table data <TD> tags, <TABLE> immediately replaces the ugly <PRE> for producing tabular data.

Desperate designers soon realised that <TABLE> could offer far more than this. The real design strength of the table tags comes from their attributes. In particular, by setting <TABLE BORDER="0">, the grid of the table immediately becomes invisible providing a hidden design framework for the page. By setting CELLPADDING and CELLSPACING you can then control the distance between the cell and its text which enables much finer control over vertical spacing between cells. Best of all, using the WIDTH attribute, you finally gain pixel-based horizontal layout control. Using the ROWSPAN and COLSPAN attributes you can also merge <TD> cells to produce far more complex and attractive layouts. In fact, with the ability to nest tables, you can produce just about any grid-based layout imaginable.

Nested tables are capable of producing advanced layouts as shown by making the table borders visible on the Yahoo site.

You might be able to, but you certainly wouldn’t want to do so within Notepad. To use tables to grab serious layout control of your page you really need a basic wysiwyg authoring package such as FrontPage. To redesign my sample page in FrontPage all I need to do is use the Insert Table command to set up a blank table for each section by setting the number of columns and rows. It’s generally worth working this out on paper beforehand, but in this case is very simple as I only need two columns and four rows for each section. The dialog also lets you specify the overall table width. Nowadays most browsers will be viewing on 800x600 screens or above but widths of this size lead to overlong lines that are uncomfortable to read. In any case it’s a cardinal rule of Web design to cater to as wide an audience as possible (see Top Ten Tips) and a table/page width of 600 pixels will happily fit on the majority of screens with no need for scrolling.

I can now fine-tune my layout by dragging the righthand border of the first column to make it smaller – if you switch to HTML view you’ll see that FrontPage has automatically sorted out the WIDTH attributes of all <TD> tags accordingly. I can then drag across the two cells that make up the heading row, right click and select the Merge Cells command which automatically adds the desired COLSPAN attribute. When I’m happy with the table layout I can copy it four times for each of my site sections and can then cut and paste my Notepad-tagged text into the relevant cells. I can also make use of another advantage of tables and use the Cell Properties command to select a background colour to add some interest and improve user orientation.

HTML 3.2’s <TABLE> tag offers some serious pixel-accurate layout power.

<FONT>

Through the <TABLE> tag we at last get some sort of layout control and with the arrival of the <FONT> tag the same is true typographically. In fact it was Navigator 1.1 that first introduced <FONT> with its COLOR and SIZE attributes and Microsoft that expanded its usage by introducing the FACE attribute, but again the need was so overwhelming that the idea had to be officially endorsed in the final HTML 3.2 specification. Returning to my sample page this allows us to select our headings and body text and call up the Format > Font dialog to set type colour, size and typeface. The difference is amazing. Rather than being limited to Times I can choose any font on my system, for example, selecting an attractive sans-serif like Gill Sans complete with its wide range of condensed and ultrabold versions. I can even specify sizes.

It’s a huge step forward but don’t get carried away. To begin with the SIZE attribute can’t be set precisely - apart from in Navigator 4 which unofficially introduced point sizes – instead it refers to just the seven in-built HTML sizes so that <FONT SIZE="+1"> will be one size larger than the browser would otherwise display. Likewise with the FACE attribute. While this can refer to any font, if the end user doesn’t have it on their system, the browser will return to its default. You can partly work around this by listing alternatives so that with <FONT FACE="GillSans, Arial, Helvetica, Sans Serif"> you can at least be confident that your font won’t appear in Times, but it’s hardly precision typography. Worse, without tight typographic control you can’t really take layout control. If your table layout depends on a condensed typeface the end user doesn’t have, for example, the containing cell will enlarge accordingly and your hand-crafted layout will start falling apart.

The <FONT> tag opens up typographic control – but must be used with caution.

Ultimately of course this is the trouble with temporary fixes – they end up causing as many problems as they solve. In terms of efficiency, for example, both the <TABLE> and <FONT> tags are disastrous with the layout and formatting code in the typical Web page often larger than the actual content! The extra code isn’t only bad for download times, it also adds to the complexity of the page and makes future editing far more difficult. When redesigning a complex table page, for example, you’re often better off starting again from scratch and probably the most useful of all FrontPage’s formatting commands is the catch-all Remove Formatting.

Browser Differences

The biggest problem with the improved design power of HTML 3.2 however, is that you still can’t trust it. While it’s easy to design a page that looks attractive on your own system, you still can’t be sure of how it will appear to your end users. This is partly down to the font issue but this pales into insignificance compared to the new problem of different browser handling. Sadly the first casualty in the browser wars was any attempt at providing a stable and consistent design platform. As Netscape and Microsoft battled it out for supremacy they were more interested in adding browser-specific bells and whistles, such as Navigator’s <MULTICOL> and <LAYER> tags and Explorer’s <MARQUEE>, than they were in consistently supporting the core features of the 3.2 specification. The Web was in danger of splitting into two camps as the proliferation of "best viewed in Explorer" and "best viewed in Navigator" logos showed. Or rather it was in danger of descending into anarchy as each new browser version on each supported platform would present the same page differently.

It would be hard to conceive of a worse situation for the Web designer. Suddenly the inadequacy of the layout and typographic power at their disposal seems the least of their worries. In fact producing the basic page design in a program like FrontPage is relatively straightforward compared to the work needed to make sure you know what your viewers will actually see. This is where more HTML-advanced programs, such as HomeSite and Dreamweaver, come into their own with their ability to validate the HTML code against the known capabilities of different browsers. Even this though isn’t proof against undocumented bugs and idiosyncracies, and both main browsers are riddled with them. Ultimately the only foolproof option is to view your page with each of the main browser versions that you plan to support and fine-tune your pages where necessary until you are more or less happy with the results across the board.

Dreamweaver lets you validate code against the capabilities of each major browser version to help avoid potential problems.

Overall the HTML 3.2 specification at last provided some serious design control, and the <TABLE> and <FONT> tags remain common weapons in the modern designer’s toolkit, but the lack of browser consistency turned implementation into an absolute nightmare. Rather than sculpting jelly, the Web designer’s job was now more like trying to nail it down – just when you thought you’d finally fixed it, you’d discover that it had escaped. Clearly the Web’s organic design development piling browser differences on HTML workarounds had reached its limits. What was needed was a root and branch rethink. And that is exactly what the W3C provided with its CSS1 (Cascading Style Sheet) specification.

CSS1

Style Formating

Effectively CSS1 grafts the sort of extensive typographic control that you find in WP and DTP applications onto the underlying HTML 2.0 tag-based system. CSS has its own syntax based on selectors, to which the formatting will be applied, followed by style rules within curly braces which are built up of properties separated by a colon from their values and from each other by semi-colons. To set the formatting of the third level of heading tag to Arial and double the body text size, for example, the style rule would be H3 {font-family : "Arial, sans-serif" ; font-size : 200%}. Again you could use Notepad to write your own CSS, and most wysiwyg authoring packages also provide some level of CSS control though often this is hidden away in sub-dialogs. To show what is involved most clearly though, I’ll use the dedicated TopStyle package to graft on some CSS formatting to my first HTML 2.0 tag-based sample page.

The first step is to choose the selector, the HTML element that will be affected by the style rule. All the HTML logical tags such as <P>, <EM>, <BQ> and so on are available as selectors so I’ll choose the <H2> tag that I’ve already applied to my category headings. The next step is to set up the style rule by setting properties. TopStyle shows all properties available in the CSS1 specification so that I can choose a typeface family, text size and colour just as I would with the <FONT> tag. The range of formatting options are far more extensive however, so that I can also add control of leading, word spacing, margins and paragraph spacing. I can even set up a background colour or image complete with control over padding. TopStyle shows a preview of the effect at the bottom of the dialog and when you’re happy with it you can simply select the code that has been created and copy and paste it as a <STYLE> tag in the <HEAD> element of the page.

CSS1 style rules are built up and applied to tagged elements.

The beauty of this style-based approach is that the formatting automatically applies to each <H2> element in the page. Of course this might not be exactly what you want so you can always override a style sheet on an individual element basis by applying an inline STYLE attribute to the tag. Alternatively you can set up your own selector "classes" so that I could set up different coloured backgrounds to quickly and consistently apply to the headings in each section of my now colour-coded site. Much the most powerful option though is to store all your style information as a separate CSS file. By then adding a <LINK> tag referencing the CSS file in the <HEAD> section of your pages all the formatting information will immediately be applied absolutely consistently across your site. Edit the single CSS file and the new formatting will cascade throughout your site wherever its rules aren’t over-ridden.

The typographic power CSS1 opens up is amazing and the massive improvement in efficiency, consistency and editability compared to the inflexible and code-heavy workarounds of HTML 3.2 explains why the HTML 4.0 specification now "deprecates" the use of the <FONT> tag and ALIGN attributes in favour of CSS1. However it’s not all plain sailing. The concept is brilliant but the implementation again leaves a lot to be desired. Some of these limitations are intrinsic, so that logically style inheritance should mean that if you set a BODY typeface it should automatically apply to other tags unless overridden – it doesn’t so you need to define every tag you plan to use. Such idiosyncracies pale into insignificance however, compared to the pick-and-choose support of the main browsers. The best place to find out just which properties are supported by which browser is www.webreview.com. It doesn’t make pleasant reading with the comparatively rare Opera browser currently winning the award for most complete support and Explorer and especially Navigator coming in for some serious panning.

Webreview.com’s CSS compatibility chart highlights the different levels of browser support.

CSS2

Absolute Positioning

At least there’s no question that when the browser support falls into place (see Future Web Design), CSS1 comprehensively tackles the typographic failings of HTML. The next job is to tackle layout and in fact this has already been done in the W3C’s follow-up CSS2 specification. And again the system is beautifully simple. Essentially CSS2 works by adding style-based positioning capabilities to the existing <DIV> tag. All you need to do is to specify the x and y co-ordinates, height, width and stacking order, for example <DIV ID="Layer1" STYLE="position:absolute; left:360px; top:146px; width:140px; height:136px; z-index:1">, and you have a bounding box ready to contain your normal HTML tag-based code.

The idea is so simple that the necessary code could still be authored in Notepad but to really take advantage of such advanced wysiwyg authoring we need an up-to-the-minute authoring package such as market-leader Dreamweaver 3. Using Dreamweaver’s Draw Layer tool you can simply draw boxes onscreen into which you can add or drop text, images, tables and so on. For my sample page, for example, I can draw separate boxes to contain each section heading, its associated text and screenshots. To then control these layers all you need to do is click on the box at the top left of each layer which enables interactive repositioning and resizing or precise control through the Property Inspector. By Shift-clicking you can select multiple layers and then using the Modify > Layers and Hotspots commands you can ensure they are aligned correctly and also make them the same size and width.

Dreamweaver’s CSS2-based Draw Layer tool makes Web design far more like frame-based DTP.

After the single resizable column approach of HTML 2.0 the layout control that CSS2’s absolute positioning offers is extraordinary. It also has a huge number of advantages over 3.2’s table-based approach. To begin with the code produced is far more streamlined and efficient. You can also produce effects that weren’t possible with table cells such as overlapping layers and strictly fixed layouts where scrollbars appear if there is overflow text. Even better from the author’s viewpoint is the massive improvement in design freedom and editability. Once you’ve enjoyed the creative freedom of working with Dreamweaver’s layers it’s very difficult to go back to the restrictions of tables.

The biggest design advantage of CSS2 layers though is their scriptability. Using dynamic HTML/Javascript you can change the properties of layers and other objects. To animate a layer in Dreamweaver, for example, you can simply drag it onto the Timeline inspector, click on the last frame in the resulting animation bar and reposition the layer. If you then hold down the Timeline inspector’s Play button you will see the layer move. By adding my multiple layers to the timeline, repositioning them and then selecting the Autoplay option, Dreamweaver creates all the necessary to produce the effect of my different design elements flying in from all angles to create my home page as it loads.

Frankly that’s already embarrassingly hackneyed but there are other options. A more subtle effect would be to use the Timeline’s behaviour track to change source files and layer text to create a slideshow effect where each site section’s heading, screenshot and associated text was introduced in turn. Alternatively, using Dreamweaver’s Show-Hide Layers behaviour you can set up an interactive page where as the end user moves their mouse over a section heading image, the relevant screenshot and text are displayed as others are hidden. By adding in sounds and managing multiple timelines you can even produce some reasonably sophisticated multimedia effects. By then linking to the external stylesheet we created earlier or using Dreamweaver’s own CSS Styles inspector we can reintroduce in some heavy-duty typographic control to our project.

HTML 4.0

Current State of Play

Using Dreamweaver 3 the Web suddenly seems like a seriously impressive design medium that leaves paper looking hopelessly old-fashioned. We’ve certainly come a long way from Notepad and the core logical tags - but again it’s important not to get carried away. There are still many features that print designers take for granted that haven’t been implemented in the HTML 4.0/CSS 2 standard. Without features such as rotated and non-rectangular layers, text flow or text wrap, layouts remain limited when compared to their DTP counterparts. Likewise, without the ability to reliably and easily provide the fonts the designer intends as part of the page itself, there remains a huge hole at the centre of Web typography.

Even with CSS1 and CSS2 there remains a long way to go for Web design, but sadly that’s not the real problem. The real problem is not that we’re lagging behind but that we’ve already got ahead of ourselves. The CSS2 specification was released in 1998 but the support for it remains patchy. Even a relatively recent release such as Navigator 4, for example, doesn’t allow the width and height of blocks to be changed dynamically. With version 3 browsers the situation is much worse as positioning code is simply ignored so that each layer appears one after the other as an ugly vertical stack often in the wrong order! In other words, within non-supporting browsers my beautifully-crafted interactive multimedia extravaganza will look far worse than my original simple HTML 2.0 page.

The big problem with CSS2 is that it doesn’t degrade gracefully. Within Navigator 3, for example, pages look a mess.

So does that mean that Dreamweaver’s advanced layer-based controls are currently a waste of time? Thankfully not. To begin with, for controlled intranets and modern sites where you know all browsers will be using CSS2-supporting browsers, advanced layer-based layouts are already a viable option. Alternatively, using Dreamweaver’s CheckBrowser behaviour, you can direct users to different URLs depending on their browser's capabilities. Maintaining multiple versions isn’t a sensible option for every page on a site but is certainly feasible for my one-off home page. Of course this means that I have to create an alternative home page based on the HTML 3.2 standard. Fortunately Dreamweaver provides a File>Convert command to automatically convert CSS2 layers to <TABLE> tags and/or CSS1 formatting to <FONT> tags. By its nature this conversion is imperfect and loses you considerable design control, but it’s an absolute godsend for ensuring compatibility.

Generally it’s wise to stay some way behind the cutting-edge of Web design, but the good news is that this edge is progressing quickly. While it’s still sensible to stick to table-based designs for general use, for example, CSS1 formatting has now been around long enough to be worth employing. This is especially true as, unlike CSS2, CSS1 can be made to degrade gracefully. A user with an early non CSS-supporting browser, such as Navigator 3, won’t even realise that the <H2> tags they are seeing are missing the typographic finesse and visual interest that more modern browsers enjoy.

Currently then Web design is in a state of transition and the designer’s main job is to accommodate this transition using all the design power that HTML provides while ensuring as much backward compatibility as possibly. Essentially it’s a case of trying to provide the richest and broadest experience you can; simultaneously pushing the envelope for the most advanced in the class while making sure that no-one is completely left out. In the near future though the Web looks likely to go through a phase change. CSS2’s absolute positioning marks a boundary because it simply isn’t backward compatible as pages viewed in a non-supporting browser appear as a jumble. The move to XHTML and XSL will be an even clearer watershed as non-compliant browsers and non-compliant pages will simply lead to errors and nothing onscreen.

In many ways this sounds like the Web designer’s worst nightmare come true and no doubt in the short term will lead to more work and heartache. In the medium term however, it’s the only way forward. HTML as it stands now simply isn’t flexible and reliable enough to provide the design strength necessary for the most important information medium the planet is ever likely to see. And in the long term, the new design power of the content-based XHTML working hand-in hand with the presentation-based XSL will finally provide the stable design platform necessary to take the Web into the 21st century and beyond.

The irony is that the system will gain its strength directly from the strict separation between content and presentation that caused all the problems with HTML in the first place. Maybe Tim Berners-Lee is a design genius after all.

Tom Arah

Top Ten Tips

Use the Web itself as a resource – there are plenty of examples of how to do it, and how not to do it.

  1. Planning is essential. Before you turn to your Web software, plan your overall site structure and page design on paper. Dreamweaver even lets you import scanned plans as a bitmap blueprint.
  2. Keep it simple for your users. The importance of a clear and consistent information hierarchy within each page and across the entire site remains paramount.
  3. Keep it simple for yourself. Remember that a complex layout might look good now but will make future editing and maintenance more difficult and will set a precedent that you are expected to live up to in other pages. On the other hand…
  4. Don’t keep things too simple. The write-once read-many times nature of the Web means it’s still worth putting in the effort to create something special – especially for your main pages.
  5. Ensure backward compatibility. The latest design capabilities won’t work with older browsers so check your Web stats to decide when it’s time to introduce new features and try and ensure that they degrade gracefully.
  6. Ensure future compatibility. The Web is a changing medium so make sure that your pages are ready to adapt. In particular avoid tags and attributes that are currently deprecated and will eventually be phased out.
  7. Use the Web as a resource. There are plenty of dedicated sites full of Web design advice, but in fact every site can be useful. Use your browser’s View Source command to see how a particular effect is achieved.
  8. Develop a system. Once you’ve worked out the best way to produce your pages make sure you write down the method for future use and, if possible, automate production using features such as library items and templates.
  9. Check your design. Test on as many browsers and browser versions as you can. Ideally also check the final site online across a range of systems and modem speeds.
  10. The final test. Imagine you are an end user. Would you stay on the site? Be able to navigate it? Come back again? If not start again.

The Future of Web Design: CSS3, XHTML and XSL

At one point it looked like the greatest strength of the Web - its universal accessibility - would be lost in the confusion of wildly differing browser handling. With the W3C’s work on the CSS1 and CSS2 standards, the way out of this design anarchy became clear. The problem now though is that these supposed standards are being treated in the same cavalier way with variable levels of browser support and reliability seemingly at the developers’ whim. It’s now clear that what the Web needs above everything else is absolute consistency and that this can only come from full and ratifiable support for open standards.

The www.w3c.org site’s own design might not be that exciting, but it holds the key to the future direction of the Web.

In terms of browser support there’s some ground for optimism from a surprising quarter. Netscape, previously the worst offender in terms of browser idiosyncrasy, has become a born-again convert to the importance of standards and with its completely rewritten Gecko engine is promising full CSS Level 1 compliance. In terms of the standards themselves, the W3C is also playing is part by breaking down the current CSS 3 proposal into separate smaller modules. This gives the developers more achievable goals and, as modules shouldn’t be implemented until they’re complete and approved, will at last provide for consistency and reliability for author and end user alike.

Looking further into the future this move to tighter control of open standards will become even stronger moving the issue on from browser independence to device independence. With XHTML (eXtensible HyperText Markup Language) the HTML 4.0 specification is being rewritten to the far more rigorous standards of an XML application. The main advantage of the new format is that it will tie in with the planned XSL (eXtensible Style Language) to enable the automatic transformation of XHTML pages between different devices such as Web phones and Web TV.

Without this new design infrastructure, the Web will inevitably fracture and split. With it, the designer will at last be able to control exactly how their content is presented across all browsers and all platforms and the Web will be able to move on to the next generation of design power.

Full specifications available from www.w3c.org.

Tom Arah

August 2000


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.