FullBleed

Illustration courtesy of Varick Rosete

As the creative industry is growing with changing technology, many designers are looking to pick up on skills to help them become more valuable in the industry, communicate more effectively with those with whom they work, and truly understand the medium of the web.

CSS (Cascading Style Sheets) and HTML are the building blocks to websites, and just as it helps a print designer to understand prepress, learning the basics to web design build-out can be enormously helpful. With the web design industry being so young, I find it helpful to look to others in the field for advice on just about all things web. For some advice on this topic, I turned to some incredibly knowledgeable and experienced designers to help folks looking for new skills.

Elliot Jay Stocks
Independent designer, illustrator, speaker, and author
http://elliotjaystocks.com

For me, the best thing about CSS is the way it makes changes to easy and quick. Want to change the font-size of every heading on your site? Just change two characters in your CSS file. About to launch and realize you need to tweak the leading of your paragraph text? Again: change two characters in your CSS file. The other great thing about such easy changes is that it allows for lots of experimentation. Photoshop will never render type the way a browser does, so save your subtle typographic decisions for when you come to the browser and play around with the CSS file. You can quickly see what works and what doesn’t, and — importantly — you can see your changes reflected site-wide.

In that sense, CSS is not just a means-to-an-end; it’s a vital design tool.

And of course it’s not just type; that’s just a straightforward example. I’ve managed to achieve pretty complex layouts with very little code. When you really get into CSS and how powerful it is, you’ll see that you can do away with loads of presentational HTML elements and reduce things like class names to an absolute minimum. CSS is so simple to learn but it offers so much power and the ability to do complex things with your designs.

Then, by embracing the concept of progressive enhancements in your workflow, you can really treat users who have modern browsers like Safari that can handle all of the bleeding-edge capabilities of CSS3.

Matthew Smith
Principal at SQUARED EYE
http://www.squaredeye.com

For advice about CSS and design, I’d simply say that getting my hands dirty was the best way for me to learn how to use a great tool. I started not by making sites, but by making shapes, and coloring them, and moving them around in a window. Practicing that helped me get the basics in vie, so that I could start messing with other content like type and images. The best part of the web for me was that I could download someone’s site that I admired and work locally to mess around with things, see how they did things — open up the hood. Or if I just wanted to know something quickly, I could open up firebug and see what was happening as I changed things. Lastly, I’d say that anyone wanting to get into this should find a good forum and ask questions often and without shame. Forums respect people who ask clear questions in undemanding ways, and that show that the person isn’t just asking the question because they don’t want to read, but because they can’t see a way out of a given problem.

Mindy Wagner
Web Designer, Viget Labs
http://viget.com and http://mindywagner.net

My advice: Semantic markup before styles.  As designers, I think we have to fight our natural tendency to put the visuals before the code. Before you write a single line of CSS, try creating all your basic markup for the page. Put your content in HTML the way it should be structured semantically. Include your headings, text, lists, etc. This should leave you with very clean code (and a very plain page). Once your markup is tight you can go back in and add the div containers, IDs, classes and styles to each element.

Applying structure first and style second forces you to see the big picture, so you will write much more elegant CSS.

Varick Rosete
Co-Owner, Design Matters of nGen Works
http://ngenworks.com

Don’t be afraid. There is much more control over layouts than you may think. Look at what people are doing and continue to push the envelope of design as much as you can. You’ll be amazed at what is possible. Keep playing.

Jason Beaird
Designer & Front-End Developer at Cyberwoven in Columbia, SC
http://www.jasongraphix.com/

Most designers are great at finding visual inspiration and incorporating it into their own designs. My advice is to take the same approach when learning CSS. Look for websites that inspire you (gallery sites like cssbeauty.com and unmatchedstyle.com are great places to start), view the source code and figure out how they made it tick. If you’re designing anything for the web, learning to build out your concepts with CSS is absolutely critical. Understanding how your layout will get applied to HTML elements will ensure that it’s build-able, and you’ll have peace of mind knowing that it’s built right.

Finding the inspiration to jump-start learning more about the web has never been easier with the tips from the designers above and with the next ADCMW event on June 24 Speaking in Styles, CSS for designers with Jason Cranford Teague. If you are interested in learning more be sure to sign up or raise questions in the comments below.