Ubuntu and Touch

Watching this video of Ubuntu’s touchscreen functionality in action is pleasing, but not exciting. There’s nothing really revolutionary going on here. Open-source has been dragging it’s feet on touch for a while, and this is just Ubuntu finally catching up to where it should have been a couple years ago. On the other hand, it also highlights a significant problem with a lot of current thinking about touch, and consequently casts Ubuntu in a pretty good light.

There’s no shortage of screeds and critiques aimed at the very concept of the tablet. These devices have been dismissed as toys, fads & unnecessary luxuries. But all the criticisms I’ve seen so far miss the point. Touch isn’t about tablets vs notebooks. In a few years, computers will just all have touchscreens, and users will operate them by keyboard, mouse or touch as needed. This video demonstrates that Ubuntu is being designed in this direction, as are iOS, Windows 8 & Android.

Users of all systems will benefit from touch, not as an alternative input option, but an additional one. And in this respect I think Ubuntu has a pretty good lead. Apple is carefully building iOS up to being it’s de-facto operating system for casual use. Google is pushing Android and Chrome OS in the same direction. Microsoft is offering both Metro and it’s regular desktop in Windows 8. These are all interesting strategies, but just don’t seem all that compelling next to Ubuntu. With Ubuntu you get a fully-fledged OS, with the same interface and applications on whatever device you happen to be using. And all this for free.

Hopefully, Canonical will get this to where “it just works” ASAP, and Zareason will finally start selling that open-source tablet it’s got waiting in the wings.

CSS3 3D Slide Bugs

I made the rash decision to do the slides for my Wordcamp 2011 presentation using 3D CSS and touch events on an iPad. I felt this was in the spirit of things, since I was talking about mobile theming. I realized, too late to change my mind, that it would be harder than I thought.

The main problem was getting the touch powered buttons to work with the 3D structure. Both of these things, by themselves, are easy to set up. The code I used for my touch powered buttons I mostly just stole from this post by developer Seb Lee-Delisle. The 3D stuff I mostly learned from this article on 24 Ways by David DeSandro.

My plan was to be able to rotate the carousel by touch: just drag it back and forth and have it snap into place. But while tracking the movements of a finger across the screen was easy, taking that value and turning it into degrees of rotation for the carousel was a bit much to have done in time for Wordcamp. So instead I just stuck in some buttons that rotated the carousel by 36 degrees (there are 10 slides, so 360 / 10 = 36.)

The result of this harried, hackish approach is that my slides are pretty buggy. As it turns out, this isn’t such a bad thing; these are easily the most interesting CSS bugs I’ve ever seen:

  • If you tap the left and/or right buttons as quickly as you can, the entire carousel gets narrower and narrower. This works with mouse clicks as well>
  • The up and down buttons on slides 3, 4, 8 & 9 only respond to taps along their left edges. Mouse clicks work normally. The only thing these slides have in common is that 3 and 8 lie along the same axis, as do 4 and 9 (when viewing slide 3, 8 is directly behind it; when viewing slide 4, 9 is directly behind it.)

Galaxy Tab 10.1

A handful of thoughts about my new tablet:

  1. Facebook is worse on a tablet, Google Plus is better.
  2. This soft-keyboard is really slow. Not to type on, though, it just lags really bad. Deleting text is painful.
  3. The WordPress admin panel works better than Fluency Admin. But still not smoothly.
  4. The little code buttons on top of the post editor work really well on a touchscreen. I’ve never used them before but on this tablet I love them.
  5. Android’s tablet UI is better than iOS, but is generally kind of jerky when stuff starts moving around.
  6. I likr the 2011 theme on a tablet more than I thought I would. It feels better here than it does on a phone.

2011′s Tiny Pixel Cloud

Aside

I was excited to see that WordPress’ new default theme had an adaptive layout. As it turns out it’s not that adaptive. It only has two layouts, one for large screens and one for phones. This is a problem on my iPod. Turning it horizontally, the whole page just scales up to fit the width of the screen, and the little magnifying glass in the search box — already pixelated in vertical orientation — becomes a little magnifying glass-shaped cloud.

