Category: web design

Bower – A Front End Package Manager Tutorial

bower tutorialRecently, I’ve been looking for ways to streamline and improve my workflow with frontend assets. This is the first article in a mini series, where I’ll be explaining my updated workflow with Bower and GruntJS. Part one covers Bower, a package manager for frontend assets and packages – this article is short Bower tutorial for the uninitiated.

Bower is comparable to Composer (a dependency manager for PHP), except for frontend assets. This is great news for any project as Bower allows for stress free management, tracking, finding and updating of all frontend assets for a project.

Previously, you may have manually copied in an updated version of say Twitter Bootsrap or JQuery into a skeleton project, or even have left and older version that has been blindly copied over. Even in medium sized projects, this process of manually setting up each package quickly becomes tiresome. Checking the version, downloading the package, updating references to any changed files etc. Instead, let Bower take away this work.
Continue reading Bower – A Front End Package Manager Tutorial

Microsoft Drop Support for Dated Versions of Internet Explorer

Drop Support - Dated IE

Web Developers & Designers alike can rejoice! As of 12th January 2016 Microsoft will no longer provide security patches and updates to dated versions of Internet Explorer. In an official announcement, Microsoft said:

.. only the most recent version of Internet Explorer available for a supported operating system will receive technical support and security updates.

Continue reading Microsoft Drop Support for Dated Versions of Internet Explorer

Website Transfer Guide – Common Pitfalls & Solutions

A Different take on the normal “Website Transfer Guide” …

Taking over, or inheriting responsibility for an existing website happens to any web designer or developer at some point. In theory, website transfers sound extremely minor and insignificant – take a backup of the site, re host and away you go. As a result, if you Google something generic like “transfer web site” you’ll get lots of guides that are technically correct but rarely work in theory, as external factors have a big part to play. For instance, look at the website transfer guide of 123-reg.It appears transferring a site is a case of following a couple of basic points. It really isn’t! In reality, taking responsibility for a website is an absolute minefield and deceptively complex. A website transfer guide should reflect these complexities. What follows are some points to consider, from the view of a web developer when doing just that.

Continue reading Website Transfer Guide – Common Pitfalls & Solutions

Yell Websites and Template Recycling – A Review

yell web design reviewIt’s been fairly common news for a while now that the age old Yell.com offer web design services, or “Yellsites” as some have coined it. There’s been a lot written about this fact, with some people citing lots of reasons why Yell websites are evil. There also a fairly in depth post that goes on to actually explain why the author dislikes yell.com websites over here. Additionally, there is also a big pool of annoyed people over at the infamous reviewcentre.

Personally, I think their sites will never set the world on fire, but at the end of the day Yell are tapping into a certain and very specific niche where the majority of their clients are very small businesses. It’s truly a case of you get what you pay for (even if a Yell.com website will cost you more overtime, which is what I assume is key Yell’s business model). For me, it’s great really, as seem to have lots of clients who currently have a Yell site, realise their site isn’t performing for them and want to move on – in I (or any other web person) step. Yell are clearly going down the bulk route with their sites being mass produced and based upon templates – at the end of the day they aren’t charging bespoke prices (in the short term anyway). I say fair play to them if they want to go down that route. This post isn’t in any way intended to knock Yell.com websites in the least. Although I’m not a fan of their apparent sales patter I keep hearing about where Yellsites say they have a special partnership with Google” or the “Did you know Yell.com is the most searched UK website” – for the record, both of those statements are frankly lies and total rubbish.

Continue reading Yell Websites and Template Recycling – A Review

Epic Fix for IE6 Browser Issues

I’ve come across an endless list of IE6 hacks and apparent fixes for the one browser that still causes many issues. This on is my favourite:

<!--[if IE 6]>
<meta http-equiv="refresh" content="0; url=http://www.microsoft.com/windows/internet-explorer/default.aspx" />
<script type="text/javascript">
/* <![CDATA[ */ window.top.location = 'http://www.microsoft.com/windows/internet-explorer/default.aspx'; /* ]]> */
</script>
<![endif]-->

Drastic, yet very epic and takes seconds to implement. Solves all your IE6 problems 🙂

Object Oriented CSS (OOCSS) – My View

After reading an article about OOCSS (Object Oriented CSS) I was left a little numb and confused to be honest. I’d advise you read the full article before reading what follows.

The idea is fairly simple – write your CSS using a “bottom up” approach, as opposed to a “top down” approach, treating your elements as “objects”, using mainly classes, as opposed to IDs. The idea of this is to make classes more reusable and to encourage a greater css granularity architecture. The overall theory behind OOCSS is something I don’t dispute in the least, if anything it’s simply good practice when writing a CSS file.

