I’ve been teaching web design for the last 8 years at Bradley University. In the course, I focus on web standards and the design process with my students. I’d like to share an idea I had some time ago and have been using for the last several semesters with some pretty good success. This concept is called, “The Redline Document”. I’ll explain it in just a moment, but first a little background.

In producing a website design, there are replicable steps you should take in order to ensure success, this is a “Process”, if you will. This process should be sharable, transferrable to others on your team and easy to implement. Eventually, the steps should become like second nature to you and your team members. Hopefully, at some point, anyone on your team will be able to step in and take over at virtually any step in the process. It’s crucial for any company that produces creative and technical solutions to adhere to a process in order to build a business and elevate beyond the status of simply being a “job shop” or “making ends meet”. At the Iona Group, we use such a process called “The 4D Process”. You can learn more about it here.

I teach an abbreviated form of the process we use at The Iona Group to my students in my course at Bradley. This simplified process is easy to grasp after a couple quick projects and works great for students, as it allows for a lot of input over the course of the effort. This works for academic settings where the instructor or peers need to offer critique at key project milestones, but it also transfers well to the professional world where you may distributing the workload and looking for stakeholder approvals. In client work, I strongly believe it is best to engage the clients early and often in decisions that affect the project. Each successive step in the process should be a minor reveal, not a massive “AHA!”, IMHO.

Some example design phase deliverables in a web design project would be as follows (I’m skipping past the strategy and definition dleiverables in this post, maybe we’ll cover those some other time):

• Sketch
• Wireframe
• Moodboard
• Mockup

Those would be documents you could share with your client and get feedback, critique, suggestions, and other stakeholder input. There is one deliverable missing from that list that I have coined “The Redline“. The Redline is not a document shared with the client, but rather a document used internally to ensure the designer, developers, copywriters and SEO experts are all on the same page when it comes to hierarchy, standards implementation and the details of templating the website. This document also serves a valuable purpose to junior level team members in how to structure their efforts. It’s basically a webpage equivalent to an engineer’s CAD drawing of an engine or other mechanical part. In our class we create the Redline document after the mockup phase, but it’s easy to see that there could be a lot of value in creating a Redline as part of the wireframing process. This document works well in a web design class setting to help teach students about page structure, semantics and design hierarchy.

This document also reinforces an oft quoted Zeldman-ism:

Content precedes design. Design in the absence of content is not design, it’s decoration.

I have produced these documents in the past using a printout and a fine-point red Sharpie marker, but the example here was made using Omnigraffle Pro. So, let’s see an example of “The Redline” (click the image for a larger view):

Essentially every element on the page is bounded by a red box, and in each box, the HTML tag that will be used in the creation of the page’s structure is clearly listed. Yes, I realize this should be elementary for an advanced web designer; and yes, once you become adequately skilled you may not need this document. However, for a junior level developer, or for a distributed team that relies heavily on standards based SEO and proper marked up pages, this document has a high amount of value. What benefits does it bring to such a team? Consider these:

