Building the Modern Website: Part 3 -- The Fusion of Design and Technology

Website Anatomy 101: The Guts

Find the 'view source' function of your web browser. Hit it, and see the underlying stuff that makes this website what it is. You're looking at HTML, Javascript, and CSS. This is what makes a website a website.

The exact arrangements of elements determines how your web browser will display the page. It determines whether some text will be bold, other text will be really big, and some links will give popups when you click on them.

All of this has changed through time: exact semantics and details change (mostly for the better) and browsers get better, smarter, and faster. For a brief recap of where HTML was and where it's going, I recommend this article: The Design of HTML5.

Things that Died in the Past Decade

If you plucked a typical web surfer from -- say -- 1997 and dropped the user in front of the modern web, letting him have a go at it, this person would recognize most of what was currently on the web. They would recognize a lot of old sites that we can still see: they were made with techniques of years past and were already outdated when they were built. Sure, this person would see some new things: such as Google (1998) and Javascript that doesn't just serve pop-up ads. But here's what this person wouldn't see in any site that I would refer to as a modern design:

  • Java Applets that stick out like a sore thumb.

    These are dead and gone: Java has diverged significantly from its origins as a language for use on web-enabled fridges, to its rebirth for programming on the web, to its current status as a strong contender for desktop applications programming. Mind you, it is still used for some applications due to the increasing popularity of libraries with nice-looking UI widgets. But the traditional 'applet' will not be found in a 'modern' site.

  • "Flash" vs "Non-Flash" gateway pages

    Sites that force a user to choose between a flash version of a site and a non-flash site are dead and gone. The vast majority of web surfers have a flash plugin, so this is no longer an issue. Flash is tightly integrated into quite a few web designs. Today you either use flash or you don't.

  • Bragging about HTML versions

    XHTML 1.0 was released, and its successors were nowhere near as successful as the W3C had hoped. Most webpages are still programmed in this, or HTML 4.0. Our hypothetical web surfer would be accustomed to seeing much HTML 2.0 and HTML 3.2 had just been published. Discussions on a technology called 'Stylesheets' was just starting: in the modern era, CSS should dominate presentation, and <center> tags and their ilk are banished to the digital dustbin of history.

    While webpage may still be written in one of several html dialects, modern web browsers support more than one, and do a reasonable job of rendering those that they don't explicitly support

    Related to this is....

  • Best viewed in [Not Your Browser of Choice]

    Circa 1995, there were really no standards to speak of, only what browser implementers chose to implement. So, when viewed in two different browsers a webpage might have drastically different layouts. Buttons that said "Best Viewed in Netscape Navigator" or "Best Viewed in Internet Explorer" were commonplace. With the noted exception of a certain old browser browser layouts can and do look more or less the same in all major browsers. And the trend towards standardization marches on as the browser wars continue to heat up.

  • 800-pixel wide layouts

    Modern monitors are bigger, and a site designed to only be 800 pixels wide is tiny on a modern monitor which is 1000+ (or often closer to 2000) pixels wide. Modern designs should expect to be at least 960 pixels wide, and should ideally be scalable so that the user is not left with a gigantic blank space on the right side of a fullscreen browser window.

    Wider layouts give a significant advantage to the web designer: more content and more elegant layouts can be created. It also assists with alternative navigation, as the layout provides more room for more widgets

  • Other Garbage:

    This category consists of often-hated things that have long-since been deprecated or removed in modern HTML standards:

    • <blink> tags
    • Scrolling Marquees
    • Animated Text
    • Background Music
    • Gaudy Tiled Backgrounds

I only wish IE 6 support would wither and die. Supporting the ancient, creaky Internet Explorer 6 versions has given grey hair to many a web developer

The Website that (Almost) Builds Itself

Perhaps the most important but least obvious difference would be how the pages are constructed. On a traditional site, all of this was coded by hand. As sites got larger, the people in charge of websites started to have a program (referred to generically as a Content Management System) construct the webpage source for them. Today, more websites are generated this way than not. The site you're reading now does so, using a CMS called Drupal to generate pages and a site template.

Using a CMS has the added advantages of helping you abstract the main page layout, markup and formatting. If you've built it right, you can change link colors by making one change in the CSS.

Indicators of the Modern Website

Using a CMS is neither a necessary nor sufficient condition for a modern design, but is one of the indicators of it. Other indicators are:

  • Uses JQuery or some other JS library for visual effects where applicable
  • Integrates with Social Networking sites such as Twitter or Facebook
  • Is Searchable
  • Frequent Updates, usually in the form of a news page, or a company blog.
  • Interactivity: in the form of Comments or Discussion Forums
  • A 'mobile' theme for the website that is designed for small-screen devices such as mobile phones
  • Loads quickly over a moderately-fast broadband connection


