Email not displaying correctly? View it in your browser.

Issue 53: December 2nd, 2008  The Useful and the Usable in Web Design

Introduction

Alex WalkerWelcome to Design View #53.

It's funny how it always seems to be the limitations of a medium that give it its signature flavor. Take the hiss of AM radio, the staticky snow of TV, or the scratches on vinyl records.

TwitterWith Twitter it seems to be an artificially imposed restriction -- its strict 140-character limit -- that has given it its original but very successful edge.

We use and love Twitter at SitePoint and, in case you missed it, we're showing our love with a free book.

Here's the deal:

Now this is a cracker of a book -- less than 18 months old and written by a dream team of CSS gurus.

If Twitter doesn't appeal, remember that creating an account is free, and what you do after you receive your book is up to you.

The offer expires on December 9th, so shake a leg!

In this issue, we'll talk about some of the ideas on mobile development I took away from the Web Directions South conference.

Enjoy,

Alex Walker
Editor
SitePoint Design View

Top

Domain name for only 99c?

Powerful and straightforward. Ultra-reliable and cutting edge. Web hosting can be all these things -- and great value for money.

Webfusion.com
  • 99c domain name
  • 400GB web space
  • 50,000GB traffic
  • 100 MySQL databases
  • 5,000 email boxes
  • PHP 4 & 5, Python & Ruby

We have the complete package: powerful, affordable hosting that's also easy-to-use and backed by 100% free 24/7/365 support. Get your 99c domain name now!

Summary

When I Grow Up, I Wanna Be ... a Mobile App Designer

"Aww ... do we have to?"

That would have been my response to the idea of developing a mobile site for most of the last 10 years.

To me, developing for mobile always felt like this:

  • take your standard cool site
  • rip all the nice stuff out
  • squash what's left into a chintzy, low-res screen

It was like the Web, but only remotely as good.

Then the Web Directions South conference, back in September, forced me to reconsider that idea. You see, until recently the iPhone stood alone. You could build a cool app for it, but porting your work to a Motorola or Nokia was a waste of time.

The Google PhoneWith the October release of the Google phone, G1, we now have the foundations of a brand new product category to build for.

Tim Lucas referred to this new class of devices by the rather coarse-sounding title of SHITDANG phones, or Super Hot Internet Touchscreen Devices And Next Generation phones.

In the interests of simplicity and arguably good taste, we might just refer to them in this article as Mobile 2.0 phones.

So, what do you mean by a Mobile 2.0 phone?

At this moment in time, I'm specifically talking about the iPhone, the G1, and any upcoming Android-powered device. Some have included the BlackBerry models Bold and Storm in the category but personally, I remain unconvinced.

No doubt there'll be some saying "Oh, but what about my Win Mobile/Nokia E95/other smart phone? That's a Mobile 2.0 phone, right?"

Sorry. While these are all great phones, phones are what they are to their core.

With Android and the iPhone OS, we're talking about platforms where traditional phone, SMS, calendaring, and email services make up only a small percentage of typical user tasks.

Look on iTunes App Store and the Android Market and you'll see most of the development energy is going into apps like games, location-based services, and social networking -- almost anything apart from traditional phone services.

So, why should I become excited about Mobile 2.0 development?

Mobile 2.0 phones are changing the idea of what an application is -- both for us developer/designer types and for users.

In part, this is because of the improvement of mobile screens and browsers, which are enabling sites to look and work more like standard desktop web sites. But mainly this is because the mobile environment itself is arguably a much more dynamic and interesting arena to build for.

With a desktop/web app, we typically build an application that sits patiently and waits for the user to engage with the program. A service like eBay or Facebook is relatively comatose until our valiant user starts consciously interacting with it via mouse clicks and keyboard taps.

Mobile 2.0 phones offer us a bunch of cool, new input types to work with, relying on the user to simply just be.

These new input types include:

  • location sensors (GPS)
  • camera/visual sensors
  • accelerometer and spatial position sensors
  • proximity sensors (that is, the iPhone blacks out its screen when you put it to your face)
  • multi-touch inputs
  • electronic compass (on the G1)

This opens up a bunch of new and really cool possibilities. Gabriel White gave some nice examples of how this might change the way you build your applications in his Sensing Context in Mobile Design presentation. For instance:

  • If your phone knows you're in the office meeting room (using the GPS), it diverts calls to message bank. (The Locale app performs this task.)
  • If your phone detects that you're walking while texting (using its movement sensors), it may increase the size and tolerance of the onscreen buttons to allow easier texting.
  • The G1 currently uses its compass to align Google Maps and Street View with the real world.

