Your time is valuable – use it wisely!

Recently I needed some electrical work done – and probably I could have done it. However, in the end I got an electrician in who did it in half a day, and definitely did a better, safer job than I would have done. Also, I got on with what I do best – building web sites/applications – or put it another way  - earning money…

A friend of mine  is setting up a new business creating a quality product, and I am sure they will do well. Oddly (to my mind) they have been advised to use one of the off the shelf solutions to create their website. Now they are stuck, and asking me how to do this and that. Running a business is a full time job, and personally I think your should be spending your time building the business, not trying to save a few hundred pounds and giving yourself a load of extra stress. Surely its just not worth it!

The Personal Touch

A good web designer / developer will help you work out exactly what it is you are wanting to do with your site, as well as make suggestions that you probably haven’t even thought about. After all, you probably run a business or have a job and don’t have hours to do the necessary research. And if you’re anything like me having someone you can trust to help is worth its weight in gold!

At ee-web I stress the importance of building good relationships with the people I work with and for. This isn’t just “Empty” words. A happy client is likely to be a returning and referring client!

Understanding the Technology and recent developments

The technology on the web is ALWAYS changing. You are probably not an expert, and therefore there are likely to be things that you haven’t thought of. Again, that’s where a good web designer will help!

Design should be lead by your needs, not squeezed into an existing formula.

Imagine you’re cooking your favourite meal – you can use a pre-made sauce, which will probably be ok, but not exactly as you’d want it (likely to have too much salt/sugar!!!!). Or, you can make the sauce yourself, and end up with a unique flavour. Of course, it will take longer but the final result is better.

Every client has a unique set of requirements for their website. Perhaps yours will fit exactly into the specification of the “Off the Shelf Sauce” solution. But to create a great product, you shouldn’t allow the technology to dictate what you can and can’t do. Surely your business deserves that “Personal touch“?

What happens if it goes wrong (or do I mean “When…”)

Recently I have found that more of my work is trouble busting for clients. They say things like “Such and such doesn’ work” or “I just can’t make it look right”. Chances are, unless you are a web whizz you will need some support. So, form a working relationship with a web designer has got to be a business requirement.

This is draft post which is bound to get updated!!!

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

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…

At ee-web development I love a problem to solve… but before we solve it its worth showing why I love this map application so much. Just by adding a a little “Find us” type input box you can guide your user to get directions WITHIN the website – it just looks SO professions (you can tell, I am a fan yes?)

This light box shows the idea…

As you can see the affect is really great – and you can easily alter the layout, send it off for printing and so on.

So, How does responsive design alter this harmonious situation?

One of the principles of responsive design is to make the images alter their size as the browser window alters. I have been doing this by adding a few lines of css, with (naturally enough) a little fix for one of the lovely IE browsers (in this case 8 – which happens to be the best of the full IE releases in my humble opinion…) In effect we’re setting the width of the image to that of its container. I have tried using other percentages too, and so far so good.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Well, this causes a problem with the zoom control on the maps. After hours (literally) of searching around I find that it the google code doesn’t appear to like the “max-width:100%” line.

You can see the problem it causes in the first image above – the zoom control is all over the place.  So, I set a line in my css like this. Don’t forget the selector needs to be very specific, or you’;; turn off all your responsive images!

#map_canvas img{
max-width:none;
}

and everything is all right – except of course its now not responsive …  to make it so…

you’ll have to read part 2 of this blog post – when I have worked out the solution!

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

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

The <meta name=”description” content=”Brian the two month old labrador puppy goes for his first walk in the park” /> gives google et al a summary of what the page is about. The <title> might be a few words, the description could a short paragraph. Google MIGHT use them as snippets for your pages. MIGHT – because google may choose to use a relevant section of your page’s visible text if it does a good job of matching the search term. Its always good practice to add this tag, in case the friendly robots can’t find a good enough section of text within your page.

Words in the snippet are bolded (emboldened?) when they appear in the user’s query and so gives the user a clue about whether the content on the page matches what he or she is looking for.

Write a description that both informs and interests the user and use unique descriptions for each page – avoid a single description across your site.

Once you tell us your preferred domain name, we use that information for all future crawls of your site and indexing refreshes. For instance, if you specify your preferred domain as http://www.example.com and we find a link to your site that is formatted as http://example.com, we follow that link as http://www.example.com instead. In addition, we’ll take your preference into account when displaying the URLs.

Also, as a belt and braces thing I often set a 301 re-direct in the .htaccess file. This then means that should anyone follow a link such as http://mysite.com/apples they will be automatically redirected to http://www.mysite.com/apples – and this is what will appear in the browser window.

You can set the .htaccess file like this

Options +FollowSymLinks
RewriteEngine On
#to send mysite.com -> www.mysite.com
RewriteCond %{HTTP_HOST} ^mysite\.com
RewriteRule ^(.*)$ http://www.mysite.com/$1 [R=permanent,L]

There’s lots of good info out there on how to edit the .htaccess file – try

• http://www.isitebuild.com/301-redirect.htm
• http://knowledge.freshpromo.ca/seo-tools/301-redirect.php
• http://www.website-development-training.com/301/

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.