Mobile

About iPhone and other "Smart Phones" on the web

Places - a location information system using Drupal 7 and Google Maps API v3

"Places" is a Drupal7 site that shows all the locations in it either as a list or on a map.

The site can be viewed at www.netnik.com/places.

Netnik redesign and re-organization

Following my interest in web design for smartphones, I've started a redesign of netnik.com that will emphasize mobile web apps.

The home page is now optimized for smartphones and will serve as a hub for the various parts of netnik.com including this blog. It may take a while to apply the redesign to everything, but the process has now begun!

An HTML5 audio keyboard

After playing with a couple of keyboard and drum apps on the iPhone and being underwhelmed, I set out to see what kind of keyboard I could make in HTML5 and its new audio features.

A mobile web app using Ajax and localStorage

Sometimes one gets so involved in a project that one forgets to write about it. That's been me these past couple of weeks, but hopefully this post will rectify that with insightful analysis. The only thing worse than documentation is no documentation.

Athenites Part 2 - Google maps API v3

screenshot

Currently, the Google maps that get loaded into each venue's page are from the iFrame embed code that Google provides with any map search. In order to make a page that would show all the venues at once, I had to delve a little deeper. I checked out a couple tutorials, but it turns out that most of the ones I could find were dealing with v2 of the API.

Athenites mobile site

screenshot

Athenites is optimized for use with smartphones. It's main feauture is a directory of live music venues in downtown Athens, Georgia. The page for each venue provides general information as well as their twitter and facebook status updates, and a Google maps widget.

You can see Athenites at athenites.com.

Mobilizing Drupal

320 x 480 Safari screenshot

Here is a gallery site in Drupal that displays a Views grid of photos on the front page. It actually displayed fairly well on the iPhone since it is 960 pixels wide (which is what the iPhone assumes by default), but I wanted to serve a special style sheet to iPhones. Here's how I did it.

Mobile styling

screenshot

Click here to see the demo.

When writing code I always try to keep things simple and with smartphones, this is a really good idea. Compared to a desktop or laptop, a smartphone is a puny thing: much less screen area, and less bandwidth and processing power. Good reasons to keep those HTML and CSS files as small as possible.

Going mobile

Smartphones are the future

Since the iPhone seems to be the device of choice now (at least among my friends) I thought I would see if I could design a web page specifically for the iPhone, i.e. so it would look like an "app."

Syndicate content