This is part 2 of my attempt to get google maps to work responsively. Part 1 is about getting the zoom to display properly with a responsive design.

Having got the zoom control to work properly its now time to get the parts of the map to adapt as the width alters. I thought this was going to be a bit of a problem. As it happens it turned out to be really easy!

This light box shows the idea…

So…there are 3 divs, and they all work in my case in exactly the same way

So for the wider screen, I set a fixed with thus:

#mapInstructions {
width:680px;
float:right;
}

For the intermidiate screen this became

#mapInstructions {
width:65%;
}

I guess I probably should have added float:none; really

And for the narrow, mobile type screens this turned into…

#mapInstructions {
width:98%;
margin:5px 1% 5px 1%;
}

I also did the same css for the #map_canvas and #directionsPanel and so everything lines up nicely! Honestly, I was expecting a LOT more hassel than this.

A small addendum…

Of course, if you drag the browser window its possible to move the marker off the edge of the browser – ie no marker on the map – it doesn’t physically re-load the map… I don’t consider this to be much of a problem though, since how many users are really going to re-size their browser. It doesn’t matter what size you load into, the marker stays central.

This is part 2 of my “Google maps and responsive design” investiagtions.

You can read part 1 about getting the zoom control to display properly

This is part 1 of a 2 part adventure in getting google maps to work in adaptive design. Read part 2 – the adaptive bit…

I really like the google maps api3 – as a user that means “Hey, these new google maps are SO useful“. With a little extra work you can add in a “Get directions” application.

My clients like them too … and I have them on several sites – however, recently, whilst working on a responsive site the zoom control stopped appearing – well, that’s not quite true - it did appear, but it looked wrong.

Here’s what I mean – look at the dastardliness of the zoom control…

Read more…

Just a couple of years back if you wanted a website you went to your web designer/developer and they made you one that looked great on your computer. And probably on just about every other computer too – even those running the dreaded Internet Explorer 6!

You might have noticed however, that the same sites don’t always look so great on all those new smaller screen devices – smartphones, tablets and so on. The basic problem is that we were designing mostly for large screens – many many sites were 900-1000px wide. So how does a smart phone cope – well, it either squashes everything up so  tiny you can’t read it OR adds those horrid horizontal scroll bars that everyone hates. To be fair, all those devices are doing their best – its the web designers/developers who needed to adapt - again!

So, what’s the answer…

Things are always moving on the internet, but there does seem to be one solution that is gaining ground.It goes by different names – “Adaptive design” , “Responsive design” and even “Media queries” … although that last one isn’t really right!

The basic principle is to enable the various elements in the site to both re size and re-arrange themselves as the available space alters.

As you look over the examples notice how the relative positions of items change as we go from a “Multi-column” layout through to a single column layout.

The upshot of all this is that your website will look great across a wide range of platforms – which of course has got to be great news.

Why not contact ee-web design to see if we can help bring your message to a wider audience?

You might like to read this post to about how Babelquest went responsive

One of ee-web design and developments oldest clients has been in contact again. Their site was a joomla based site, but now they wanted it to go responsive. Why should you care? Responsive sites are the way to go at the moment if you are concerned about the vast array of different screen sizes! Also, the good folk at BabelQuest decided that they wanted to have blog. Rather than spend ages faffing around with the old site, it was decided to strip it right down to the basics, and create a responsive wordpress based site.

The site is now in its “Live testing” phase – ie we think everything is fine, and it jolly well seems to be too! Have a look at it on difference screen sizes. The site looks great on large monitors all the way down to tiny smart phone screens.

And with the way that the web is evolving, that’s got to be good!

More about responsive design

This is a work in progess – but the evidence from a quick google search is “Google doesn’t use it!!!” You can’t say fairer than this… or is this too trusting?

And if a video from the “Horses Mouth” isn’t enough for you try this that’s not enough ammo – try this google search …