The Hybrid Designer

A fine kettle of fish

Recently, Johns Hopkins University enacted an “IT Reclassification Process” on its technology employees. The idea was to examine what technical industries outside the university system are doing, and to try and match some of the “real world” salaries and position titles and job descriptions. When done correctly, this helps with attract talent and keeps employee turnover low.

As near as I can tell, someone whom I’ve never met or spoken with, and with little understanding of what I do, looked at my job description and decided that I am a “web site designer,” perhaps because the word DreamWeaver appeared in the description. I logged into the time keeping system one day last October, and I had been magically transformed from my department’s “web development coordinator” to a “web site designer.”

Which got me thinking about the roles web professionals play.

At a conference I recently attended, one of the speakers polled the audience:
“Who is a web designer?”
“Who is a web developer?”
“Who are the hardware and LAN administrators?”
“Who writes content?”

I never raised my hand – I was waiting for him to ask “Who designs AND writes code?” But, he didn’t.

He was making the point that the above mentioned groups fall under the purview of an IT department – there usually isn’t a web department separate from IT – and that designers/developers are often responsible for writing content. That’s an accurate assessment, to be sure.

I read something on Jeremy Keith‘s blog recently where he mentioned a group called “hybrid designers,” which would encompass people like myself, I suppose. Sometimes programmers back into interface design, or designers become interested in scripting and coding – either by choice or necessity. I’m not sure I like the term “hybrid designer,” although I understand what Mr. Keith was talking about.

Web development is exciting because it is all encompassing. We are designing experiences, and as such, benefit from having an understanding of how all the parts work together to achieve our goal. Volumes have been written on all the separate parts. What excites me is the act of creation from a holistic approach. To combine a beautiful, effective interface with accessible coding – to have a logical, clean site organization and to understand its impact on hardware resources – to determine the best schema for a database and create it accordingly – all this is thrilling. Flash, web standards, database design, typography and GUI design, information architecture – it’s a big tasty stew.

In my current role, I wear many hats. I have to gather and document requirements from doctors, nurses, administrative assistants and people from all walks of life. I have to advocate for patients and the end user of my work – I advocate for web accessibility. I design layouts. I communicate ideas and sell new approaches and technologies. I have to learn and understand these technologies. I live in the worlds of Microsoft, Linux and Apple. I program with ColdFusion, PHP, JavaScript and ActionScript. I use Access, SQL Server, Visual Basic and Mumps. I create animation with Flash and encode video. I produce design comps with PhotoShop and take digital photos whenever needed. I am asked to think about security and understand search engine algorithms. And that’s all before my second cup of coffee. It’s a great job – my favorites are always ones that are multifaceted.

Here’s the predicament. Those of us who are web Swiss Army knives, who engage our fields on many levels – what do we call ourselves? In my case, Coordinator wasn’t quite hands on enough – but designer is too limiting. Sure, we are developers – but we are more, too. Hybrid designers? Comprehensive developers? Web Generalists? Integration Architects? Web Experience Facilitators? InterAction Figures?

Is it not written, “This is a fine kettle of fish?”

Web Accessibility Conference, 2008

At long last, the day is here. After almost a full year of planning, the Johns Hopkins Web Accessibility Conference will take place today.

web blocks

I’m delighted to say that I’m giving a talk on the basics of CSS and you can download my materials here. My presentation slides, the examples and sample site are available in a zip file. I’ve been teaching the in-and-outs of CSS for two years, sometimes in a semester long format, sometimes in a single day. This is my first shot at an hour and fifteen minute long overview.

[Update: I’m writing from the conference. There are about 140 attendees. That’s more than the sum of all co-workers at every small company I’ve ever worked for. My talk went well!]

If you came to the conference, thank you! I hope it was helpful!

I’ve donated my own time to create this presentation and these materials – I didn’t get paid to do this. I think accessibility is important, and I think that if we all strive to make web sites using the standards provided by the W3 – as flawed as the process is – we will  shape that path we all are on – developers and designers, web users and browser makers.

ActionScript 3.0

Pet My Kitty, Mr. New York City

Yesterday, I got up at 4am and traveled to the Pennsylvania Hotel in New York City to attend an Adobe sponsored “lecture” given by Flash expert Colin Moock. The topic was ActionScript 3.0.

