Casting a Wider Net: Three Skill sets that should be on every Web Designer's Resume

Posted on Mar 6th, 2009 by Command Save

A guest post by David Doms, a recent PSU GD graduate and Software Engineer shares with you three critical skill sets for every web designer 

If you’ve ever used your design prowess to create a web page or site, you likely came away from the experience excited about the possibilities but didn’t fully understand how to get your design to live in the browser like you had planned. No doubt the beginner will face challenges that will keep their concepts grounded. I’ve spoken to many designers with limited exposure to web design that wanted nothing more to do with it—in all fairness, I have the same feelings about print. For me, it’s the daunting task of having to learn all the intricacies that will breed success. In this post I’ll discuss the skills I believe are necessary for employment in web design. Along the way I’ll also point out their relevance in job descriptions I’ve come across lately.

Despite the differences between designing for print and the web, there are many similarities. It’s always a good idea to clearly understand the objectives up front and to establish a consistent level of expectations with the party (even if it’s yourself) that you’re delivering a final project to. Go through the fundamentals and research, develop concepts and explore variations. You’re ready to open up your editor and graphic programs once you’ve got a clear vision in mind of what you’ll be creating.

The Foundation (markup)
The editor you use is really personal preference. What it really comes down to is how good your HTML kung-foo is. Adobe’s Dreamweaver is the popular choice but there are many others. The editor you chose will likely provide a lot of assistance through drag and drop but also should allow for pure hand coding. Most editors work this way and you’re better off hand coding your markup so that your pages stay lightweight and avoid the extra bloat that dragging and dropping is likely to produce. The only feature I rely on is how markup is colored and formatted to make things easier to organize and maintain. When your tags, attributes, and the literal values in between the tags all have different colors, it’s easy to spot where you may have forgotten a quotation mark or an end bracket. 

If you need a specific editor to work, that’s a good sign that you’re HTML skills aren’t as strong as they could be. If you aspire to work with a company creating for the web, you’ll need a black belt in HTML. You should be able to write markup in the simplest of text editors. That doesn’t mean you need to know every specification mandated by the W3C, but you’ll be agile enough to know where to look if you do run into something you’re not familiar with and keep moving. I recently saw a Web User Interface Design position on Craigslist that said, “If you use editors like Dreamweaver or FrontPage, you need not apply” as well as “Expert level hand coding of HTML & CSS. (No Dreamweaver).” Companies want people who can write HTML in their sleep, it’s a basic skill for any Web Designer (more on CSS in a minute).

Up to this point, we’ve talked about HTML markup but I also want to bring attention to the landscape of markup. We’re currently in the era of HTML 4 (since late 99) which is governed by the W3C but HTML 5 is coming. XHTML extends HTML 4 by providing more structure to their documents which his inherent to XML. Check out the W3Schools site for a quick overview of what XHTML is.

When you first start defining your page, you’ll need to decide what set of rules you’re going to adhere to by specifying in the <doctype> tag of your document which will ultimately trigger the rendering mode of the browser. The current set of doctypes that are most common right now are HTML 4 strict, XHTML transitional and XHTML strict. It’s important to Web Designers because it’s integral to making your pages look consistent in all the major browsers. For designers, it’s important that our stuff looks good. For employers, it’s important it looks good to a broad audience, not just Safari users on the latest Mac OS.

Another trend I’ve noticed is that companies want to hire people who are not only “godlike” at XHTML (actually saw that in a job description last month on Craigslist for a Front End Web Designer) but they want you to be able to write your code to the standards of XHTML transitional or XHTML strict, varying levels of conformity. Playing by the rules of XHTML means that your markup will validate. Markup that validates is accessible to more browsers and user agents. With the abundance of devices, browsers, email clients, screen readers and everything else that encompasses the user agent pool, companies want to make sure that their content is accessible to as many visitors as best they can. A Junior Level Web/Graphic Designer listing on Yahoo! Hotjobs required “Familiarity with Section 508 accessibility and XHTML 1.0 standards.” It’s a smart play to ensure your portfolio site validates too.

The Style (Cascading Style Sheets)
If it feels like we’ve spent a lot of time discussing markup, it’s because we have. It’s important because it’s the foundation of everything we build, it’s what provides the hooks for our cascading style sheets (CSS). When it comes to required technical ability for a Web Designer, two major things are an absolute must aside from being able to design using creative tools like Photoshop and Illustrator. The first one we’ve already covered—mastery of X/HTML with the second being able to style said markup with CSS. Without CSS, the toolbox is severely limited, our horizontal navigation menu is a vertical bullet list and our slick rollovers are default text links. It’s the web of yesteryear and nobody wants to go back. To see what I mean, turn off CSS support and browse the web. In Firefox go to View > Page Style > No Style for a very plain web experience. With CSS, we can execute our designs, set type and learn from one another to move beyond the initial perceived limits of CSS and move away from table based layout. A Web Designer position on Authentic Jobs required the following, “Be able to produce valid, standards based CSS/tableless markup.” Table based layout, unless used for presenting tabular data is a big fat red flag that screams, “I don’t get CSS and I don’t care to be apart of the industry standard of web design.” Don’t be that guy.

Learning CSS can be like learning the pen tool. You may have found it awkward to use at first, but once you began creating the curves you could not previously make, you marveled at how you ever got by without it. Complete immersion in CSS will yield a solution to just about every creative web challenge you face. Moreover, it will allow you to compensate for older browser differences with a myriad of techniques.

Utilizing CSS with sound markup will result in meaningful and maintainable web solutions.  Your <h3> tag will naturally be a header but it will be your specifically designed header that meets the needs of the page—not the default browser implementation. There is no mystery to what the <ul id=”nav”> tag’s purpose is to you in six months from now or the next person who has to work with your page because you’ve built it on familiar practices, solid markup and titled it appropriately for its job. The markup you write will be lean and fit, just enough for the task with all of your styles conveniently residing in your CSS file. 

