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, 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.
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.
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 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 (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
- 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.