Web Design Primer

This post orig­i­nated with a com­ment I made in a dis­cus­sion about web design on Hacker News con­cern­ing what skills some­one should have to be a good web devel­oper. At the time I wrote a quick five minute response list­ing a few things that I felt were impor­tant skills for new web devel­op­ers to have for web­site design. These are things that I wish I had had a bet­ter grasp on when I entered the world of pro­fes­sional web development.

First I need to clar­ify the dif­fer­ence between web design and web devel­op­ment. Web design tends to lean towards the user inter­face and the actual web­site. Web devel­op­ment refers to the under­ly­ing code, and the inner work­ings of a site. There’s a good amount of over­lap but they often get used as syn­onyms when they’re not; I wanted to clar­ify their mean­ings to those who may be fuzzy on the dif­fer­ences.

photo credit: steven­de­polo

Of the two I’m a web devel­oper, my design skills resem­ble that of a four year old with crayons. Well maybe a lit­tle bet­ter, but I def­i­nitely trend towards the under­ly­ing code when it comes to what I work on.

For web devel­op­ment you need to start at the front-end. You don’t need to be a whiz in Pho­to­shop, the fact is that most web devel­op­ers form a sort of sym­bi­otic rela­tion­ship with design­ers they know. So when a project comes in they are able to out­source the design to the designer and then take it to build the site. The inverse holds true also; design­ers usu­ally will call upon devel­op­ers to write the back­end code for them. In doing so every­body wins!

How­ever, you can’t do this job with­out a good under­stand­ing of the the front-end. While design­ers may do the graph­ics, and even the html cre­ation, it will even­tu­ally fall on you to make the site look right in the browser. And to do so, you need to under­stand HTML, CSS and Javascript.

• HTML — This entails knowl­edge of the main tags. HTML is, in truth, a very sim­ple lan­guage and any­one can learn it at its basic lev­els. To be a devel­oper though you need to under­stand more than that. You’re the engi­neer to the designer’s archi­tect. If they want some­thing, you must know how to make it hap­pen. Clients and design­ers both hate hear­ing the word ‘no.’ There are, in truth, very few lim­i­ta­tions to what web­sites can do these days. It’s up to the devel­op­ers to know how to make some­thing happen.
• CSS –This is know­ing how to style pages, this is really a core skill these days. You’ll get the designs from the designer and some­times they may have done all of this for you, some­times you just get the graphic of how it should look and it’s up to you to cut the image and reassem­ble it on the page. Before the days of CSS, peo­ple used Tables to accom­plish a lot of the stuff CSS is used for today, but CSS is so much more pow­er­ful (and in turn, more con­fus­ing) that it is a core skill for web developers.
• Javascript — Javascript is also a manda­tory skill, though these days the Javascript libraries really over­shadow 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 Pro­to­type or moo or YUI per­son and that’s fine. The library only mat­ters to those who work with it. If you’re work­ing for a web devel­op­ment firm they most likely have a stan­dard library they want you to use so that other devel­op­ers are able to work on the project as well.

photo credit: library_chic

These front-end skills are akin to learn­ing some of the basics of home improve­ment. Know­ing how to spackle, paint walls, prop­erly hang paint­ings and mir­rors, do tiling in the bath­room. They are all “super­fi­cial” as they take place on the sur­face of the house.

Then shift­ing to the server-side (back­end), you’ll be best served by pick­ing a lan­guage and focus­ing on it: PHP is prob­a­bly the eas­i­est in terms of entry. Lots of doc­u­men­ta­tion (albeit spotty) and lots of peo­ple ask­ing ques­tions you’re likely to ask. PHP gets a bad rap because pro­gram­mers so often turn to Google for answers, but the fact is that if you don’t know how to do some­thing you can prob­a­bly find it else­where online. But I urge you not to just copy, edit and paste. Be sure you read the code and under­stand it. Once you under­stand it you can then learn from it.

The rea­son I rec­om­mend PHP is that it doesn’t cost any­thing to work with. ASP.net is a bit more dif­fi­cult to get work­ing for free. Also Ruby on Rails is up and com­ing as a solid back­end cod­ing lan­guage, quite hot among web 2.0 com­pa­nies but it isn’t near as pop­u­lar as PHP and ASP.net. The fact of the mat­ter is any pro­gram­ming lan­guage can be used as a server side back­end, peo­ple write in Lisp, Perl, Scheme, C, C++, Ada, prob­a­bly For­tran. It’s just find­ing the sys­tem that allows you to do it in a way which makes sense to you.

In most any lan­guage you’ll find frame­works which pro­vide a good basis for web appli­ca­tions. CodeIgniter, CakePHP and a whole host of oth­ers cur­rently exist for the PHP lan­guage and are used in cor­po­rate level projects. Again there is no “right” choice, you’re just going to have to begin play­ing around and dive into them to decide which ones to pursue.

photo credit: Look­ing Glass

The strength in a frame­work is that it can smooth the rough edges in a lan­guage as well as present you with added func­tion­al­ity. While the lan­guage is like work­ing on build­ing the house from the ground up, from lay­ing the ground sup­ports and a sturdy base, up to build­ing the roof and walls, frame­works are like buy­ing a pre-built house exte­rior. You have an exte­rior which takes care of a lot of things, keep­ing the rain off your head, hold­ing out intrud­ers, it’s not a home really. You’ve got a lot of work to put in walls, doors, hall­ways, and other con­ve­niences. It just gets you closer.

At a lower level, when writ­ing the sites, you need to under­stand Object Ori­ented Pro­gram­ming as well as other core Com­puter Sci­ence ele­ments. Web devel­op­ers are still com­puter pro­gram­mers and so the pro­gram­mers who came before us have explored and ana­lyzed a very good amount of knowl­edge which is per­ti­nent to us. When I was in col­lege I mis­tak­enly thought that I could do web devel­op­ment and not need to know OOP and algo­rithms but I’ve since learned just how wrong I was.

For web­sites, Con­tent Man­age­ment Sys­tems are a main com­po­nent in projects these days. Word­Press, Dru­pal, Mov­able­Type and Expres­sio­nEngine are just a few of the many CMSs out there. Again these are things where depend­ing on what project you do, and who you do it with, and what your pref­er­ences end up being. There is no sin­gle soli­tary CMS though there are def­i­nitely some that have a deal more respect than oth­ers. The power of a CMS is that it han­dles a great deal of the back­end of a web­site. Man­ag­ing users, all the dif­fer­ent con­tent, the dif­fer­ent types of con­tent, and the many ways to present the con­tent, these are all tasks which would take you a while to get a grasp on, even in the most sim­ple of con­texts. So for a CMS to han­dle this in a tested and solid way can allow you, the devel­oper, to dive into the “fun” stuff in build­ing the site.

CMSs and Frame­works have a lot of over­lap, the real dif­fer­ence is the amount of com­plete­ness. If a frame­work is an empty shell of a house, a CMS is a pre-fabricated house that lacks fur­nish­ings and the other things which make a house a home.

photo credit: {Guer­rilla Futures | Jason Tester}

After explor­ing CMSs, next step is to begin learn­ing to use other sites and their APIs. Like writ­ing a Face­book appli­ca­tion, or a Twit­ter appli­ca­tion. To learn these, a good plan is to rein­vent the wheel. Want to learn the Twit­ter API? Build a web twit­ter client. What to learn Face­book? Make a sim­ple game. A web developer’s knowl­edge is his coin, and in a realm where the tech­nol­ogy changes so quickly you owe it to your­self to explore as much as you can.