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

Feel free to share resources you find useful too!

If you’re not familiar with responsive webdesign I suggest you check out this nice presentation from @bytte:

CSS Frameworks:

HTML5 boilerplate

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

Goldengridsystem

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

320 and up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed.

skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

 Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

 Gridpack

The Responsive grid generator, created by Erskine Design.

Embedding media

fitvidjs (video)

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Text

letteringjs

A jQuery plugin for radical web typography

 fittextjs

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

SVG

raphaël

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Making things work cross browser

selectivizr.js

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Contributions by @baskwalla, @driesdeleay, @wolfr, @bengie & @paulirish 

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

$('video[loop="loop"]').bind('ended', function(){
   this.play();
})

Otherwhise, check out this screencast, it’s really neat!