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

ee-web design and development are really pleased to announce the launch of another website for a SME client. This time its a independent coffee lounge in Enfield, North London and they probably make the best coffee money can buy. Or so they say. The site, based around the joomla CMS features a bespoke look – no templates here. Its simple, quick and elegant – or so we think anyway!

Its clear that small businesses need websites and Edi hopes that he’ll be able to keep in touch with his regular clients, telling them about open days, new menus and special offers.

I’ve just discovered two new pseudo-classed (well new to me) These are :before and :after. You can use these to insert content before or after a selected element. If you use these along with the “content” property you can insert additional content beofre or after an element. So…

p:before {
    content: "Some text out front";
}

does what it says -  and adds some text out front of the <p>…</p>

On the face of it this sounds fun, but why would you want to use it – afterall, css is all about keeping content separate from style. I can think of a couple of examples – you could be wanting to change the text next to an item on the fly, say if its out of stock, or setting some marker for an active link – say to show the page you are on.

The later is where I am planning on getting stuck into this idea. Here at ee-web developers I am just about to launch a site and, as often happens, I have left the “What will the active menu links look like” question until the end (tut tut). Since the logo for the site is a real funky coffee cup (its a coffee shop afterall) I think a little cup behind or to the left of the active link might look good. I guess i could do this with a background image on the link – probably eaiser, but I want to try out these pseudo-classes!

Please let me know what you use it for!

Of course, the other big deal here is that I was reading up on how to create mobile sites …  and in so doing learnt some new css – you just have to keep on learning in this game. You can de-evolve back into a dinosaur so quickly!!!

As web designers and developers ee-web has been working with the Joseph Storehouse in the UK (and Holland) on their cyber presence for some time. Recently the team at JS have decided to launch into the world of social media, and to that end we have designed and impliemented facebook, twitter and youtube into their UK site.

Along with this the Joseph Storehouse have added a lightbox gallery to showcase pictures from their most recent conference, “and Donate” buttons across the site.

Its always a pleasure working with the team at JS. At ee-web design we feel its important to offer our clients more than just a “Pile it high, sell it cheap” solution. We get most out of building an ongoing relationship with our clients – afterall, you can’t “Crack google” in a couple of days! (or conquour the web in a weekend…)

At ee-web design we like to work with small, local clients as well as the whopping big ones…

Chase Lounge is based in Enfield, just a stone’s throw from ee-web towers. Its an independent coffee shop run by Ed and his team, and reputedly serves up the best coffee in Enfield. They already have a great logo, which I reckon is going to feature heavily on the site.

Watch this space.

At ee-web design we have been looking after the West Ham Central Mission website for some time now.  Recently they asked me to develope an online shop for them. There’s always a lot to think about, not least of which is the thorny question of who is going to look after the financial transactions. Its an individual decision based on how much turn over you expect, what “Merchant account” cut is acceptable to you , etc etc

Read more…

West Ham Central Mission now have donations buttons on their website. You’d think this would be pretty easy really, and yes it would be…

Its a fairly involved process getting yourself set up to take money online. (The suppliers like Worldpay, Paypal etc all tell you its easy, but what they don’t tell you is that you have to decide how much of your hard won donation you’re prepared to pass to the company that handle the financial transaction – they always take a cut somewhere along the line… and a lot depends on how much you expect your store to turn over, number of transactions etc)

Read more…