• Prevents HTML “Writer’s Block” – There is no question that junior web designers struggle at where to start once they open a text editor. How will the nav bar be structured? How about that sidebar? What constitutes an H2, an H3, etc?
• Puts Proper Emphasis On Page Structure – One of the very best ways to SEO optimize is to start out with good bones. By looking at how your content is placed in the page you can make sure that tag weight won’t interfere with proper indexing or page accessibility. Sure, it’s great to have a website with a pretty face, but without good bones, you’re never going to have a design that truly performs. The Redline forces you to think critically about how your page content and structure live together.
• Separates Design Strategy from Design Production – Let’s face it. Thinking is expensive. You may only have a couple of high end designers capable of producing scalable, SEO friendly standards based designs. You probably have a much larger base of coders capable of writing HTML with some guidance. This allows the team to divide and conquer, with individuals adding value where they can really shine.
• Eliminates Divitis Before It Begins – Unfocused HTML writing results in poorly formed markup. No question about it. Writing without a plan is a recipe for disaster. This document is that plan.
• Documents the Design for Historical Purposes/Recordkeeping – As a website ages, the pages get edited, content maintenance systems get patched, templates are tweaked, etc. a website can get rickety. The redline document allows a team member to perform a development/design soft reset down the road. If you want to rollback the site later to the SEO optimized version that everyone agreed on, unless you have pristine document history or version control systems in place you may have difficulty reinstating the original template. The redline will at least allow you to recreate it with minimal fuss.
• Reduces Coding Time – No question about it, it’s easier to “restructure your page” semantically via diagrams than it is to rewrite HTML time and time again. Just like wireframes help short-circuit the “Photoshop Mockup Death Spiral”, this document helps accelerate the development phase.
• Establishes and Document Naming Convention for Classes and Elements Ahead of Time – When adding the ids and classes to the document, you are in essence documenting the framework for the CSS and the JavaScript to be integrated with the designs. This really will make sure a distributed team is all on the same page (pun intended).
• Empowers the Design Team To Help Developers Adhere to Standards – I’m not naming names, but I have come into a number of situations where backend developers have been entrusted to write the markup for the web designs they have been provided. These developers mean well, and can write great SQL and business logic, but page templating isn’t there thing. As anyone knows, a poorly structured DOM is going to produce invalid HTML pages. Invalid HTML documents are NOT going to be cross browser compatible.

So, there you go. I hope this info helps you either learn web design for the first time, or maybe even enhance the process you are using at work to help maximize productivity and increase your overall web design quality. Are you using a similar document in your process? I’d like to hear about how you are implementing planning documents like this to jumpstart your designs.

Don’t miss this tonight. Wowzers.

For a lot more info on this event… check out the official page.

I’m so proud to be faculty at a University providing great activities to students. Especially when these activities are novel, engaging and produced by our students in the INteractive Media department where I teach! Sweet!

I may be one of the most conflicted web designers on the planet. Seriously. I write Flash/Flex code about as often as I work in HTML/CSS. I love ‘em both. I hate ‘em both. Each tool has their own pluses and minuses. I speak often about my love for Flash here, so let’s change gears for a second. Let’s get provocative even… It’s got to be said. What the fuck is the deal with these standards writers, working groups and developers these days?

Why do I ask this… Well, you all have Flash/Silverlight on the ropes, but you are giving them a free pass. How so? With the release of HTML 5′s video tag, canvas, yummy semantic tags and other advanced markup goodies… pretty much any major site, (eg, Facebook, YouTube, Google Video, Vimeo, etc), could just about up and walk away from Flash with the next major revision of Internet Explorer (hopefully 9 will come around). You see, Safari 4, Firefox 3.5 are out and they like to party. They’re out playing video all night long and swinging from the rafters. The biggest draw on the web today, video, is by and large delivered via Flash. Now, I wouldn’t be so brash as to say that Flash’s days are numbered by any stretch by this developing situation. There are a lot of things that Flash can do that simply can’t be replicated, even with JQuery (my fave JS framework), Processing.js or the new Scripty 2. However, these new browsers really take care of a ton of things that Flash is needed for right now like video playback and basic RIA implementations.

I don’t mean to be disrespectful to the standards group, W3C, etc, but with the competing standard, arguably, an anti-standard, Flash, on the ropes, why are you not focusing and assisting the devs in the trenches, the browser and tool developers and the web designers in the cube farms at MS, Adobe, etc? It seems as though there is a fracturing, rather than a coalescing of resources and forces in the standards arena. Don’t believe me? Check this out. And this. And then for a laugh, this. It’s a bit liek the wild west again. I’m getting flashbacks to 1999-2000, when tables and spacer.gifs were clutched in the dying grips of every SimpleText coder and every GifBuilder jockey.