Characteristics of a 'True' Modern Site

  • Has a well thought-out color scheme, with smooth lines and matching alignments on elements
  • Is clean with appropriate amounts of whitespace
  • Loads quickly with external stylesheets
  • Has a consistent look and feel on every page, and a dedication to a positive user experience.
  • Uses dynamic javascript to enhance the user experience, instead of just spawning popups
  • Content is well-structured, with an easy-to-use navigation mechanism. Also, content is actually findable via search.

Using a Content Management System (CMS)

In order to do these consistently you require a well-constructed Content Management System. This is what I call the Fusion of Design and Technology. Supporting a CMS requires a different skills from a the website's designer than single-page sites might, as each CMS comes with its own set of standard pages that should be styled well, and its own idioms for CSS and structure of the content that it generates.

Of course it is still possible to design a page layout in PhotoShop, Illustrator or similar and chop it up, but this then requires more work or another person to turn the result into a theme for the CSS. This means more work into getting a site up and running but far less in the long run keeping the site's appearance consistent across every page.

Theming general website regions and visual elements (such as Drupal's blocks) also reduces the need to keep running back to the designer for additional elements that are substantially similar to ones that are already made. This makes everyone involved more productive because it reduce the amount of 'grunt' work necessary to keep up a website.

But doing so requires additional skills. You need to work with the HTML structure that your CRM supplies in order to style it, not against it. Editing the site template involves editing files, while adding new content can be a bit unusual at first because the pages don't actually exist as files.

Content Management Systems also make indexing your content automatic so that users can type a query in a search box and (hopefully) find it. This doesn't say anything about them finding it, but the indexing part is at least easy.

Getting a Modern Website

So if you don't have a 'Modern' website, how can you get one? You can either Rework it, or Rebuild it.

Reworking It

Rebuilding will be a lot of work. So, reworking your site should be the first thing you should consider, even though it is unlikely to work if you have a large, complicated site.

Reworking it consists of taking your existing content and with minimal editing of the content, putting it into a CMS and using one of that CMS's free templates to make a decent site. This is acceptable if you want a new design but don't require a customized look-and-feel for your site. For example: modern Drupal templates are extremely customizable: you can change the color scheme, layouts, and header image(s) right out of the box. If you have a simple site, this is more than likely the way to go. You might be able to do it with a larger more complex site if you have the talent available.

Take a look at your content. If you have few enough pages that converting their content manually to your new system will not take more time than you have available, you should be better. It might also be time for an update to the content itself, as well as doing away with ancient, decrepit web technologies that have no future.

If you can't stomach doing these things, I would Rebuild It.

Rebuilding It

Sometimes, it is clearly best to start over. To rebuild your site, you'll need to do the following. The process of getting the new site up-and-running can take several months.

  • Decide on a CMS to use. In this day and age, it is simply not worth doing without one. The Content Management System you settle on will determine your platform. I highly recommend one with an open platform, as this will be the most cost-effective to host on a continuing basis. If you want a reasonable default, use this guideline: for a small blog-like site that will not likely be anything larger than that, use Wordpress. For something flexible with a massive library of third-party contributed modules (or for anything else, for that matter), use Drupal.
  • If you want a custom theme for your CMS, decide on the layout you want.
  • Have someone on hand to write code that automatically imports your content from its old format to the new one, or have people on hand to do it once you've tested that importing it by hand is feasible.

This is the more difficult of the two options. If you're not careful, there will not be a point to it, as you'll wind up with a site that is just as out of date (or only slightly less so) than the one you started with. Keep careful note of the characteristics of a modern site that I have outlined. Build your site for now and for the future: not for yesterday's technology.

Recommended Reading

Choosing a CMS

These are the two I recommend on choosing between Drupal and Wordpress. Drupal is far more broad in scope and capabilities than Wordpress but Wordpress is in some ways more accessible. I would recommend reading both of these books to assist you in deciding.

If you want to build a medium- to large-size site, I would recommend Drupal: it is far more capable. I've done a lot of writing on Drupal: see my posts Building on Drupal to Reduce Costs and Drupal as a Platform. Indeed, Drupal is a well-proven platform that lets you benefit from the labour of many other programmers. In addition, a wide variety of third-party support is available from many different vendors, so if you want paid help you won't suffer for lack of options.

Things to start reading

Usability is -- in my opinion -- the most important aspect of any website. It's also something that was absolutely missing from the websites of 1998: content and elements were slapped on the page with little thought to layout. Don't Make Me Think is one of the seminal books on usability.

This ends Part 3. Part 4 will be about the building process. The article may take a while, as building a website is an involved process that deserves an article worthy of the process.

Post new comment

All comment submissions must follow the Comment Policy. Your words remain your own and you are responsible for them. If you don't like the captcha, Login to a user account. You can login with OpenID too..
The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <img> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <embed> <blockquote> <p> <iframe> <div> <span> <tt>
  • Lines and paragraphs break automatically.

More information about formatting options

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the code without spaces and pay attention to upper/lower case. RSS feed

Powered by Drupal, an open source content management system

Theme by Danetsoft and Danang Probo Sayekti inspired by Maksimer