Review: Create Interactive HTML Prototypes with Livetyping

This is a review of the online course, Livetyping, by Martin Polley. The author was provided with a review copy of the course.

This is the third in our series of reviews of online UX courses; browse our full list of online UX courses for more reviews and recommendations.

Course Information

• Course Name: Livetyping
• Author: Martin Polley
• Hosted by: Digital Product Delivery (downloadable Quicktime files)
• Length: 5 lessons + downloadable code files (approx 4 hours of video content)
• Intended Audience: web developers looking to sharpen their front-end skills, former front-end developers needing a refresher in HTML5 and CSS3 as applied to various UI patterns
• What You’ll Learn: All of the HTML, CSS and jQuery needed to implement HTML prototypes that use a range of UI patterns, including inline editing, drag-and-drop, tabs, and more.
• What You Won’t Learn: When to use the patterns, or anything related to design decisions. This is a course for sharpening your front-end coding skills—it gets very technical, very quickly.
• Assumed Knowledge: While the course theoretically assumes no prior programming knowledge, I suspect the pace it moves at would put off a complete beginner. Prior HTML, CSS and JavaScript experience is recommended.
• Price at time of review: US $249

Review

One topic that regularly pops up in conversation—and always causes a bit of a stir—is the notion that designers should be able to code.

While I don’t believe that UX Designers need to know how to write complex code, I do believe it’s important to have an understanding of the technical constraints that are unique to the web. The best way to understand these constraints is to have experienced them first hand—by writing some code.

Now, I’m not suggesting UXers need to keep on top of all of the latest cross-browser quirks or advanced techniques. However, every now and then I do wish that my front-end skills were better, so I could prototype an idea in the browser—static wireframes just don’t cut it, and neither do many tools that implement basic linking between pages, but lack the ability to simulate more advanced interactions.

Suffice to say that HTML prototyping is a useful skill to have for any UX Designer.

Enter Livetyping.

Let’s Get Technical

Martin Polley’s LiveTyping course is designed to give you a comprehensive walkthrough of how to create HTML prototypes. It focusses on using CSS and JavaScript (specifically, jQuery) to implement some common user interface patterns.

While it purports to only teach enough for these patterns to be implemented in one browser (Firefox is recommended), this is actually a very in-depth course, technically speaking. It may begin with an introduction to common HTML elements, but it quickly accelerates into a fully-fledged programming course. This is great for someone like myself, who used to write HTML/CSS once upon a time and is a bit rusty. However, I imagine this degree of getting one’s hands dirty might be a bit daunting for someone learning this stuff for the first time.

What Patterns?

The course steers a wide berth, covering topics from all over the HTML, CSS and jQuery spectrum. A crash course in basic HTML, CSS typography, CSS layout is followed by writing real code to implement specific patterns drawn from examples such as the soon-to-be-defunct Google Reader, Flickr, and Basecamp.

Taking this course feels like you’re looking over the shoulder of an experienced developer as he builds, from scratch, a few examples, then pulls them together into a reasonably full-featured web application using modern techniques and best practices. The course covers a range of useful patterns, including inline editing, tabs, an expanding search box, slide-down notifications, and more.

What Structure?

While the topics covered are all useful, the structure in which they are presented frustrated me a little. The lessons are large Quicktime files (most are about an hour long). This means that going back to find specific information is difficult—especially as there is no written material or “cheat sheet” to accompany the videos. As a result, the course material is not terribly useful as a reference after you’ve completed it. The instructor contacted me to point out that there are chapter markers that allow you to jump around within Quicktime. I’d not see this feature before. Thanks, Martin!

Which is a shame, because there’s a huge amount of information packed into this course. If I wanted to refer back to the course to implement a specific pattern in the future, it would make sense to me to have this information easily findable—for instance, by breaking the video files up into smaller chunks that were named by the pattern that is covered in that file, rather than simply Lesson 1, Lesson 2, or Lesson 3.”

While there is a lot of useful information and depth to this course, working through it I couldn’t help but think: “This stuff is hard. I really just want to copy and paste this, rather than understand it …”

Pros

• This is really useful stuff to know! Being able to confidently prototype interactions that are not widely understood in the browser is a fantastic way to communicate them to developers and users.
• The content is comprehensive, and doesn’t leave you with a half-baked implementation. The code behind these example prototypes is best-practice, robust and flexible.
• The instructor has a sense of humour (references to designs that are “butt-ugly” or “crappy” win votes from me), and a clear, likeable voice.
• The video lessons are of a high production quality.
• Sample code is (mostly) provided for each lesson.

Cons

• The course makes a huge number of assumptions about the technical level of the student. Being able to use Firebug to inspect the DOM is just one of the skills that you’ll need to follow along, as is a command of terminology such as function, event handler and binding. If these terms scare you, don’t buy this course.
• The content could be structured better—breaking large video files up into more manageable chunks with more meaningful filenames would be a good start. This would also give students more of a roadmap and a better sense of orientation, and would make the content more useful as a reference.
• While many people will enjoy the “play along at home to learn” approach, there’s little here to encourage you to think for yourself. This is a far cry from Hackety Hack—there’s not a lot of encouragement to reinforce concepts by exploring on your own.
• The instructor clearly knows his stuff, and is upbeat as he talks through it, but it does get pretty dry—there’s not a lot to break up the barrage of codespeak, and this could be a challenge for non-geeks.
• The course is not quite complete yet—the final lesson is still in production, and will be made available to purchasers of the course once it’s ready.

Summary

There’s no question that the Livetyping course is full of valuable content—personally speaking, the ability to prototype design layouts, transitions and other interactions in the browser would be an enormously useful tool for me to add to my arsenal (I intend to work through the course a second time).

However, this course isn’t for everyone. If you’ve never written any HTML, CSS or JavaScript before, you’ll probably feel completely lost after a few minutes (you’re better off arming yourself with a beginner HTML course, at the very least). That said, if your front-end skills are a bit rusty, this is a great refresher, and will equip you with some powerful skills for being able to quickly prototype your ideas in the browser.

• Content (how useful, up to date, practical, and comprehensive): 6/10
• Delivery (presentation style, pace, clarity, authority): 6/10
• Production (video quality, audio quality, editing): 8/10
• User Interface (reliable infrastructure, well structured, convenient): 5/10
• Overall rating: 6/10

Enrol in Livetyping.

The Livetyping course is available as a digital download from the author, Martin Polley.

Note: This post contains affiliate links, so if you do decide to enrol in the course, we’ll receive a percentage of the sale, to help pay the hosting bills.