# Michael Gunner

1. ## Calculating distances between co-ordinates on Earth

If you’re working on a project that involves any sort of geolocation, distance plotting or such like – you’ll probably need to do this. But calculating a distance between A and B is not as straight forward as you’d think, primarily because Earth is not flat. Neither is it a perfect globe. Therefore, you need to take this into account when plotting distances between two points on Earth.

We do this using something called the Haversine formula. This formula allows you to take two co-ordinates on a globe and plot the distance between them.
$a = sin^2(\delta \varphi /2) + cos(\varphi 1).cos(\varphi2).sin^2(\Delta\lambda /2)\\c = 2.atan2(\sqrt{a}, \sqrt{(1-a)})\\d = R.c$

where
φ is latitude, λ is longitude, R is earth’s radius (mean radius = 6,371km), note that angles need to be in radians to pass to trig functions!

The main drawback of the Haversine formula is it assumes Earth is perfectly spherical, when really it’s not. In fact, Earth is slightly ellipsoidal, but even taking this into account the error deviation is at most 0.03%, so for most purposes the Haversine is accurate enough. It’s also worth baring in mind Haversine is “as the crow flies” – so it does not take into account hills, mountains, canyons etc that may actually add to the length of the distance.

So how do we turn this formula into usable code? Using PHP, we take five variables. We need the latitude and longitude of point A and point B as well as Earth’s radius, which is 3959 miles.

We input them into a function which converts the degree co-ordinates into formula-friendly radians, and then inputs them into the Haversine formula, exactly as you see it above.

You should be able to drop this function into your project and use it for calculating distances between points on Earth. You can read more about Haversine here: http://www.movable-type.co.uk/scripts/latlong.html

2. ## Input date-time on Chrome usability sucks

I’ve been waiting so long for date time input type implementation, and Chrome desktop has it. But frankly, the implementation is terrible, from the point of view of usability, as well as being pretty ugly.

With the date field, you get three controls. Unfortunately, they’re all tiny and quite fiddly, and whilst the button to bring up the date picker is fairly self-explanatory, the up/down controls are a little more ambiguous. The function of the field is also not in line with traditional date pickers, when clicking the field you would expect the picker to appear, but it only appears when you click the drop down. This may mean many users simply never even realise it exists.

The styling of it all is pretty ugly too, which surprises me. For example whilst the up/down controls have a gloss look consistent with other form controls in Chrome, the drop down button is a flat down arrow with no button styling at all. The date picker is the worst part, it’s far too small and has some strange styling, for example a blue border around each month.

There’s also a button with a dot, who’s function is not immediately clear. It turns out clicking it puts into the field the current today’s date.

The time field is also quite difficult to use, for example much like in the date field you have to manually move between each part (hours to minutes) either with your mouse or arrow keys. Granted there’s not really another way to handle this, but I would imagine most people will be switching between mouse and keyboard which makes it feel clunky.

In my honest opinion, the usability of the date field would be massively improved if the date picker was larger and better styled, and displayed automatically when selecting the field. I also think the time field would work better if it also displayed a picker – perhaps one that works similar to those on mobile devices.

3. ## It’s time to say goodbye to Internet Explorer 8.0

1 Comment

Your initial reaction to this is possibly a “whoa, you crazy fool!” But in all honesty, I think the time has come to drop support for IE8. By doing so, I’m following in the footsteps of many others, including the agency Zurb.

But why? Simply because IE8 usage is dropping off very fast, and the trend is a downwards spiral. Last year, I dropped IE7 support when IE7 usage was hovering at about the same point IE8 usage is now. Now, IE7 is pretty much finished.

A quick look at worldwide browser stats gives compelling evidence, IE8 usage is only three percentage points above IE10, which has doubled in just one month. By that trend, we can expect IE10 to have eclipsed IE8 usage within the next two months.

Of course, you shouldn’t go purely on global stats, you should also look at the stats specific to your site. But those paint an even more damning picture, out of 1200 visits in the last month to our main website, only a meagre 84 were IE8. In comparison, about 300 visits were from mobile devices, making the case for responsive design more compelling and justified than ever.

The time has therefore come in my mind to say goodbye to IE8. Hasta la vista, baby.