Sound audacious? I know, right. But look at the evidence. Twitter is abuzz with the recent additions to HTML5, with new hot samples being posted in playgrounds daily, what it means for Flash devs and on and on (simply run a search there and see). Beyond that, a number of high profile standards focused designers are on the warpath right now, speaking out and writing with a virulence not seen since the height of the browser wars (yes, I’m that old). For example, Zeldman has had a series of fantastic posts lately laying it out on the line talking about the demise of the XHTML standards group, defending the use of standards in the face of adversity and Eric Meyer has recently started giving a talk on “how Javascript will save us all”, in which he recommends using Javscript (favoring no specific framework, really) to do things that CSS3 and HTML5 do quite well. There are a number of other examples out there just like this. ‚Äì Full disclosure, I use both Meyer’s and Zeldman’s books in my classes.

Talk about cutting off your nose and all of that rot. I love standards just as much as anyone, but when the big boys are changing their tunes about what constitutes good standards implementation (separate content – HTML from presentation – CSS and behavior – JS) in order to remain within the toolset and bowing down to the same boards they fought against a decade ago to get CSS2 adopted, I start to get a bit squeamish. You see, I have to teach this stuff to students. Teaching standards based design was before a lot like teaching a foreign language. A language a bit like Japanese in that it had rules that are reasonable cut and dry and work well with each other because agreement on how they work was decided upon and then used! Now, it’s like a mish-mash of bad drunken Engrish. Too many exceptions, IMHO. It’s like “i before e”, but with end tags and doctypes. *Blech*

Am I abandoning web standards? Nope. Though, I’ll probably be a little more likely to make an exception to the rule in what constitutes a good use case for it vs a plug-in, though. After all, we have until 2022, right? Thoughts? What are you doing to keep your standards based design skills sharp? My advice, just keep swimming.

I teach a web design course at Bradley University. “Designing for the World Wide Web” is the course title. The focus of the course is standards based web design using CSS and XHTML, coupled with a little bit of behavior layer DOM scripting using JavaScript. We use JS to place media files and validate some forms, etc. After the first couple classes and some demos on how to create a standards compliant XHTML document, we move on to teaching CSS. That’s where this post comes in. One of the best places on the web to see the power of CSS is of course CSSZenGarden.com, and I like to use that site as a good intro to CSS design and using web design tools like Firebug, and the WebDeveloper toolbar. The assignment is fairly straight-forward.

1. Visit the site, save the HTML file to your computer.
2. Make a CSS file and save it in the same directory as your HTML file.
3. You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
4. Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
5. Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
6. Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
7. Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
8. Finish your work and upload it!

This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.

I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.

Some things I don’t focus on in this assignment:

1. IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
2. Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
3. Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.

So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.

How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing

Sorry for not posting more recently… I’ve been buried!

I spent the last few days in Colorado, it was beautiful! I was the best man in a wedding there (in Estes Park), you can see some photos from the trip here. CO is a nice place with fantastic scenery and super tasty microbrews. Highly recommended.

While I was there, I got to meet Juan Sanchez, designer at Effective UI, and one of the main contributors to DeGrafa. He mentioned that Scalenine’s skin contest had completed. What a great pile of entries! I can’t wait to see the library grow and serve as the premier resource for Flex Designers on the web. How cool. Even cooler, was the fact that my Coworker, Heather Ford, was one of the winners with her DiscoType Theme! Awesome.

Beyond that, my students are begnining to build some mashups and make some progress learning Flex… Some recent ones they’ve made… GeekVahalla (a tech focused RSS Reader), TweetTally (a Twitter Tag cloud search). Dropped Passes (a sports focused RSS Reader). I hope to continue to post more as they pile up.

Finally, at The Iona Group, we are hard at work on our eLearning development platform, Doctum. We’re gearing up to launch and start talking to people/demoing it at DevLearn08. If you’d like to be made aware when we launch, head on over to DoctumLearning.com to get on our list of contacts. We have a full site launching soon with features, videos etc explanining what makes it different, but for now it’s kind of in a hush hush mode. Needless to say lots of work is going on and the system is shaping up to be pretty amazing, if I do say so myself.

