Michael Gunner

Michael Gunner

© 2015 Michael Gunner. All rights reserved.

Author Archives: Michael Gunner

  1. 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.

  2. Helpful tools and websites for designers and developers

    Leave a Comment

    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.

  3. What were American Airlines thinking?

    Leave a Comment

    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.

    american airlines new website

    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.

    american airlines new website

    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.

    American Airlines new website

  4. Using PHP to fix database irregularities

    Leave a Comment

    We often have to use databases in our projects, and sometimes these databases have been sourced from elsewhere. The problem we often find is that these databases can be incomplete,  missing information, or not formatted how we want.

    Let’s say for example that you’re pulling strings out of a database, but some of them are missing a word that for some reason or another, is critical to our application. There are ways to comb through databases to fix these issues, but if for some reason you can’t get that working, you can always use PHP.

    You can use either stripos or strpos to check for missing words from a string. The difference is stripos is non case sensitive, whereas strpos is case sensitive. Simply replace “word” above with the word you are looking for. The script will then check the first value of the string for the presence of the word, and if it is missing it adds it in. If you need to check a different value in your string just change the parameter. For example, to check the second value, use [1] instead of [0].

  5. Use WordPress get_template_directory function in external JavaScript

    1 Comment

    Here’s a useful snippet. If you develop for WordPress, you’ve probably found you either have to hard code URLs in your external JavaScript…or put the JavaScript in line. Neither of these is ideal because the first won’t work when the theme is installed on a different URL, and the second will make your header look bloated and possibly slow your site down. It’s just not good practice to have JavaScript in line.

    But there is a way, and it’s very simple. First, you need to declare a JavaScript variable in your Head.

    Make sure this is before your external JavaScript. Now, where you need to echo that function in your script, you simply echo the variable instead. E.g:

    If you ever find yourself needing to use other WordPress theme functions in your Javascript, there’s no reason you couldn’t use the same principle with other functions.

  6. New Website

    Leave a Comment

    I have just updated my website with a new design. I hope you like it! It is, as expected, fully responsive, so by all means do enjoy visiting on your mobile or tablet.

  7. Elliptical Rounded Corners CSS3 Browser Support

    Leave a Comment

    So you want rounded corners, but you don’t want them perfectly round. Seeing perfectly rounded corners everywhere looks almost as rigid as plain ole’ square boxes can. But if you didn’t know already, you will now – you can do elliptical rounding in CSS. You simply specify two values, the horizontal radius and the vertical radius.

    Unfortunately, each browser engine decided on different ways of interpreting these values, leading to some seriously bloated code, which is probably why you haven’t seen much about it. The good news is the code has got simpler, and updates to Firefox, Chrome and IE means the latest versions of these browsers (and IE9) don’t need vendor prefixes and use the same standardized syntax.

    Old Code

    Short-hand old code (FF)

    Argh. What a mess! But now we can settle with just the following.

    New Code (Chrome, FF, IE9+)

    As I say though, this is with the latest versions of these browsers so if you’re concerned about users stuck on old versions of FF and Chrome you may want the prefixes anyway. And of course as you’d expect, there’s no IE8 or below support. I also can’t get my copy of Opera working so if you’re bothered about Opera support you’ll have to test that for yourself! Here’s the Codepen: http://codepen.io/anon/pen/hyErL

  8. MailChimp API cURL

    Leave a Comment

    Please note, this article assumes you have a basic understanding of PHP.

    If you’re looking to integrate MailChimp subscription into an existing web form you’ve written yourself in HTML and PHP, hopefully this will help. Firstly, make sure you have a list setup in MailChimp for addresses to be added to. Also make sure when you set up the list, you add the relevant “Merge” tags you need. Examples include first name, last name, address etc.

    We’re going to use the cURL method, which I find is the easiest. We’re essentially using cURL to send the information we want to MailChimps servers.

     

    1. In your Mailchimp account, sign up for an API key and note it down.
    2. Go into your list settings, at the bottom is a unique ID. Note it down too.

     

    In this example, I’m assuming your form script has something like this going on:

     

     

    In other words, assuming the information validates, we’re then displaying a page that confirms the submission. We ideally only want to fire off our MailChimp request after we have sent the form, so we’re going to place the MailChimp code inside our success statement.

    The code above also checks a check box we have in our form that allows the person submitting the form to choose whether they subscribe or not. So they only get added if they want to be. The id of the checkbox in this example is “Subscription” but yours may be different, so change it as appropriate.

    If you are asking for peoples names in one field, rather than separate first/last name fields, use PHP’s explode function to split the name, you can also write it to exclude middle names etc.

    Replace the API-KEY and LIST-ID with your relevant information. You’ll also need to setup your MERGE tags. In this example, I have two tags for “FNAME” and “LNAME”. If you have the same tags you can leave the code, but if you have different tags or need to add more, what you need to do first is add them to the array at the top. When you have done that, you can add them to the URL.

    Place that in the URL (after the other Merge tags). Then you reference your array after the URL, using:

    That should basically be it. It took me a lot of trial and error to get this all right, as I’m not a PHP developer, but if you use this code it should be fairly straightforward for you to setup.

  9. Expanding Excerpts the non-Ajax way

    Leave a Comment

    A lot of blogs have this feature whereby posts are listed as Excerpts, the full post can then be dynamically loaded by the user. If your full post is still only text and small images, then I feel AJAX is overkill as loading this content on page load is not likely to slow the site down significantly, and whilst AJAX is great, it can be annoying for the user to have to wait for the content to be fetched and loaded.

    Click here to see the result