4. ## Get your own Instagram web page

Purely just for fun, I’ve put up an Instagram app I made.

This is a fun little page that grabs all your photos and arranges them on a grid. You can then re-arrange the photos by changing the filter you used in Instagram. It’s incredibly light weight – just 117kb.

If you already have Instagram, setting up takes five minutes. Because this uses the JavaScript API, it is purely static, however please be aware that this means anyone that sees your code can see your access token. You may not want that. If anybody want’s to fork this and convert to PHP, feel free.

It’s responsive, and on desktops you can enlarge the pictures. It uses Quicksand.js.

Do what you want with it but if you do use it, show me. If you’re comfortable with the code you can change it, or if you think the code needs to change, change it.

Fork on Github: https://github.com/bmike2013/minsta

Working demo: http://michaelgunner.co.uk/laboratory/insta/

5. ## Internet Explorer 10 Mobile/jQuery UI Touch Events conflict

Wondering why your lovely jQuery UI autocomplete isn’t working in IE10 Mobile? In fact, no jQueryUI widgets work properly out of the box with IE10 Mobile, or for that matter IE10 on Windows 8 when used on a touch device.

The problem is that IE10s touch events conflict with jQuery UIs touch events. Handily, Microsoft have provided a very simple CSS declaration you can use to remove the inbuilt IE10 touch events, and therefore this removes the conflict and your UI widgets should all work.

Stick the following in your stylesheet and it should fix the problem:

6. ## Custom InfoBoxes for Google Maps API v3

The default Google Maps infoboxes are all well and good – but you can’t style them. The infobox.js plugin however lets you do this. You can get the plugin here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

So how do you use it? This assumes you’re using more than one marker on your map. If you’re only using a single marker, refer to the link above. The first thing you want to do is stick in the options code for the box.

“boxText.style.cssText” defines our styling for the box. You could do this in your external CSS file if you prefer. The rest of the options should be fairly self-explanatory. As you’re plotting more than one marker, I’m assuming you’re using a loop. So you need to now incorporate your infobox into the loop.

After you have defined your marker (e.g. “marker = new google.maps.Marker”) you’ll want to attach an event listener. This simply tells the browser what to do when the user clicks on the marker. So you want your infobox here.

The “boxText.innerHTML” declaration simply defines what content is displayed inside each box. Because you’re looping through markers, you’ll want the correct content for each marker, not the same. Therefore, you should store your information in an array, in this case the array is called “markerinfo”. The “[i]” then simply increments which part of the array is used as the code loops.

That should basically be it. Remember, this post is for Maps APIv3 code that involves looping through multiple markers. If you’re only displaying one marker, or you’re not looping, your code may need to be different.

7. ## Dealing with my Psoriasis

I think you can probably tell, this blog post isn’t going to be about websites.

Three and a bit years ago I had a strep throat infection, which basically feels like a really bad sore throat. Unfortunately as a result of my sore throat, I developed Psoriasis. More specifically, the guttate variety. Guttate Psoriasis is different from the more common plaque psoriasis because instead of big patches of psoriasis, I get small spot-sized patches.

The spread of psoriasis on my body was quite rapid and unfortunately I was misdiagnosed by two different doctors on two separate occasions which led to a delay in getting the treatment I needed which mean my condition was allowed to worsen much more than it should have. It also meant me spending a lot of money on useless prescriptions. I was also devastated to discover when I got the correct diagnosis that there is no cure for the condition and in all likelihood, I’d probably have it in some form for the rest of my life.

I did however spend many weeks attending treatment at Brighton General Hospital, which was light therapy. Light therapy involves standing in a sort of tanning-booth for a short period of time twice weekly. Although it’s like a tanning booth the two shouldn’t be confused, tanning booths do not filter the UV rays they emit so are not effective and are also significantly more dangerous. However any exposure to UV radiation does carry risks. The great thing however was the therapy for me worked, and save for a couple of tiny bits I was cleared of my psoriasis. I then got on with my life.

