Learning about CSS Layers

So, the latest chapter in my adventure to contribute to the upcoming Ubuntu Ubiquity Slideshow, it so convince the developers that my latest proposed designs won’t cause too much trouble when it comes to producing translations for all the differenent languages that Ubiquity supports.  I am by no means a CSS guru, but I have a strong feeling their concerns can be neatly resolved using CSS Layers and Absolute Positioning.

First Layer:1

With second layer added:

2

With third layer added:

3

With forth (and final) layer added:

4

* The first layer is devoid of any localization.  It will be a single graphics file.

* The second layer just overlays the localized text on top of the first layer.  (This layer can also be a single graphics file.  In my thinking, it may be much easier to position this single layer once, than having to position each separate text element separately.)

* The third layer overlays the text bubble and drop shadow.  This can also be a single graphics file.

* The final layer overlays the text for the text bubble.  This text can be plain html.

In terms of how much space it will take up on the Ubuntu LiveCD, only the first layer is of any substantial size.  Separating-out this layer, and the third layer (the text bubble layer) from the rest, allows for 100% reuse for all possible translations.  The remaining textural layers will certainly be much, much smaller files, thereby minimizing the impact on how much space is taken for localization on the LiveCD.

For now, I think I need to speak to people who know much more about CSS than I, to find out if in fact my ideas are true, and if so, how difficult and feasible they may be to implement.  (Basically I need to verify if my thinking here is correct, and that CSS is capable of overlaying layers as I have described.)  If you happen to be one of such individuals, please feel free to leave a comment here, or instead, if you want the slideshow developers to see them, I suggest you do the following.  First, head over to Launchpad.net, and register for an account.  Then, go to the project page and ’subscribe’ to the Team.  When you get approved they will send you an email.  Then, you will be able to post to the mailing list, and you will be mailed copies of all the new posts to that list.

As always, I look forward to hearing your feedback.  Stay tuned, and we’ll see how this plays out.

Some more slideshow mockups

The Ubuntu Ubiquity slideshow must be limited in how much memory it can take up on the Ubuntu Live CD.  That’s why I still can’t comprehend why it is being built with WebKit and Javascript, and the slides are CSS/HTML.  WebKit seems like a pretty heavy mechanism to use, if all you need to do is to shuffle through a few slides.

I think the whole thing could be much simpler if it was an old-fashioned image slideshow, using .jpeg slides.  That way, instead of spending all those Megs on the Install LiveCD on the mechanism (the slideshow), we could spend more Megs and effort on the content (the slides themselves).  For all the Megs we’d save by ditching WebKit, we’d be able to make more attractive image slides, and still  have many Megs to spare.

I submit, my latest improvements for how those .jpeg slides might look.

Original CSS/HMTL slide:

Click to enlarge
Click to enlarge

… and my own .jpeg slides (still, a work in progress):

Click to enlarge
Click to enlarge
Click to enlarge
Click to enlarge

* I’ve kept to the original dimensions, though I could make these slides smaller.

* The slides are heavy on image, light on text, making it easier for the viewer.

* Each slide is only trying to convey one simple and direct message.

* The text “bubbles” are brightly-colored, with a slight gradient, and a drop shadow, all to grab attention, but in a way that is non-intrusive.

As always, I’m interested in any feedback on these designs.  Anyone can feel free to post comments here.  If, however,  you want the slideshow developers to see them, I suggest you do the following.  First, head over to Launchpad.net, and register for an account.  Then, go to the project page and ’subscribe’ to the Team.  When you get approved they will send you an email.  Then, you will be able to post to the mailing list, and you will be mailed copies of all the new posts to that list.

As always, I look forward to hearing your feedback.

My second mockup suggestion for ubiquity slideshow

Having listened to the comments made about my previous attempt at producing a mockup for the upcoming Ubiquity Slideshow , I decided to give it another crack.  This time, I’ve only made some subtle changes to the original.

Original slide:

Click to enlarge.

Click to enlarge.

