If you haven’t seen Facebook’s “chat head” interface, here is the quick lowdown. There are little circular icons that will float on the side of your mobile device’s screen to tell you that a message has arrived from a friend. It’s part of the Facebook Home thing, but even if you are on iOS, the Facebook App uses them.  I think this will be one of those UI things you either love or hate.

However, from an HTML angle, I thought they were interesting. Could you do this interface in HTML/CSS?  The answer is yes, and it is quite easy. Just some borders, border-padding and negative margin.

Demo

That was relatively simple, but it gets more complex when you have a multi-person conversation. Facebook takes the most recent person in the thread and makes them take up half of the “chat head.” Then come the next two, taking up a quarter each.  Then the rest are hidden.

Okay, so I need to pull out of nth child magic to selectively style the first 3 items in a collection of images. Set overflow to hidden, play with some more border radii and BOOM, “chat heads” done.

Demo

Okay, so that’s all been pretty straightforward, so I’d like them to be interactive.  If I click on a multi-member conversation “chat head” I’d like it to expand out the rest of the members. This is very easy. Just a little JavaScript and some class swapping.

Demo

So done, Facebook native interface done in CSS/HTML.  But I think we can do better.  One of my issues about this interface and one that would prevent me from using it in a web based application is that it obscures the content beneath it, it just hangs out covering up anything unfortunate enough to be below it. For me, if I was using it I would want it to float instead of absolutely position. So I can do a few tweaks to make that happen. 

Demo

Now in my demonstration, I pulled the text to be right aligned instead of left aligned, to show the float edge better.  But I’m still not happy with it. Why? Because each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles.  A few weeks ago a colleague of mine at Adobe, Bem Jones-Bey wrote an article about using shaped exclusions from the CSS Shapes and Exclusion spec.  It seemed like a perfect fit.  So if you have Chrome Canary installed, and the experimental features turned on, you get a much different result:

Demo [View in Canary]

The secret sauce here being the -webkit-shape-outside property.  It basically allows me to exclude a circle from the underlying text around each of the “chat heads”. To find out more about using shape-outside, be sure to check out Bem’s article. It’s just one of the ways that the browser is becoming more capable of rendering a greater number of visual layouts and effects.

MAX is coming. I’m in total, heads down, write-the-presos mode. I wanted to share what I’m heads down working on.  I’ll have 4 sessions at MAX:

Responsive Design in Action (Lab)

This session is a lab intended to get people up and running with Responsive Web Design. We start in Reflow, to get some of the basics, and then move to code to show how to do it as simply and cleanly as possible.

Programming in CSS

This is a run down of how to be more productive in CSS.  It will include some best practices, an overview of some modern techniques, and an overview of some tools to make writing CSS less of a pain.

Goal Oriented CSS

The idea behind this session to break down a design comp, figure out how to markup the vision, and write the CSS it takes to implement it.  I’ll try and tackle a few common design metaphors in the process. A few examples: iOS buttons, framed pictures with shadows, and vignettes to name a few.

Fast Performance with CSS on Mobile

I have the pleasure of tagging along with Paul Irish on the tools and techniques of writing high performance CSS targeting mobile devices.  It will also introduce you to ways of testing on devices that sometimes may be a little bit difficult to get into.

There are tons of other sessions, and of course there is the promise of a year’s subscription to Creative Cloud for all attendees.

If that wasn’t enough, here’s a discount code for $300 off: MXSM13.

So what are you waiting for, sign up! I hope to see you all in LA!

If you haven’t seen Facebook’s “chat head” interface, here is the quick lowdown. They are little circular icons that will float on the side of your mobile device’s screen to tell you that a message has arrived from a friend. It’s part of the Facebook Home thing, but even if you are on iOS, the Facebook App uses them. I’m not sure if the non-Home Android app has them yet. Anyway, I think this will be one of those UI things you either love or hate.

From an HTML angle, I thought they were interesting. Could you do this interface in HTML/CSS?  The answer is yes, and it is quite easy. Just some borders, border-padding and negative margin. In fact if you look at the HTML, there is no extra code for style, it is done entirely in CSS.

Demo

That was relatively simple, but it gets more complex when you have a multi-person conversation. Facebook takes the most recent person in the thread and makes them take up half of the “chat head.” Then come the next two, taking up a quarter each.  Then the rest are hidden.

Okay, so I need to pull out of n-th child magic to selectively style the first 3 items in a collection of images. Set overflow to hidden, play with some more border radii and BOOM, “chat heads” done. Again, notice the minimal HTML.

Demo

That’s all been pretty straight forward, so I’d like them to be interactive.  If I click on a multi member conversation “chat head” I’d like it to expand out the rest of the members. This is very easy. Just a little Javascript and some class swapping. 

Demo

So done, Facebook native interface rendered in CSS/HTML. But I think we can do better. One of my issues about this interface and one that would prevent me from using it in a web based application is that it obscures the content beneath it, it just hangs out covering up anything unfortunate to be below it. For me, if I was using it I would want it to float instead of absolutely position. So I can do a few tweaks to make that happen. 

Demo

