Dean Appleton-Claydon

Written by Dean Appleton-Claydon

7 minute read

Tread beneath the pretty frontage of your favourite, and less favourite, websites by viewing the source. There you may find a utopia of tidy, well maintained code but all too often it may unearth a discovery of horrific, an unsightly myriad of scripts, confusing HTML structures and alarming vulnerabilities exposing your personal details.

Frightful front-end methods

  1. Unlabelled form fields and or labels missing correct “for” attributes linked to existing fields can make using a form for vision impaired a navigational nightmare. Without them, users dependent on a screen reader to use a form can only guess at what a field is for. They may fill in the wrong information at best or instead go to a competitor’s website that’s better built for their needs. Validate pages with tools like Wave and a screen reader to test usability.
  2. Inline styling or even worse: inline styling with !important applied makes it complex or pretty much impossible to handle a variety of alternative styles from a stylesheet in the future. Whether you’re working with traditional stylesheets directly, a task runner-based setup or using an abstracted framework like React then it’s much easier to keep maintainable, where styles are within a separated file or collection of linked component files.
  3. Ungrouped form elements in large complex forms can be time consuming and difficult to use. A form where different elements are well organised with similar ones grouped together is easier for everyone to use. Grouping form elements together can be particularly helpful for people who depend on screen readers and for those with cognitive or learning disabilities.
  4. Content heavy pages using abstracted JavaScript libraries (like jQuery, React, Angular) to load everything are a common factor in present day websites looking to keep everything on one page but can have major usability and performance drawbacks. Users on mobile or slow, intermittent network connections can often end up with blank pages, unfinished data transactions or loss. First fully justify whether it’s necessary to use such frameworks, if it can be done without, using a good fallback or using modern JavaScript techniques offered in ES5 and above.
  5. Terrifying JavaScript errors found in the console can leave a page broken and unusable. What’s more batty is not having a fallback for when JavaScript is turned off! This can induce nightmares of lost profits or users, damaging the future of your business. Scary stuff.

Creating a beastly back-end

  1. Earlier this year we discussed the importance of getting an SSL certificate. Shockingly we find too many customers still unaware or unconcerned by it. Put simply without an SSL certificate in place your website is not secure for you and your website’s users. Already have an SSL certificate in place? Jolly good! But don’t forget all certificates have an expiry date so make sure it’s setup to update automatically or have a reminder to do it yourself manually.
  2. Abandoning your CMS (Content Management System) or leaving it unmonitored for a long period without a security policy in place brings with it the risk of crippling hack attempts and quite possibly downtime. More popular CMS like WordPress are number 1 for attacks and cannot be simply left to look after themselves. Individual plugins installed can each open up holes of vulnerability and not just the overall updates to WordPress can fix these.
  3. Using an agency specific CMS can leave you as a lost cause if you need to make changes at any point in the future. Don’t jeopardise your future and end up paying the price – go for an open source CMS.
  4. Untested code or server misconfiguration causes infinite loops that will surely leave users in quite a dizzy spell. Make sure you have all your code fully tested before implementing to avoid tricking your users and haunting them with endless dead-ends.
  5. Whether it’s a database column, method or a helper function keeping everything labelled consistently is key – don’t set yourself up for a scare in the future and creep it consistent.
  6. Uncommented code can be spooktacularly unhelpful when a project involves multiple people or when you need to come back to it in the future. Leave yourself and your team clues to avoid a mystery that could have been easily avoided or solved.

Unnerving user-interface design

  1. Dependence on hover for essential functionality in a webpage is another common mistake of design that remains today. Remember many touch-based devices can’t handle hover events well or present usability issues for impaired users. Where possible, design more resilient, inclusive interfaces. For events such as menu dropdowns a suitable fallback in coding them is to use the :focus property in addition to :hover for triggering something to show, but there still remain accessibility issues this way so better to avoid where possible.
  2. A contrast cauldron of bad colour combinations or faint coloured backgrounds and text make using the web for vision impaired users, such as those with colour blindness, frustrating and unusable. Use great tools like Lea Verou’s Contrast Ratio calculator to check your user interface or design against.
  3. Wickedly animated websites with just about every type of styled animation in use might look impressive to your stakeholder but for some users it could result in unpleasant symptoms such as vertigo, migraines and nausea, even death! Either avoid being so overly animated with your webpage’s animations or offer options and pre-warnings to the user to choose from before loading them. Earlier this year Eric Bailey wrote an Introduction to the Reduced Motion Media Query that discusses some of the latest ways browsers are looking to offer better options for controlling the motion on the web.

It might come back to get you

  1. A blog with stale content leaves a visitor completely bored – exorcise some imagination and upload some fresh copy to keep your users coming back for more. This can also help boost your SEO rankings, giving you a double thrill.
  2. Commented code can reveal some skeletons in the closet – don’t give anything away that you may wish to keep secret. Companies have been known to reveal the plot before the cliffhanger has even taken place. If you want to keep your users in suspense, check your code to remove any comments before going live!
  3. Not adding CNAME records to domains is the Bermuda Triangle of the web. Many people still type www when visiting a website, but without this DNS record, they will end up at a ghost of a website.
  4. What is going to be a huge killer for some companies is the lack of compliance with GDPR. Consent around data is a growing issue and one major feature is opt-outs. If you have an unsubscribe link in an email campaign that leads a user to a non-existent page, you risk the wrath of the ICO executioner – sentences now include larger fines, that can be murderous for a business.
  5. Don’t make a boo-boo when designing a website for multiple devices – a mobile-first approach is crucial to avoid developing a site that has buttons cut off the page when viewed in smaller devices like tablets or mobiles – this is guaranteed to make people howl.
  6. Typos in written language can be excruciating, but it is even worse when done in code – you risk not just looking like you can’t do a decent spell, but you can create nasty bugs that damage the functionality of your website. A simple witchy spell check or proof can avoid this painful mistake.