Mobile Experience On A Budget

This blog is largely read by people on traditional desktops and laptops. It’s mobile usage is a bit on the low side, though that’s changing. I decided I wanted to start making the mobile experience suck less, but I didn’t want to go as far as serving a whole new experience for mobile. Responsive web design is interesting, but I didn’t want to invest so much time in it just yet.

This is still an ongoing project, and partially an experiment but here is my game plan:

Make The Standard Design Light/Flexible

The site right now is actually pretty simple in design and structure. It’s a grid layout, everything is modular and ID/classed up. I’m a slight performance junkie and graphically impaired, so image use is pretty minimal and I’ve sprited what I could to make the design as light weight as possible. The core site itself is actually just a few requests. Everything that can benefit from being so is minimized/gziped to lessen the payload down the wire. JS is only included on pages where it’s needed. Light payloads and minimal requests are the name of the game.

This benefits all platforms. Even with 45 thumbnails from Project 365 images on one page, I still can load it all about 2.5 seconds on my laptop. That’s not terrible. Some say “think mobile first”. I say “think performance everywhere”. There’s no reason why performance should be limited to mobile.

Rejigger For Mobile

Step two is to adjust the site for mobile. In my case that means hiding some less useful things, and some size and layout related changes to fit on a smaller screen. Like I said, I’m not serving up a separate mobile site. My pages are already rather light and saving 1 KB doesn’t seem worth it to me just yet. I just want my existing site to not feel like a desktop site. This is more about usability. Performance wise I optimized with mobile in the back of my head while working on the desktop experience.

I didn’t want to include a separate mobile stylesheet since my changes are intended to be subtle and minimal. Besides, that’s a separate request for mobile users. Instead I appended to my existing stylesheet with something like this:

@media only screen and (max-device-width: 480px) {
    body  {
        min-width: 0;
        width: auto;
    }
    #page {
        min-width: 0;
        width: 100%;
    }
    /* and so on… */
}
@media screen and (max-device-width: 480px) and (orientation:landscape) {
    /* landscape specific css */
}

Like I said, I intended for my changes to be pretty subtle. This works pretty well. The one thing it can’t really handle is images. I tend to be pretty light on image use, so it’s not a deal killer for me. However I may eventually look at better solutions in the responsive image world. For now I’ll just make the editorial decision to keep image use tame.

In general my philosophy has been:

  • Does this have value in a mobile context? (no: hide it, yes: continue)
  • Can I adjust the layout/design to make this not suck on mobile? (no: hide it, yes: continue)
  • Is this more work than it’s worth? (no: do it, yes: hide it)

Final Thoughts

I’ve still got some more polish to do, I know <pre/> blocks don’t look/feel right and the comments area is still not quite there. The image gallery experience is not even started. But overall it’s still better than the desktop experience I was serving just hours ago.

Perhaps one day the paradigm will shift on this blog, but I don’t see that happening just yet. Most of what benefits mobile also benefits the desktop experience. This approach gives me an improved mobile experience with minimal hassle. I also benefit from not needing two do work twice as I would if I had a separate mobile experience. That means more time to be productive.

The “gPhone”: T-Mobile G1

Google G1 PhoneSo the infamous Google Phone aka gPhone is finally out. The big news is that it is the first to run Android, which I shared my thoughts on a few months ago. Now that the press has been all over it, here are my observations:

App Store

The fact that there is no company (yet) restricting what you can install on it is awesome. Apple has seriously dropped the ball in this regard. I’m still thinking Apple will eventually loosen up just like the original “no applications” stance. I’m also thinking T-Mobile, if not other providers will want to clamp down on what users install to ensure nothing competes with their offerings and eats too much bandwidth. Not to mention security, or “security” depending on how you look at it. Just wait. They already block VoIP. It will expand in time.

The Network / Bandwidth Cap

T-Mobile’s 3G network is enough of a reason to say no. It’s way to small and new. Likely because of this, they snuck a little clause in the terms (via dslreports.com) limiting you to 1GB of 3G data, then essentially crippling the service for the remainder of the billing period:

