Design View #53 - Mobile Web 2.0: The New Fun Park For Developers?

Email
not displaying correctly? View
it in your browser.

SitePoint
Design View

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

Introduction

Welcome 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.

With
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:

-
you follow
"sitepointdotcom" on Twitter

-
we message the direct download link for The Art & Science of
CSS straight to your Twitter account

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.
http://www.sitepoint.com/launch/e84507

- 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

- Introduction

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

- Latest Tutorials

- Hot Discussions

- New Blogs

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.

With 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 .

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

-
It's free and open source, allowing you to learn and experiment without
fear of incurring costs.

-
Its use extends beyond the iPhone. PhoneGap already allows you to port your
iPhone app to Android, and even BlackBerry.

-
PhoneGap uses Safari/WebKit at its core, which most of us are probably
already familiar with.

-
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

http://www.sitepoint.com/launch/635d57

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

Alex Walker
[email protected]
Editor,
SitePoint Design View

#top

Latest Release

The Ultimate HTML
Reference

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

If 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

In 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

HTML 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

- Adobe to launch cross browser testing service in
Industry News

- Input not to remember history in HTML and
XHTML

- Google search engine uses sprites in CSS

- Content scraped, and now they're ranking higher than
me! in Search Engine Optimization

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 : [email protected]

Unsubscribe
[email protected] 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.