Killer CSS

26/10/2017
3146

Danger with every page load, with every click bringing you one step closer to the ultimate disaster. It's your job to ensure that your customers never get caught in this nasty inescapable trap that could lead them away from your website for good. These little killers can often be hidden away on a specific device or browser. All you need is a few simple tricks up your sleeve to be able to combat this dreaded killer.

This can be an issue as all your customers or users could be using a different browser/version of the browser or operating system or display. With endless combinations the time needed to test and ensure it works in all situations can be consuming, and let's face it in this day time is money. Who would want to sit around for hours to check every page on all those browsers, when someone else could do it for you leaving your time free to do what you do best?

Killer CSSSo let's imagine you own an airline business. You have a website where people can purchase tickets and select seats. Now this sounds pretty normal, right? Well your web team have come up with a brilliant solution to make selecting the seats even easier for your customers. They do some magic with CSS and end up presenting a section on the page with the outline of a plane and seats to select. Let's say John, a happy customer comes along. John uses a different browser from what your team uses and also has a fancy new monitor with lots of pixels. John gets to picking his seats, which is all good till he sees the image to the left.

To John's surprise his seat is now outside the plane. CSS can kill! Now his seat isn’t really outside the plane, but you get the point.

Now there are 3 main solutions to combating this potential problem and saving poor John the stress from thinking his seat is outside.

1. Do nothing

This is probably the easiest and most common solution. Here you just pretend you didn’t see the error or just simply never tested it to know that it was there. Where this might be ok in some situations for minor things if you want to keep a consistent image or are striving for perfection, maybe this option isn’t for you, as it is full of disadvantages and can hinder the message or companies image.

2. Restrictions

This is a little more complicated solution, where you would restrict what browsers you support to make your bookings on. This has some advantages and disadvantages.

Advantages

  1. Limits the need for testing to a set number of known browsers. This way you would only need to test in 1 or 2 environments and just force your customers to use what you have tested on.
  2. Ensures consistency and user experience (UX). By setting the environment you can assume that all users whether they are on a Mac or PC using the same browsers will have the same UX in using your website or application.

Disadvantages

  1. Some users might not like changing their browser to match what restrictions you have put in place. This could turn some customers (those who are more resistant to change) away to seek others who offer the same services.
  2. Detracts from UX. By forcing the user to use a browser they might not be comfortable with can destroy or detract from the overall UX. You should where possible cater for the user and ensure that they are using what they are comfortable with when accessing your services.

3. Get someone else to do it

This is by far the easiest option for your company. With companies like Adaptiff Designs, we can fix and maintain these little issues and take all the work out of testing on all the browsers and setups with which you could possibly be faced. This takes all the hard work off your hands and leaves your valuable time to cover all the things that makes your business successful. Picking this option allows a dedicated team of professionals to quickly and accurately clean up or design your website/web app; avoiding poor John thinking that he is sitting outside the plane.

So when you are next faced with this dilemma, Option 3 is worth considering. Outsource it to someone else who is dedicated to fixing and creating theses layouts without errors. So next time you need to do CSS work consider contacting us.