All of a sudden you're making apps that adapt to where they are and what's happening around them. To me, that idea makes developing for Mobile 2.0 the most interesting and exciting place to work right now.

This is a new and developing landscape -- in many ways you could compare it to the Web in 1996. There's every chance that many of the applications that will be the behemoths of the Mobile Web in 2012 -- the Googles, Flickrs and eBays of mobile -- have yet to be thought of.

Perhaps one of them is currently just a half-baked idea in the back of your mind.

Okay, so now you're all inspired to write the next killer iPhone/Android app. What's next?

Getting Started

Till now, the hardest thing about building native iPhone apps was the technical demands of writing Cocoa or Objective C -- typically outside the skill set of the average web developer/designer.

Happily, there are some handy alternatives emerging that tap into some of the skills more common to us. A couple of weeks ago, Josh wrote about two of those solutions on the SitePoint News Blog, Big Five and PhoneGap.

Phonegap

I chose to spend time playing with PhoneGap for a few reasons:

  1. It's free and open source, allowing you to learn and experiment without fear of incurring costs.
  2. Its use extends beyond the iPhone. PhoneGap already allows you to port your iPhone app to Android, and even BlackBerry.
  3. PhoneGap uses Safari/WebKit at its core, which most of us are probably already familiar with.
  4. PhoneGap uses plain ol' JavaScript to access the iPhone's GPS, camera, and vibrations controls -- again, most of us are at least comfortable with this.

In fact, creating a new app is with Phonegap is simple.

After opening Phonegap in xCode you give your app:

  • a name
  • a URL to your web server
  • a 57x57 pixel icon

After hitting Build, you're free to preview it in your iPhone emulator, where you'll see a new glassy iPhonized icon of your app waiting on the home screen.

Okay, now a quick reality check.

Although the PhoneGap codebase is developing rapidly, it's still very raw; currently it only supports a subset of iPhone/G1's functions (GPS, vibration, accelerometer, and camera). 'Promise' is the word, rather than 'deliver'.

The other unfortunate reality is you're probably going to need a Mac to run the iPhone emulators and other SDK tools. Android's SDK is cross-platform, so it will be interesting to see how Apple respond as the Android market begins to grow.

But make no mistake: there's going to be huge growth in this area over the next three years, and plenty of demand for developers.

With many of us planning to take breaks in the coming weeks, what better opportunity to get a box seat on a fun and potentially lucrative ride!

Top

Designers earn $$$ Join the leading design contest
marketplace!

That's all for this issue -- thanks for reading! I'll see you in a few weeks.

Alex Walker
design@sitepoint.com
Editor, SitePoint Design View

Top

Latest Release

The Ultimate HTML Reference

Book

Tell me more..

Free Book Samples

Simply JavaScript
The Art & Science of CSS
The Principles of Beautiful Web Design
More...

Latest Tutorials

Section 508: Uncle Sam's Guide To Web Accessibility

Rob BallouIf you've ever worked on a US federal government web site, you've probably encountered Section 508 law for web accessibility. In this article, Rob wades through the jargon to deliver the tips you need to ensure the sites you build are compliant.

Full Story...

Hacking JavaScript for Fun and Profit: Part II

Myles EftosIn Part 1 of this series, Myles gave us a taste for how to manipulate sprites on the screen. In this fascinating follow-up, he reveals the end product of some extreme JavaScript hacking—recreating the classic Mario Brothers platform game!

Full Story...

Terrific Tables with CSS

Jonathan SnookHTML tables have gained a new lease of life in the CSS era, now that they have been freed from misuse as a layout element. In this article, Jonathan demonstrates how you can use CSS to create exciting, colorful tables, which will work successfully across browsers, as well as taking a peek at what the future holds.

Full Story...

 Hot Discussions

 New Blogs

News & Trends

Famous Rails Screencast Gets an Update
4 comments
10,000 iPhone Apps - How Many Are Good?
10 comments
Australia's Net Censorship Sparks Outrage
26 comments

Podcast

SitePoint Podcast #3: A Richer Web?
4 comments

Web Tech

Win SitePoint Books At Web-blast '08
2 comments

Web Design

Adding the SitePoint References to Coda

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the Design View!

Send this to a friend
You are subscribed as : www-html@w3.org

Unsubscribe www-html@w3.org from this list.

Manage your subscriptions.

View the newsletter archives.

Mailing Address:
48 Cambridge St, Collingwood, VIC, 3066 AU
Phone: +61 3 9090 8200
© Copyright 2008 SitePoint. All rights reserved.