In 2023, websites in South Africa look modern, sleek, and well-organised. You can get on any website and easily navigate around a website. Thanks to the colours, graphics, and themes, navigating around websites is no longer a chore. However, that was not always the case. In the simpler times of the 1990s, websites only incorporated HTML and looked really basic. While it was the norm for websites back then, users in South Africa today would certainly turn away from such websites, probably claiming that the web design is terrible and delivers no user experience. When we look back, we realise that we have come a long way, thanks to the tremendous evolution of web design in the past 30 years.
How did this all change? Let’s look at the fascinating history of website design.
The Birth of WWW and the First-ever Website
Almost everyone knows that a website structure is defined by HTML—Hyper Text Markup Language. Furthermore, we also use CSS—Cascading Styling Sheets—to further enhance the design and Javascript to add custom functionalities to your design. But how did this all begin?
The first ever webpage on the World Wide Web was created by Tim Berners-Lee. He is also responsible for developing and writing the first-ever HTML code at CERN in 1993. Take a look at this website below. You could only input numbers here to navigate around the web pages on this website. That way, you would get the information associated with the numbers. But beyond that, you could not interact with anything else.
The first-ever website by Tim Berners-Lee on the World Wide Web (WWW) – Not to be confused with the first-ever HTML website.
As someone who browses the internet in 2023, I would not even imagine browsing such websites. But we have to keep in mind that, the birth of the World Wide Web (WWW) and websites happened due to the need to freely share information amongst scientific communities in CERN and around the world. The primary purpose of having a website was to share information.
The purpose has not changed in 2023. We still largely share information via websites. However, apart from that, websites have evolved and branched out in various genres. Some of the examples are entertainment (Youtube), online services (Digital Lime Green), search engines (Google), file hosting and file storage (Dropbox), social media, (Facebook), and of course, information sharing (Wikipedia).
The Evolution of Web Design
Web Design and HTML
HTML, or Hypertext Markup Language, defines the ‘base‘ or ‘skeleton‘ of your website. It set the foundation for the evolution of web design in the next 30 years and for years to come. Technically speaking, you can create a very basic website just with HTML. It is so user-friendly that even if you do not have any technical knowledge, you can still learn HTML within hours and create a basic website within a day.
It would look something like this.
The very first HTML website made by and for CERN.
Experience this first-ever HTML website yourself. This website is still alive and functioning at http://info.cern.ch.
We still use HTML today. It will probably stay relevant for an eternity more, and it is not an understatement. We all still use HTML widely today. Check out any web design source code in South Africa. For example, go to Digital Lime Green‘s Home Page, right-click on the page, and select ‘Inspect/Inspect Elements’. A bunch of code would pop on the right or the bottom side of your browser’s window. Do you see all those codes in <brackets> like this? That’s the HTML code.
HTML has gone through 5 major revisions to become what it is today. A full-fledged markup language that helps define your website structure with ease. Thanks to programs like Visual Studio Code, writing HTML code has never been easier. Let’s take a brief look at the HTML evolution.
HTML 1.0
HTML was first introduced in 1993 as HTML 1.0 by Tim Berners-Lee. It provided basic elements for structuring a document, such as headings, paragraphs, lists, and links. This initial version laid the foundation for the subsequent developments.
HTML 2.0
HTML 2.0 was released in 1995 and introduced new elements like tables and image support. It also included the introduction of the FORM element for creating simple interactive forms.
HTML 3.2
In 1997, HTML 3.2 was released, which added support for more styling options, including the introduction of style sheets. It also included improvements to tables and forms.
HTML 4.01
HTML 4.01 became a W3C recommendation in 1999. It brought significant enhancements, including support for frames, scripting through the SCRIPT element, and more control over form elements. This version also introduced stricter syntax rules and the use of cascading style sheets (CSS) for styling.
HTML5
HTML5 is the most significant evolution of HTML to date. The HTML5 specification was finalized in 2014. It introduced a wide range of new features and elements, including multimedia support (audio and video), a canvas for drawing graphics, new structural elements (header, footer, nav, etc.), semantic tags (article, section, figure, etc.), and enhanced form controls. HTML5 also brought native support for audio and video without the need for third-party plugins like Flash.
Web Design and CSS
CSS (Cascading Style Sheets) is a language used for describing the presentation and styling of web pages. It works alongside HTML to control the visual appearance of elements on a website. CSS has evolved significantly since its inception.
CSS is also present in the code and you can easily see it in any web design in South Africa. For example, once again go to Digital Lime Green‘s Home Page, right-click on the page, and select ‘Inspect/Inspect Elements’. Now, once you see the screen, select any line of code. Once you do so, find a tab called ‘Styles’ within the coding window. Everything under the ‘Styles’ is the CSS code. It should look something like this.
Here’s what a CSS code looks like. It stylises the HTML tags such as div, span and much more.
Let’s discuss its introduction and key stages of evolution:
CSS1
The first CSS specification, CSS1, was introduced in 1996. It provided basic styling capabilities such as font properties, colours, margins, and backgrounds. CSS1 aimed to separate the presentation from the structure of a web document, making it easier to update and maintain styles across multiple pages.
CSS2
CSS2 was released in 1998 and expanded the capabilities of CSS1. It introduced features like positioning, floating elements, and improved support for tables. CSS2 also brought media-specific stylesheets, allowing different styles to be applied based on the device or medium used for browsing, such as print or screen.
CSS3
CSS3 is a collection of separate modules that introduced numerous new features and enhancements. Rather than being a single specification, CSS3 is divided into smaller modules, allowing for independent development and implementation. Some notable CSS3 modules include:
- Selectors: CSS3 introduced new selector types, such as attribute selectors, :nth-child(), and :not(), providing more precise control over targeting specific elements.
- Box Model: CSS3 added features like box-sizing, which allows developers to control how the dimensions of elements are calculated, and border-radius for creating rounded corners.
- Backgrounds and Borders: CSS3 introduced additional options for styling backgrounds, including gradients and background-size for controlling the size of background images. It also added properties like box-shadow and border-image for more flexible border styling.
- Transitions, Animations, and Transformations: CSS3 brought support for transitions, allowing smooth property changes over time. It also introduced keyframe animations and transformations, enabling the creation of interactive and animated effects.
- Flexbox and Grid Layout: CSS3 introduced new layout models like Flexbox and CSS Grid Layout, providing more powerful and responsive ways to structure and position elements on a page.
CSS4 and Beyond
After CSS3, the CSS Working Group shifted to a modular development approach, where new features and enhancements are introduced as individual modules. This current approach does not follow a version-based release cycle, and only existing models receive updates independently.
CSS has become an essential part of modern web design, allowing developers to create visually appealing and responsive websites. Its continuous evolution means we will experience new features and improvements that will meet the growing demands of web design and development.
Web Design and SEO
As you know, you can create a website within a few hours with basic HTML knowledge. However, we live in 2023 and having a basic website is not really enough anymore. Therefore, even if your website does go live, you actually need to make it discoverable. In 2023, it simply means making your website discoverable on Google and getting a higher search result ranking for specific keywords. This way, you can attract more traffic to your website, and together with it, more business or attention.
The core part of Search Engine Optimisation is to optimise your website. This includes loading speed, user experience, keyword and data distribution, and overall design of the website. Obscure, outdated web designs are bound to do worse on the Search Engine index. Hence, it is crucial you follow up-to-date web design practices to ensure your website performs well with search result rankings. This means using the latest HTML and CSS versions and practices, and the latest SEO practices (and avoiding black-hat SEO practices) to secure your website’s ranking.
We have talked more about Responsive Web Designs in this article.
As a small business, it is crucial for you to make your website discoverable. We also help our clients with optimising the SEO in their web design in South Africa. For more information, check out our SEO services.
Web Design in South Africa
Web Design has evolved tremendously since its inception in 1993. Thanks to the joint effort of brilliant people from all around the world, we are where we are today. In 2023, you absolutely must follow up-to-date markup and coding practices, and optimise your website in accordance with the Search Engine Optimisation practices to ensure it performs well. South Africa is no exception to that, as the economy is springing back post-pandemic. Websites are becoming a crucial part of doing business and gaining an edge against your competition. This is especially true for smaller businesses looking for more visibility for their business.
The evolution of web design is a complicated subject. We only have briefly touched the surface in this article. We hope that the information has piqued your interest in learning more about web design or the markup languages to create a website of your own.
If you are looking for web design services in South Africa, feel free to connect with us. We are a small web design firm with a satisfied clientele and a good reputation. Just connect with us with your requirements and we will do our best to help you out.