Responsive google maps

Remember the days we used to put a static image of a roadmap on a website, usually accompanied by silly directions in case you came from the North, South or Mars? It was only some time later, when the web matured and google stopped being just a search engine, that a new corporate ‘how to get here / where are we located’ toy was born. Google invented google maps, pretty soon yahoo followed and Microsoft, well… they tend to do everything the rest does, it only takes them a little longer.

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

 

 

27. January 2012 by joggink
Categories: frontend development, jquery, usability | Tags: , , , | 42 comments

Bookmarked responsive web resources

Responsive webdesign has been a hot topic for a while, but I tend to loose track of all useful resources that cross my path. So I’ll try to make list them up.

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 

 

05. December 2011 by joggink
Categories: frontend development, javascript, jquery, mobile, SVG | Tags: , | 3 comments

Mobile navigation jquery plugin

Some people like to bitch and whine about a responsive web approach, others embrace it. I can’t blame them, they probably still use ajax to replace iframes…

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

 

24. October 2011 by joggink
Categories: frontend development, jquery, mobile, usability | 11 comments

Willistrator: The why

It all started on a sunny day last year. I remember it well, it was pouring rain and freezing like hell. Therefore some friends and I were sitting in “de vooruit” in Ghent, talking about the revolutionary changes in the web scene: HTML5, CSS3, media queries, responsive design, SVG, etc…

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.

10. October 2011 by joggink
Categories: css, frontend development, SVG | Tags: , | 3 comments

So I won a google chromebook

 

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.

 

08. October 2011 by joggink
Categories: frontend development, javascript | Tags: , , , | 6 comments

iPad wifi intercom solution

Update:
There seems to be a solution to the problem: iDoorCam:

 

Before digging into the whole iPad domotica topic I wanted to give you a little background information.

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!

30. August 2011 by joggink
Categories: usability | 12 comments

Standpunt van Belgacom

Als het goed is dient het ook gezegd worden!
Belgacom biedt de klant haar verontschuldigingen aan voor het feit dat het contact met onze diensten niet naar wens is verlopen.
Bovengenoemde ombudsklacht werd voor onderzoek overgemaakt aan de verantwoordelijke van de technische dienst. Zij sturen volgend verslag:
De telefoonlijn van de klant staat op een 9 Meg profiel op adsl2p en de lijn is volledig in orde. Er is dus geen snelheidsprobleem en er zijn ook geen meetfouten over langere periodes. De lijn is volledig stabiel. Uit het onderzoek is wel gebleken dat er VDSL2 beschikbaar is. Indien de klant wenst over te stappen dient hij contact op te nemen met de dossierbeheerder van de ombudsdienst. Belgacom zal dan het nodige doen om de lijn van de klant over te zetten naar een VDSL2 lijn. Tenslotte maken wij de opmerking i.v.m. het gebruik van een server op adsl of vdsl. In deze systemen is de downloadsnelheid vele keren groter dan de upload (bij de klant is dat 9 Megabit tov amper 455 kbits upload – bij vdsl2 kan dit 30 Meg tov 2 Megabit). Bij het aansluiten van een server moet deze al zijn data verzenden via de upload van de verbinding ( en dat is maar 455kbits nu of max 2 Megabit bij vdsl2) en dat is heel wat minder dan de 9 of 30 Mbit. Volgens de technische dienst kan de klant dus overstappen naar VDSL2. Er is geen technisch probleem en qua snelheid zal de klant wel een verbetering merken.
Indien de heer Vandendriessche wenst over te stappen op een goedkoper internetabonnement is Belgacom bereid om geen verbrekingsvergoeding aan te rekenen.
Wij zijn ervan overtuigd de klant met deze informatie van dienst te zijn geweest en wensen ons nogmaals te excuseren voor de ondervonden hinder.
Enige opmerking die ik hierbij heb is dat de lijn in orde is en op een 9Mbps profiel ADSL2 staat… Alleen jammer dat ik betaal voor 20Mbps…

15. April 2011 by joggink
Categories: Uncategorized | Tags: | 4 comments