Moreover, site maintenance is simplified because site-wide updates can be performed on one file (in many cases) which will then propagate to the pages that reference it but the benefits of CSS extend beyond the designer. The other aspect is performance. If you’ve linked all your pages to a style sheet, the user agent downloads the file once and uses a cached (saved copy, just like browsers also do with images) local version on subsequent page requests. If you embed your style information into the head of the document on each page, not only do you lose the benefit of one-place-one-change, but you are also requiring your users to download those extra bits for each page visit. 

You can get a head start on your markup and CSS by leveraging the many frameworks in the open source community. I like to use the Yahoo! User Interface Library known simply as YUI for their CSS tools and some of their control components. While not really an open source project since it’s provided by the engineers at Yahoo!, the YUI provides a slew of controls and tools to speed up our web development efforts. There’s great documentation and examples on their site and the expected community forum and blog to hold discussions on features, troubleshooting and implementation. The YUI provided components are featured on their own sites, so you’ve got the confidence in knowing that these are well tested pieces of web code.

I started to use the YUI goodies until I experienced jQuery (more on that in a bit). I use jQuery for all my JavaScript behaviors while I still use the YUI reset, fonts and grids CSS for layout purposes to get up and running quickly. Yahoo! experiences a tremendous amount of traffic on their sites and they use that as an opportunity to learn about what browsers people are using. They then formulate what browsers they will support and ensure that the community provided YUI code that they offer is compliant with those browsers. So if you set your doctype correctly when using the YUI and write valid markup, you’ll have a springboard from which to launch your next web project.

The Behavior (JavaScript)
User interface design positions along with Front End Developers/Engineers utilize the same set of skills (often to a much higher degree) that we’ve already discussed but with the addition of another component—interactivity. To meet user expectations, it’s often required to include some interactive behavior. It can be very subtle like smooth image fade-out/fade-in features on images, a Mac OS dock effect or it could be Adobe Flash like features such as drag-and-drop with actions wired up to specific events like when an item is dropped over icon A vs icon B. To accomplish these tasks within a web browser without Adobe Flash calls for using a JavaScript framework. I’ve already mentioned YUI (which is more than just a pure JavaScript framework for the reasons already described) and jQuery but there’s also MooTools, Prototype and Dojo. I use jQuery because it’s gained mass acceptance in the development community, frequent updates are released, you have access to all the great user contributed plugins people have written and it’s super easy to learn because it leverages your existing HTML and CSS knowledge.

One of the most attractive features of these frameworks is that you can implement and customize the features you need for your design challenge. Need to allow a user to flip through a set of images without showing all of them at once? Carousel to the rescue. How about using a font on your site even if the users don’t have it installed on their system? sIFR to the rescue. Sometimes it’s about extending a familiar concept like section tabs to allow for a bit of interactivity using JavaScript and some creativity. Have a look at the latest trend in web portfolios to gain a clearer picture of these techniques in practice.

A term you’ll hear when discussing JavaScript is progressive enhancement. All this means is that you’ll write your JavaScript in a way that adds to an already established foundation that is JavaScript independent. In other words, if JavaScript isn’t available or is disabled by user preference, the site will still work and the user will be able to retrieve the content. Another way it’s referred to is graceful degradation—they both are referring to the same design approach.

If you’re willing to dive in, you can get a lot of use out of JavaScript frameworks without having an extensive understanding of the language. Precise control will be left to those with a more intimate relationship with JavaScript but you can often implement a feature using a plugin or by connecting a couple of features together from one of the frameworks along with your artwork to achieve desired results with limited understanding of the language. JavaScript isn’t required for all Web Designer positions as it is sometimes found in the “nice to have” list of skills but depending on the company and job description, it may be. I suggest trying out at least one of these frameworks to understand what’s possible and how you can improve your design skills with it in your toolbox. If you enjoy it, then take the next step with JavaScript and increase your marketability in web design.

If you want to learn more about any of the cornerstone pieces we’ve covered, there are many resources available on the internet but may I suggest some books on the topic to get you going? For markup, Jeffery Zeldman’s, Designing with Web Standards (2nd Edition) is a great introduction and argument for developing clean XHTML markup with plenty of CSS info. CSS Mastery: Advanced Web Standards Solutions written by Andy Budd is an excellent read and reference book for gaining a clearer understanding on how CSS works along with plenty of tips and practical approaches to writing and understanding CSS. Although I haven’t read Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques by Jonathan Chaffer, it looks like a good starting place for people just beginning with the idea of JavaScript. If you have just a little bit of JavaScript experience, I’d suggest heading over to jQuery’s website (assuming you select that framework) and go through the How jQuery Works tutorial to get a sense of the ridiculous amount of power it affords you.

Demonstrating mastery of markup, CSS and JavaScript will put you in high demand for a Web Designer (you can design right?) position when looking for a job. If you can’t design, then you could put these skills to use as a Web Developer but you don’t want to hear that—you’re a designer! Kids are coming out of high school with these skills, they just don’t know how to design. Stay competitive and apply to a larger pool of jobs by improving your technical ability to accompany your design skills.

About the Author
David Doms is a PSU Grad and a Software Engineer at Epiq Systems, Inc. working with web technologies for over ten years. While working in programming atmosphere, he’s found that often programmers can’t (and don’t want to) design and that designers can’t (or don’t want to) program. His passion for design prompted him to slow his programming career down to eventually support it with a degree in Graphic Design to straddle the line of programmer and designer. His portfolio is a little slim now but will soon expand with personal projects upon graduation in 03/09.