Now in my demonstration, I pulled the text to be right aligned instead of left aligned, to show the float edge better.  But I’m still not happy with it. Why? Cause each of those circles carve a giant square out of the text. And that’s kinda lame because they’re circles. And it makes the choice to hover over the content below, instead of floating, more attractive.  

However, a few weeks ago a colleague of mine at Adobe, Bem Jones-Bey wrote an article about using shaped exclusions from the CSS Shapes and Exclusion spec.  It seemed like a perfect fit.  So if you have Chrome Canary installed, and the experimental features turned on, you get a much different result.

Demo [Open in Canary]

The secret sauce here being the -webkit-shape-outside property.  It basically allows me to exclude a circle from the underlying text around each of the “chat heads”. Now that looks awesome, and I’d definitely prefer that to obscuring the content below. And CSS wise, it was one of the ligher hacks I had to do. To find out more about using shape-outside, be sure to check out Bem’s article. It’s just one of the ways that the browser is becoming more capable of rendering a greater number of visual layouts and effects.   

This has been tested in the latest Chrome, Firefox, and Safari versions. Everything seems to work cross browser except the features that only work in Canary. I haven’t tested in IE yet.

Max is coming. I’m in total, heads down, write-the-presos mode. I wanted to share what I’m heads down working on.  I’ll have 4 sessions at Max:

Responsive Design in Action (Lab)

This session is a lab intended to get people up and running with Responsive Web Design. We start in Reflow, to get some of the basics, and then move to code to show how to do it as simply and cleanly as possible. 

Programming in CSS

This is a run down of how to be more productive in CSS.  It will include some best practices, an overview of some modern techniques, and an overview of some tools to make writing CSS less of a pain. 

Goal Oriented CSS

The idea behind this session to break down a design comp, figure out how to markup the vision, and write the CSS it takes to implement it.  I’ll try and tackle a few common design metaphors in the process. A few examples: iOS buttons, framed pictures with shadows, and vignettes to name a few.

Fast Performance with CSS on Mobile

I have the pleasure of tagging along with Paul Irish on the tools and techniques of writing high performance CSS targeting mobile devices.  It will also introduce you to ways of testing on devices that sometimes may be a little bit difficult to get into.

There are tons of other sessions, and of course there is the promise of a year’s subscription to Creative Cloud for all attendees. 

If that wasn’t enough, here’s a discount code for $300 off: MXSM13.  

So what are you waiting for, sign up! I hope to see you all in LA!

Update: My original post was picked up by some Animate engineers who took issue with and corrected my mistakes. Looks like I was going off old or bad information. I have left the original text but crossed it out and italicized new info.

I got asked this question this week in person and on Twitter, so I thought I would answer it in a blog post because I need more than 140 characters to answer it, and would like to refer people back to this:

Do animations created with Adobe Edge Animate take advantage of the GPU?

The answer is “No, not for now.”

The answer is not on every platform, but on WebKit it is. This means that Chrome, Safari, Android Browser (Pre Chrome), Mobile Chrome and Mobile Safari animations do get hardware accelerated performance from items that are either a change of opacity or a transform, which is what CSS hardware acceleration supports. Other browsers on desktop may or may not support hardware acceleration, but on mobile, most of your browsers are doing it.

The technical reason for this is that in order to take advantage of the GPU for animation in a browser you have to use CSS transitions and animation. Not every device has the ability to do GPU based, or hardware accelerated CSS.  As far as I know there is no way of knowing in JavaScript whether the browser you are running in has hardware acceleration enabled. If you don’t have hardware acceleration then CSS transitions and animations can be a little slow.  Here’s a more in depth article explaining all this at User Agent Man.

One of the goals for Adobe Edge Animate was animations that worked on as broad a range of devices and browsers as possible – not just the most cutting edge devices.  We wanted to build a tool for today, not tomorrow. So for that reason the Animate team chose to do its animations with JavaScript, and focused on getting the underlying animation framework to be as performant on as many places as we can.

Adobe Edge Animate is pretty flexible in that all of the animation data is stored separately in your project from the animation framework that enables it.  The development team have made it clear that when the medium is ready for it, they can make the change from JavaScript animation to CSS animation. The team has made it clear that the way they do Animation can take advantage of hardware acceleration where it is available, and that using JavaScript for animation has other benefits including support for animating other content like SVG, and increased flexibility and specificity (you can target different properties on the same item with different changes over time).

But of course there is more to it.  Because the human reason behind this technical question is:

Will Adobe Edge Animations run well?

Well that depends:

• How many individual things are you trying to animate?
• How many of them are on the screen at the same time?
• How many of them are moving at the same time?
• How many different animations do your things do?
• How many of those things are images?
• How big are those images?

Obviously, the more you have of any of these properties the slower your animation will be. In my experience the biggest factor in speed was image size, but your mileage may vary.  In short, you can definitely create things with Animate that are slow, just as you can create things that are fast.  The key here is testing. You need to see Animate animations run on your various target platforms, because at the end of the day what you are really asking is:

Will Adobe Edge Animations run well for me?

And I can’t answer that. I have no idea what you will judge as “fast,” “slow,” “fast enough,” or “too slow.” Only you can, so give Adobe Edge Animate a test run with your ideas and see how it does. By the way it’s free for a limited time..