Recently there has been a proliferation of “Do it yourself” applications offering a very cheap solution to getting a website up and running. The question arises “Do I really need to fork out for a web designer?” Find out why you probably do!

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!!!

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

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.

Some of my clients have been getting spam through the “Ask vendor a question” link in virutemart/joomla. You can reduce this by two steps:

First edit out the link “Ask seller a question about this product”

Go to site/components/com_virtuemart/themes/yourtheme/templates/product_details/flypage.tpl.php Assuming this is the flypage you are using (which it maynot be… you’ll know, because this wont work!). Once there comment out line(ish) 48 which says

   <td colspan="2"><?php echo $ask_seller ?></td>

like this

 <td colspan="2"><?php //echo $ask_seller ?></td>

So that will remove the link – however, those nastly littke spammy bots will probably have the address of your form … so you need also to take action with that page. I have tried putting a simple php redirect right at the top – this means that if the bots arrive they’ll be re-directed – in this case back to the index page.

This time go to site/components/com_virtuemart/themes/yourtheme/templates/pages/shop_ask.tpl.php and add something liek this right at the top (make sure NOTHING has gone out to the screen before eg no echo statemetns…) SO in other words you have something like this right at the top.

<?php
header('Location: http://www.domain');
exit;

Really, this is a brain-dump for me so that next time I have to do this I can remember.

First steps into customizing elemin theme. Inside the “elemin” folder is style.css – this is the main style sheet for the theme, and has an incredibly helpful comment at the top -

DO NOT EDIT THIS FILE.
If you need to overwrite the CSS styling, create a new
custom_style.css in the theme folder and it
will automatically load in the <head>.

So I created custom_style.css in the same folder. Now quickly messing with this shows that you can alter global type things, like fonts etc (and I would suspect, widths and the like too… although I don’t know this yet

We probably will want to create a skin – (althouh at this stage I am a little unsure as to the difference between theme and skin – so inside the skins folder I created bq-blog, and copied one of the other skins style.css into this.

Between the two, I think we are on the way

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!!!

Landform Estates have been working with ee-web design to redevelop their exsiting site to make it more “google friendly”. A careful look was made at all the existing text, file names for images/documents, anchor text, main navigational text, all in the light of suggested new search terms. To improve the user experience “Fact” and “Quote” boxes were added to the site, along with a simpification of the image galleries. Read more…

A site that I have had running for over 18 months suddenly appeared to break with IE9. This only happened on two machines running IE9 and Win7 – I posted on a couple of forums to see if anyone could reproduce the error – and nobody could.

Here’s a screen shot of what happened – and you can see the live site at coinstreet.org

There should be a whole pile of content in the gray box, and underneath said gray box and photo.

Read more…