About 4 months ago however a minor relapse started coming on. I’m still dealing with this relapse which has affected the skin on my face, arms, and trunk area of my body. My current relapse is nowhere near as bad as my initial outbreak, so I’m feeling positive about getting rid of it. I have a second doctors appointment booked and I believe I’ll probably get another referral to see a specialist and that will possibly result in more light therapy.

So how does psoriasis affect me?

• Social life. If I’m having a bad day or having a flare up on my face, I become a recluse. I go to work but that will be it, at best I’ll go to a friends house and watch a movie. Psoriasis makes conducting a healthy and engaging social life incredibly difficult, frustrating and demeaning. Even if you do pluck up the courage to go out, often people will look at you and point out your skin. Even when it’s done with the kindest and best intentions, when I do manage to go out the house, I’m doing it to get away from my skin, not be reminded of it.
• Comfort. When I have an outbreak, it makes me feel very uncomfortable. Basic tasks can become difficult, such as sleeping or having a shower – or even just walking.
• Humiliation and complete loss of self-confidence. I spent a lot of my childhood feeling extremely crap about how I looked. I felt very ugly. Things improved for me when I hit my late teens and I started to feel really good about my looks. I had spent my whole life trying to be happy with my appearance, when psoriasis came along and completely destroyed any hope I had of achieving that. I don’t think I’m ugly anymore, but it’s very difficult to see yourself as attractive when you have the condition.
• Relationships. Difficult enough for anyone, now imagine you have psoriasis and you can maybe get a feel for how difficult it is for me. I had a relationship last year with someone that didn’t care about my psoriasis which was great, but unfortunately it didn’t work out. Dating is really difficult because even if I manage to go on a date with someone, I have to confront that awkward moment when they turn up and they can see my condition. Many girls are not comfortable with the idea of dating a guy with psoriasis.
• My personality. Psoriasis has made me an angry person. Most of the time, I channel my anger into positivity, by working hard and trying to do good things. Sometimes though, it makes me a complete tosser. There’s really no other way to put it. It can make me a very horrible and difficult person to talk to and live with. I can’t help this though and try to deal with my emotions as best I can.

The important thing I have learned from having psoriasis is that it does not need to control your life and there are treatments out there that can and will work. If a treatment doesn’t work or loses effectiveness, just ask to try another. The good thing is every year many new treatments are being developed and gaining approval, so as time goes on there are going to be more and more options available to treat it which should hopefully mean the outlook is positive.

I’m confident that seeing my doctor next week I’ll be able to get this current outbreak under control and hopefully get rid of it altogether, and then I can get on with my life. I’m also confident that any future outbreaks I have, I’ll be able to deal with them too. I have to accept that I will probably have psoriasis for the rest of my life, but I’ve also come to accept I can still lead a positive and happy life.

I hope if you are reading this, you have learned a bit about psoriasis and it’s true effects and how horrible it can be to live with. So if you know anybody that suffers from it, keep it in mind and if they’re stressed or short tempered, give them a break, it is probably because of their skin. Don’t stare or ask stupid questions or treat them differently, be kind and understanding to their condition and be there for them as support and care.

8. ## Clients beware, template resellers thinly disguised as web designers, the true cost of a bespoke website

1 Comment

Ever heard the saying, if it’s too good to be true, it probably is?

With the huge popularity of theme marketplaces such as themeforest, there’s been an increasing and worrying trend in the industry of individuals setting themselves up as web designers, when they are really just theme resellers.

Being a theme reseller in itself is not a bad thing, and using pre-made themes for a clients website is not necessarily a bad thing either. If a client just wants a cheap small website, then sometimes a template is the best way to achieve what they’re looking for within their budget constraints.

The issues here are of deception and ignorance. Most clients are not going to be able to tell that their bespoke £350 custom built WordPress website is actually a £15 template off themeforest. This is partly also due to the fact that a lot of templates on themeforest are actually of high quality, at least visually.

This may beg the question then – why wouldn’t a client want to save money and use templates all of the time? Why bother with a bespoke design at all? There’s no blanket right or wrong answer to this but it really depends on your budget and your business.

Remember, your online presence is the online identity of your business, and just like your logo and branding should be unique, so it is also better that your website is too. The problem with templates is anybody can use them. Many templates on themeforest have been downloaded tens of thousands of times, meaning there are potentially tens of thousands of other businesses using the same design.

