AIAIO: Our Blog

Tom is Ai’s front-end tech lead.

The following is a developmental check-list I religiously adhere to and find extremely essential in ensuring semantic-rich, accessible and valid (x)HTML.

Da Basics

1. Specify a DOCTYPE and namespace
2. Specify the document’s language
3. Write your markup before writing any CSS to ensure your HTML is semantic and well-formed
4. Document your HTML with start and end comments for clear separation of layout blocks within your markup
5. Make sure the page validates (x)HTML
   1. 1.0 Strict for all new development
   2. Transitional for legacy applications using HTML flavors from the past
6. Make sure the page title is set
7. Include all necessary meta tags
8. Use block and inline elements appropriately
9. X-browser/X-Platform the page
10. Separate blocks of content with a div
11. KEEP ALL ATTRIBUTES AND THEIR VALUES LOWERCASE…KICKIN’ IT OLD SKOOL IS COOL, BUT NOT THIS WAY

Presentation and Content — Keep ‘em Separate

1. Make sure your markup is semantic in that proper elements are used in which their purpose was intended
   1. Layout => div
   2. Headings => h1 through h6
   3. Paragraphs => p
   4. List of items => ul, ol
   5. Content emphasis => em, strong
   6. Tabular/grid data => table
2. The presentation of content should be consistently applied regardless of CSS

Name Your Children With Some Structure

1. Name your ID’s and classes based upon the structure of its content, not presentation
   1. content_head
   2. content_main
   3. sidebar
   4. navigation_main
   5. navigation_secondary
   6. logo
   7. header
   8. footer
2. This will prevent renaming if the content’s look and feel changes

Headings Schmedings

1. One h1 per page
2. Maintain the hierarchy, h1 -> h2 -> h3 … h6 regardless of how cosmetically they may appear in design

Pretty Pictures

1. Every image must contain a non-empty alt tag
2. Dimensions on every image
3. Keep images used for photographical purposes inline, not as background images

I Call ‘em Links, Anchors are for Boats

1. Include title attributes on important links and/or graphical links containing no text in the image itself that describes the destination of the link
2. Make sure there is always text present within the anchor even if it is a graphic
3. The text should be informative, ie – use ‘close’ rather than just ‘x’ for a close button

Fontography

1. Try to avoid all caps within markup and allow CSS or emphasizing elements to properly transform text so you have the option of reverting if needed
2. Don’t abuse the br tag, using multiple consecutively isn’t necessary, just begin a new block level element

Set the Table, Anthony, and Don’t Forget the…

1. caption element to let users know what your table is about (look at it as short headline)
2. summary attribute to further describe your table’s contents in more detail
3. colgroup‘s for multi-column tables
4. th‘s for column headings
5. thead for table heading content, tfoot for table’s footer content and tbody for the main body of the table’s grid content
6. tfoot comes before the tbody in the markup…don’t ask me why
7. And for pete’s sake, don’t use tables for layout, that’s so 1999

Forms (Don’t Have Anything Cute for this One, Sorry)

1. Don’t forget the action and method attributes (leave em blank if you don’t know, leave that mush to the back-end dude)
2. Have a legend to set the title of the form
3. Use fieldset‘s to group related fields
4. Use div‘s for further content separation within fieldset‘s
5. tabindex on each input for easy keyboard accessibility
6. The corresponding text for each input should be a label with the for attribute set to the input‘s ID
7. maxchar set on inputs where necessary to assist with validation

You’ve set up your site and its contact form and you have started getting traffic. Then one day the person getting the contact requests forwards you a spam submission:
“We are getting tons of these. Is there a fix our web guy can implement?”
Your immediate response may be to install a captcha. That will work, although it is a bit much for a simple contact form.
An alternative solution is to simply include a hidden field.
In your css file add:
#email2 { display: none; }
In your contact form add:
<input class="text" type="text" name="email2" id="email2" />
Finally, in your server side processing script add logic to the effect of:
if request.POST.get('email2','')=='':
    #process form
And that is it. This will trick the spam bot to think that there is an extra email field in your form that needs to be filled out. It will automatically fill it out and submit the form. By filtering any form submissions that have this extra field entered, you can exclude the non-human submissions.

