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