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 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.
- Price: US $249
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.
Let’s Get Technical
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.
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.
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.
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 …”
- 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.
- 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.
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).
- 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
Table Of Contents
- Introduction to HTML5
- CSS for typography and layout
- Inline editing
- Inline editing — multiple fields
- Tabs in context
- Selection-dependent inputs
- Slide-down notification
- Sticky slide-down notification
- Selection-dependent inputs (again)
- Expanding search box
- Date picker
- Dialog box
- Drag and drop 1
- Drag and drop 2
- To-do list example prototype
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.