Mobile banking app

I have never been a true believer of the online banking website. It’s slow, uses unrecognizable icons (which I have to hover over every single time because I still don’t know what they mean), but most of all I hate the fact I have to get  their silly cardreader and type these security codes every time I want to do something…

I can hear the critics already yelling that it is necessary to type these codes, otherwise people could just ‘steal’ your money once they get in your account!

Bullshit!

  • Everyone who owns a credit card like visa or mastercard can vouch for this. Online payments with a credit card just need the card number, expire date and security code to be valid. Sure, a lot of people get scammed but they get their money back. (the fact that their money is transfered back from the merchant who just sold goods for free is another issue).
  • The truth is, if someone malicious gets into your account in the first place, that means he has your cardnumber AND pincode, so why verify that a million?

So back to the story… What if online banking would demand your security code 1 time? You enter your emailaddress (instead of your card number), your password and a one time passcode for which you have to use your cardreader?  The reasons I don’t want to enter my cardnumber are:

  1. I don’t always have my bankcard on me
  2. Banks seem to focus on major browsers and safari isn’t one of them I guess. My online banking website can’t seem to remember my cardnumber…

Now we have this issue off the table, maybe banks could focus on mobile banking. Not just some fancy mobile site with tons of security checks but just an easy to use zero-bullshit native application that requires a pin code to access it. If they would build something like that, I would even pay for the application! Because right now, I rather go to a bank office because I hate to log in to their online banking system to type a dozen of security codes so I could know how much money is on my account.

12. April 2011 by joggink
Categories: Uncategorized | Tags: , , | 2 comments

The social cms

Think about your favorite CMS and how it handles digital asset management. It gives you the ability to upload pictures, videos, audio files and every other possible document format that exists, right?

Imagine that the asset management didn’t store your uploads on your hosting’s disk space? Imagine you could link it to the social services that are out there?

Images could be uploaded to flickr or picasa, videos to vimeo or youtube, audio files to soundcloud, presentations to slideshare, … The only real problem would be other file formats, but if you have a dropbox account you can easily get a public download link for them.

Advantages:

  • if you ever have to move your site to a different website you don’t have to change most of the URLs (e.g moving wordpress to a different domain)
  • your files are available via a CDN, so they won’t slow down your page load.
  • less disk space usage on your hosting
  • these social services make sure your media plays nice, e.g. video files get converted to FLV’s and have an HTML5 fallback, same for audio files, images on flickr can be queried to return an image of your requested dimensions, etc…

Disadvantages:

  • If your social service discontinues you’re pretty much screwed
  • if your social service changes their API it would break your CMS’ asset management

This is just an idea that I have been playing with for quite some time, I don’t know if it is doable or even smart to do but I’ve always been intrigued by the possibilities. It could be that I’ve forgotten some pros/cons or that I missed something crucial, if so, please let me know.

10. April 2011 by joggink
Categories: webrelated | Tags: , , | 5 comments

Git clients, an overview

I’ve always been intrigued by the number of SVN apps there are , like the beautiful versions app, and the lack of descent GIT clients. Last year I’ve seen some upcoming GIT clients websites all claiming they were building the best GIT client ever. I’ve tried to make a nice list of GIT clients:

  • Gity (Mac, open source)
  • Gitti (Mac, currently in beta, download available)
  • SmartGit (Mac/windows/linux, free for non-commercial use / 55 euro license)
  • Gitbox (Mac, free for max. 3 repositories / available in app store)
  • GitX (Mac, open source)
  • Tower (Mac, 30 day trial available)
  • Sourcetree (Mac, also for mercurial, trial available)
  • Gitnub (Mac, opensource)
  • Sprout (Mac, available in app store)

I’ve bought Tower with a github promo code. Partially  because of the clean interface but definitely because it plays nice with Textmate and because I can create a new git repository on my beanstalk app account.

It could be that I missed some git clients, so feel free to let me know.

10. April 2011 by joggink
Categories: webrelated | Tags: , , | 2 comments

← Older posts