UPDATE: I cannot believe the email I just received. My Flash and the City slide deck has been included in the top presentations on the Slideshare.net homepage for multiple days! It’s gotten over 1400 3800 5000 8000 A LOT of views and was officially the most discussed presentation on Twitter at several points! Check it out! http://www.slideshare.net/ssod Check out my @FlashAndTheCity 2010 slides posted below, or you can view them on Slideshare at http://j.mp/SuttleFATC10The Next Generation of Flash User Experience
Author: admin
I’m speaking at Flash and the City!
I confirmed with Elad Elrom earlier today that I have been added to the speakers list for the Flash and the City conference in New York City, May 13-16, 2010! Have you seen this speaker list?! Take a minute, and look at it. The people on this list are some of the people who literally built our industry and the Flash community. And now, I am blessed enough to share a podium with the likes of such Flash greatness. I still can’t believe it. GIGANTIC thanks goes to Elad and Jesse Freeman (a.k.a The Flash Bum) for putting together an absolutely elite list of speakers and event. Somebody pinch me! Now, let me back up a bit. I’m getting ahead of myself. I just attended FlashPitt a few weeks ago, which was a fantastic conference in Pittsburgh. If you’re wondering why I didn’t blog about it, I saw the ridiculous amount of tweets I barraged you all with (sorry about that), and figured I had said enough. In my defense, I had not read the rules, and this is the first conference I have attended since creating my Twitter account. Yes, I’m serious. So, that said. I will not be live tweeting every slide from the upcoming RIAUnleashed – Boston, on November 13th. I will be taking notes and paying more attention this time [Ed note: Twitter distracts you, who knew?] I am incredibly excited about the speakers and content for this one. And it doesn’t hurt that I am a huge Red Sox fan. I’m especially excited about meeting so many new people and putting live faces to the online profiles I see all the time. I love meeting people and cannot wait to meet you at RIAUnleashed and Flash and the City. I’m not sure if I will attend any events in between those two right now, but if I do, I’m looking forward to meeting you there too! Which brings me to my next point: conferences are good. Why? For several reasons. 1. You get to be with actual humans. Twitter is great, but face-to-face human interaction is always better. I am saddened that I actually have to remind others of this. 2. You get to pick the brains of some incredibly intelligent and creative speakers. At FlashPitt, I got to hang out with Scott Janousek, and Phillip Kerman, two respected veterans of the Flash Community, experienced conference speakers/authors, and all-around great guys. While at lunch, I had a fantastic conversation with them about industry, publishing, and the Flash Community at large. I had such a good time with those fellas, and in just a short while, I gained some highly valuable insight. After the conference, I got to meet THE Seb Lee-Delisle, an impossibly polite gentleman and humble genius. I had to run to meet my wife, so I couldn’t hang out, but just in those few minutes, I got to see how cool of a guy he is and was floored when he told me he had read my InsideRIA article featuring his Big and Small project site. I definitely owe him some drinks the next time we’re together for missing the chance at FlashPitt. Though, he is speaking at Flash and the City as well! 3. You get inspired. This is probably the main reason conferences even exist, and rightly so. The speakers that present at these conferences are not chosen at random. They have incredible minds and want to open yours with their ingenuity and ideas. For example, at FlashPitt, Josh Sager showed a demo where a Red5 server would interpret musical chords and parse the data in Flash Player, Seb wrote a 3D engine in 1.5K, and Julian Dolce ran a socket server from XCode to preview his Flash-compiled iPhone app SWF! Mindblowing stuff happens at these conferences. To come full circle, I am incredibly honored to be speaking at Flash and the City. I am preparing my session now, and welcome any advice/feedback from those of you who have done this on a regular basis. About my topic, as of right now, it will be very generally focused on multi-touch in Flash Player 10.1. I am hoping that after Flash CS5 Beta comes out later this year, that there will still be cool stuff to show in May that hasn’t already been shown off. If not, I have backup ideas. My main goal is to not put a powerpoint up and read it to you. I want to do my best to A) keep you awake, B) remember my name, C) say “WHOA! I’ve never seen that before”, and D) really have fun. I’m being completely serious when I say, ‘I hope to see you there’. This is how I reacted when I first received the news that I’d be speaking. I posted my session info on the Flash and the City blog, and made my speaker promo video:
My 2¢ on Microsoft Expression Blend
BlendBanner I’m going to preface this post with a few things. First, I am not a closet Silverlight developer. I’m also not a firestarter. With regards to some recent talk about whether or not Microsoft’s presence should be allowed at Flash conferences, I have no involvement or say. I don’t want to start an Adobe vs Microsoft flame war, because honestly, it’s played out already, and I’ll leave that up to the tech tabloids. I am, however, a developer and a UX designer, which means that I love thinking of ways to make everything better, more structured, and more usable. That includes IDEs I work in, but also IDEs I’m not working in. It’s silly to ignore other development environments, especially ones that are seen as competition to the ones we work in. So I decided to investigate. I took some time to look at other IDEs, namely Microsoft Expression Blend, and have seen some head-slappingly clever “Why didn’t we think of that!?” kind of UI/workflow elements that any RIA tool could benefit from. Blend has a lot of slick little features to offer when it comes to workflow. At least on the surface, Blend is great at being a smart and intuitive IDE. Microsoft has taken a big step forward in of RIA building arena. To be fair, however, Blend has youth and Adobe’s experience on it’s side. Microsoft has wisely learned the pain points of the Flash Platform and did something to improve those areas, on top of an already great IDE.I didn’t work with Expression Blend for an extended amount of time, but I found a swath of really nice additions built-in that make me rather envious. Want to see what I mean? If you haven’t seen this video, take 10 minutes and check it out.(Under Discovery Tours > Top right, ’Expression Blend 3’) Here are some specific examples in a not so specific order: 1. Container parenting. Each layer has a ’Group Into’ right-click menu that allows you choose view components to group items into.
2. Enhanced States. There are really nice visual features here. You can specify transition durations, easing type, and even ’pin’ states with an eye icon so you can see them over your current state. You can also see which state each state is currently being transitioned. This thinking applies to buttons as well, giving you a high-level view of each state. There is also a custom easing editor as well as easing presets, which I am super jealous of.
- Blend’s Asset Menu in the toolbar is like Flash Builder’s Package Navigator and Components panel combined. A lot to talk about here. There is a button at the bottom of the toolbar that shows a menu and all of the assets in your project. When I say ’all’ I mean all. It also shows behaviors and styles as visual objects, as well as explanations of each! This menu can be subdivided into areas like ’controls’, ’styles’, ’behaviors’ etc. Selecting an item makes it the default drawing object. In other words, instead of dragging and dropping from the library, you can draw a symbol or image at whatever size you want when you first put it on stage.
- Visual Hints. Nice little options for Tooltips, Cursors, and HitTestVisibility.
- Split Code and Design View. I know, I know. Just throwing it out there.
- Visual, Reusable Event Programming. This is nothing terribly novel, but still a useful area of functionality. Notice the Volume Property of a Sound object. Very slick! To be honest, I’m not really an advocate of behaviors, but I think Microsoft is on the right path here. It’s a graceful implementation in my opinion.
- Enhanced Layout Panel. A bunch of sexy little additions like columns and rows, scroll policies, and layout rounding. Solid development UX here. 8. In house prototyping with SketchFlow. I know I’m going to get some flack for this, but Adobe really should have made Catalyst Flash Builder’s Design View in my opinion. Yes, that includes a timeline. Either way, Microsoft has what I consider a beautifully analog-to-digital approach right under the roof of their own IDE.
- Quick Access Stage Functions. These are just some really convenient functions to be able to quickly access when you’re working on the stage canvas. These buttons toggle grid displays, rendering, snapping, and annotations. Also, something little I noticed when you’re dealing with tons of layers was a right-click, Set Current Selection context menu item. It’s just all these little things that add up to a really smooth RIA development experience. So, that’s just a first-glance take of Expression Blend. It’s nice seeing what other IDEs can do. I personally have spent countless hours logging bugs and feature requests for the IDEs I use by studying other products like this. It’s also a great way to understand why the IDE you’re logging features for, is built the way it is. You really gain an understanding of how software is architected this way. If you can, download the trial of Expression Blend, load up an example, and play around. Oh, and I don’t want to hear any flack. 🙂 I’m a Flasher for life.
Found and Lost: The Flash IDE
Over the last few years as a Flash Developer, I’ve noticed something. Flash isn’t what it used to be. Back in the days of Studio MX, when I first encountered Flash, it was the Wild West of interactive development. Much of that had to do with it’s labeling as a “fad” and the fact that it was the only real IDE that could write small and compelling interactive content for the web.
Now, several years later, in the modern wave of RIAs, offline capability, the HTML5 canvas, mobile devices giving a full desktop experience, and an undeniable mainstream shift to rich, portable online content, Flash as a platform is on the verge of becoming truly ubiquitous. However, Flash as a content creation application has been lost in the shuffle at some point along the way. With the recent relaunch of the Flash Platform, and the overwhelming call for more Flash-based content, I wanted to make heard our collective voice as devigners inside of the Flash IDE.
This article is a call to the community, to make the IDE that so many of us first learned to program in what it once was. I can already hear some of you asking “What’s wrong with the Flash IDE?” Well, the problem may, in fact, be bigger than just Flash, but I’ll get to that in a minute. For now, let me attempt to explain what we Flashers observe on an all too regular basis. To put it mildly, Flash has become bastardized. It’s unlike any Adobe product in the entire Creative Suite, and that may not necessarily be a good thing.
Now what does that mean? What do most people think of when they think of the Flash? A timeline? An ActionScript editor? A splash page/banner ad creation tool? It’s the foundation of the Flash Platform, but it’s slowly losing its identity due to lack of refinement and advancement. I would go as far as saying that Flash CS4 is still absolutely riddled with bugs and seems to have been only lightly skimmed over during the QA process.
Even its name hasn’t gotten attention. The “Professional” was only added when there were 2 versions of Flash. Now there is one. I think we can remove it now. As harsh as that sounds, there are issues that have plagued developers in the Flash IDE for years that still exist today, without explanation or resolution.
All of the time, attention, innovation, marketing, and feedback that Flash misses out on seems to go into Flex, AIR, and most recently, Flash Catalyst. Just to be clear, this is in no way a Flash vs. Flex debate, as I truly love them both and am super excited about their future together.
Some of the evidence of Flash falling behind is pretty hard to miss. Flash CS4 can be an absolute hindrance to productivity due to its painfully slow performance and constant, almost predictable crashing (even on modern machines). Flash literally crashes, on average, once or twice a day for me, more depending on what I am doing. This really isn’t OK to us. I don’t use a Mac, but known Flash dude @JonMacDonald has informed me that Flash’s integration of OSX Spaces is an absolute nightmare. I have noticed the UI panels in Win XP to be highly buggy. Case(s) in point: try to reset the Debug workspace back to it’s shipping state after modifying it. It can’t be done. Once you change it, it’s essentially useless. Also, if Flash notices coding errors at compile time, it will still attempt to publish a swf, resulting in inexcusably-long publish times and the “Cancel” button in the “Test Movie” prompt to merely be there for show as it requires multiple clicks and confirmations.
Flash has always had a history of unpredictably dealing with other Creative Suite file types, but hope was high when we were told that CS3 would have a native importer for certain Adobe files. However, Photoshop and Illustrator files imported into Flash change can color profiles and lose fidelity, and must be re-imported to be updated instead of having round-trip editing functionality.
One other note of interest that I have never seen pointed out is the fact that Flash and Illustrator have this strange love affair. They are the only 2 Adobe CS programs that I know of that allow multiple text objects on a layer. When Flash CS3 came out, Adobe made it very clear that Flash would now implement the drawing tools from Illustrator, specifically drawing attention to the pen tool. Whenever you try to import a file in Flash CS4, it always, without fail, defaults to the .ai filetype, which must be deselected each and every time. You can specify Flash symbol type and text inside of Illustrator. Why Illustrator? This isn’t in any other Creative Suite program that I know of.
Many of us were squirming with glee and fanning our faces with our hands when we found out that Flash CS4 was getting a sweet new Motion Editor similar to the one in After Effects. After a few weeks of incorporation into my daily work, I gladly got reacquainted with “Right-click>Create Classic Tween.” The question now is ‘why is the new motion editor/tween model not nearly as friendly as it was marketed to be, and when will the it be exactly like their After Effects counterparts? ‘. As it stands, the CS4 tween model sets unneeded properties and keyframes that I never asked it to set, and then doesn’t allow me to change or remove them. This type of proprietary workflow is part of what I mean when I say that the Flash IDE has been bastardized.
Some other minor examples: Thank GOD for the Text Layout Framework, because the current text engine is literally broken. Why are the drawing tools that clunky, weird mix of pixels and vectors? Why is there still not a triangle setting in the polygon tool, and I have to click a button in the Properties panel to get a prompt that should be in the Properties panel itself now? Why is SWFObject the default method for embedding Flash inside of HTML in Dreamweaver and Flex, but not Flash?! And when, exactly, would I not want to use stroke hinting?! And how psyched were we when we found out we’d get 3D in Flash Player CS4? Super excited, right? Well, as it turns out, it’s more like 2.5D. But that’s OK, I can let that one slide. It’s still really cool.
At one point we were told that .fla files were history and that XFL files were the way of the future. Now, this is an interesting one. Flash CS4 was supposed to use the XFL format exclusively. XFL was supposed to be a hybrid XML/zip file similar to a zipped up Flex project, but had much more flexibility when interchanging the assets within it. I mean, it was big enough news to get Colin Moock to blog about it, so it had to be big, right?
However, it became this muted transport vessel for After Effects and InDesign compositions into Flash, and we were never really given an explanation. This is the heart of my problem with iterations of the Flash IDE: old familiarities are held onto for unknown reasons, while originality and creative development are added elsewhere. We as a community are left with only guesses. Remember how I said that the problem may be bigger than just Flash? Well, I have never been invited to a Flash Bug Quash or a Flash Open Iteration Meeting and to this day, I know not one single thing about a Flash IDE Bugbase. Some of you may remember that Technical Product Manager for Flash, Richard Galvan, had encouraged us to leave feedback on his blog in an attempt to let users get some things off of their chests. But, other than a quiet follow-up, we have seen little in the way of steps to remedy those issues.
Now, I’m not slamming Richard or the Flash team at all, as they’re obviously capable of some pretty radical things. The point is, Flash users have been crying out for innovation and fixes for years, and here we are still. Further to the point, there has been only one public pre-commercial release of Flash that I know of and even it was essentially just Macromedia Flash 8 with an AS3 complier. Flex now has nightly builds, which is great …if it’s your primary IDE.
If any IDE needed constant community feedback, it was, and still is, Flash. Before Flex, I don’t remember hearing “Flash is for designers”. I’m not sure how that started, but let me be the one to remind the community: There are still thousands of us who actually still do real development in Flash. Think about this. Have you ever tried to do the following quickly and easily in Flash? Drag and Drop with hit tests/areas, validating data, item rendering, constraint-based layouts, data binding or collecting/managing web services? There are no AJAX, CF, PHP, Java. ASP.Net or BlazeDS/LCDS wizards in Flash.
Things in Flex have been so intuitive and absurdly easy, yet the Flash IDE is now almost 10 years old, and we’re still using basically the same editor as we were in Flash MX (you knew I wasn’t going to let that one go unmentioned). The ActionScript editor and the Flash Platform itself, has outgrown the Flash IDE.
There are a huge number of ActionScript Developers that have made the switch to using Flex Builder as their primary code editor. There are even people who use open-source alternatives such as FDT and FlashDevelop exclusively now, and we as Flash developers are asking “What about us?” Spending that time in such a powerful and robust Eclipse-based IDE, with all the awesomeness, forward-thinking approaches, and constant community-based improvement that Flex encompasses, leads one to wonder where Flash fits into the big picture.
I mean, if Flash Catalyst has a timeline (albeit rudimentary) and is built on Eclipse, why can’t Flash be built on Eclipse? While we’re at it, why can’t there be a Flash SDK and a Flash Framework? The current component kit is lightweight, but extremely limited, especially when compared to the Flex Framework. Why can’t Catalyst, Flex, and Flash share a component framework or the Flash component set be lightweight MXML? Just thinking out loud here. BOTTOM LINE: If you’ve read this far, you know a lot is going to have to change in order for Flash IDE-based developers to feel like Flash isn’t a 3rd class citizen in it’s own platform.
What I would love to see, and I believe the Flash community deserves, is an active discussion between Adobe representatives and the Flash community which leads to solid proposed solutions to the issues listed in this post. I know it sounds like quite a lofty goal, but think how progressive the last few years have been for the Flash Platform. Gumbo, AIR, Catalyst, Alchemy, Astro and all the unbelievable things people have created with them. Imagine what we can do to just a single IDE with a little effort, time, a lot of feedback, and a ton of Cocoa code.
I know this wasn’t a short winded post but Flash is my first love, and I can’t sit back and let it be left behind any longer. I really think if we all work our butts off together, we can make some amazing progress for the Flash community and the Platform as a whole.
A HUGE thanks to @JonMacDonald for taking the time to review, critique, and support the community’s needs.
P.S. This is a time for positive, constructive, thoughtful discussion and exchange over the ways we can improve the Flash IDE and restore it’s place in the Platform. And with that, here …we …go. Flash on!
UPDATE: I was going to save this for another post, but since it now seems appropriate in scope, here we go.
I’m just thinking off the cuff here, to fuel the discussion. These aren’t ideas I’m necessarily pushing. Now, I can’t talk about Flash without bringing up the recent re-launch of the Flash Platform and the topic of Flex being rebranded. I understand why it’s happening and that Adobe needs to make money, but without getting into detail, I personally think it creates more confusion than it adds.
When it comes down to it, what are the real differences between Flex, Catalyst, and Flash, and why should we keep so many of the overlaps? Why do we need 2 products with timelines that publish to swf? Do we really need 3 applications (Flash Catalyst, Flex, Fireworks) that write MXML, HTML, and CSS? Should Fireworks and Flash Catalyst be combined? (Needs reference. Not my idea, give me the link if you come across it so I can give credit.)
Will Captivate be called Flash E-learning Creator now since it publishes to swf? [Not my idea. Can’t name source at this time for NDA reasons.) Should there be a standalone ActionScript/MXML editor that ties into any program you want? Should Flash Catalyst be the new Design View or States Manager in Flex?
Lots of questions to think about, all affecting the future of the Flash IDE. Nothing of real substance, just trying to get the ball rolling here.
The Game of Telephone
Late this evening, I saw a tweet from Netflix UI engineer and interaction design guru Bill Scott linking to an article about Netflix using “HTML5” to deliver “amazing User Interfaces”. “OK. I’ll bite” I thought.
Reading through the article, and others like it, I noticed more than a few troubling patterns. Each one:
- could be searched, and have each instance of the word “HTML5” replaced with “HTML” or “the web” and written 5 years ago
- doesn’t mention any specific implementations involving elements or functionality added in the HTML5 spec
- consistently points to faster iterations as a benefit of HTML5
- makes references to “HTML5 UI” and “UX”and
- confused their custom Webkit instance for “HTML5”
Some notable quotes from these posts:
“Of course, with HTML5 interfaces…”
What exactly is an “HTML5 interface”? Canvas? Drag and Drop? HTML5 is mainly about semantics, and very little was added outside of messaging and media elements for “UI”.
“…such animation usually involves making changes to the properties of the elements on the screen, such as their position, size, etc.”Isn’t that how every animation works in any language?
“The system leverages tools like Ant, YUI Compressor, and Juicer and incorporates popular HTML5 frameworks like LESS, in addition to Netflix-specific code.” LESS has nothing to do with HTML5. It’s a CSS preprocessor and dynamic CSS library. Ant is a powerful build automation tool. YUI is a solid JS-based UI library built by Yahoo. Juicer is a JavaScript packaging tool. Not one of those is based on HTML5. Notice there is no discussion as to what exactly “Netflix-specific code” is.
“That’s what HTML5 brings to the table, the freedom to create rich, dynamic and interactive experiences for any platform with a web browser.”
“That’s where HTML5 comes in. The technology is delivered from Netflix servers every time you launch our application. This means we can constantly update, test and improve the experience we offer.”
“Our customers don’t have to go through a manual process to install new software every time we make a change, it “just happens.”
See points #1 and #3 above. HTML5, has no effect on how quickly you iterate. Iteration is a methodology, not a language. I get that it circumvents the app store update process, but there’s a difference between “iteration” and “on our timetable.”As for it “just happen”-ing, and being “delivered from Netflix servers every time you launch our application”, that’s how the entire internet has worked since day 1.
“What HTML5 is capable of speaks for itself, but there are other reasons HTML5 is the right choice for us.”
See point #2 above. “…speaks for itself” is Corporatese for “I don’t really know how it works or what it does.”
You might be asking yourself, “what’s the big deal? I thought you were all about the web and HTML5 now?” I am, however, the problem is one of misinformation. Apple has 100% proprietary Safari code that it calls “HTML5.” Netflix sees that the web can skip Apple’s review process and allows for code reuse on a number of devices and calls it “HTML5.” Their engineers don’t use Flash and by default, it must be an “HTML5 UI.” Do you see a pattern here? We’re taking something so powerful and muddying the waters by lumping a ton of buzzwords together.
Earlier this evening I was helping a friend who is super intelligent, but not totally familiar with the latest and greatest in web development, dig in and figure out how he could trigger some animations in CSS3 based on a demo whose source we’d been perusing. At one point he sent this IM:
“this is frustrating.. yay html5 ;)”
And it’s not his fault. It’s the kind of game-of-telephone fact-checking that gets an article published in a “tech blog” these days. This is how misinformation spreads and eventually money changes hands. I’m petrified to think that modern executives are operating based on this kind of hearsay and lack of research.
I LOVE what the HTML5 (now just HTML) spec has brought to the table and the kinds of things we’re able to do. I just wish that folks knew how to appropriately describe and label them.
To be honest, it’s not the authors, Netflix, or tech blogs’ fault. The W3C couldn’t even make up their minds about what “HTML5” was and wasn’t.
The point is, that this kind of loose talk is blurring the lines of something great, and undermining just how powerful and flexible the web is as a deployment platform. Do your research, read the specs, and then and only then can you speak about “HTML5.”
Frame of Reference: The real issues at the heart of modern interface design
I wrote an article on Medium about why affordances matter more than style.
Now that skeuomorphism is a thing, and “flat design” is busy becoming the next flavor of UI styling, I’d like to provide a deeper perspective of the issues we’re facing with digital products.
Is Multiscreen Enough? Why ‘Write Once’ Shouldn’t be the Goal
I wrote an article for UX Magazine about the potential pitfalls of Responsive Design.
The literal connotation of ”multiscreen” would be ”many screens.” Sure it’s catchy, and sounds great on marketing materials, but it’s far from accurate. Though the idea of “write once, deploy everywhere” is enticing to developers and project managers alike, should that be the goal? Granted, productivity is paramount and time is money, but simply resizing the same application to fit on multiple devices doesn’t necessarily ensure the best experience for users.
I’ve joined litl
No, you are not having déjà vu. I have accepted a position at litl, LLC and could not be more happy about being a part of such an innovative and talented group of people. Here are the FAQ: When do you start? June 21 was my first day (today). Are you moving to Boston? Even though I love it there, I won’t be moving to Boston. I will be working remotely. What will your title be? I am a Channel Developer. What will you be doing there? I’ll be joining the Channel team, developing content for the web book and the upcoming web-based TV product. I’ll also be working with the talented SDK and evangelism team consisting of: Ashley Atkins Kathyrn Rotondo Ryan Canulla and Chuck Freedman In addition of being a part of a supremely savvy company and development platform, I’ll be helping evangelize the litl SDK at various conferences and related events. My first tour stop with litl will be: Columbus Flash/Flex User Group – August 13, 2010 I can’t mention any more specifics just yet (more soon as it becomes finalized), but there are a lot of conferences left in the year and a lot of blogs to contribute to. Expect much more in the way of litl and contextual application architecture here on Commented Out and in person at a RIA event near you. So, why the move? This is a loaded question, but I’ll cover the biggest reasons. 1. Growth as a developer. Let me be clear about the folks at litl: there are a LOT of SERIOUSLY intelligent people working here, from a wide array of backgrounds. From design and UX, to OS engineering, to Flash development/SDK, to hardware integration, to marketing, there is no shortage of insight and world-class professionalism. Being constantly exposed to that level of knowledge diversity is the type of environment where you quickly can jump light years ahead in your personal abilities. It’s like the NBA players that no one knew until they played with Michael Jordan, vastly improving their skills just by being around him. 2. Being able to show my work. This sounds odd, I’m sure, but for the majority of my career, I’ve been under strict NDA, and many of you know the pain of trying to explain what it is we do. When I showed my dad litl’s site, he got super excited. “How do I set my home page to litl.com?” he asked me. Every time I talk to him now, he mentions how cool he thinks the litl web book and OS concept is. He now has something tangible that he can touch, see, and experience for himself, but more importantly, that he can show other people as a proud dad. The same goes for my wife, the ultimate salesperson, who has already started carrying the web book around in effort to draw interest from the general public. Well, that and she “loves it!” Those conversations with friends and family about what I do just got a lot easier. It also helps that I believe in litl as a platform and as a respected player in our industry. Which bring me to my next point: 3. litl has become a driving force in the Flash Platform. It’s pretty awesome to work for a company that is embracing Flash on all levels of product integration and to see that the Flash Platform itself is being furthered by the products that are being delivered by litl. I heard some great quotes from John Underkoffler (the inventor of the real-life Minority Report UI) during his TED talk on the cloud as an interface:
“The cloud IS the interface…” “… we’ve got the Web and, increasingly, the cloud, which is fantastic, but also in the regard in which an interface is fundamental, kind of a distraction. So we’ve forgotten to invent new interfaces.” And that’s exactly where litl comes in. litl’s ground-breaking OS has been so successful because of the right balances of design and development, the sweet spot of a wonderful user experience. Harnessing the cloud by way of the Flash Platform and delivering it in such a beautifully crafted package was no simple task, and yet litl presented developers and consumers with something totally new, and technologically unique. Now THAT is exciting, and a big part of my decision to come aboard. Needless to say, it’s a huge move and even a bit overwhelming, but one that I know is a step in the right direction for my family, and for my career. However, the fact that I get to work with Chuck Freedman may prove a little confusing for many. Oh, and you might be wondering about the significance of the photo above. When I got my suitcase out to pack for my trip to Boston, there were only 2 things in it: the cap I bought at my first Red Sox game, and the pack of cards that explain the design philosophy behind the litl. If that’s not a sign, I don’t know what is.
Beyond Emotion: Designing for Visceral Allure
I wrote an article for UX Magazine about the magnetism of aesthetics, and how beauty can be functional.
When we think something is cute, why do we feel that way? What is “cute”? What is it inside of all of us that is inexorably drawn to puppies, stuffed animals, and garden gnomes? We all know that we think things are cute, but few of us can explain why, or for what purpose.
The Art of HTML Semantics: Part 1
When we think about HTML semantics in 2014, we’re all pretty satisfied with the marks we’ve made.
There is section, header, aside, footer, main, and even menu! We’ve got everything we need right? Then why are we still doing things like this?
<body class="article">
<div class="content">
Being guilty of this at times while laziness or deadlines got the better of me, I decided to reacquaint myself with the intended uses of our trusty markup standard. What better place to start than the old standby, the div tag. Right away, I saw the note in the spec:
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
Off to an agreeably good start, I decided to keep skipping around, and see what other declarations supported my opinions. Remember the hr element? Well, it turns out it’s not just for drawing a chiseled, beveled, or embossed border in the middle of your screen. It’s actually very semantic.
The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.
Whoa. I was really intruiged at this point. I had to learn more! What other assumptions was I using to justify my markup?
How about the humble paragraph element?
The p element should not be used when a more specific element is more appropriate. The following example is technically correct:
<section>
<p>Last modified: 2001-04-23</p>
<p>Author: [email protected]</p>
</section>
However, it would be better marked-up as:
<section>
<footer>Last modified: 2001-04-23</footer>
<address>Author: [email protected]</address>
</section>
Or:
<section>
<footer>
<p>Last modified: 2001-04-23</p>
<address>Author: [email protected]</address>
</footer>
</section>
Ok, less impressive, but the more appropriate applications of the footer and address tags is cool. Thinking I knew all there was to know about paragraph semantics, I saw this note in the spec.
The solution is to realise that a paragraph, in HTML terms, is not a logical concept, but a structural one. In the fantastic example [below], there are actually five paragraphs as defined by this specification: one before the list, one for each bullet, and one after the list.
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul><li>wizards,
<li>faster-than-light travel, and
<li>telepathy,</ul>
<p>and is further discussed below.</p>
In other words, “there is no spoon”.
The single h1-h6 model
The HTML5 Document Outline, that allows for multiple h1-h6 tags based on sectioning roots, does not exist.
Is a concept that lives in the HTML specification, but is essentially a fiction in the real world. It is a fiction because user agents have not implemented it and there is no indication that any will. – Steve Faulkner
To be honest, it’s kind of a relief to hear this, because I never felt comfortable or totally grasped the concept of multiple h1 or h2 elements on a page. It quickly became unwieldy when trying to remember which elements began a new section context, and how many header elements I’d already used. Cheers for keeping things simple.
Marking up documentation
As I’m currently doing research on developer documentation, I thought I’d look into pre and code tags, to be sure I was using them correctly. code for inline references, like in this paragraph, and pre for longer, blockquote-style code embeds.
Well, those assumptions are mostly true, but as we’ve seen, there is usually a better, more meaningful element to use. What I found was another pair of elements that were specifically created for code documentation, kbd and samp. Why these tags are so special to me is that they solve 2 problems:
- I can now use a semantic element to distinguish between code that the user should enter (
kbd) and code that a machine outputs (samp). - I now have 2 separate CSS hooks to use to help visually distinguish these two pieces of information in documentation.
I’d never seen those applied to documentation markup before, but now I can’t imagine not using them.
Code granularity
If we want to get really descriptive, there are a couple more elements we can leverage for both machine and human-readable code markup.
The var tag can be used for marking up variables in code, and the data element is used to delineate pure data, such as the values needed in tabular information.
You might be asking what the data element offers over data-* attributes. With the data element’s value attribute present, browsers will someday be able to use it with the sortable attribute of the table element to provide a mechanism for authors and users to sort tables.Note: Browser support for the table sorting model very hard to come by, and I’ve yet to see a working example. Plus, the HTML 5.1 DOM API spec on it is kind of a mess, but when it does make it into in the wild, make sure you add the aria-sort role to the appropriate table header element. (Thanks to Ray Camden for shedding some light.)
Another highly useful element in code documentation semantics is the figure element, and it can be used for much more than screenshots.
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
Notice nothing about images specifically was mentioned. The spec then goes on to demo a code snippet marked up with figure.
<p>In <a href="#l4">listing</a> we see the primary core interface
> API declaration.</p>
<figure id="l4">
<figcaption>Listing 4. The primary core interface API declaration.</figcaption>
interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}
</figure>
<p>The API is designed to use UTF-8.</p>
Wow, that totally makes sense, doesn’t it? Think about how many books you’ve read that have this little figure element off to the side to point out a detail about a code snippet.
Description Lists: the unsung workhorses
My favorite HTML element, and in my opinion, the most underrated element in the spec, is the decription list (dl). It’s intended for marking up name-value pairs of content. This could apply to anything from a list of services offered and their accompanying descriptions, to a simple ‘previous article/next article’ component, like the one at the bottom of every article on my blog here. It’s perfect for documenting a page’s edit history, causes and effects, or, surprisingly, any list data that needs a group heading. I had no idea before reading the spec, but it’s entirely valid to have one dt (decription term) and multiple dds (description definitions). Here’s a great example from the spec, marking up variations in spelling across the English language, though the definition is the same.
<dl>
<dt lang="en-US"> <dfn>color</dfn> </dt>
<dt lang="en-GB"> <dfn>colour</dfn> </dt>
<dd> A sensation which (in humans) derives from the ability of
the fine structure of the eye to distinguish three differently
filtered analyses of a view. </dd>
</dl>
Astute readers and fellow HTML nerds may be wondering about the rarely-seen dfn element and where it fits into the semantic uses of description lists. A dfn is the element the spec describes as: “the defining instance of a term”. In combination with the abbr and a elements, one can provide a really nice UX for finding the first instance of a definiton. See this example from the spec:
In the following fragment, the term “Garage Door Opener” is first defined in the first paragraph, then used in the second. In both cases, its abbreviation is what is actually displayed.
<p>The <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <abbr title="Garage Door Opener">GDO</abbr>
and so Hammond ordered the iris to be opened.</p>
With the addition of an a element, the reference can be made explicit:
<p>The <dfn id=gdo><abbr title="Garage Door Opener">GDO</abbr></dfn>
is a device that allows off-world teams to open the iris.</p>
<!-- ... later in the document: -->
<p>Teal'c activated his <a href=#gdo><abbr title="Garage Door Opener">GDO</abbr></a>
and so Hammond ordered the iris to be opened.</p>
If you’ve ever read an ebook that has footnote or index functionality, this is exactly the same idea.
Just the beginning
While there is still work to be done on the available semantics and appropriate uses of markup, it’s nice to know that we have more to work with than we sometimes allow ourselves to believe.
In my next post, we’ll dive deeper into the HTML of tomorrow, and what it would look like if it were designed today.