Mirificam Press

Intro to Web Design (Part 4): Getting Acquainted with the Peripherals

March 4th, 2009 in Design Tips & Tutorials

by: Matthew Griffin

In the first three parts of this series, I explained the core concepts of web design. Unfortunately (or fortunately, depending on the way you look at it), being a well rounded web designer requires more than just understanding the core concepts. There's server-side scripting, client-side scripting, animation, e-commerce, and a whole slew of additional technologies for the web designer to learn. In the title of this article I call these technologies peripherals, and I think that word is appropriate. They're not unlike the peripherals of a computer system: the printer, scanner, external hard drive, etc. Technically, you may be able to build a website without them, but you will be severely limited in the type of website you will be able to build. In this article, I will be giving a brief overview of each of the most important peripheral tools in the web designer's arsenal.

Server-Side Scripting

A server-side script is a program executed on the website server when a web page is requested by a browser. Since server-side scripts are run before a web page is served up to the visitor, they make it possible to build dynamic web pages. In part two of this series I built a static web page to demonstrate the basics of HTML. It's called a static web page because the content on the page is static—it doesn't change unless the designer manually edits the page. A dynamic web page, on the other hand, is able to change based on variables provided by the visitor.

The search page on this website is a good example of a dynamic page. When you type a search phrase into the search box and click "go", that search phrase is submitted to the page as a variable. A server-side script accepts that variable and checks the article database to see if there are any articles matching that key phrase. An HTML page is then dynamically created and and all of the matching articles are displayed down the page. Most popular server-side scripting languages allow you to embed your code directly into your HTML page. This makes it easier to manage. Also, designers with no scripting experience can edit the HTML in the page and leave the dynamic code alone.

I realize this all sounds very complicated, and it is. Server-side scripting is not something you can learn overnight, but it's a skill well worth the effort. Learning a scripting language like PHP will dramatically expand your horizons as a web designer. When you know how to make websites think, you can create tools for your clients that are not only valuable in the marketing arena, but in their actual business processes as well. If you were going to pursue only one peripheral web design skill on this page, I recommend server-side scripting. I also strongly recommend PHP as a weapon of choice.

Client-Side Scripting

If server-side scripts run on the server, obviously client-side scripts run on the client. In this case the client is the visitor's computer. The only client-side scripting language worth mentioning any more is Javascript. In the former dark ages of the browser wars there were a handful of other choices but they've been choked out one by one.

Client-side scripts are downloaded along with the HTML page and give the web designer the opportunity to build functionality into pages that executes instantly. Server-side scripts require a call back to the server in order to execute. Once they are executed the HTML page is recreated and sent back to the visitor's browser. But since there is no need to make a call back to the server with a client-side script, changes can be made to an HTML page instantly.

For example, client-side scripts are often used to make drop-down navigation menus. When the visitor's mouse moves over a navigation link, a client-side script is triggered and the drop-down menu that was previously invisible pops up. Then when the visitor's mouse is moved back off the link, another client-side script function is triggered and the menu is hidden. Typically, client-side scripts are used for "fun" features and the heavy lifting is left to the server-side scripts. A client-side script wouldn't, for example, be a very good choice for a page that required a connection to a database. That is, of course, unless you were to combine client-side and server-side scripting to create an unholy aberration. And that brings us to our next topic: AJAX.

AJAX: Server-Side Meets Client-Side

AJAX stands for Asynchronous Javascript and XML. AJAX is actually not an unholy aberration as I accused in the previous section. It's a very useful tool that, if written properly, can increase the enjoyment of the visitor and still degrade gracefully for those who have old outdated browsers. AJAX is not actually a language or technology in its own rite. You can really boil it down to this: AJAX is communication between a client-side script and a server-side script. This communication allows a web page to make a call to a server script behind the scenes—without refreshing the web page—receive data back, and update the page accordingly. Web pages that utilize AJAX can function more like executable applications than traditional web pages do.

As I mentioned, one of the great things about AJAX is that it can degrade gracefully. Visitors with older browsers or who have Javascript disabled will simply have the typical annoyances of server-side only scripting. This assumes, of course, that the Javascript has been written to accommodate these types of users. But the point is that it can accommodate them. Also, fortunately there are number of great AJAX frameworks and libraries for web developers, so there's no need to learn the core concepts of AJAX from scratch. If you know Javascript and a server-side scripting language, you'll be fine.

Flash

Flash is a browser plugin that allows web developers to build amazing interactive websites with animation, sound, and video. Unfortunately, it requires a completely different set of skills than the technologies we've discussed so far. Flash sites are built exclusively in Adobe Flash, an environment completely foreign to the HTML editors most web designers are used to dealing with. That's not to say other web design skills won't come in handy—they will. But they won't get you very far. Flash even has its own scripting language called Actionscript.

Over the years the web development community has developed a love/hate relationship with Flash. Some web designers wouldn't touch Flash with a ten foot pole while others prefer to design sites exclusively in Flash. Having developed standards-based HTML sites and Flash sites extensively, I've come to the conclusion that you should use whatever is appropriate for each specific project. I find with the types of clients I work with, Flash is only appropriate in small doses.

Because it is more labor-intensive to produce and maintain, it's not a good solution for clients with medium-sized budgets and small maintenance budgets. Look to AJAX for these clients first and then go to Flash if you have to. For clients with large budgets and media-intense content (bands, movies, etc) Flash can be a great solution.

Final Thoughts

I've covered a lot of ground in a little space here, but hopefully I've given you enough information to get you on the right track. Reading this article should at least make you sit back and seriously consider whether or not web design is the right vocation for you. Although it's extremely rewarding, web design requires an unusually wide array of skills. And these skills aren't something you can learn over the weekend. Still, there's nothing like navigating through a semantic masterpiece that you've just created. I've found the journey well worth it.

Post Your Comment

Comments are closed.