Maybe that’s a minor detail, but it’s not like it would be hard to fix.

The Travails of Mobile

It’s been too long since I’ve posted here. I’d like to write about all the fascinating things I’ve been doing. Unfortunately, there’s really only one thing, and it’s only fascinating to certain people. But it’s the only thing I have to write about, so here it is.

I’ve been working on a new theme for my site, one that will play nice with mobile browsers. I thought it would be easy. I thought I would just copy some stuff out of the Mobile Biolerplate and stick into my theme and that would be that. But it happens to be more complicated than I thought.

So I decided to make understanding this stuff a project, something I would spend time on and labor over and work through with fear and trembling. Initially, this meant going through the MBP line-by-line, scouring the docs and blog and drawing out the reasoning behind what was in there and why it mattered. But this soon broadened into a search across various sites looking for more detail on things like viewports and font formats and conditional Javascript.

So now, after about a month of sifting and sorting, I’ve got a nearly finished theme. What I had intended as a lyric has grown into an epic, and not a very good one. But it has accomplished it’s purpose. I get the whole mobile thing now, and hopefully will find time soon to begin a more polished attempt. In the spirit of my unexpectedly long and difficult journey, I’ve named the theme Odysseus, and will activate it on this site once I’ve ironed out the last few wrinkles.

Now that I think of it, I should have blogged this whole project as I worked on it. >:|

Less.js has Saved my Life

So, I just included the Less.js library in my site’s head and now I can write stylesheets in Less. It’s that easy.

This comes as a very welcome relief after all the overhead involved in getting Sass to work.1

Unfortunately, Less.js won’t work in Chrome if the files are local, they have to be on a server. I’m pretty sure this is Chrome’s fault (it’s penchant for idiosyncratic behavior is well known.) Once this is fixed, though, Less.js will be pretty much perfect.

  1. Install Ruby, Rubygems, Haml and Compass; set up a Compass project and point it to the appropriate files; finally, command Compass to “watch” whenever you’re working on those files, so you don’t have to re-compile after every change. []

This Site Needs a Makeover

So after trying thematic and hybrid, and playing with toolbox for a while. I’ve decided it’s time to write a theme from scratch. I haven’t done this since I first got into WordPress a few years ago (I can’t believe it’s been that long), so it’ll be interesting to see how all the new features alter the process.

I’ll also be designing for mobile first and desktop second. I’m actually really excited about that, since smartphones and tablets can orient vertically, which allows for a lot of more traditional, bookish page layouts. My lifelong fascination with books and book design has always been at odds with the conventions of Web design, defined as they are by landscape-oriented desktop monitors.

Ubuntu has a Sense of Humor

Aside

Looking through the files of Nicole Sullivan’s OOCSS, and I find the README.md file. Try to open it, and Ubuntu says:

Could not display "/home/jordan/web-dev/new-the...nella-oocss-d4c6914/README.md".

There is no application installed for Genesis ROM files

Heh.

Mercenary Innocence

N+1 has an excerpt from an article by the editors posted on their site. It considers the history and nature of elitism in the U.S. While the whole thing is worth reading, the following paragraph stood out to me:

Still, elitism, that widespread term, usually refers to a much narrower phenomenon than just a fancy education. Recall that in 2004 the educational backgrounds of the cultural elitist John Kerry (St. Paul’s, Yale) and the cultural populist George Bush (Andover, Yale) were remarkably similar. Kerry’s elitism signified not that he had gone to such schools but that he appeared to have learned something there, including—l’inutile beauté—French. The ineducable Bush meanwhile suggested solidarity with the uneducated. A Harvard MBA merely proved that any interest he had in knowledge was purely mercenary. In a business society where mercenary motives constitute a kind of innocence—It’s my fiduciary responsibility to increase shareholder value is our I was just following orders—this much could be forgiven.

I’ve certainly heard that excuse more than a few times.