Category Archive: Web Development

  1. New Designs

    Leave a Comment

    Since starting as the in-house web developer at the National Hyperbaric Centre, I’ve been responsible for designing sites as well as building them. Design is something that I’ve always enjoyed and am really happy I now get to work on live sites that are responsible for generating leads for the business.

    Towards the end of last year, two more sites that I’ve designed and built went live and I would like to share these here.

    nhc Training
    nhc Training is a mini-site solely focused on the training department at the National Hyperbaric Centre, whose main purpose is to advertise our upcoming courses and attract users to book on those courses. The old site had a list of courses but was built with a JS table which meant that the courses were not indexed by search engines, and as a result traffic was fairly low.

    One of the main aims of the site was to increase enquiries and to also increase awareness of the courses that we run. This is monitored in a number of ways, including the number of booking and enquiry forms that we receive and also the increase in traffic from improved search engine performance. I’m pleased to say that since launching the re-design in November we have seen a significant increase in both traffic as well as enquiries. We’re also seeing an increase in traffic coming from search engines which we see as a good statistic.

    DiveCert
    DiveCert is a certification and planned maintenance software package designed for the diving industry, and plays a valuable role in maintaining dive systems. The previous site had been left dormant for a while, and during the course of it’s rebrand it was necessary for a new site to be created. We decided to ditch the previous multi-page layout in favour of a one page design as this allowed us to present the information in the best way. Making use of HTML5 video, this site definitely stands out within the industry.

    I’m pleased with both of these sites and am working on a few other redesigns currently which I look forward to sharing here upon completion.

  2. Should I use a carousel?

    Leave a Comment

    Homepage carousels are almost ubiquitous in web design today, with a almost every homepage having some form of rotating element or another. These have got to the point where they have become a standard feature, and in my last employment I don’t know a site that didn’t have one.

    There appears to be little research into the effectiveness of such things, where a lot of the time these are placed on the site as a way of pleasing different departments within an organisation and highlighting lots of homepage content.

    Should I use a carousel is a site I came across last week which challenges the effectiveness of these items by supplying data about how little they are used on some sites. It’s a handy resource for looking at some stats, but the biggest thing I drew from the site was that sites should have comprehensive tracking of each element and interaction to measure the success or failure of these.

    Like everything on the web, carousels will be appropriate in some cases but not others but the only way of knowing that is to measure that on your site. In order to fully understand your sites users and measure it’s effectiveness the site should be reviewed regularly and any under-performing areas looked and and addressed. If you have a carousel on your site and it is a well used feature then it can be left, however if there is a lack of interaction then considerations for replacing it should be looked at. Anything on the website should be justified in being placed and when it stops being effective then alternatives must be sought.

  3. Geolocation

    Leave a Comment

    Geolocation has been around in the spec for a while, but hasn’t really taken off on the desktop as yet. It’s hugely common in mobile apps for it to ask for your location, but rarely for websites to request this information. Such information can provide localised information relevant to where the user is, and whilst hugely beneficial on mobile devices when out on the go, such information can be put to good use on the desktop as well.

    One example where this is used effectively is on the Pizza Express website, where upon sharing of your location will display the nearest restaurant to where you are, and contact information for the restaurant as well as a clear call to action to book a table at the restaurant.

    Such a simple use of this technology is effective and one which I feel provides a lot of benefit to the user and could be easily implemented onto more on sites. Coming up I will demo how to create a simple call to ask for the user’s location.

  4. Blink

    Leave a Comment

    This week, Google announced that Chrome would begin to use it’s own rendering engine called Blink. The decision was taken after apparent disagreements with Apple over the direction of core elements of Webkit, and means Chrome will even more than before be different than Safari.

    Chrome has always used it’s own forked version of Webkit which had slight differences, and contributed code back to Webkit as it was developed. However, with the change to it’s own engine this will now stop and the differences between Chrome and Safari will grow greater.

    Google have a good record of keeping Chrome current and implementing new features that make life easier for developers and this should continue with features being added, and diversity can only be a good thing within the standards process.

  5. HTML5 Changed Elements

    Leave a Comment

    Changes

    As well as the well-documented additions to the HTML5 spec, a number of elements have had their meanings changed to reflect the changes in the way websites are built and also some previously deprecated elements have been brought back so to speak and now have valid, semantic meaning, allowing us to use the b, i and s elements again without the need to feel dirty whilst we do so!

    A list of the changed elements is listed below:

    a

    The anchor elements changes in the manner that block-level links are now valid code. This has been supported in browsers for a while, but is now valid. Also, using the name=”#id” convention is now obsolete which was typically used for in page navigation. Instead, apply this technique to it’s containing element. The target attribute is now no longer deprecated “as it useful in Web applications, particularly in combination with the iframe element.”

    The media attribute is new and can be used in conjunction with CSS media queries.

    b

    The b element has changed from the presentational meaning of bold text to “offset text conventionally styled in bold”. This doesn’t appear to be a massive shift in definition but is a way of separating out content from it’s surroundings without providing any extra meaning. The em and strong attributes embolden the text but provide emphasis on the text, whereas the b element has no extra meaning and is useful in a range of situations.

    cite

    The cite element refers to the title of a cited work, and not an individual as previously defined. Cite should not be used to mark up a person’s name and instead refers to title of work, ranging from a document to music to games or in fact anything that is referenced in a document.

    hr

    The hr element used to be a purely presentational element which was used to insert a horizontal line on the page, though it has now been given the meaning of a “paragraph level thematic break”. This means that it can be used to break up a paragraph or to indicate a change in content – it can be used to provide a transition between content within a document and provides a link between the two.

    i

    The I element is similar in meaning to the b element in that it used to be a purely presentational element and now represents text that is offset from it’s surroundings but provides no extra emphasis. Anything that is usually presented in italics, but requires no emphasis then the I element should be used and there is no need for extra spans messing up your markup.

    menu

    The menu element has changed from a “single column menu list” to specifically referring to a list of commands. Potentially more useful in web applications as opposed to traditional websites, the type attribute declares whether it is a toolbar or a context menu. If no type is defined, then it represents commands that are neither a toolbar or context menu.

    s

    The s attribute was a purely presentational method of applying a line-through to text, however this has been changed to be given the semantic meaning of “struck text”, which is text that is no longer accurate or relevant. An example of this would be previous prices on e-commerce sites, I’ve been using this element to mark these up and has the benefit of more semantic meaning and no need for presentational span elements.

    small

    The small element was also a presentational element which referred to text which was to be rendered as small. This has now changed to be given the semantic meaning of “small print” and refers to content such as copyright notices, or links to the development company of the website.

    All of these elements valid code that can be used today in practice without fear and with the benefits of reducing mark up and the need for styling additional span elements which add clutter to our markup and also provides more structured, semantic meaning to our code.

    An excellent html resource and a great place for keeping track of the changes is in fact the HTML working draft, which is available on the W3 site

    Thanks to David Reece for the photograph.

  6. eCSStender

    2 Comments

    eCSStender
    HTML5 and CSS 3 have been around for a good while now, and more and more of it can be used on client work, although we’re not yet at the stage where we can throw off the strict doctype completely and create extravagant sites using canvas and SVG and all the other css goodness around such as animations and transforms. We can use smatterings of this stuff, border-radius, box-shadow can easily be used now, although in general they’re used for the extra touches on websites and elements that won’t affect the main design or critical elements of the page.

    There are a few ways to add in CSS support for unsupported browsers using JavaScript but nothing that really offers a one stop simple solution for achieving decent CSS 3 support cross browser, and one service which was recently announced was eCSStender, which promised that by downloading and including a couple of JavaScript files that a wide range of CSS 3 techniques could be implemented cross-browser, crucially without any vendor prefixes required.

    Recently, I was working on a project which would have benefited from this library as development time would have been drastically reduced with the benefit of cross browser compatibility for techniques such as border-radius, box-shadow etc and I began coding with this in mind.

    There was initial success with Firefox recognising the standard border-radius without the need for the -moz- prefix, and this appeared to work cross-browser. Except for Internet Explorer, any version. After many attempts at trying to get this to work, I gave up.I recently heard that border-radius was not supported in IE with eCSStender, and I’m wondering what all the hype was in the A List Apart article. It was billed as a simple solution to easily achieve CSS 3 compatibility, but if something as simple as border-radius doesn’t work in IE then what’s the point? There are other ways of achieving compatibility and eCSStender was not all it was made out to be in the article.

    It was billed as the saviour to vendor prefixes and greater flexibility, whereas in reality it is none of these.

  7. University

    Leave a Comment

    Abertay University

    As my first year of university comes to an end, I was reading the latest issue of .net magazine and came across the article written by Jack Osborne about what to do after leaving university in order to gain employment within the industry. Although I’ve not yet reached that stage yet, there is a few tips that anyone at any stage of education can implement now in order to increase chances.

    Portfolio:

    Jack states that the portfolio of any work should be in the right order and as good as it can be as that is where potential employers will look first. Students are often encouraged to leave out university work from their portfolio but often that is all students have, and goes back to the old adage that they can’t get a job due to lack of experience but no-one’s willing to offer that experience. In my portfolio, two thirds of it is university based as that is all I have at the moment but another useful tip which I will implement over the summer is to “fake it”. By creating websites for imaginary clients it will give me a chance to improve both my design and coding skills as well as boosting my portfolio.

    (more…)

  8. New Design

    2 Comments

    New Design

    Welcome to the newly re-designed site (or version 3.0 if you prefer!)

    The reason for changing the design was that I didn’t like the look of it after a while and also the code was riddled with errors which I was not happy with. This was mainly due to site being built in Summer 2008 when I had a lot less knowledge and skills in comparison to what I have now.

    Through a combination of learning at University, reading blog posts and listening to podcasts I feel that my skills have improved considerably over the past few months and that a re-design was a natural progression of these new found skills. The aim of the blog was always to be a kind of personal playground if you like where I could put into practice skills and techniques that I pick up as my learning continues.

    As with any new launch, the likelihood is that there will be a few bugs somewhere along the line so if you find any please either leave a comment here or drop me an email.

  9. University life so far

    1 Comment

    Well I’m now into my fourth week here in Dundee, and I suppose now would be a good time to document the experience and my thoughts so far on University life.

    I’ve now almost had three weeks of teaching and overall things are going well so far I think with all four of my modules this term. The four modules are:

    Programming
    Personal Web Pages
    Web Fundamentals
    Personal Study Skills

    (more…)

  10. Internet Explorer 6

    Leave a Comment

    Internet Browsers
    It is now over seven years since the 6th version of Microsoft’s Web Browser was launched, and it is still popular today for some reason, although this is mainly with large organisations and some education centres. With the recent release of Firefox 3 it is plain to see how far browsers have progressed in the past seven years, and with Google now joining the party with their Chrome release there is much to be said for the browser business today.

    As any web developer will know, trying to create aesthetically pleasing sites which fit into all these browsers is a challenge, with Internet Explorer 6 being the worst of the lot due to the way that it handles code and styles. As a beginner, I’ve had little experience of altering a site specifically in order to suit Internet Explorer 6 (lucky me!). Large organisations are often the last to change software due to perceived security issues but I feel that the time has come for us to help them along by refusing to cater for IE 6 users anymore, and if the majority of developers do likewise then slowly but surely Internet Explorer 6’s market share will begin to drop completely.

    Do you support Internet Explorer 6?