Imagine how embarrassing it would be for your builders business if somebody told you that your brand spanking new website looked exactly the same as the website for another builder in the same town. Your website is your chance to distinguish yourself from your competition, and make a unique impression on the client. Your web design should reflect your business, and a template doesn’t do that. Templates are designed to be generic, and by being generic, they are forgettable.

Individuals that resell pre-made templates to clients as bespoke designs are also a problem for the industry as a whole. Why? Simply because, they devalue the profession of web design. If you are a client, and you see one web designer offering a custom built bespoke website for £150, then understandably you may be a bit miffed as to why another web designer is quoting you £2500.

The reality is however that the £2500 is probably more likely in line with the work involved. So if you’re a client looking for a website, how much should you be expecting to pay for a bespoke design that isn’t a cheap existing template? Here’s a very rough break down that will hopefully help.

• Up to £500 – For under £500 you’re not going to get a high quality, well built bespoke website. The reality is, either the website will be of fairly low quality, or the web designer building the site for you is cutting corners by using pre-made templates. Be very aware of any web designer that offers you a completely unique bespoke design for figures in the hundreds. Remember, you can buy the templates yourself for £15-30.
• Up to £1000 – For between 500 and 1000, you may well get a high quality bespoke design. However, you’re more likely to be dealing with a junior designer starting out in their career, rather than a seasoned professional with many years experience. This will of course depend on the complexity of the website, for example an E-Commerce website involves a lot of development time so it’s unlikely you’d get a completely bespoke E-Commerce website from a professional for under £1000. If you do, they are probably using some pre-made templates or cutting corners in other areas.  However a more simpler website, or a simple CMS, then this is possible.
• Between £1000 and £3000 – in this price bracket, you can expect a high quality CMS website and a good quality E-Commerce website. You’re still going to be restricted in terms of function. E-Commerce and CMS websites are almost always built using existing software – this helps keeps costs down and makes development quicker and more efficient. Think of it like the wheel – it is a waste of time and resources for developers to re-invent something that already exists perfectly well. However, if your website has some unique functionality, or is particularly complex (think intricate databases, social networking etc) then you’re probably looking at the next price bracket.
• Between £3000 and £10,000 – In this rough price bracket, you’re looking at very high quality, comprehensive and bespoke CMS and E-Commerce websites, as well as websites with more advanced, bespoke and specific functionality that may have to be built from the ground up. You can expect a professional and complete solution to your needs.
• Over £10,000 – If you can spend over £10,000 on a website, you can expect to be looking at something that is created by a large team of professionals over many weeks. Your project would be their job for sometime, and the solution would be bespoke, professional, and of the absolute highest quality.

If you’re a client, you may be shocked that a website could cost £2000, let alone over £10,000! But the reality is, it’s not the rip off you might think it is. Websites are costed generally speaking in terms of the level of profession of who is making your website, and the length of time it will take.

Even a basic bespoke three page website would usually take me three days to design, code and test. That roughly works out at about £360 based on working 8 hours per day at an hourly rate of £15 an hour. £15 an hour is not at all unreasonable for a developer and designer of my level – someone with ~8 years experience (I have 3) would be more like £30-100 per hour. How does a website then end up costing £2000? Probably because your website is more complex and probably involves a CMS. A bespoke CMS website would take me as an individual about 2-3 weeks from concept to completion. At the same hourly rate as the three page site, that now comes in at £1200-1800. When you realise that you’re essentially having to pay someone for 2-3 weeks work, suddenly you should hopefully realise the pricing is not unreasonable. And how about websites that end up costing £4000, £10,000 or more? That will happen because you’re probably effectively hiring a small team of people for a few weeks.

And don’t forget, professional web design and development is a highly skilled and difficult profession. You’re not paying someone to put butter on a shelf at Tesco! How much did that plasterer cost you? Or that building work?

The bottom line is, as a client, if you’re looking at spending hundreds rather than thousands, you’re either looking at a very simple, basic website, or it’s probable that you’re looking at the use of a template, or cutting corners in other areas by whoever is making your website. This isn’t necessarily a bad thing, your budget is your concern, but it’s important to make sure your expectations are in line.  If you want a complete, comprehensive, bespoke and unique website with advanced functionality such as CMS or E-Commerce, you need to be prepared to spend over £1000 to work with a web design professional.

