Teach Me the Web

November 13, 2008

On Wednesday, November 12th I attended the first ever Sidebar Creative Workshop in DC. I took a professional day (a day of learning and growth) off from school and went to DC with my good friend and fellow web design teacher Zac Gordon.

Sidebar Creative is a power group of 4 crazy insane talented web designers and developers starting with Bryan Veloso (designer/tiny bit developer), Dan Rubin (designer), Steve Smith (designer/developer), and Jon Snook (developer). Think of Sidebar as a fun alternative to normal work rather than a baseline of work; Sidebar is not the primary income of any of the four. They all have real jobs, mostly freelancing, in addition to the work for Sidebar. They are four experts in the design and development community. Read about them as a collective or read Bryan, Dan, Steve, or Jon's blog.

The Workshop was on Front End Development. Front end development is focus on the face of a website; this includes the design, transferring the design to HTML/CSS, and any Javascript interactivity. You can read the details of the conference but picture a small environment with one on one interaction in a extravagant hotel.

What I learned

I was ashamed to admit that I attended the conference for the chance to meet these four guys. I figured that it I was well above the target audience and I knew enough about each of the four areas of expertise that I wouldn't walk away with much more than a few pictures and the smile of having met these gentlemen. Boy was I wrong. I don't care who you are or how much you know you would have learned something. It was so insightful to just listen to each of them as they explained their process.

The entire day was planned around showing the stages of front end design from mock up to fully functional site. They supplied us with some files along the way and started with Bryan Veloso explaining design choices and Photoshop tidbits. Simple but intuitive commands that make your life easier like highlighting a region with the marque tool and pressing ctrl-shift-c to copy a flattened version of the selection. Worth it's weight in gold! I've decided that if I write about all the snippets and secrets I learned that it wouldn't do them any good, so I'm not going to go much further than one secret per presenter.

At this point Dan took over and showed us how to optimize our images for the web. I mean serious optimization, getting those file sizes down to a cool few KBs. Photoshop tricks and enhancements ensued. Want to avoid using Dean Edwards IE6 fix script, a costly added HTTP request? Dan showed us how to save PNG files in such a way that preserves transparency in IE6. (I know that I didn't tell you how, and I'm not going to, it's his to tell)

Enter Steve Smith. Steve's goal was to show us some tricks on how to transfer your mock up into sweet HTML. For this example he used the HTML 5 doctype, mainly because, "He can remember it [the Doctype Declaration]". However, other than custom attributes he used it in the same respect as HTML 4. He justified this by saying that using the HTML 5 DTD is what people should be doing to become accustomed to it, get used to working with it, and report suggestions to the W3C. I was comforted when he said that if a browser does not understand the DTD it will revert to the HTML 4 spec. Some other pointers he gave were bulletproof even columns using absolute positioning and sorting your CSS files.

Jonathan Snook added the Javascript functionality to the site, which entailed a google map and some add functionality for locations. I know that Jon is a master of Javascript and PHP (and programming for that matter) but I fully expected to be bored during this session and that he would be teaching to the people who were brand new to JS; and at first he did. He explained how to add a Google Map to your page using the Google Map API, then things got interesting. He showed us the addition of Javascript in logically chunked phases. First, adding the Google Map, then adding map controls, then displaying locations in a list, then dynamically adding locations to the map and adjusting the map accordingly. That last phase was broken into smaller phases for comprehension. I was sitting next to Zac Gordon at the event and Zac would lean over periodically during Jon's presentation and ask what Jon had just done and I would explain. Toward the end of Jon's presentation I could no longer explain what he was doing to Zac; it was a nice broad work up to some fairly complicated functionality. Plus the things that I already knew how to do Jon approached them in a more optimal way than I would have.

I cannot say enough good things about the day. If you learn best in a small group setting, like one on one instruction, like working hands ons, or like having Q & A time then the Sidebar Workshops are for you. There really is something to learn for everyone. Look for the next Sidebar Workshop near your city.

View the pictures taken from the day