Forget yahoo and bing! maps, only if your a fanboy you’ll use them and even then you’re not sure how long they will be around (- cf. yahoo & geocities). Google maps was and is the way to go. Every post-iPhone smartphone has google maps (except the windows phones who use a mediocre version called bing maps).

Anyway, let’s focus on what this is all about!

Nowadays static maps (drawn by the guy who works at the ‘art department’) aren’t really used anymore. Using google maps is fancy and allows you to zoom in/out, get directions,  have a satellite view or even streetview. The sky is the limit and, let’s face it, we all jumped the maps boat.

fast forward to… now!

When we’re developing websites we mostly use google maps somewhere. Inform where an event is held, a company is located or to find the nearest dealer in town. There are many ways to include google maps and the most easy way is to use an iframe with the map embedded. Real men tend to use the maps API to embed the map in the website. It’s al sunshine and lollipops! Until you use a mobile device to surf to the website. Sure the maps work just fine unless the map is too big and you end up in the Maps scrollbar of death™.

So what is the Maps scrollbar of death™ exactly?

When scrolling on your mobile phone or tablet it all works fine, but as soon as your finger hits a google maps you start repositioning the map inside its container. Not a big issue if you have some space around it so you can keep scrolling. Worst case you can usually tap the menu bar on top to regain access to the top of the website, if not: You’re screwed!

So do we need to use the iframe or flash solution? Sure not! You could use the google maps static image API to include the map but then again, we could be using the static image from the guy of the art department, no? So the goldilocks solution is to show the full blown map api on non-mobile / tablet websites and use the static image api on mobile / tablet websites.

Simple solution

The easiest way to achieve this is… to embed both the iframe and the static image and show / hide the appropriate one using some CSS and media query magic.

Plugin solution

Why you should use this plugin? No reason, whatsoever! I just hate it to use the iframe, specially if I have markers and balloons and other stuff to display. That and the fact I hate using the google maps API to geocode addresses and place markers. Therefore I was thinking of a plugin that I could easily pass the address and possible markers to and it would magically show the map or the static image. If I link the static image to maps.google.com with the appropriate address most mobile devices will open their maps application instead! How cool is that!

So without further ado: the jquery responsive google maps plugin (still in progress). The technical mumbo jumbo is on the github readme page, so feel free to comment, add feature requests, fork me or even help me finish this.

A demo can be found here: http://joggink.com/wp-content/uploads/jquerymobilegmaps

If you’re anti respsonsive you better stop reading, start looking for your credit card and order one of these wonderful books. If you speak or understand Dutch I would suggest you get out of your cave more often and maybe attend some free fronteers meetups.

Anyway…

Since I started working as a freelance Gorilla I’ve been blessed with the design skills of Jelle. He designs killerwebsites for every possible device. Gorilla has been building responsive websites for a long time, even before it was coined ‘responsive webdesign’. They’ve managed to build a rock solid haml / sass (compass) boilerplate that provides most of their default fallbacks. One of these default fallbacks is the often used horizontal navigation:

So, for desktop users and iPad users this horizontal navigation works fine. There’s a fallback for mobile users so the horizontal list becomes a block list resulting in something like this:

As you can see, it’s not very handy because the content is being pushed down and clicking around on the website doesn’t really give you the feeling that you’re actually changing pages. Therefore we wrote a small jquery plugin. This could be done native but since we’re using jQuery in this (and almost) every project it seemed easier to just write a plugin. The result is something like this:

The plugin and more info on how to use can be found on github: http://github.com/joggink/jquerymobiledropdown

My girlffriend and I use some shared calendars so we can schedule things perfectly, therefore, our paper calendar ended up in the rubbish bin and this was the trigger for my idea. It’s not revolutionary but I’m surprised nobody has started developing descent solutions.

To replace our ‘old paper calendar’ I started playing with the idea to mount a screen on our wall and write a web app that could fetch everything we needed. I could show our appointments, a small clock and maybe some other things too. As most of the sideprojects this one died a silent death too until yesterday… Yesterday, I was sitting at my desk and saw my iPad (1st gen) which I barely use and I started thinking that everything I wanted to show on my webapp dashboard was already an app on the iPad. Even better was the fact is had a touchinterface, allowing us to add or alter scheduled events in our calendar. Bonus points for the image slideshow, because after some time of inactivity it would simply show some of our beloved pictures. Extra bonus points for the remote app and our airport express in the kitchen. We could stream our music and even radio stations to our stereo (which I wanted to replace by a Zeppelin for quite some time now). How’s that for a paper calendar replacement ;-)

After seeing the light I went down to check some empty spaces on our wall where we could mount it. Maybe in the same place the old calendar: next to our intercom for our doorbell… So why not replace the stupid intercom with a nice wifi video intercom solution that could stream our doorbell right to our iPad using push notifications? So I started my search but I couldn’t find any thing that satisfies my needs, I only found 1 crappy solution that doesn’t support push notifications and costs a gazilion!

So what is it I want?

Well, imagine having a doorbell with a camera. You’re sitting in your sofa and someone rings the door. You go to your iPad, check out who’s there have some small talk or even allowing them to come in by unlocking the door with a swipe or any other gesture you can think of. That would be a good start, even better would be that if you’re not at home, the sytem sends a push alert to your iPhone and maybe a snapshot (or video if you’re on wifi) of the person in front of your door, allowing you to do the same as if you were at home: talk to the person and maybe let him/her in. (e.g. we have 2 dogs and it would be nice if my mother in law could enter our house if we’re stuck somewhere so she could feed them or let them out).

All of the above would be splendid, following extras would make me a happy man:

• integrate RFID keys, swipe your card over the doorbel and enter (instead of using the key). Not really necessary, but nice to have, especially if you would use it as a company
• Show a log of the video conversation with a timestamp for every time someone rang your doorbell. Even if you’re on a holiday you could still see who needed you
• If we could integrate the RFID we could even show the log of when someone came at work.

Maybe there are already solutions doing (some) of these things, if you know about it feel free to share!

Most of the mobile browsers use webkit as render engine, there are however some exceptions. Besides the render engine, the viewport is another bottleneck. So how do you deal with that? My first thought was to focus solely on the iphone. Using the iPhone SDK and the iPhone emulator that comes with it, I could easily test sites on my mac. The latest iPhone SDK even has an iPad emulator! So making sure everything works on those 2 devices was sometimes a pain in the ass… So after optimizing for iphone and ipad came the actual testing, not on-screen, but on my iPhone / iPad using my fingers to flick, tap, scroll, zoom and pinch my way around. A good help for making sure everything was usable were the iPhone human interface guidelines.

So now I had my projects working on only 2 mobile devices, whereof one not sold (yet) in Belgium. Hooray… Therefore I tried installing the Android SDK so I could mess around with their emulator. And then what? Install another SDK for nokia, blackberry (nowadays they use webkit),… Some time ago, someone on the fronteers irc channel mentioned  Adobe Device Central. They offer a lot of platforms to test, but it seems a bit too flash minded and doesn’t always work the way I want.

Another great tip came in from Jon Hicks: Liveview, for Mobile Application Design & Prototyping Tool.

The point is: I’m kind of stuck with mobile testing, I can test on iPod touch, iPhone and iPad which seems ok for an apple fanboy like me, but off course, there is the harsh truth that not everybody is using one of those mobile devices… So what’s your secret setup for mobile testing?