Sam Croft

Full-stack developer

Introducing Mini-Map, a document visualisation jQuery plugin


Filed in: jQuery, mini-map, plugin, Uncategorized

I love the iPad, it’s flipping awesome! I love browsing the Internet with my fingers, it’s a far nicer and casual experience than sat infront of the same screen, in the same place, in the same room. And it’s brilliant to see that designers are now taking into consideration how their sites work on tablets and large screen mobile devices. The advent of the media query makes it a doddle to create a responsive design, that changes according to the device/screen.

But, and this may be a pre-emptive ‘but’, as web designers we still feel compelled to design sites that scroll vertically. We fear the horizontal scroll. We’re terrified of it. Well most of us—there are some brave designers out there that don’t feel intimidated by the horizontal scroll though, the likes of Dom Goodrum, an old friend from University, and Teehan+Lax with their new TweetMag app are more than happy to explore the X axis.


A super-lightweight mobile webkit accordion jQuery plugin, great for iOS/Android PhoneGap apps


Filed in: android, iOS, jQuery, PhoneGap, Uncategorized

Ahhh, accordions. Their use and acceptance in web design has been varied over the years, but right now I think we can safely say they are en vogue. Unfortunately, as developers (myself included), when we use an accordion we probably use the same old chunk of code and non-semantic tag-soup that we used last season. And the time before that.

For about a year I’ve been meaning to write my own lightweight accordion that we can use across the board on our various projects at RITH. And at the moment, that largely entails creating reusable webkit optimised code for use on iOS and Android mobile devices deployed as native apps using PhoneGap.


Building an Android PhoneGap app 'reveal' menu/tabbar that doesn't rely on the use of position: fixed


Filed in: android, jQuery, PhoneGap, Uncategorized

Last month I started developing for Android for the first time, using PhoneGap and Eclipse. Initially this was a bit of shock, I was rather outside of my comfort zone having used Xcode and iOS for the last three months.

After packing away my lovely iPhone 4 test phone and pulling out the ol’ HTC Desire I went through the laborious process of setting up an Android development environment—slightly more confusing than installing Xcode, but once set up there is none of the certificate bullshit to slow you down. Yippee.


How to ensure your Google maps marker icons are optimised for iPhone 4 retina display


Filed in: Google maps, iPhone 4, PhoneGap, retina display, Uncategorized


Due to Google’s constantly updating maps API there have been a number of issues with this technique (see comments). Currently, when using the latest API version (3.9 at time of this update) you must ensure your marker icon has the property optimized: false.

This is a little issue that I spent a couple of hours trying to fix one afternoon. I was using the Google maps v3 api in a web app and encountered a little annoyance when testing on an iPhone 4. My custom markers were [of course] looking absolutely horrendous on the retina display, as they didn’t have their own asset.

In native iPhone apps one can specify their own retina images using the @2x image suffix. In CSS it’s easy to use media queries to load an asset for iPhone 4’s and then use -webkit-background-size to specify the scaled dimensions.


Loading external data into a PhoneGap app using the jQuery JSONP plugin for cross-domain access


Filed in: jQuery, JSON, PhoneGap, Uncategorized

Important: view updated article – 9th July 2011

Following the release of jQuery 1.5 I have written a more up to date article and made available all of the source code and sample app.

View the updated article

Continuing my love affair with PhoneGap I thought I’d share a few methods of handling external data that I’ve adopted, tweaked and re-written for use in my web app escapades at RITH.

PhoneGap doesn’t ship with a data layer but as web apps [commonly] utilise a JavaScript library, this isn’t an issue. I use jQuery, but it is worth noting there are several other more compact JS libraries that may be more suitable if you want to keep your app as lightweight as possible.

This isn’t solely related to PhoneGap apps – this technique can be used in any web app, but it’s immensely useful within PhoneGap.


A usability tale of how the BBC and ITV chose to direct, and misdirect, web users to their live match broadcasts during the 2010 World Cup


Filed in: Uncategorized, usability, user experience, user journey

I originally wrote this during the 2010 FIFA World Cup but have only now, six months later, pressed the publish button.

During the World Cup I watched many of the matches on the BBC and ITV website’s, depending on which one was broadcasting the game. And it won’t just be England’s dismal performance that I remember from this tournament, it will also be the greatly apposing usability and accessibility routes that the BBC and ITV took during their online coverage.