Launching a website is time for celebration at Ai, as it marks the end of a phase for us. It is a gratifying feeling for all who have worked on a project to see it pushed into the world of the internet for all to see.
One of our office traditions is the creation of project memorabilia. Upon wrapping a project, it is common for all who worked on it to leave their signature on an item related to the gig.
For instance, upon launching Continental Restaurant Week 2008, the team all signed a chef’s hat:

For Contract Pharmacal Corporation, a pharmaceutical drug manufacturer: two giant aspirin pill paperweights, autographed last week:

This ritual is another way for our team to feel a sense of accomplishment aside from the golive. It allows us to leave our mark within the office, displayed on the famed Orange Wall in our foosball room. It is generally initiated by the project manager of a project as a “Thank You” and “Job Well Done” to their team, and is a fine example of how much pride Ai employees take in their work.

Every now and then you get a process that just does not want to coordinate. How many times have you seen this?
The usual way of going about terminating this process would be to:
Right click the taskbar, select task manager, click process, click end process, click ok? or Press ctrl+alt+delete, open task manager, click process etc…
How about two clicks? That is what task killer enables you to do. It’s a very handy program to quickly clean up your system of processes you don’t need running.

This tool is free for Windows users and can save you a lot of time.

One of the little things I do in the realm of GTD is prioritize my email. For me, this usually boils down to taking my various opt-in emails and shuttling them into a separate folder when I don’t have time to read and process them appropriately.
The past few weeks have been rough on the opt-in folder. While I was at Internet Retailer Web Design ’09, I didn’t have the time to focus on newsletters, so I put them aside. When I got back, I kept doing it, because I wanted to start from the oldest emails and work my way forward. Then I got a stomach virus and lost much of last week. Now my opt-in folder has more than 200 unread emails. Eek!
What to do? I’d like to process these items as they come in but work generally comes first. I’d like to get through the backlog, but 200 emails is daunting. Yet I’m also unwilling to declare email bankruptcy on them, because they’re full of relevant information that I don’t get in my RSS feeds.
Sooner or later I’ll get to them. In the meantime I’d love a new idea.

Ai has an active internship program. We have two in the office now, one gaining work experience, the other earning course credit (and, we hope, gaining work experience too).
Intern Cat Small is winding up her internship today, and wrote up a summary of her experience, which she shares here:

When I applied to work as a Web Design Intern at Alexander Interactive, I had no idea what I was in for. Coming from a one-man small business to a full-grown office was amazing.
I arrived for the interview early, not knowing what to expect. Katie was at the front desk, and I thought she was nice. As I waited for Jim to interview me, I glanced around and took in the atmosphere. I looked at the magazines, thinking that it was very nice of them to provide guests with material while they wait. Jim soon came out and interviewed me briefly. It was nice, and I noticed how large the office was (at least compared to my last job). I left the interview feeling hopeful and relieved. A while later, I received a response saying I was hired.
Working at Alexander Interactive for the past 3 months has been a wonderful experience. Everyone is amazingly friendly and the office has a home-away-from-home feeling to it. Instead of dreading coming to the office, I felt excited to see what my next assignment was, what bagels would be there on a certain day, and what Hamster Time would be like on another day.
I learned so much about communication, project management tools, web design, and many new phrases including ‘sync-up’ and ‘ping’. I also learned an important lesson about balancing work and fun. Many jobs are stressful, and web designing on a tight schedule often is. However, in a good environment, you can cool off and come back to your work with a new, more positive outlook.
I thank everyone at Ai for being so kind to me and hope to work there (or some place as wonderful) again in the future.

When testing a web form, it can be tedious to constantly enter in the data over and over, especially for multi page forms. Auto form fillers are good but they don’t automatically submit the page and fill out subsequent pages.
I have tried a few macro recorders and one has become my go-to for testing forms. iMacros for Firefox is a free Firefox plugin that allows you to record and play back macros.
What I like about it:

1. Macros are simple text files that can be edited in a text editor.
2. The macro language is very extensible and can perform most any web task.
3. You can share macros through a link.