If your total data usage in any billing cycle is more than 1GB, your data throughput for the remainder of that cycle may be reduced to 50 kbps or less. Your data session, plan, or service may be suspended, terminated, or restricted for significant roaming or if you use your service in a way that interferes with our network or ability to provide quality service to other users

Software

Android is Linux. I love Linux. That said, love polished software most of all, and I love the UNIX-ness of Linux most about Linux. That said, the iPhone’s UI is way more polished even in the demos, which we all know are way better than reality. That said, iPhone OS is at 2.1 now and Android is just taking off. There’s time for future polish.

Another gripe is the attachment to Google services. What happened to “do no evil”? Google released Chrome which kept your default search engine (even if it was a competitor). The phone on the other hand requires a Google account. Lack of Exchange support isn’t a great thing. I bet this is because of it’s open source nature. Apple simply licensed ActiveSync from Microsoft. I’m not sure if Google could do this for Android itself (though an application running on Android potentially could). The licensing could be tricky. Push mail for Gmail is a nice touch though.

Hardware

Google G1 PhoneHaving a keyboard is nice. Totally not worth the size though. USB adapter for a headphone jack? It’s 2008, that’s not acceptable. No multitouch? Come on. It does have a Qualcomm MSM7201A which is a 528 MHz ARM9 chip from what I understand. Not sure if it’s underclocked or not. The iPhone has a 620 MHz ARM11 underclocked to 412 MHz. It has 192 MB RAM compared to the iPhone’s 128 MB and a 3.1MP camera, compared to the iPhone’s 2MP. Using an SD card for storage is a mixed blessing. One one side you have expandable storage (awesome). On the other hand, no built in storage (suck). You’ll need to buy a card if you want more than 1 GB, meaning most of the hardware cost savings between it and the iPhone will be gone.

From a size perspective, it’s slightly larger in most ways and heavier. That’s likely mostly due to the keyboard.

Gizmodo has a great hands-on discussing their initial impressions. Pretty much matched my feelings from seeing the demos, and having played with the Android emulator.

So far the iPhone is still the clear winner, but it’s only one phone on the the Android platform thus far. It’s not a threat yet, but it’s not eliminated either.

Rebreaking The Web

It’s happening again. Once upon a time, browser vendors started adding their own features without consulting with each other and agreeing upon standards. What they created was a giant mess of inconsistencies across browsers and platforms that is still in effect today. Ask any web developer and they can tell you of the pains that they have suffered trying to make seemingly trivial things work everywhere consistently. It’s no easy task. Before IE 7, even an ajax required something along the lines of:

var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, …
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

That’s right, IE 6 didn’t support the native xmlHttpRequest object (more here). This is just one of many examples in JavaScript and CSS. document.all anyone?

