Over the years this phrase, Form follows function, has been attributed to many Designers and Architects; although, was originally coined by Louis Sullivan in 1896. Simply put, this means that something created should work first and then become beautiful.
Form follows function.
Quote Source Louis Sullivan
HTML first
HTML, or Hypertext Markup Language, is the foundation of the web. HTML was created by Sir Tim Berners-Lee as a way of connecting documents together, and since that day back in 1990, this has been the way that websites and online services work.
HTML is an incredibly smart language and has been built to be backwards-compatible; what this means is that any site, service, or portal will work on any browser in the world, even those built by Tim in 1990.
But why HTML first? Well, doing things this way means that the site will just work on every platform. Sites that are built with JavaScript, or React, or some other modern framework will potentially not display anything if anything gets in the way of that JavaScript.
This does not mean that a site, portal, or service should not be built with JavaScript or framework. This site is actually built with JavaScript, but that happens on the server-side and means that the JavaScript never gets shipped to the user.
What it does mean, however, is that the first priority is that we should be sending first the content in the HTML and then adding the styles and interaction to it afterwards. That way if everything else fails the content will still be there and accessible.
Out of the box, HTML is both responsive and accessible. It is only when we start adding CSS and JavaScript that we start to break this awesome feature.
Accessibility
If you are building a site that can’t be accessed by everyone whether with a disability or lack of funds or low grade technology, as far as I’m concerned you can get in the bin!
After all, as Sir Tim said, This is for everyone.
There are laws, rightly so, in many countries around the world that say services and products should be accessible and that everyone should be able to use them. We are now seeing more and more companies facing lawsuits for not complying with accessibility guidelines.
Making services and products accessible, benefits everyone. For example, a ramp that was built to make it easier for someone who uses a wheelchair also makes it easier for someone with a shopping trolley or pushchair, so making accessible sites or products benefits everyone.
Progressive enhancement
Progressive enhancement fits perfectly with the HTML first attitude I have for building sites. As it says on Wikipedia:
Progressive enhancement is a strategy in web design that puts emphasis on web content first. The proposed benefits of this strategy are that it allows everyone to access the basic content and functionality of a web page, whilst people with additional browser features or faster Internet access receive the enhanced version instead.
Quote Source Wikipedia
This also fits perfectly with Form follows function. Make the website/portal/service work and then progressively add in more bonus features and functionality to it.
To break this down simply: a visitor should be able to complete whatever task the site/portal is built to perform, regardless of browser or technology.
CSS
CSS (Cascading Stylesheets) is the language that works along with HTML and the elements on the page to change the presentation and layout of those elements. CSS can be broken down into two main sections:
- Presentation - how things look:
- what colour things are
- what size things are
- what font should be used
- etc.
- Layout - where and how things appear
Like all modern programming languages, CSS is always changing, and the new features are not always available in all browsers. This does not mean that they should not be used, it means we should consider what should happen if a browser doesn't support what we want to use.
For example, this site uses CSS Grid Layout for the layout of the blog posts. Internet Explorer does not support CSS Grid layout and instead Blog posts are just stacked one on top of another. This is the same in mobile layout, as it makes no sense to lay them out in a grid on a narrow screen—importantly, it works.
JavaScript
JavaScript allows us to create interactive web sites/applications; although, this should not stop the core function of the site application.
For example, we could use JavaScript to check that a user has entered their email address correctly. Without JavaScript, the user should still be able to use the site. So instead we could make the same check server-side and then feedback to the user.
This site is built with JavaScript but all of that happens on the server and the user never needs to see, use or download that JavaScript.