I was wary about attending a free adobe sponsored event. I’ve sat through a few of their webinars in the hopes of getting ColdFusion 8 questions addressed for a pending upgrade at work, only to endure a lightweight, fluffy sales pitch reiterating a feature list that’s already available. I was happily surprised, however, that there were NO sales pitches. Colin even mentioned some open source ActionScript text editors worth using [FDT].

The event was bare bones – 300 flash nerds, no power for laptops and no WIFI. And, I have to say that watching even Colin Moock code for nine hours can be a little tedious. All of Colin’s previous books have been excellent and I was excited to hear him speak. His talked covered the examples in the first six (give or take) chapters of his new book Essential ActionScript 3.0. In the morning, he coded his packages and classes using notepad. In the afternoon, he switched to Flex. I was strongly reminded of Visual Studio – a great improvement to that interface is Flex’s real time code debugging – it tossed up comments and errors as he worked. When fixed, he only had to make sure his logic was sound.

AS3 is very different from its predecessors. I still haven’t completely digested AS2. The last Moock book I read cover to cover was ActionScript for Flash MX, the Definitive Guide. To stay with the Microsoft analogy, it’s a lot like going from quirky VB6 to C++.

One of the things I liked about Colin’s lecture was that he successfully made compelling arguments for using an Object Oriented Programming approach to authoring Flash, and yet didn’t openly frown upon those who will continue to attach code to the timeline – or even buttons and object on the stage [gasp!]. I thought about how we strive to keep our content separate from our formatting separate from our behavior when making websites with web standards, and a few lights went off in my head about AS3’s OOP capabilities. Variables aren’t just containers…they are objects. Everything is an object. EVERYTHING. And these objects can be kept, no wait, ARE separate. More on that later.

Flex seems like a great tool – wait…maybe this WAS a sales pitch. Wow.

I’ve spent the past three years immersed in studying web standards, XHTML, CSS, etc. I am looking forward to spending some time with another favorite aspect of the web. I’m looking forward to working with AS3.

After the talk, I kicked around the city with my buddy, Scott and his buddy, iPhone. We went to the Element Store and we had dinner in Chinatown. It was a great day.

Icons: web design influencing print

On my way to work yesterday, I noticed three instances where, it seemed to me, that print design is being informed by web design. Specifically, the prominent use of icons. I had my camera and took a few pictures. I’ll post more as I notice them.

Icons are used all over the place on the web. They offer visual references in navigation, content identification and add a little jazz to a page for little bandwidth cost. Sites like Icon Buffet offer people the chance to download free icons and trade with other community users.

Icons from Icon Buffett

So it makes sense, I suppose, that icons are creeping into packaging and branding. Drop shadows, curved corners and sequential numbering make me want to click on the box of this dishwasher soap:

dishwasher soap packaging

I want to click the “links” in the “header” of the box shown below:

Whole grain makes the whole day go better

They work just as well in signage, and this isn’t new of course. A look tells me quickly that I can get coffee, money and snacks here.

Put a tiger in your tank

I went to the web sites for these products and found that the branding there (which looks a little corporate and dated to my eyes) did not reflect the packaging.

I’ve also noticed web like layouts in some magazines. Paper versions of mail-order catalogs are closely coordinated with the web counterparts, and the visual similarities are easy to identify.

Accessible Rich Text

I have been looking for a rich text editor that I could drop onto a PHP form and that would not break my XHTML strict mark-up. I downloaded a handful of them, and tried various combinations within custom content management widgets that I’ve put together.

What I noticed is that a lot of them still use the <FONT> tag with various formatting attributes. Or worse – they weren’t free. This became something of a pet project.

I found two worth mentioning:

I like this one, and it made a good start with it. It’s based on the Mozilla Rich Text editing API included with Mozilla 1.3+. I spent some time figuring out how to get a MSSQL recordset into the form field via all the document.write gak, and then had to attend to other things. Some time went by before I could pick this up again.

I then discovered the FCKeditor, and was able to implement it within 20 minutes. I chose a simple format, meaning that I didn’t want to give my CMS users a lot of extraneousness options:

FCK Options

The extra option are mostly *not* accessible, but that’s ok. I don’t need them. The site CSS handles the styling – I want my user to be able to quickly input text and have it show up correctly when published. POW!

I did spend a little time looking how to format text myself, thinking it would be easy to use custom CSS classes, since that’s something I usually have full control over and do consistently – I could build them into the editor. I managed to get the several of the buttons done, and started on the text color picker when it was time to move on once again. I hope to return to it, and when I do, I’ll post the code up here. In the meantime, maybe give FCK a spin.