For me, the whole article borders on the pedantic to the outright pretentious.

Firstly, I’m not a fan of the name. “OOCSS” implies a link to OOP (Object Orientated Programming), which it is not. I can see why they’ve named it OOCSS as I guess multiple classes could be similar to inheritance, an element on your page as an “object”, classes imply reusability etc. As a web developer, who uses OOP I was instantly put on the defensive, thinking “OOP for CSS, wtf”. I understand the name is simply a paradigm, but it sends out all the wrong signals for me personally.

Apologies if this article turns into a bit of a rant…..

Continue reading Object Oriented CSS (OOCSS) – My View

ECommerce Content Source Ordering for Product Detail Pages

Content source ordering or SOC (source ordered content) is the idea that content nearer the top of the raw  HTML source code has greater weight and meaning for search engines. For instance, a paragraph of text right at the top of the HTML source has more meaning than the same passage that may appear in the footer. It is very useful for those all too common generic menus (home, about, contact etc.) that has no SEO benefit at all, yet appears at the top of every page of your site. With SOC and absolute positioning of DOM elements, it is possible to position this HTML at the very bottom of the source code, thus gicing greater weight to your page content.

The latter is not a new idea by any means, but is generally considored to be a positive practice to implement on any site.

Continue reading ECommerce Content Source Ordering for Product Detail Pages

CRO and SEO – The Essential Relationship

Lately, I’ve been reading a lot of SEO related posts at the web design forum and have been contacted by a lot of seo agencies at work (my email may be doing the rounds). The thing that I’m most amazed by is what a narrow and ultimately incorrect, view of search engine optimisation some people and companies seem to have.

Let me elaborate.

As much as I love the web design forum, some of the advice given is frankly, awful, I can’t not post a reply. A lot of the advice given is a range of generic seo quotes that people have picked from the web. E.g. ‘use headings’, ‘have a keyword density of 4%’ and ‘get backlinks’. The majority of the advice centers around simply getting people on a website or appearing for a generic, competitive term. Compare the latter to SEO’s calling me up at work (and I quote) – “there are 9,000 people searching for xxxxx every month, imagine having 9,000 more people on your site every month”.

All this is fine in theory. However, say you do manage to appear for a generic competitive term or get 9,000 new people on your site – what then. There is a high likelyhood that your boucne rate (or percentage of people who leave your almost immediately) will increase a lot.

Continue reading CRO and SEO – The Essential Relationship

JQuery UI Love

Recently, I’ve completed a fairly large project that involved an invoicing system and electronic time cards. As the system was based in house, I decided to make extensive use of JQuery UI. After taking some time to reflect on this I decided to show JQuery UI some love and write a short list of reasons whyit totally rocks, as it made my life as a developer a lot easier. Yes, it is overkill importing the whole Jquery UI library and using a single, none essential widget, on a one page smaller site. However, when you have a medium sized system, that requires a large range of interactions, there really isn’t anything else I’d rather use, personally.

The Range of Widgets Available

Firstly, I made use of nearly all the widgets available – this resulted in the final system being highly interactive and useable. For instance, having the ability to sort items simply via dragging and dropping when down extrememley well on the useability front with users. JQuery UI made it very easy to save these sorted positions to my database. Having to write something like this from scratch would have been impossible (for me anyway :)) and been very time consuming.The dashboard/portal area was another area, where the requyirement to personalise the location of various content boxes was made easy.

The JQuery Dialog went down a storm too on the useability front too, as people were used to nasty old default JavaScript ones – the ability to include HTML within each dialog, on the fly allowed me to achieve some pretty informative and useable diaglog.

Continue reading JQuery UI Love

Image Masking with CSS and HTML

A recent web design called for the following:

  • the client must be able to upload their own banner images
  • the banner image was not square and had a transparfent mask around over it (in Photoshop, the banner image was underneath a clipping mask)
  • The design must function in a range of legacy browsers

This presented a major headache. Usually uplaoding a totally square image is easy – a client can do this with ease themselves. However, the client in question has no experience using using Photoshop (and why should they to update their website?) and wouldn’t be able to upload a masked image. Additionally, using some of the new CSS3 image masking properties are out, as I need to support IE6 and above.

So, the solution here is to use a transparent image to overlay the square image – meaning a client can upload a square image and have it show masked on the live website – see the final result of what we’ll be making.

Continue reading Image Masking with CSS and HTML