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

It was then that Thomas (Byttebier) mentioned what a big pile of shit SVG was. He was working on a responsive website for some friends who own a B&B named “Sleepstreet“. Because this site was responsive it seemed natural to use an SVG for the logo. Razor-sharp resizing was the game and Illustrator was there to blame!

It felt logical to create a logo in Illustrator and export it as an SVG, but how do you implement this cross browser? Just copy paste the barfed-up SVG code from Illustrator? Hell no!

Javascript to the rescue!

After weeks of sleepless nights, few possibilities were left and Thomas put all his faith in this RaphaelJS library. This seemed to be the best solution possible. Only drawback was that Thomas had to rewrite the entire SVG with Javascript, using Cufon as well for the custom font. This wasn’t logical at all, so I proposed to build an online SVG editor. But as most promises made in a bar, this one too died a silent death… Until now!

If he wasn’t a designer, this would be where the story ends. However…. Take a look a the logo and the different scaling zones:

the red zones should resize in a different way than the center. The center should always stay as big as possible whereas the 2 ribbons can resize to at least a minimum width of the actual ribbon. I know it all sounds a bit complicated but if you see how it works you’ll understand why this should behave like this. Check the sleepstreet website and resize your browser to see the logo scale

Now, the problem is that all the coding for this is done by hand, it’s not rocket science, but enough to have some sleepless nights coding this up. Therefore we started playing with the idea to build an online SVG editor to generate this kind of SVG in a very easy and user-friendly kind of way. Now it’s my job te make it actually happen, and oh boy, I feel as excited as 16 year old waiting on a saturday night to attend hist first party ever.

I know the very basics of illustrator and I must say I hate most of it. I have some ideas about the interface, etc… but this will be posted in an article later this week.

Google chromebook Samsung series 5

There was a contest at the fronteers conference 2011 where you just had to fill in a form with your name, email address and the reason why you should win it. I wasn’t going to compete but a little voice inside said “why not…” The app I proposed is a simple straightforward online SVG generator / editor. The possibility to add shapes, paths, text, etc.. and choose your output format: SVG or RaphaelJS. (I’ll explain the inspiration for the app in a future blogpost)

So, as you already guessed, I won the chrome book. It’s a pretty neat device, nothing fancy but fast as hell! It has a 16gb SSD which is enough if you know that the OS is just google chrome. I’m very happy I won because now I’m even more motivated to build this SVG tool. I’ve even been thinking about a name and a logo and found the perfect match: since it’s a web based version of Illustrator I’ll coin it Willistrator (Web Illustrator). The logo is very simple, some bezier curves, handlers and a simple font, resulting in something like this:

Codename: willistrator

And before you ask: YES I am serious about the codename, it’s not a spoof and I’ll build it. The logo I’m not really sure…

If all goes well I can kick this project in the groin later this week, I’ll post a follow-up blogpost with the inspiration for the app and a link to the github repository / pre-alpha version.

It can be a hell sometimes fixing a project and tweaking stuff to work in all browsers (specially IE8/7/6). I’ve given up pixel perfect designs across browsers a long time ago, because that way I can only use stuff that is supported by the least capable browser. Another way to achieve some of the nicer features like rounded borders, shadows, highlights, text shadow, etc… would be using a sh*tload of images. Some of them can be fixed with css, even some javascript, others would use extra markup to achieve the effect wanted. This all leads to one thing:

More markup + more images = more to download = longer time to download

I can hear some voices whispering ‘longer time to download?’, but I have a super fast internet connection! Well, so do I but that’s not the issue because as we speak most of us own a mobile phone that’s capable of surfing the world wide web using 3G, edge, … So adding extra markup / images will not only slow down your site on slower connections, depending on the viewport and the capabilities of your browser some stuff might not render the way it was meant to.

So you got to ask yourself: Is it really worth it? Does every visitor needs to have the same layout? I say ‘NO‘, and I strongly believe that customers need to be informed about this. The web is not a printed medium, it’s a big collection of data shared across a huge network. The tools to share all this data isn’t paper and ink, but browsers, and as we all know, browsers are a free market. Whether you use safari, chrome, firefox, Internet explorer, you can access this data. And that’s the point of it all, people surf to get information, not because a site looks nice. And even more important, real users don’t open a website in different browsers to see how it looks. I’ve had a personal experience a couple of years ago that woke me up from the ‘pixelperfect-crossbrowser’ dream.

Before we booked a hotel, I wanted to find some pictures from the rooms, restaurant, etc… Travel agencies tend to make the pool look bigger, the rooms are huge and you would kill for the view from the balcony. Anyway, while I was surfing the web, I bumped into some nice looking sites that alas didn’t give a lot of pictures, and even those on the sites weren’t very satisfying. So instead of checking those sites in other browsers because they looked nice, I continued the search, jumping from one site to another until… I bumped into an ugly yellow-backgrounded page, playing some nasty music using a flash player but it was loaded with pictures!

Mission accomplished

It even made me realize that layout doesn’t matter, it’s the content that drives people to certain sites. I’m not saying layout is not important, but instead of designing pages, design content! And if your browser supports text shadow, for the love of God, use it! If it doesn’t, bummer, but be sure it’s readable! The same with border-radius, box-shadow, etc… I can’t remember the last time someone told me he was going to buy some electronic gadget but decided not to, because in safari the buton was all glossy and had a nice shadow and in Internet explorer it didn’t…

Truth is, people don’t care about the design / cross browser experience and you shouldn’t care too, because the only people who care are your customers. And I agree, these are the ones that pay you, but these are also the group that need to realize that technology is non-stop moving forward, and at a very fast pace. Your customer should ask himself how he uses the web, and believe me, they use it the same way as everybody else: google what you need, scan the page for what they need and take action. Nobody cares about the several hours the developer spent on making those fancy buttons cross browser, they will just click it. I bet that if you would ask them about the button details (button color, font color) they wouldn’t even know!

My opinion: develop for the best, optimize for the rest!

So what’s your opinion? How do you develop your websites?

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?

So I have my own setup to test everything, but I’m eager to learn new ways.

At the moment I work on a macbook pro, I have vmware fusion running windows xp with IE6 and firefox, windows vista running IE7 & 8 and firefox, windows 7 running IE8 and an ubuntu with firefox and Konqueror. I don’t test chrome because I use safari 4, firefox and opera on my mac to test stuff, but maybe I should add chrome to my vista setup. I also use the iphone developer tools to test sites on iPhone and iPad.

So how do you test your sites?

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