Web Site Basics: Stuff Beginners Need To Know

The idea that “building a web site is easy” has existed since the Web was invented, thanks to applications like Microsoft FrontPage and Adobe Dreamweaver.

However, as many inexperienced web designers soon discover, creating a one-page homage to your canary Boris (may his soul rest in peace) and building a professional web site are two very different tasks. To build a web site that communicates effectively with its audience, can be updated by the client, and looks visually pleasing requires a whole range of skills – some of which lie beyond the comfort zone of most designers, especially if they have come from a print background.

For example, determining what technology is the best fit, what Content Management System to use, where to host the site, how to ensure cross-browser compatibility and how to ensure the site ranks well in search engines are all important. For the uninitiated, these hurdles can become very overwhelming, very quickly.

So what works, and what doesn’t? Well, as you might expect, it depends. As with any project, important decisions are shaped by the goals of the project, the budget, the timeframe, the experience of the team members, and the personal preferences of those involved.

While it’s true that many technology decisions are often best left to the geeks who speak in 1s and 0s, there are a few universal truths that apply to all web projects. It’s crucial that any designer tackling a web project understands these fundamentals, regardless of whether they cut code, push pixels, or dabble in both.

The Client-side Contest

Many web designers have already decided before they embark on a project that it will be built in Flash (or Microsoft’s rich media offering, Silverlight) without even considering the web standards trio: HTML, CSS, and JavaScript. As real designers they want to avoid limiting their creativity by browser compatibility woes and a restrictive set of user interface options, so they choose Flash, believing that they’re making the right decision.

It’s understandable why we designers love Flash so much – why wouldn’t we? It’s an enormously powerful medium with which we can create eye candy and push the boundaries of interactivity and multimedia. Flash also has an enormous install base, so it conveniently sidesteps the browser-compatibility woes that have plagued CSS-based sites for years. Finally, Flash has that unmistakable “wow” factor that is useful for blowing away clients.

Unfortunately, Flash has a few dirty little secrets. Actually, they’re not little – take a look at the following downsides before you decide to build your next site in Flash:

• Flash sites perform poorly in search engines compared with sites created with HTML. While Google has made advances over the years in indexing content, Google’s engineers still have a long way to go before the bots that crawl the Web can understand a Flash file to the degree that can be defined using simple HTML tags.
• Most Flash sites are less accessible to disabled users than their HTML-based counterparts. Sure, there are some basic keyboard navigation features built into every Flash file, but in many browsers, switching between the Flash object and its HTML container is problematic, as is navigating Flash objects with input devices other than a mouse or keyboard.
• Flash sites are often less usable than an HTML/CSS equivalent, with key features of the web browser experience going out the window when a site is built in Flash. These include highlighting text for copy and paste, clicking the Back button to go back a page, increasing the font size, and allowing for users to open links in new windows. This is regardless of how beautiful and intuitive the interface is.
• Flash sites are unviewable by most mobile users. Even the iPhone – a phenomenally successful product for Apple in Australia and arguably the most advanced handheld device on the market – is unable to view Flash files.

Of course, there are many circumstances when it does make sense to use Flash: animated mastheads, embedded movies, and interactive interfaces that break away from the document-based model of the Web are all good candidates. However, rarely do those circumstances involve building a site purely in Flash.

As sites like cssZenGarden.com have proven, a site need not be created with Flash in order to look pretty. Many web designers resort to Flash because it’s what they know, and the client suffers as a result. Meanwhile, CSS support has improved considerably in today’s web browsers, and there are now a huge range of excellent JavaScript libraries which make writing JavaScript a much simpler task than it used to be. There’s no reason to resort to Flash when good old HTML and its companion technologies can do an equally fine job and avoid the pitfalls listed above.

The Server-side Showdown

While it’s common that a designer may possess some skills in HTML, CSS, and JavaScript, programming in a server-side language is usually reserved for the IT nerds of this world (aside from those rare and annoying all-rounders who excel at both left- and right-brain activities).

Yet, more and more roles demand that designers be comfortable with both graphics and writing code – even if it’s just to update the template of the Content Management System that powers the site.

Here’s a brief rundown of the most common server-side languages in use on the Web and how they stack up.