My second attempt at producing a suitable mockup:

Click to enlarge.

Click to enlarge.

* I’ve removed the border from the ‘smiley’ slide, (which, to me seemed unnecessary), and repositioned it, accordingly.  I think the border made it look ‘boxed in’ and ‘cookie cutter’.

* You’re already familiar with my subtle changes to the text, in my attempt to use language that is more personable.  I would be happy to go through the text of all the sides and recommend any textural changes, if that would be welcomed.

* The URLs are now just bolded blue links within the paragraph of text.

* The top margin is similar to my previous design, with the accent colour changed slightly to fit.  (By the way, the “4 of 12” page count is centred on the icon below it.)

* I’ve increased the slide’s height slightly, because I felt I needed to do so in order to give more whitespace for the title.  The dimensions are now 700 x 460.

As always, I’m interested in any feedback on these designs.  Anyone can feel free to post comments here.  If, however,  you want the slideshow developers to see them, I suggest you do the following.  First, head over to Launchpad.net, and register for an account.  Then, go to the project page and ’subscribe’ to the Team.  When you get approved they will send you an email.  Then, you will be able to post to the mailing list, and you will be mailed copies of all the new posts to that list.

As always, I look forward to hearing your feedback.

My mockup suggestion for ubiquity slideshow

Update: Sorry, I apparently didn’t have the proper ‘before’ slide.  I assure you, it was an honest mistake.  The proper slide is now shown below.

***

In case you haven’t heard, Ubiquity, the standard Ubuntu installer, is getting a slideshow.  That way you have something to look at while it’s busy installing packages on your system.

Well, thanks to my recent interest in Ubuntu Teams, as alluded to in my previous post, I decided to become involved, and joined-in the IRC chats at #ubuntu-doc.  After some talks, back and forth with Dylan McCall, who is the project maintainer at the Launchpad page, I decided to give my own artistic skills a try, and came up with my own mockup of how the slides could look.  So, here I present the ‘before and after’, and let you, the audience decide what they think of my improvements on the existing design.

Before:

Click to enlarge.

Click to enlarge.

After:

slide-after

Click to enlarge.

I did a lot of changes, as you can see:

* Playing it safe, I chose a 800×600 canvas size.

* The top and bottom margins serve two purposes.  They provide ambiance and enforce the brand identity, while also allowing us to more gracefully scale to smaller display dimensions.

* In the top margin, we have the page count, and the “remind me of this later” bookmark functionality.  I’ve chosen to use the firefox bookmark star, for familiarity and consistency.  In a similar fashion, the star can be hollow when de-selected.

* The smiley is from Pidgin (/usr/share/pixmaps/pidgin/emotes/default/smile.png)

* The bottom margin can be used to display the slideshow controls, or just simply left as is.

* I’ve used only a single ‘slide’ (which is only 16.6 KB), but it’s the most important one to display, as it shows the end-user exactly where to look for additional help.  The slide will need to be “re-shot” in various languages, though.  ‘Slides’ on other pages need not be of identical size, nor even have the same location on the page.  On the left or right, slightly higher or slightly lower, it is good to vary the presentation, which makes the pages more memorable, less predictable, and therefore less boring.  (Buy the way, can we possibly change the terminology here?  Referring to the inline images as ‘slides’ is a bit confusing, when in fact, the entire ‘page’ is itself the slide in a slideshow.  Maybe “snapshot” would be better?)

* I’ve made some subtle changes to the text, mainly to make it feel more personable – after all, isn’t Ubuntu all about making the experience of technology more personable?  Maybe we can work with the translators, so that an equally welcoming and personable tone will be conveyed in all translations.  I’ve also added headings and bolded certain phrases for easy visual scanning.

* I’ve placed the URLs within the Firefox-3 address bar (aka “Awesome Bar”) – which is precisely where the user will no doubt be placing them.  I like the idea of presenting information within the same visual context as it will be used — this applies to the snapshot as well.  In addition, presenting the URLs this way draws visual attention, and breaks up a block of otherwise just plain text.  It would also be cool if we could make those images link to the URLs, such that a user could simply click on them to open up the webpage in a browser.