Another free macro utility (Windows only) I recently found is AutoIt. AutoIt has more coverage of things it can do since it is not dependent on a browser. The macro language is also very capable of many tasks.
A more advanced plugin that can achieve the same automation results is Selenium IDE. It is more versatile than the previously mentioned macro recorders, since it can be fine tuned to run during an automated test process directly on a server. Selenium IDE is also free and works wherever Firefox does.
Whichever you choose, the time saved by running macros can greatly improve your programming efficiency, allowing for more time for other tasks–like foosball.

Being a web designer at Ai brings many interesting things to my plate. Today, for example, I stuck superhero bodies on 17 kindergartners’ heads.
Let me explain. Our president, Alex, volunteered to have his son’s class come for a visit to see the company and what we do. The agenda for the day was to teach the kids how a website is made, have some snacks and pizza, and partake in a couple of creative activities, which would lead to their very own website.
The excited and curious children kids settled in the conference room with hot chocolate and heard a brief introduction about websites in general and clients. Then they were taken on a tour through the office, to learn how a website is made with quick stops at the desks of people from each department.
Then it was website making time. We had them draw their own postage stamp designs on a piece of paper that could be sold on a website. After they were done, I came in to show them the “ecommerce” website I had designed for them that would soon showcase their art. Everything was in place in my Photoshop file except for one thing, which I needed their help to finish. On the homepage were 3 rows of kids’ heads (which I had cut out from their school pictures) floating in space without bodies. We had an assortment of bodies for them to choose from to attach to their heads. We had Batman, Cinderella, The Hulk, Snow White, Spiderman, and others. Excitement filled the room and “OMG! That’s me!” was screamed about 20 times before the teacher had to calm everyone down. The kids picked their new bodies, I dragged the bodies to their heads, and the new image was uploaded to our server.
Nick, our front-end engineer, then showed how the HTML can be changed and modified. Using Firefox’s plugin, Firebug, he showed the kids how it’s possible to change text colors, font sizes and background colors very easily. When Nick finished, the stamps had been scanned and uploaded behind the scenes and were live for Nick to show them in the gallery. The website also featured video clips from the day that we had taken during the activities, including an inspiring performance of the kids’ school song.
The day took a lot of planning and was executed perfectly by all involved. The results: Some very happy kids and pizza for all–including a pleased but exhausted Ai team.

The Ai bake-off was a huge success.
Ten entries and a few thousand calories later, developer Sean’s “Crack the Code Cheesecake” took top honors, followed by a hotly debated second-place showing by, of all things, a bacon dish and fender Ashley’s “Depressive Cupcakes.” True to our friendly competitive spirit, an active debate is raging as to whether the bacon (sweet but not baked) is more or less appropriate an entry than Brazilian empanadas (baked but not sweet).
The agency bake-off idea is proving popular: someone just bought agencybakeoff.com and registered the Twitter account. Ai’s expert bake staff accept all challenges.

We love to have fun friendly competition. We’ve done bowling, pool and even paintball outings. Now we’re competing to identify ideas.

Recently our lead blogger David Wertheimer headed up a competition that will in turn get this blog rolling with content. The way it works is that if at any time during the day (even in client meetings, since it makes for a good conversation starter) you hear someone mention something blogworthy, you simply call out “Blog Post” and earn a point in the game, with a second point going to whoever writes the post. We also are having a baking competition tomorrow.

I feel like these competitions are good but they do raise some concern. I’ve done some research on competition in the workplace and have found some interesting observations. 

Jody Urquhart advises companies not to create undue competition among individuals:

Urquhart says that when employees have the notion that surpassing others is more important than doing a good job, they lose focus and start putting out low-quality work. She says that organizations can achieve so much more when they channel the same energy that drives competition into work that requires collaboration and shared objectives. “Cooperation should be valued over competition” writes Urquhart, “because teams are far more powerful than individuals.

In a world of no-holds-barred competition, those who rise to the top are the most ruthless, the most driven, and — all too often — those with the weakest consciences. Who rises to the top? The most able and honorable competitor, or the cheater? Can you tell until it’s too late? Does the rash of top executive prosecutions tell you anything about the results of a “winner takes all” outlook?