• CGI-Perl: The programming language Perl has been around for longer than the World Wide Web itself. The language is an ongoing open source project, and any hosting provider you use is guaranteed to have it installed. However, unless you have a good reason for learning Perl, I’d suggest steering clear – it’s notorious for being difficult to learn.
• PHP: Like Perl, PHP is also an open source language. However, unlike Perl, PHP has a reputation for attracting beginners, largely because it’s very easy to learn and ubiquitous across web hosting providers. The ease of use of PHP is sometimes viewed as a criticism by developers, though, as it provides newcomers with “enough to rope to hang themselves.” However, the popularity of PHP is undeniable. It’s also the language of choice for many free content management and blogging systems (which we’ll explore later in this article). The XAMPP package, a single-click install of PHP and other technologies that integrate with PHP, is a great package that is available for Windows, Mac and Linux users.
• ASP.NET: For those clients who are uneasy about trusting open source technologies, Microsoft’s ASP.NET might be a good choice. The Visual Studio development environment is a natural choice for building ASP.NET sites. Visual Studio drastically simplifies the process of building web sites, but this comes at a cost – it’s both expensive and resource-hungry (although there’s a free “express edition” available). Unfortunately the code that Visual Studio generates is often inefficient and non-standards compliant, and some web hosting providers lack the facility to host ASP.NET pages.
• Ruby: The Ruby language has been around for over ten years, but its popularity for building web applications is only recent, fuelled largely by a web application framework called Ruby on Rails (or just Rails, for short). Despite the slightly odd name, Rails is a well thought-out framework that forces developers to follow best practices in terms of file structure, filenaming conventions, code reuse, and unit testing. There’s a steep learning curve required in order to master Rails, but those who persist often become vocal evangelists.
• Flex: Flex refers to a collection of technologies from Adobe for developing Rich Internet Applications – online applications with a much higher degree of interactivity than a standard browser-based web application. In Flex, user interfaces are defined using a markup language called MXML, the interactions on the page are described in ActionScript, and the end product runs as a Flash file. Adobe make the basic Flex Software Developer Kit available to download for free, but if you’re planning on building sites in Flex on a regular basis, then it’s worth paying for the Flex Builder Pro editor.

As you can see, the choices of technology for a web project are vast. Whether you’re itching to dirty your hands, or just wanting to understand how those propeller-heads in the basement of your office spend their time, making an effort to appreciate the fundamental differences between the languages listed above will make you a better web designer – if only because you’ll be able to better communicate with your technical colleagues.

Dabbling in server-side web development may also improve your client-side coding skills; perhaps if more web development projects were approached with a software engineering mindset, rather than a print mindset, then there would be less broken web sites out there.

Content Management Systems: Custom or Package?

In the previous section, I argued that designers should learn a server-side language. Now I’m going to recommend that you use an alternative language when building your next web site. It’s confusing, I know – bear with me!

Here’s why you should build your next site using as little custom code as possible: wearing the designer hat and the programmer hat certainly gives you a competitive advantage in the web world, but the reality is that most web sites are fundamentally content sites. For these types of sites, a Content Management System (CMS) will suffice.

One of the most difficult challenges in building a web site is ensuring that the client can update it on their own, long after the project has completed. A CMS is key in achieving this goal. While there’ll always be clients who are faster learners than others, it’s also true that some Content Management Systems are much easier to learn for non-technical people than others.

True, there are occasions when the site for which you’re designing might require purely custom code, but on these occasions it’s more likely that the development (and design) will be managed in-house rather than by an external agency. If you’re reinventing the wheel for your client, you should be using a CMS.

There are numerous advantages to using a well-established CMS rather than rolling your own. These include:

• Security: Using a CMS that is being constantly evolved means that with each upgrade comes improvements in the security of the product. These updates may fix previously undiscovered security flaws, adapt to changes in how browsers operate, or add support for upgraded database versions. Writing custom code that’s accessible over the Web without investing any time in the future testing and updating of that code poses a great risk in the security of your client’s web site being compromised.
• Familiarity: There may be no perfect CMS, but there are a finite number of them on the market. If by chance your client has used the same CMS before that you choose for your project, then the learning curve for updating their site will be much lower. This makes good business sense for them, and makes you look good.
• Maintenance and Support: If the code that powers your client’s web site is completely custom, then your client will be more dependent upon you to make any future tweaks or changes than if you used an established CMS. While on the surface this may seem like a cunning way to lock them in for repeat business, such an approach can be harmful to the client-vendor relationship – especially if there are occasions when you’re unable to accommodate their requests in a timely fashion. It makes much more sense to use a CMS for which a thriving community of developers exists, so that your client has an alternative developer to turn to if necessary.

So if building a site from scratch is a no-no, the question then becomes “Which CMS should I use?” This question has caused heated discussions amongst web developers for years, and again the answer is, “It depends.”

Unfortunately, a comprehensive comparison of every available CMS is beyond the scope of this article. There are a huge number of factors to consider. Here’s a sample (this list is merely the tip of the iceberg):

• Does the CMS contain the features necessary for this site?
• Are there any legacy systems with which the CMS needs to interface?
• How big is the development community associated with the CMS?
• Is the client comfortable with using an open source solution?
• What plans are there for expanding the site in the future?

An open source CMS is often perfect for a client whose project budget is limited. Tools such as Drupal, Joomla, eZ Publish, and WordPress are all open source and written in PHP. Each package has its strengths and weaknesses, but all deserve your consideration.

An excellent place to begin researching open source CMS packages is opensourcecms.com. The site provides demos of over 100 open source CMS with which you can experiment without installing anything on your own local machine.

Ranking in Search Engines

Okay, so you’ve launched your site and you’re publishing interesting and unique content every day. Visitors should come flocking in droves, right? Well, if people are unable to find your site, then how would they know that it exists?

If your log files are telling you that only two people are visiting your site every day (and you’re one of them), then you may need to put some effort into optimizing your site for search engines. Search Engine Optimization (SEO) is an umbrella term that covers how you code your site, what content you publish, how you phrase that content, what URL structure you use, and how well you rank in search engines for various phrases.

The world of SEO continues to be tarnished by stories of online marketing consultants who game Google with unconventional techniques; these trick the Google algorithm into listing their web site higher in the results pages than it probably deserves to be.

The truth, however, is that SEO is an important aspect of any commercial web site, and there are many legitimate techniques that you can, and should, utilize, to ensure that people are able to find your site through a search engine. While it would be impossible to describe how to develop a comprehensive SEO strategy within these pages, if you follow my advice at the start of this article to use HTML instead of Flash whenever appropriate, you’ll be well on your way.

One common misconception is that a web site’s ranking in a search engine is tied to its PageRank. PageRank is a trademarked term used by Google to determine how much authority a web site has. Fundamentally, the way it works is this: the more links to a web site, the more important Google considers that site to be and, therefore, the higher its PageRank.

Realistically, though, the algorithm that determines a web site’s PageRank is a closely guarded secret, and the algorithm itself is constantly changing as the Web grows. Additionally, a web site’s PageRank is only one factor that influences its position in Google’s search results pages. Finally, it’s important to remember that Google is but one of many search engines. Google may dominate the current climate, but this may change in the future. Focusing on Google alone would be a short-sighted strategy.

In the end, a site’s PageRank value (or its ranking using any other metric, for that matter) is meaningless if the site ranks well in results pages for Google and other search engines for the phrases that matter to your client. The key to achieving (and maintaining) success is to continually monitor your site’s traffic using an analytics package like Google Analytics. The insight that this data can provide on how visitors use your site and what keywords they type to find it will be invaluable in shaping the site’s SEO strategy.

A Web Site is a Software Product, Not a Piece of Paper

Accessing the Web has never been easier for end users interested in publishing photos, chatting with friends, and dumping random thoughts for the world to savor, but building a professional web site is as difficult as it has always been.

It’s therefore critical that web designers take the initiative to understand what goes on “under the hood,” or risk their beautiful mockups failing to reach their full potential because of the technology that implements them. By understanding when to choose Flash or HTML, the pros and cons of the various server-side languages, how to select a CMS, and what factors affect a page’s ranking in a search engine, designers will be able to offer their clients a more informed service – and a more successful web site.