Tumble. The writings and findings of a web designer.

Posts tagged “iphone”

1. Optimized for Small Screens

   

   Before launching this site, I had plans to create two alternate optimized versions: one for iPhone, iPod touch, and devices that run Android (for simplicity, I’ll refer to this version collectively as iPhone-optimized), and one for all other mobile devices. Shortly before taking off for the holidays, I wrapped them up and they’re now live (iPhone-optimized, mobile-optimized). The iPhone-optimized site incorporates the fantastic jQTouch by David Kaneda while the mobile-optimized site is much more simple.

   iPhone-Optimized Site

   I’ve been keeping tabs on jQTouch for a while now and was glad to finally take it for a spin. For those in the dark, it’s a jQuery plugin that provides a powerful framework for quickly building mobile web applications. While not limited to use on iPhones and iPod touches (it’s geared to work just as well on Android-powered and other capable devices with WebKit-based browsers, though I can’t test and confirm), the interface, included themes, and experience are based heavily on that of the iPhone OS.

   With the help of jQTouch, I was able to build an iPhone-optimized counterpart that retains all the same content from the full site relatively quickly and without duplication of content. The about page copy, work entries including their image sets, Tumblr posts, and contact form — it’s all there.

   Integrating Into CakePHP

   Since the main site is built with CakePHP, implementing an alternate iPhone layout was, well, cake. First, the layout (located in views/layouts/iphone.ctp) is triggered in the AppController’s beforeFilter method when the sub-domain, i.mightydream.com, is accessed; here I also set a globally-available variable called is_iphone to true which is helpful later in the individual controller actions:

   class AppController extends Controller {
   	...
   	
   	function beforeFilter() {
   		if ($this->Session->host == 'i.mightydream.com') {
   			$this->layout = 'iphone';
   			$this->is_iphone = true;
   		}
   	}
   }

   Now, it’s business-as-usual in Cake with a minor addition to each controller action that also renders a view for the iPhone-optimized site. Each interior page in the iPhone interface is loaded on-the-fly via Ajax to help keep the initial payload down; these requests are made using the same URL structure as the main site (e.g. /about, /work, /work/giftag) and, thus, use the same controller actions. If the previously-set variable, is_iphone, is true, the iPhone view is rendered instead of the normal view:

   class WorksController extends Controller {
   	...
   	
   	function index() {
   		$work = $this->Work->find('all');
   		$this->set('work', $work);
   		
   		if ($this->is_iphone) $this->render('iphone/index', 'ajax');
   	}
   }

   The addition of the ajax parameter used in the render method causes the view to be rendered by itself without a surrounding layout. And that’s it. These examples are simplified, but at the most basic level this is how I provide an alternate layout.

   Styling It

   I started with the “Apple” theme included with jQTouch and made various tweaks to fit my own preferences and needs. I cleaned up a few minor pieces that were slightly off, added a tilted arrow for links that open in a new window, and added style support for the spinner shown as sub-pages are loaded via Ajax (which is all of them). Now that it’s up and running, perhaps my next urge will be to bring it more in-line with the full site, design-wise.

   I also took advantage of jQTouch’s simple support for bookmarking sites on the home screen. When bookmarked, you’ll see a custom icon, a loading screen, and true full-screen support which ditches the Mobile Safari address and tool bars.

   Image Galleries

   For the image gallery in each work entry, I used a modified version of the jQTouch extention, jQTouch-Gallery, by Ryan McKillen. It provides a nice interface similar to the native iPhone photo gallery including tapping once to toggle the title and navigation bars for a full-screen view.

   It was also a breeze to implement and I had to make only a few minor modifications: (1) I rearranged the contents of the title bar, and (2) I changed the look of the navigation bar. The transitions I’d like to bring more in-line with the native UI (sliding only the image instead of flipping the image including the title/navigation bars), but that’s all for another day.

   Handling Auto-Redirects

   There’s much discussion surrounding how to handle directing visitors to companion mobile site(s). I settled on the approach of automatically redirecting mobile users to the appropriate site, then providing a way to view the full site. On the iPhone-optimized site, tapping the View Full Site button on the home page will take the user to the full site and remember this preference for 30 days by setting a cookie. Revisiting the iPhone-optimized site directly will reset this preference and return the auto-redirect behavior to normal. The code in question also sits in the AppController’s beforeFilter:

   class AppController extends Controller {
   	...
   	
   	function beforeFilter() {
   		if ($this->Session->host == 'i.mightydream.com') {
   			...
   		}
   		else if ($this->Session->host == 'm.mightydream.com') {
   			...
   		}
   		// or force layout for mobile agents
   		else if ($this->RequestHandler->isMobile()) {
   			// iPhone & Android
   			if ((stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone') || stripos($_SERVER['HTTP_USER_AGENT'], 'Android'))) {
   				// if the iPhone cookie is simply not set or the user has not tapped "View Full Site", redirect to iPhone site
   				if (!isset($_COOKIE['MDRM_iPHONE']) || (isset($_COOKIE['MDRM_iPHONE']) && (bool)$_COOKIE['MDRM_iPHONE'] != false)) {
   					header('Location: i.mightydream.com');
   				}
   			}
   			// mobile
   			else {
   				header('Location: m.mightydream.com');
   			}
   		}
   	}
   }

   Mobile-Optimized Site

   The mobile-optimized site doesn’t need much explanation—it’s simply the raw HTML of the full site with the CSS stripped out. I don’t believe many people will see/use this, therefore I didn’t put much effort into it. It’s here more for the “see, there’s a mobile version, too” factor.

   Permalink

   Permanent

   Published

   Jan 7

2. 

   Letter Cups

   Part of my personal iPhone photography collection (see original post).

   Permalink

   Permanent

   Published

   Dec 17

3. 

   Dante

   Part of my personal iPhone photography collection (see original post).

   Permalink

   Permanent

   Published

   Nov 7

4. 

   Bowling Shoes & Ball

   Part of my personal iPhone photography collection (see original post).

   Permalink

   Permanent

   Published

   Oct 26

5. PhoneGap

   Similar to the afore-linked-to NimbleKit:

   PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.

   However, PhoneGap is open source and offers support not only for iPhone, but also Android and Blackberry. Now, maybe this will be my foray into app development.

   Permalink

   Permanent

   Published

   Sep 19

6. 

   Louie Mantia, a designer for the Iconfactory, walks through the creation of Ramp Champ, a skee-ball-like game for iPhone. I bought it the day it was released admittedly mainly for the eye candy, but found the actual gameplay to be maddeningly addictive. (via Tim Van Damme)

   Permalink

   Permanent

   Published

   Sep 8

7. 

   TiltShift Generator for iPhone [iTunes link] was just released:

   This is the 5th release from the ToyCamera series[, it] will allow you to create retro miniature pictures. Originally, [it was] published as a free web service and AIR app. Now the awaited iPhone version has finally been released.

   I grabbed it and found that it produces a great effect with a nice amount of control; although, I wish there were a way to completely turn off the blur effect when I want to. The interface is slick and simple, especially the blur screen where you touch to set the focal point, then adjust the radius with a slider. TiltShift Generator is now firmly planted next to CameraBag on my home screen. (via benjaminf)

   Permalink

   Permanent

   Published

   Sep 2

8. John Casasanta on the evolution of the Convert UI design:

   What happens when you stick a few people who can’t agree on anything at first… but later agree on everything… in a virtual room to do some app design? This is the result.

   (via benjaminf)

   Permalink

   Permanent

   Published

   Aug 24

9. 

   Japanese Beetle

   Part of my personal iPhone photography collection (see original post).

   Permalink

   Permanent

   Published

   Aug 20

10. 

    Escalator

    Part of my personal iPhone photography collection (see original post).

    Permalink

    Permanent

    Published

    Jul 28