* From the wallpaper (which appears in the top and bottom margins, as well as the snapshot) you can see I’m running Hardy.  I’m undecided if it should be changed to the Karmic wallpaper or not.  I’m concerned that if we use the Karmic wallpaper, that would only make it stand-out less when displayed on the Karmic desktop.  What do you think?  Another option is, if we diliberately avoid matching the current (ie. Karmic) wallpaper, then I think we could instead have each page/slide be represented by a different wallpaper from a past Ubuntu release (eg. slide ‘1 of 12’ could use Gutsy, slide 2 could use Intrepid, etc.)  This could heighten visual interest, and act as a kind of hommage to Ubuntu’s past.  Plus, it communicates diversity, by showing the plethora of Ubuntu animals.  The only complication this raises, is that the accent color (in this case, the yellow text) might have to change with each wallpaper as well.

* Overall, it’s a well-blananced composition, with some variety, and multiple points of interest, which keeps the eye moving and engaged.  I dare say it’s quite handsome 🙂

So, what do you think?  Obviously you can post your comments here, but if you want the slideshow developers to see them, I suggest you do the following.  First, head over to Launchpad.net, and register for an account.  Then, go to the project page and ‘subscribe’ to the Team.  When you get approved they will send you an email.  Then, you will be able to post to the mailing list, and you will be mailed copies of all the new posts to that list.

I look forward to hearing your feedback.

******************

New:

I’ve come up with a couple of alterate slides, with some subtle changes from what I’ve done above.

Click to enlarge.

Click to enlarge.

Click to enlarge.

Click to enlarge.

Idea: Ubuntu User-Experience Teams.

I’ve submitted this idea to the Ubuntu Community Council.  (Hopefully I’ll be able to write back soon and tell you they love it, but we’ll see.)

Brief:

Mark S. wants to make Ubuntu more appealing to users.  I feel Ubuntu would better achieve this by instituting a new set of Teams which would run alongside the existing group of Teams.  We already have Teams whose primary focus is on implementing (in many cases, this means coding) direct changes to the system.  What is missing is a set of Teams to identify and address the experiences that Ubuntu is delivering to users, purely from a user-experience perspective.  We need to shift the focus away from “How we build the system” and shift it towards “What experiences are users having of the existing system, and how can we improve upon that?”  It’s all about delivering experiences.

Detail:

In their landmark book, “Design Patterns”, the Gang of Four espouse the virtues of designing for the interface, not the implementation.  Right now, Ubuntu is designing for the implementation, not the interface (which for our purposes, is the end-user experience.)

Ubuntu Teams are currently built around how they are implementing various parts of the system.  I call these ‘coding teams’.  We have coding teams for implementing the various Ubuntu derivatives like Kubuntu and Edubuntu, teams for implementing server support or laptop support, teams for implementing artwork, teams for implementing assistive technologies, teams for implementing documentation, and so forth.  It’s an implementation-focused approach.  It’s all about *how we build*.  Now, there’s nothing wrong with being interested in how we build, and really there is nothing wrong with keeping the existing ecosystem of coding teams.  I, however, feel we can do better, and should do better.  I feel we need to extend our consideration beyond simply *how we build*, to encompass *how we impact the user*.  We are not just delivering software, we are delivering an experience.  To that point, I feel it would be good to create a parallel set of teams, whose primary goal would to a) identify and b) evaluate the experiences that Ubuntu is delivering for certain types of users.  I refer to these new teams as ‘Experience Teams’.

Take for example, the first-time user.  We could have a ‘Welcome Experience’ Team (WET).  It could consist of people from a variety of coding teams.  The WET would meet to discuss the various experiences Ubuntu delivers to its new users.  They are not interested in anything but cataloging a) what new users might be interested in, and b) what impressions they might be having of how things currently are:

* how do people first learn about the existence of Ubuntu and Linux in general?

* how do first-timers go about downloading and test-driving Ubuntu?

* what are the various support, hardware and other issues that may be of concern to them when they are doing this ‘test drive’?

* what might their first-time installation issues be?

* how do new users feel about navigating and maintaining their systems, once the install is complete?

Basically, Experience Teams are trying to “look through the eyes” of an imaginary Ubuntu user who has certain limitations, interests and concerns.  It doesn’t matter which coding teams the members of WET are part of (if indeed they are a part of any), only that they are good at relating to this imaginary Ubuntu user – in the case of WET, the first-time user.

Experience teams, like the WET, are not concerned with coding.  They are not implementation-minded.  They are, instead, interested in cataloging the a) Interests and b) Impressions that users might be having for their particular Experience Domain.  For example, the WET might identify the following for first-time users:

a) Interest:  I’d like to see if Ubuntu is for me, maybe take it for a ‘test drive’, but how exactly do I do that?

b) Impression:  Overwhelmed and confused by the Ubuntu.com website.  Not immediately knowing how to obtain that information.

The WET could deliberate if this was an issue that should be considered for implementation.  (“Is it really an issue that new users might want to give Ubuntu a try, but are unsure what steps that would take, and how they would go about it?”)  They could discuss the issue amongst themselves, or instead they could put it up to a vote on Brainstorm, or at the next UDS.  In any case, there needs to be some way of deciding which ideas are to be ‘greenlighted’ for implementation.  If an idea was greenlighted, the WET would need to discuss which coding teams need to be contacted in order to start the appropriate work order.  The WET would check on the status of WET-related work orders.  When work orders were completed, they would evaluate the effectiveness of implementations produced by the coding teams, to see if they succeed at satisfying the Interests and Impressions which they had previously identified.

We could have Experience Teams for various Use Cases, such as:

