Web Design Primer

July 2, 2009

in Programming

This post originated with a comment I made in a discussion about web design on Hacker News concerning what skills someone should have to be a good web developer. At the time I wrote a quick five minute response listing a few things that I felt were important skills for new web developers to have for website design. These are things that I wish I had had a better grasp on when I entered the world of professional web development.

First I need to clarify the difference between web design and web development. Web design tends to lean towards the user interface and the actual website. Web development refers to the underlying code, and the inner workings of a site. There’s a good amount of overlap but they often get used as synonyms when they’re not; I wanted to clarify their meanings to those who may be fuzzy on the differences.

Sidewalk Chalk Macro -- IMG_7662
Creative Commons License photo credit: stevendepolo

Of the two I’m a web developer, my design skills resemble that of a four year old with crayons. Well maybe a little better, but I definitely trend towards the underlying code when it comes to what I work on.

For web development you need to start at the front-end. You don’t need to be a whiz in Photoshop, the fact is that most web developers form a sort of symbiotic relationship with designers they know. So when a project comes in they are able to outsource the design to the designer and then take it to build the site. The inverse holds true also; designers usually will call upon developers to write the backend code for them. In doing so everybody wins!

However, you can’t do this job without a good understanding of the the front-end. While designers may do the graphics, and even the html creation, it will eventually fall on you to make the site look right in the browser. And to do so, you need to understand HTML, CSS and Javascript.

  • HTML – This entails knowledge of the main tags. HTML is, in truth, a very simple language and anyone can learn it at its basic levels. To be a developer though you need to understand more than that. You’re the engineer to the designer’s architect. If they want something, you must know how to make it happen. Clients and designers both hate hearing the word ‘no.’ There are, in truth, very few limitations to what websites can do these days. It’s up to the developers to know how to make something happen.
  • CSS -This is knowing how to style pages, this is really a core skill these days. You’ll get the designs from the designer and sometimes they may have done all of this for you, sometimes you just get the graphic of how it should look and it’s up to you to cut the image and reassemble it on the page. Before the days of CSS, people used Tables to accomplish a lot of the stuff CSS is used for today, but CSS is so much more powerful (and in turn, more confusing) that it is a core skill for web developers.
  • Javascript – Javascript is also a mandatory skill, though these days the Javascript libraries really overshadow Javascript itself. These days I write almost no javascript and only jQuery. Now jQuery may not be for you, you may be more of a Prototype or moo or YUI person and that’s fine. The library only matters to those who work with it. If you’re working for a web development firm they most likely have a standard library they want you to use so that other developers are able to work on the project as well.
DSCN0077
Creative Commons License photo credit: library_chic

These front-end skills are akin to learning some of the basics of home improvement. Knowing how to spackle, paint walls, properly hang paintings and mirrors, do tiling in the bathroom. They are all “superficial” as they take place on the surface of the house.

Then shifting to the server-side (backend), you’ll be best served by picking a language and focusing on it: PHP is probably the easiest in terms of entry. Lots of documentation (albeit spotty) and lots of people asking questions you’re likely to ask. PHP gets a bad rap because programmers so often turn to Google for answers, but the fact is that if you don’t know how to do something you can probably find it elsewhere online. But I urge you not to just copy, edit and paste. Be sure you read the code and understand it. Once you understand it you can then learn from it.

The reason I recommend PHP is that it doesn’t cost anything to work with. ASP.net is a bit more difficult to get working for free. Also Ruby on Rails is up and coming as a solid backend coding language, quite hot among web 2.0 companies but it isn’t near as popular as PHP and ASP.net. The fact of the matter is any programming language can be used as a server side backend, people write in Lisp, Perl, Scheme, C, C++, Ada, probably Fortran. It’s just finding the system that allows you to do it in a way which makes sense to you.

In most any language you’ll find frameworks which provide a good basis for web applications. CodeIgniter, CakePHP and a whole host of others currently exist for the PHP language and are used in corporate level projects. Again there is no “right” choice, you’re just going to have to begin playing around and dive into them to decide which ones to pursue.

erect
Creative Commons License photo credit: Looking Glass

The strength in a framework is that it can smooth the rough edges in a language as well as present you with added functionality. While the language is like working on building the house from the ground up, from laying the ground supports and a sturdy base, up to building the roof and walls, frameworks are like buying a pre-built house exterior. You have an exterior which takes care of a lot of things, keeping the rain off your head, holding out intruders, it’s not a home really. You’ve got a lot of work to put in walls, doors, hallways, and other conveniences. It just gets you closer.

At a lower level, when writing the sites, you need to understand Object Oriented Programming as well as other core Computer Science elements. Web developers are still computer programmers and so the programmers who came before us have explored and analyzed a very good amount of knowledge which is pertinent to us. When I was in college I mistakenly thought that I could do web development and not need to know OOP and algorithms but I’ve since learned just how wrong I was.

For websites, Content Management Systems are a main component in projects these days. WordPress, Drupal, MovableType and ExpressionEngine are just a few of the many CMSs out there. Again these are things where depending on what project you do, and who you do it with, and what your preferences end up being. There is no single solitary CMS though there are definitely some that have a deal more respect than others. The power of a CMS is that it handles a great deal of the backend of a website. Managing users, all the different content, the different types of content, and the many ways to present the content, these are all tasks which would take you a while to get a grasp on, even in the most simple of contexts. So for a CMS to handle this in a tested and solid way can allow you, the developer, to dive into the “fun” stuff in building the site.

CMSs and Frameworks have a lot of overlap, the real difference is the amount of completeness. If a framework is an empty shell of a house, a CMS is a pre-fabricated house that lacks furnishings and the other things which make a house a home.

omg where did Facebook go?
Creative Commons License photo credit: {Guerrilla Futures | Jason Tester}

After exploring CMSs, next step is to begin learning to use other sites and their APIs. Like writing a Facebook application, or a Twitter application. To learn these, a good plan is to reinvent the wheel. Want to learn the Twitter API? Build a web twitter client. What to learn Facebook? Make a simple game. A web developer’s knowledge is his coin, and in a realm where the technology changes so quickly you owe it to yourself to explore as much as you can.

Leave a Comment

Previous post:

Next post: