An Introduction to CMS

[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 authoring with Content Management Systems

Tom Arah seeks the best way to truly master your website once-and-for-all.

amazon

When Tim Berners-Lee invented HTML and the World Wide Web it seemed as if he had created the perfect publishing medium. Thanks to the limited range of HTML tags used for marking up self-evident semantic content – headings, quotes and so on – you could create your first web page in a simple editor such as Notepad in just a couple of minutes. Post the resulting page to a web server and it became instantly accessible to a global audience through any web browser. Even better, thanks to HTML’s hypertext nature, new pages could be fully connected to an existing site, and to the wider Web as a whole, with just a couple of links.

first web page

Tim Berners-Lee’s first HTML-based home page - http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

With simple page authoring and integration, the theory was that anyone and everyone should be able to publish anything they wanted to. The advantages were indeed astonishing and the number of publishers and the amount of content on the Web grew exponentially as a result. Over time however the real world practice hasn’t proved as simple and scalable as the underlying principles would seem to predict. In fact most sites have effectively hit a ceiling and in some cases a brick wall. So just what’s gone wrong and what is the best way out of the impasse?

Ultimately the main practical problems with HTML-based authoring come down to human nature. While a robot (or Jakob Nielsen the web usability guru) might be happy to look at 20 billion near-identical text-only pages, most users proved rather less self-denying and naturally looked for a bit of variety and visual richness - and the average web publisher wanting to maximize traffic quickly obliged. The inevitable result was that the purity and simplicity of HTML’s text-only, semantic tagging was rapidly lost with the introduction of various extensions and workarounds to Berners-Lee’s original HTML specification, such as the < img> tag for incorporating inline graphics and the use of <font> and <table> tags to manage typography and page layout.

The results certainly looked more attractive, but the amount of work involved in creating each new page exploded. Moreover it wasn’t just the content page that needed to be made visually rich in this way. In Berners-Lee’s original vision, home and site section pages were little more than text-only lists of links, but in today’s design-rich web these are now recognized as the best opportunity that a site has to show off its wares. The end result is that for many sites it actually takes far longer to update the parent page and home page with thumbnails and teaser text than it does to design the new content page itself.

Also these days the demands on the web author in terms of graphics, layout and formatting are far greater than they were in the early days of HTML. Nowadays, for example, web buttons need to be interactive rollovers not static graphics which means getting to grips with technologies such as Javascript/DHTML and Flash. And while complex tables still rule the roost for most webpage design, CSS (Cascading Style Sheet) positioning and layout is now moving into the mainstream. And CSS formatting means that the designer already has a huge amount of typographic control over the look of every aspect of their page right down to the individual word level. Such hands-on design power is certainly welcome but it means that the dream of universal authoring in a simple editor is long gone.

rich design

Nowadays web authoring demands rich design - and dedicated authoring applications to create it.

For the determined publisher using dedicated tools, the world of rich web design opens up – but be wary. While the Web’s write-once-read-many times nature encourages effort put into making each page stand out, remember that consistency between pages is critical. In other words before you decide to, say, add a graphical drop cap to the current page, remember that you will have to do it to every page thereafter. More importantly, you’ll also have to update all existing pages! The end result is that rather than a creative, or at least painless, experience most ongoing web authoring is a by-the-numbers, checklist-based chore while retrospectively changing an existing design is a nightmare to be avoided at virtually all cost.

The theoretical simplicity and scalability of HTML authoring has failed in practice for another reason: human nature isn’t just greedy, it’s lazy. While the beauty of Berners-Lee’s hypertext-based Web means that a page can be fully integrated with just two links – one to and one from a parent page – and that this ensures that no other page on a site is ever more than a few clicks away, this is no longer good enough. These days end users want information instantly. More often than not they’ll have arrived at your content page via a search rather than through drilling down via your home and site section pages so they don’t know how your site is constructed or what other content it provides – and, if they can’t see what they want instantly, or a link to it, they’ll simply return to Google and search again.

Of course no self-respecting author can accept losing a visitor like that so it’s imperative to provide links to all other pages that might be of interest directly on the content page itself rather than the parent page. This means that, rather than adding just two vertical links between parent and child, you instead have to add horizontal links to all other content pages at the same level. More importantly it also means that you have to update each and every one of these other sibling pages with a link to the new page every time one is added!

And there’s another problem. While the way you’ve chosen to organize the content on your site might seem self-evident to you, the end user might have other ideas.   A Dreamweaver review for example could logically be accessed in a number of different ways: Web>Application>Review, Review>Web>Application Application>Review, Review>Application, or even by author or date. To be sure of maximizing your audience that would mean posting the same page to multiple categories each with its own interconnected navigation system needing to be updated. And while you’re at it, the user might well want to instantly access the review from all relevant articles too, wherever they’ve been posted! Put the move from vertical to horizontal linking together with the need for multiple routes through your content and suddenly rather than editing just two pages for each new page added, you now have to create multiple versions of each page and edit dozens or even hundreds of other associated pages!

Between the real world complexities of providing rich design and rich accessibility, HTML’s inherent scalability collapses. The original vision of the simple, near-standalone page, easily posted and easily integrated has well and truly disappeared - and this in turn leads to the biggest problem of all. In Berners-Lee’s original vision, the simplicity of HTML authoring meant that everyone could be their own author and add their own content to a site so enabling it to grow communally and scale organically. With that simplicity lost, web authoring becomes a complex task which requires an expert author who fully understands the design and integration requirements of each particular site.

The end result is the appalling bottleneck where all new pages, and even edits to existing pages, have to be channeled through a central webmaster. And an increasingly reluctant webmaster at that (unless she’s charging by the hour) as each new added page involves ever greater integration work and makes the site ever less flexible. Essentially what we end up with is a distributed publishing system with no in-built centralized control despite the fact that it is being channeled through a single core author - the worst of both worlds and with none of the benefits.

It’s an ugly situation but there are practical steps that the webmaster can take to regain some centralized grip over both page design and integration. The first and most important is to take full advantage of the benefits of CSS. On a page-by-page basis the hands-on design power that direct CSS formatting opens up just adds to the complexity of the authoring process, but the real beauty of the system becomes apparent when you instead link your page to a single, central external style sheet. Now you can quickly apply advanced text formatting knowing that it is being applied consistently to all pages and, if you want to update the look-and-feel of the entire site, you only need to update the one CSS file. That still leaves the author to apply the styles correctly but, if the design steps are kept simple and a strict routine created both for creating the content pages and updating the parent pages, this becomes manageable.

css zen

A single external CSS file offers centralized design control.

Next the webmaster has to tackle the full integration of each new page into the site as a whole. Unless you stick with the simple, drill-down, parent-child approach doing this manually each time you add a page is out of the question but, if your server supports Server-Side Includes (SSI), you can instantly update multiple pages by editing a single file just as you can with CSS. For the majority of users it’s left to their web authoring software to provide similar functionality. With both Microsoft FrontPage and NetObjects Fusion, for example, you can create a visual hierarchy for your site and leave the program to automatically add links to all sibling as well as parent and child pages. With Adobe’s GoLive and Dreamweaver there isn’t the same behind-the-scenes automation, but you can achieve the same results by editing single embedded Library Item files and with a degree more flexibility.

Once you’ve got your site back under some centralized control, you can also begin re-opening the authoring process to non-expert users. In particular using Templates, the webmaster can set up a standard layout for different site sections complete with consistent CSS formatting and library-based navigation and even restrict the non-expert author’s edits to particular areas of the page. And, if you set up the site for use with the Adobe Contribute add-on program, you can even enable users to directly edit, create and publish new pages, while setting up permissions and workflow checks to ensure that they don’t do anything too unacceptable.

Working like this allows the underlying HTML publishing system to deliver the rich design and accessibility that end users demand while at the same time boosting centralized control and restoring distributed authoring. However it’s important to recognize that these aren’t ground-up total solutions, but rather grafted-on and partial workarounds. With library items, for example, you still have to update and re-publish dozens of pages each time you add a new page and there’s no option for Contribute users to automatically update the links of multiple pages. And even with these aids there’s no getting around the fact that ensuring on-page consistency, adding teaser thumbnails and text and so on remain time-consuming chores. And, even when everything is running as smoothly as possible, the larger a site becomes the more work it takes to add and integrate new content. When new content is the lifeblood of all sites this inherent drag is unacceptable.

Of course it doesn’t have to be this way. Large organizations, institutions and ecommerce businesses need their web operations to be fully scalable and fully under control even when dealing with thousands of pages and with new content added daily. And, using embedded server-side web programming languages such as ASP, ASP. NET, JSP, ColdFusion and PHP to create a web application, this is perfectly possible. The key is a centrally hosted database which these languages query to pull out content to create customized pages on-the-fly. This dynamic architecture means that content only has to be entered into the database once and it can then be accessed in any way that the designer-cum-programmer sees fit. Rich, consistent and flexible presentation is also taken care of via central page templates which determine exactly how the data that each query retrieves is wrapped up in HTML and CSS before finally being delivered to the browser.

amazon

Customised data-driven web applications such as amazon.com are beyond the reach of the average website.

With rich access and design handled automatically and centrally, these web applications are inherently scalable. And, if handled well, there’s no reason that the end user should feel that they are interacting with a database rather than an individually designed and published page – in fact quite the opposite as web applications enable advanced interaction, feedback and even end user personalization as seen on sites like amazon.com. The power is undeniable and dynamic server-side handling is the backbone that keeps all the biggest web sites up-and-running. However such database-oriented and programmatic approaches are only a realistic option for major web operations, leaving the vast majority of so-called “static” HTML sites stranded and struggling.

But does it have to be like this? The ideal would be to somehow combine the original Berners-Lee vision of a fundamentally simple, distributed publishing system with the rich design and the rich accessibility that end users now demand and the centralized control, flexibility and efficiency that advanced web applications provide. And that’s exactly what a new approach to web authoring promises. The simple secret of these Content Management Systems ( CMS), from basic text-only bloggers through to full-blown site authoring applications, is that they hide their behind-the-scenes dynamic data serving beneath a user-friendly front-end.

Crucially this front-end is web-based which means that anyone with access to the internet can access the CMS. The first step is then to log-in, which determines just what capabilities are made available as defined by the administrator. Most importantly, as soon as they are logged in, CMS users can add content. Thanks to the underlying web architecture, this capability can be offered not just to the members of a workgroup adding the core content to a site, as is the case with Adobe Contribute, but also to site visitors who can post comments to a guest book, or directly on an existing page, or as part of a forum thread, or even personal blog. In short, rather than centralized, one-way publishing, CMS enables a truly distributed, two-way dialog.

drupal

CMS applications combine behind-the-scenes dynamic publishing with a user-friendly web front-end.

With such widely spread authoring, the content creation process must be kept as simple as possible so usually there are just two text fields provided by default, one for the body copy and one for the title. And with CMS, unlike traditional HTML publishing, the end user doesn’t even need to know what a tag is as word-processor style controls are provided for emboldening, italicizing and so on and the copy is intelligently filtered to automatically add paragraph breaks, hyperlinks and so on. For more advanced content and design, the text entry page can also be split into separate fields that can be HTML and CSS formatted accordingly, based on a central customisable template. And for absolute design control you can always create the page externally in a dedicated web authoring package and cut-and-paste the HTML into the body copy box.

The result is simple, flexible and controlled content updating with rich, consistent and flexible presentation. And rich end user accessibility is taken care of too by simply adding selectable keywords to the text entry page – say a choice between “web/print”, “ Dreamweaver/InDesign”, “review/article” - which are then used to dynamically group content in effective site sections. From the end user point of view this is exactly how hypertext should work letting them access content however they want and as quickly as possible. It’s ideal from the publishing perspective too as the content is only entered once with the CMS automatically creating the appropriate navigation on-the-fly depending on how the end user chooses to access the page. And the CMS can even automatically create the various site section and main home pages too by pulling out the headings and first paragraph of body copy of relevant new content as teasers.

This is exciting stuff. The use of a CMS simultaneously addresses static HTML’s lack of both scalability and central control and dynamic data-driven publishing’s off-putting technical and programmatic requirements. The result is a truly distributed and two-way publishing system based on simple, tag-free text entry offering rich design and accessibility with plenty of central control, flexibility and automation. And on top of all that, the most popular and powerful CMS solutions are open source and free! However it’s important not to get carried away. Choosing, and in particular implementing, a CMS is by no means plain-sailing as will become clear in a future article when I look at the many ups and downs involved in getting to grips with Drupal (www.drupal.org), the open source CMS that is currently making big waves.

It’s certainly not an instant solution but, having experienced the problems and workarounds of traditional static HTML-based publishing and having seen how a well-implemented CMS solves them once-and-for-all, I’ve become convinced that the CMS route is the best long-term approach for the vast majority of medium-sized sites. And it’s not just me who has been won over. Tellingly, Tim Berners-Lee himself has recently started his own blog on a site created with Drupal. And in his first post he talks of how he always imagined the web as “a space for communal design, for discourse through communal authorship”, a space made possible by enabling the web browser to also act as web page creator. And he should know – after all that’s exactly how the first web browser operated as created by Berners-Lee himself.

tbl blog

Tim Berners-Lee’s latest publishing effort - a CMS-based blog.

It’s taken around fifteen years, but thanks to CMS it looks as if web publishing is finally ready to fully deliver on its extraordinary potential - simple, universal, instant, rich, accessible, flexible, communal, two-way, organic, scalable and essentially free.

Tom Arah

April 2006

 


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.