* a ‘New Software Experience Team’, representing users who are adding, configuring and updating software.  (Who might ask, “What might a person wanting to install new software be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

* a ‘New Hardware Experience Team’, representing users who are adding new hardware.  (Who might ask, “What might a person wanting to install new hardware – including assessing hardware compatibility before purchasing said hardware – be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

* a ‘Media Playback Experience Team’, representing users who are concerned with multimedia, pluggins and codecs.  (Who might ask, “What might a person wanting to listen to music, watch videos or slideshows, view and organize photos, or play games be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

* a ‘Contacts Experience Team’, representing users who are concerned with online communications such as email, Twitter, IRC, IM, etc.  (Who might ask, “What might a person wanting to initiate or renew electronic correspondence be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

* a ‘Community Help And Participation Experience Team’, representing users who are addressing issues, inconsistencies, bugs, reporting and community support.  (Who might ask, “What might a person wanting to get help with <fill in the blank> be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

* a ‘Look and Feel Experience Team’, representing users who are concerned with visual appeal, notifications, visual affects (including optional compositing), locating, creating and submitting community artwork, etc.  (Who might ask, “What might a person wanting to tweak and customize their system be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

* a ‘Fiasco Avoidance and Recovery Experience Team’, for identifying, avoiding and recovering from fiascos (like PulseAudio on Hardy, or Intel Video driver on Jaunty) thereby helping keep the Ubuntu-rage on the forums down to a minimum, and keep the Ubuntu name and reputation in high regard.  (Who might ask, “What might a person wanting to find how other people have addressed a particular problem be interested in?” and “What might their current impressions be of how Ubuntu delivers on that now?”)

Experience Teams would frequently ask questions like:

“How did the user know where to look?”

“How did the user know what that was called?”

“How could that be made more evident, more obvious, more straightforward?”

People could rotate through Experience Teams, maybe once per development cycle.  (In a year, each Team might lose and gain 2 new members who came from other Teams.)  In that way, there would always be fresh perspectives, new questions, new approaches, ideas would pollinate.  As well, Experience Teams could share the questions, techniques and approaches that have been effectively used by other Teams.

Perhaps there is a step between when a Team ‘greenlights’ an idea for implementation, and the delivery of the work order to the Coding Team.  Perhaps the greenlighted idea first needs to be given to the Look and Feel Team, or some other Team which ensures that whatever gets implemented is done in such a way as to present a *consistent* experience to the user.

In closing, there is certainly nothing wrong with the current system of Ubuntu Development Teams.  I am merely suggesting they could be made to work more effectively, and to produce a higher quality product (and end-user experience).  There is nothing wrong with being concerned with implementation, but that should not come at the expense of considering what experiences are being delivered to the user population by those implementation choices.

Adobe Flash’s lackluster performance vs. the promise of HTML-5

It’s Linux’s dirty little secret.  None of the Linux distributions advertise it.  Certainly no one will mention it when they are trying to convert you away from using Windows.  Despite it all, the fact remains, the day you become a Linux user is the day you become a second-class citizen as far as Flash video playback goes.  Now, all those sites that host those video clips you like so much to watch (YouTube, Hulu, DailyMotion, Vh1, etc.) suddenly smell a lot less sweet.

For some time now, Linux and Mac users alike have been quite disappointed, and even irate, at just how poorly the Adobe Flash Player performs on their systems.  Some complain of choppy video playback, while most (myself included) are upset at it’s high CPU usage.  I can pretty much forget about playing Hulu videos at full screen.  Sure, my laptop can do it, but the CPU revs so high that the fan has to stay on the whole time at full-blast.  Besides being noisy and eating up battery charge, that’s a good way to shorten the lifespan of your computer, so instead I’m relegated to watching videos in a small box on my screen (and even then my fan huffs and puffs from time to time).  I don’t know about you, but I’m just plain getting fed up

Sure, there are some open source flash implementations – most notably swfdec and gnash.  Both, however, are much less mature and less feature-complete than the official player, which means they won’t be able to play nearly all the videos you might have hoped.

Maybe somebody out there is listening.  It seems some industry giants share my dislike of Adobe Flash.  Both Apple and Google have so far been giving Flash the cold shoulder on their respective mobile platforms.  Both the iPhone, and Android-powered G1 do not as of yet officially support Flash (nor are there any official plans for them to do so in the future, so far as I know.)

There is even some better news.  A brave not-so-few are leading the charge for alternatives to streaming video with Flash.  Ars writes how HTML-5 may usher in the migration towards an open video standard based on open source and patent-free technologies like Ogg Theora. If you want to see how things are shaping up, you can download the latest Firefox beta,(which comes with built-in support for HTML-5) and then head over to some of Google’s own demos, a YouTube mockup, or perhaps DailyMotion’s OpenVideo site (which was recently announced.)  There’s even an OpenVideo Conference later this month, in which some of these, and other developments will be discussed.

Let’s hope something good will come of all of this soon.  Displacing Flash from it’s dominant position for streaming internet video will certainly not happen overnight.  It will take a persistent and dedicated effort by technologists, programmers, content providers, content portals, browser makers, W3C, and us end-users.  Fortunately, all the pieces seem to be coming together.  Having a friendly giant in your corner doesn’t hurt either.  It’s recent announcement of Google Wave (an HTML-5 based web app), the fact that it owns one of the leading internet video streaming sites, YouTube, their continuing and prominent sponsorship of Firefox, not to mention their industry sway and deep pockets, certainly puts Google in a strategically-significant position to push for HTML-5 adoption.

As for myself, for now I’ll just be content to sit back, and wait and see.  Maybe in a year or so I’ll be able to watch Hulu vids in full screen after all.

What I’d like to do with this site.

I’ve been an Ubuntu user for a couple of years now.  Like many people, I have my list of gripes, peeves, and things that I just generally feel could be done better.  This blog is my attempt to address those concerns, and invite others to contribute to the conversation.

I’ve just signed up for this WordPress account, so come back in a few days or so, and see how things are shaping up.