Article
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.