9. ## Helpful tools and websites for designers and developers

So what do I use? Here goes…

#### The Web Design Forum

Get helpful advice from a solid community, a mixture of seniors and juniors. Post up whatever problems you’re having and you’ll get a helpful response. Also a good way to network with other developers and designers, and networking can be hugely beneficial.

http://thewebdesignforum.co.uk/

#### CSS Tricks

Infamous CSS and HTML blog run by guru Chris Coyier. Coyier is one of the most well known authorities in the area, so he’s a very important person to be following.

http://css-tricks.com/

#### Tutorialzine

Tutorialzine is run by the immensely talented and respected developer Martin Angelov, and covers a wide range of topics. His tutorials are occasional but always of the absolute highest quality, and he helps instil excellent coding practise.

http://tutorialzine.com/

#### Paul Irish

Paul is another important person to follow. Irish works for Google on the Chrome developer relations team, and a lot of his posts are insights into features of the browser. He is also a jQuery team member, developed the HTML5 Boilerplate, and is a curator of HTML Rocks as well as the Creator of HTML5 Please – both of which you should have bookmarked.

http://paulirish.com/

#### Lea Verou

Lea Verou is a front-end developer whizz from Greece. She is an influential member of the industry, and she speaks at many conferences and events on issues regarding primarily CSS and HTML, highlighting modern techniques. She is also an advocate of Polyfills, as am I. Check out her projects page, there are dozens of useful tools that can help your projects.

http://lea.verou.me/

There’s a lot more, I’ll be adding to this over time.

10. ## What were American Airlines thinking?

American Airlines, the troubled American airline currently in chapter 11 bankruptcy, recently refreshed its branding. Along with the branding refresh comes a brand spanking new website which reflects the new logo and colours. Initial impressions are positive.

Well, now this is nice. It is extremely clean and de-cluttered and it feels very fresh. I love the use of big images as well as the design focusing on the flight search. I also find the tabbed forms an elegant method of dealing with multiple forms without clutter. Overall, this is a very good web design, and I suspect their conversion rates will sky rocket as a result. This is a design that leaves a last, positive impression.

Then we move on to the booking page, and sadly we’re greeted with this.

What clearly has happened here is the website has been re-designed around the existing booking system and forms. What this means is that on the booking page, you have the old form, with its old styles, surrounded by the header and footer of the new website. That the home page precedes the booking page also does the site no favours, it suddenly feels jammed together. Notable issues:

• Submit and Clear form buttons are a usability problem. Whilst red is often a good choice for a call to action, in a web form I would argue it more likely symbolises clearing or resetting the form. The tiny size of the buttons also makes them difficult to identify and locate.
• Far too many shades of blue. When your branding uses a specific colour, you should try not to deviate from this too much in your web designs. Using the same shade of blue throughout produces a more coherent design that matches your branding, which helps reinforce it.
• In this day and age with tablet and mobile browsing usage on the up, as well as larger desktop screens, form fields need to be bigger than default. At this size, they are small and difficult to use and the text inside is small and hard to read.
• Separate drop downs for date fields. This is quite common, but with many options available for date pickers it seems a strange choice, and makes the form much slower to fill in. Providing a visual representation of dates as a calendar makes it much easier for users.

The booking form is generally pretty ugly, dated looking and not particularly user friendly. It seems strange that AA undertook such a massive re-branding exercise yet completely neglected to change the most important element of their website. It may just be a case that the form is still to be replaced, which begs the question, why didn’t AA wait until the form was re-designed before renewing the rest of the website?

When you explore the site further, it soon becomes apparent this isn’t just an issue with the booking page. Visiting other pages also brings about this issue of a clash between the header and footer of the new website and branding, and the content of the old website, still styled how it was before. The end result is a website that is a mash up of an old website and a new website, which seems remarkable, as well as being confusing, lacking cohesion and difficult to use.

No company of the size of AA should release an unfinished website, and old and new websites should almost never be mashed together in this manner.