This topic came up last Sunday when we were recording an episode for WeCodeSign, but the episode will take two weeks to be published, and it will also be in Spanish, so unless you are able to follow my quickly spoken Spanish, you will miss my Important Insights™ on this topic. Which is why I'm writing about it here.
The Web is about malleability and adaptability, providing sane defaults, and letting user agents do their job.
A user agent is a browser, but it could be a search engine.
Get in the way of the user agent, and cause pain for everyone: the users and you.
To avoid making your life difficult, embrace building in layers, and embrace building for the unexpected.
This is how:
You start with the lowest layer: HTML.
This is feasible in most of the cases—the limits of this are for another discussion. Let's assume that you are or you have a great product designer, and you're able to identify the core service that you want to deliver.
The good news for you is that HTML5 is very powerful. Modern day browsers have an amazing array of built-in features that we could only dream of a few years ago. And the best thing is that they work across browsers, and you do not have to reimplement and distribute that code. Additionally, you are already benefiting from all the work on accessibility and usability that browser makers have already put on browsers. You will let users access your website in the way that is most comfortable to them with their favourite device and operating system, and you do not have to do anything. It is already done for you.
Not reinventing the wheel lets you move faster. It also lets your users in slow connections get to your content and services faster, which means happier clients.
Exercise: ask yourself questions like...
- Does a hospital need a fancy pull down menu which elderly users cannot operate because they're not as physically coordinated as they used to, or would it rather benefit from a better information architecture that shows a big phone number and lets the elderly ring the hospital by clicking on it? (if accessing the page with a phone who knows how to deal with tel:// protocols)
- Does a restaurant need a multiples of megabyte-sized intro which you cannot access on a slow roaming connection, or does it need to show a menu and a booking form?
- Does a train operator need to link to a PDF timetable, or would it be better for the users to provide an HTML table with the times of the trains?
Notice how I said "if the phone knows how to deal with tel:// protocols". If you build using standards, user agents that recognise the standard will augment your content with additional features. This is progressive enhancement within the HTML layer. Making it better for the user.
Second step: CSS
Granted, a bare HTML page might not be the most attractive or differential feature for a business. If we just used bare websites it would be complicated to distinguish between services. We can add an extra layer: CSS.
Modern CSS has also really mindblowing features, just as its HTML5 counterpart. We can build truly beautiful and amazing layouts, with impressive effects and typography, nowadays, with just a few lines of code. We can transform bare HTML pages into incredible explosions of colours and graphical rhythm.
We can, but that doesn't mean your CSS is going to be displayed in the same way you had in mind. CSS works a bit like HTML, in layers. There are some initial safe default values that browsers set for users, and then developers can change them with CSS. But you have to keep in mind that principle of inheritance, and building on what there is already there.
You also have to keep the progressive enhancement principle in mind when you write CSS. Most browsers support CSS, but sometimes it might be the case that your browser cannot load parts of the stylesheet (like external fonts), or it doesn't know or doesn't want to interpret certain features, such as background gradients.
If you write CSS properly, you will define properties in a way that takes advantage of the way properties are interpreted, where the browser will ignore properties and values it doesn't understand. This makes it possible for pages to become richer as the browsers get better, but still provides functionality to everyone.
For example: if you define a background with a gradient, you should also define a flat background colour for browsers which will ignore the gradient (e.g. Opera Mini). Similarly, set a default background colour even if you're using an image as the background, so the browser has something to show your users if the image takes too long (or doesn't load at all!). Otherwise, you risk the case that your content is impossible to read, frustrating your users.
Use the best platform features if they are available, to make the website even better: if Service Workers are supported, use them! If it makes sense, make the content available offline. Maybe even pre-fetch content. Store those custom fonts offline. Make the website fly and be delightful for users.
Conclusion: embrace building with layers
Try to fight the way the Web works, and cause trouble and misery for everyone.
Accept and build for the uncertainty of the networks, and the environment your website is accessed with, and you and your users will be happier. The code will last many years in good health.
Happy building for the Web! :-D