This one’s from my Mashups class. The first project, was to build an RSS Reader. I’ve already posted a quick tutorial on how to build an RSS reader with Adobe Flex. Here’s a simple one that uses JQuery to get the feeds and then loop through them to output them to the browser window. Piece of cake for many of you, yes, but if you have never used anything but the DOM and plain ol’ JavaScript, you may be scared by the whole AJAX fad on teh intarwebs these days. JQuery makes it super easy to look like a Javascript rockstar. I teach a lot of students that haven’t ever touched a library of code like JQuery before, so tutorials like this are pretty valuable to some readers..
(more…)

A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together. (more…)

Bradley is back in session. I have two classes I’m teaching this semester, so it’s going to be a busy one. MM365 ‚Äì Designing with Web Standards, this is one I have taught for 3 years now. It’s focused around CSS, XHTML and some simple JS, with an emphasis on using best practives and writing markup that validates. It’s a great class and one that serves the students pretty well. After that on Tuesdays, I am very happy to teach my MM491 ‚Äì Mashups and RIAs class… This is going to be great. I have a group of students I will be helping to learn Flex, AJAX and using Webservices to make web mashups… what gets better than that?

While I prepare for that (I have to build a few presentations, stat!), why don’t you take some time and watch this video that was taken at 360Flex’s keynote… It has some hot Thermo action in it at about 45:00. Hot stuff, indeed.

About a week ago, I sent out a tweet asking for ideas on new APIs that might be worth checking out. You see, I am teaching a mashup course this fall and I need some new source material. I’ve played with Kuler, ColourLovers, Delicious, Yahoo Pipes, Technorati and a couple others (mostly unpublished and just experimental), but I just feel like I was missing something. I needed to check some other things out. Of course the new AS3 APIs for Google maps are out, so those are absolutely on my list, but I wanted some more “content rich” APIs. I spent some time on programmableweb.com (a great source for mashups and APIs) but only found a couple that struck my fancy enough to think about spending what is virtually my nonexistant free time on building a toy.

Rachael Rubin (wildhoney on twitter) was kind enough to point me to the newly revised Last.FM API and I think I will definitely use it at some point, but without a a proper link to the streaming music in their library, building a non playing audio based mashup seems a little less fun that it should be. It seems as though they intentionally make accessing the streams a little difficult to discourage bandwidth abuse.

All that changed today when I came across Govtrack.us on programmableweb. Wow. What a useful API. Fun? Not really… it’s an interface to the mountains of data generated by our Congressional representatives day to day business. Deep stuff. With the ever growing need for governmental transparency in this somewhat crazy time, it’s a fantastic resource to have. Generate clean XML based on what your reps are voting on, meeting about and talking over. Combine this with Google maps or perhaps any number of other rich data sources and you have some amazing potential to bring visibility to a very opaque world. Providing a new or easier to use interface to the insurmountable volumes of legislation might uncover some realizations that may have gone unnoticed otherwise.

I’m definitely going to give this one a spin. Shall we find something out from all of this? It remains to be seen, I guess. I have a few ideas on things I might like to track… how about you?

I will be entering my fifth year of teaching at Bradley this fall. In that time I have taught several classes on multimedia authoring, using tools like Director and Flash to produce microsites, games and simple applications. I have also taught a senior level capstone class where Rich Internet Applications were designed and prototyped, then composited with devices in original video shot by my students in a “Starfire”-like what-if video depicting ubiquitous wireless connectivity. You can see that one here. Additionally, I have taught course on server side development using PHP/MySQL and a intro to web design class that focuses on web standards and covers XHTML/CSS and JS. Well, I have another one to add to that. Read on to find out more about it. (more…)