The end result of this problem became to be known as the “Web Standards” movement. Simply put it’s an idea that code should follow a standard that results in consistent output across all browsers on various platforms. Write once, run anywhere. While it’s taken years for this to manifest, it’s slowly become a reality. Firefox, Safari, Opera have fairly consistent rendering (at least in comparison to the mess of just a few years ago on the browser scene. IE 6 was fairly poor in terms of modern web development, but IE 7 made progress, and IE 8 is Microsoft’s greatest effort to date to bring their browser up to speed.

Continue reading

Flash For iPhone

Gear Live is reporting that Flash for the iPhone is coming. Given how many times rumors like this come around, I’m slightly skeptical until I actually see confirmation for myself.

That said, if there is an implementation, I suspect it will be a special mobile version, and very MPEG-4 centric. By that I mean H.264 as the encouraged (if not only) video encoding, and AAC as the preferred audio format, with MP3.

There’s a simple reason for this. AAC, MP3, and H.264 can be processed using hardware decoding. This means the CPU isn’t needed, resulting in lower power consumption. Many mobile devices have specific hardware for this reason. There is unknown hardware in the iPhone, which may very well be for hardware decoding.

By leveraging hardware decoding it allows Apple to offer things like video without sacrificing thermals or battery life. Since Flash can now use H.264 as well, it could offload some of that complicated processing. The CPU itself contains PowerVR MBX 3D graphics.

This could allow for most Flash to work, with much lower power consumption. The downside to this is that VP6 encoded video wouldn’t be able to use hardware decoding. For many online video sites (which use VP6 since H.264 is still very new) you’d have to run off of the CPU meaning more thermals and power consumption. A notable exception is YouTube, which thanks to Google’s work with the Apple apparently uses H.264 by means of a custom application.

Google For iPhone

There’s been a lot of talk today about Google’s launch of it’s services optimized for the iPhone.

It got me thinking. Is it really about the iPhone? Or is it about mobile standards based browsers (WebKit in particular). What I’m talking about is Android, who coincidentally also uses WebKit. Call be crazy, but Google’s launch of this offering isn’t really about riding the iPhone’s popularity. It’s about being in that new mobile space. You might even say this is being tested on the iPhone, before Android comes around. No longer is mobile limited by a basic WAP deck. This one uses the same technology the rest of the web uses, only designed to look and function well on a small screen by people with giant clumsy fingers.

This space isn’t limited to just WebKit. Gecko has made some headway into the market (mainly via Nokia devices), and is preparing to make a big effort in the near future to bring Firefox Mobile to your phone. Most iPhone sites look pretty decent in Firefox already, the main thing that makes some of them look a little funny is a css property or two it doesn’t support, for example -webkit-border-image which has become pretty popular for sites only targeting WebKit since it’s pretty handy. Some sites also use -webkit-border-radius, which is supported on Firefox, as -moz-border-radius both of which follow the border-radius specs as part of CSS3, but are still namespaced for the moment.

For once we don’t have to learn another silly markup, and be limited by lack of JavaScript which has made the web a better place… for the most part (think Gmail, Google Maps, etc.).

It’s some very cool stuff. I’m really interested to see what comes.

iPhone/iPod touch SDK On The Way

Readers know I’ve been big on Apple opening up the iPhone/iTouch to developers since the beginning. Apple finally came through announcing a SDK will be made available, though not until early next year. It specifically noted Apps will work on the iPod touch as well. About time. All of a sudden these devices went from being cool, but not really worthwhile to having massive potential. Still missing on the iPhone is 3G, but that’s coming, and likely in an ’08 refresh of the product line.

Gizmodo has an interesting banner on top of their coverage of the announcement. Notice the positioning of the Firefox logo. This comes pretty soon after the announcement of the Firefox Mobile effort. Provided the SDK provided is good enough, I think there’s a pretty good chance we will see a Gecko product on the iPhone in the not too distant future. For quite some time it will likely be Minimo based and very simple, not the more robust plans which require Mozilla 2.

On a side note, I’m surprised nobody has managed to get Linux running on the iPod touch yet. I thought that would have happened by now. The iPhone would be somewhat pointless since getting the phone functionality to work would be a real battle.

Some sort of simulator/emulator to aid development would also be interesting, though I don’t think that’s very likely.

Overall it’s great news. Lets see that SDK already!

Below is what was posted on Apple’s site today

Continue reading

Firefox Mobile

I am really glad to see the new Mozilla Mobile initiative. Mozilla 2 is a great time to undertake most of these changes. The thing that really sucks about developing for mobile devices is the browsers are pathetic at best (with the notable exception of the iPhone). Wireless speed is still an issue in some cases, but with 3G coming about, it’s not the biggest concern if you can manage to keep things slim. XUL on mobile will be very interesting. If done right, it would allow for client side applications that don’t suck, yet have the lowest barrier to entry (JS+XML = Easy). Not to mention you can target a bunch of devices with one download and code base. Don’t forget you’d still be able to do rather realistic debugging on your desktop.

Hopefully by the time this all comes around, data charges for mobile will drop significantly. The iPhone is still $60 for the cheapest plan. If you need more than 450 minutes of voice, you’ll be spending even more. While interest in the iPhone is high, between hardware and plan costs, I think it’s still to high to attract the masses. There’s still time. Firefox 3 isn’t even out yet. Mozilla 2 is still a little while away. I suspect these prices will be dropping as other providers try to compete with the iPhone. A price war is very likely.

One question remains: will it run on the gPhone?