Mobile

My Site Now Fits on Your Phone (and Your Tablet)

Posted in Mobile, News, Responsive Web Design, Web Standards, WordPress

mpgilbert.com on multiple screens

That’s right! I’ve re-written all of the HTML and CSS code on this site so that it’s now fully responsive. In other words, if you’re looking at this on a desktop computer, you can slowly resize your browser (i.e., click the lower-right corner and drag it to the left) and watch all of the website’s content shift around as the window gets smaller and smaller until you reach the approximate size of a mobile phone. The overall layout, all of the text, and even the images will respond to the size of the browser at all dimensions. As the browser gets smaller, the site shrinks to properly fit. If you’re looking at this site on your mobile phone, you’ll just see a simple, clean, and performance-oriented website. The HTML code and all the content throughout the entire site are the same for all devices and screen widths.

Continue Reading →

Mobile Site Launch: Kennington Capital

Posted in Mobile, News, Web Standards

Screen shot of the Kennington Capital mobile siteI’ve been working closely with Reeves Design House over the past year or so on a variety of freelance projects. They’ve been landing some great projects and I’ve really enjoyed being a part of as much of them as time permits. The latest set of projects has offered me some wonderful learning opportunities. We’ve been exploring mobile web design by building a mobile site for Kennington Capital, a real estate investment and development company in the Dallas area. I finally had the opportunity to dive into XHTML-MP coding and some careful testing on a seemingly endless array of handheld devices. I soon discovered that it just wasn’t practical to bug all of my friends to borrow their phones. Thanks to Klaus Komenda’s article called Testing on Mobile Devices Using Emulators, I had a much better approach for testing and tweaking the code. As well, I’ve compiled a bunch of handy links on Delicious related to mobile web design from a variety of sources. The best resource, without a doubt, was Cameron Moll’s short but concise book called Mobile Web Design, A web standards approach for delivering content to mobile devices. Cameron’s original set of articles is a great start as well. So, please take a look at the Kennington Capital mobile web site (m.kenningtoncapital.com) on your handheld device and let me know what you think.

iPhone Web App Project

Posted in Mobile, News, Web Standards

Screen shot of an iPhone movies siteDeveloping a web-based application for the iPhone (and iPod Touch) has its fair share of unique challenges. Recently, I had the opportunity to dive into such a project by developing a user interface for an application my brother built a while ago. He had created a server-based web app, just for fun, that provides helpful information for finding such things as movie theater listings, recent DVD releases, critics reviews, etc. Mainly we were using it to find showtimes for local movie theaters at the last minute (e.g., on our phones when a newspaper wasn’t handy). But we also found it useful while browsing movies at the video store in order to view movie ratings, reviews, actors, and other useful things in order to avoid renting bad movies.We wanted the web app to resemble a native iPhone app as much as possible. So I started by reading a lot of useful information on Apple’s Web Apps Dev Center – there are a lot of great “tech talk videos” that are worth a look. Perhaps the most useful resource was Joe Hewitt’s iUI project and accompanying sample applications.We’ve been steadily adding features to my brother’s original app. Some of the features include:

  • We used Ajax to dynamically fetch a publicly available JSON feed in order to display a list of movie trailers which play full-screen on the iPhone when it’s rotated into landscape mode.
  • Each theater’s address links to a Google map (on an iPhone it hands off the link to a fully-featured native Google map application).
  • We wanted the site to be available on non-iPhones as well as desktop browsers, so we are doing server-side device detection in order to send two separate CSS files, one for the iPhone and another for desktop browsers and general mobile devices.

We’re keeping the web app private for now (it’s just for fun), but if you happen to see me in person I’d be happy to give you a quick demo.