The Evolution of Website Design.

The Evolution of Website Design.

The evolution of website design. Website design is something that’s changed over time. Websites haven’t always been made in the same way, and they haven’t always looked the same. In this post I’ll be talking about how website design and creation has changed over time.

In the beginning, there was the internet.

The internet and the world wide web are, beleive it or not, two different things. Whilst the two phrases are generally considered interchangeable these days, they each refer to different things. You might well wonder what the difference is.

The Internet.

The internet, is an international computer network. This seems an obvious statement to make, but if I said “can you elaborate on that” what would you say?

In reality the internet is a network of networks, all connected together (by a network). Actaully, that’s a bit confusing isn’t it? Let me rephrase that…

The internet is a giant global network that connects a series of smaller networks together. This allows global communication between devices, systems, computers and servers that are all connected to the internet.

The internet is decentralised, which means that there’s no central authority controling the entire internet as a whole. The smaller networks which make up the internet are all managed independently.

The internet has a defined set of protocols and standards (such as HTTP and TCP/IP, to name a few), that enable devices on the internet to communicate with each other in a standardised manner.

As the internet is a global computer network, it allows for data to be transmitted between devices across the internet. This could be as simple as sending someone an email, or making a video call. The internet enables global connectivity, allowing individuals, businesses, organizations, and governments to communicate, share information, and access resources from anywhere with an internet connection, by transmitting data across the internet, between devices.

The internet is diverse in what type of data can be communicated. For example, requesting a web page results in one type of communication, where as online gaming involves a different type of communication, but both use the internet as the means of communication.

The internet is also ever evolving with new technologies, devices, and services continually being developed and integrated into the network.

The World Wide Web.

The World Wide Web (WWW or Web) is an what’s effectively an information space on the internet where documents, web pages and resources are interconnected via hyperlinks (often abbreviated to links) and accessed through web browsers.

The World Wide Web is a subset of the broader internet and serves as a collection of interconnected webpages and multimedia content.

Effectively the World Wide Web runs on the internet, but the internet is also used for things that aren’t the World Wide Web.

If you think of the World Wide Web as web pages, it seems a bit limited and boring, but then again, if you think that (for examples sake) you could log in to your Facebook using a web browser, and click on links in your Facebook feed, then Facebook itself can be considered part of the World Wide Web.

At this point you might think “I log in to the Facebook app on my phone, that’s not the World Wide Web, surely?” Well, the thing is, that it is! OK it doesn’t look like you’re accessing a web page using a browser, but that’s rouhgly what the app is! It just squishes and reformats the “web page” in to a more device friendly manner.

In the simplest terms, the World Wide Web runs on the internet, and you access the World Wide Web via the internet.

The World Wide Web has it’s own set of standards, in addition to the standards of the internet.

First of all there’s HTTP (HyperText Transfer Protocol) and HTTPS (HyperText Transfer Protocol Secure). This protocol allows for the communication between web browsers (used to access a web page) and web servers (where the web page is held).

There’s also URLs (Uniform Resource Locators), that are unique web addresses. Users visit websites by either clicking on a link to the URL, or by typing the URL in the browser’s address bar and pressing return (or enter).

Hyperlinked information is also key to the World Wide Web. Hyperlinks, we often simply call links. One web page can include a hyperlink to another website, and by clicking the link, you visit the other website. Hyperlinks can also lead to other types of resources, such as images, videos and other multimedia, rather than just web pages alone.

Whilst we think of links as quite a simple thing, there’d be no internet without them!

The other thing to consider about the World Wide Web is that the sites that make up this, are very varied in nature. For example, you might buy something on one website, then post about it on your social media (another website), then leave a review on the manifacturers website. That’s three different websites that you’ve used (each in a different manner, to serve a different purpose).

What I’ll be talking about in this post is the evolution of what’s on the World Wide Web, but it’s well worth knowing that the World Wide Web operates on, is interlinked by, and is accessed via the internet.

HTML (HyperText Mark Up Language).

There was a period when the internet existed, but HTML hadn’t yet been invented, so there wasn’t really much of a World Wide Web to visit.

During this period, the Web was used for things like emails, usenet groups and bulletin board services. The usenet groups were a bit like an early version of forums, and the bulletin board services were a bit like Ceefax (if you’re old enough to remember that), so kind of like a low resolution, self contained web page with limited navigation options.

Then along came HTML. HTML was invented by a chap called Tim Berners-Lee, and he didn’t originally invent this with the purpose of making the World Wide Web that was all know today. He made it while at CERN and it was originally conceived and developed to meet the demand for automated information-sharing between scientists in universities and institutes around the world.

HTML is still used today. If you right click on a web page, then click on “view source” what you’ll see is (mostly) HTML. HTML turns this “code” in to the page that’s displayed in the browser. Browsers render HTML in to displayed web pages.

HTML isn’t really considered a programming language because it has no logical flow (if, and, or, that kind of thing). It’s more of a “script” or “markup language”. It’s designed to structure content on a web page using elements like headings, paragraphs, lists, links, and more. It focuses on defining the layout and presenting information rather than executing algorithms or logical operations.

HTML is really just a formatting method, and it uses tags to format text. For example <b> is the tag for bold. so <b> means “the text that comes next should be displayed in bold”. The </b> tag means “the bold text ends here”. So if I wanted just the word Hello in this sentence to be bold:

Hello, I’m Ralph.

It would look like this in HTML.

<b>Hello</b>, I’m Ralph.

HTML tags work in this opening and closing tag manner, kind of like on/off switches <swithgoeson> </switchgoesoff>.

HTML is quite straightforward in this manner, and it doesn’t really do anything too fancy. If you’re thinking “that sounds a bit ‘word document’ to me”, you wouldn’t be far off the mark.

It was these types of websites being plain in appearance and people’s want to make them appear better that started the evolution of website design.

Text-Based and Basic HTML Sites.

Early websites made with HTML didn’t look that far off what a document made in word looks like, the major addition beign the links in the HTML page that can be clicked to go to other pages.

So really, that’s kind of what early web pages were like; Word like in appearance, with links you could click to access other pages, or images or media.

In the early days, websites were primarily text-based with limited graphical elements. They were built using basic HTML and often had a simple structure without much emphasis on aesthetics.

People creating sites of this nature were mostly writing their own HTML either in files directly on the web server, or in text editors on their computers, then pushing them to the web server using FTP. Although it’s not overly tricky to do this, and websites were quite basic at the time, it was quite a rigmarole, and there was no graphical editor to use to make a website.

This is what the excite.com website (this was a search engine commonly used before Google existed) looked like in 1995, which is a fairly good example of a text based HTML site:

The Introduction of Visual Elements.

With advancements in web technologies, designers started incorporating images, albeit small and low-resolution due to slow internet speeds. Tables were commonly used for layout purposes before the advent of CSS. The evolution of website design had begun!

Below is an old version of this website https://www.clovercliff.co.uk/ that’s written in HTML (I’m sure you can see the difference between the two). This is an example of a website using visual elements.

Comparing these two sites is a good example of the evolution of website design.

As visual elements became more commonplace, pieces of software became available that provided an easier, graphical interface that could be used to make web pages.

These were commonly referred to a What You See is What You Get (WYSIWYG) site builders. Dreamweaver MX and Serif Web Plus (both now defunct) were examples of these.

WYSIWYG editors would be installed on computers, create HTML files on the computer, then FTP them to webservers to publish changes. Whilst this was all well and good, it did cause problems if the computer broke!

The CSS Revolution.

Cascading Style Sheets (CSS) brought a significant shift by separating design from content. It allowed for better control over layouts, typography, colors, and overall visual aesthetics.

It was when this happened that web pages started looking a bit less like a word document, due to the visual aesthetics being improved. Despite this, web pages were still static in content with nothing like animations or mouse over effects.

One of the main advantages CSS offered is that you could have a single file controling styling for an entire site. By making changes to this single file, you could change the look and feel of an enitre website with regard to things like fonts, their sizes and colours and so on.

Again WYSIWYG site editors such as Dreamweaver MX and Serif Web Plus could be used to control CSS (overall styling information) and page content, but these didn’t allow for any processing and the sites they made couldn’t really be interacted with, only read. Websites that made use of CSS did look a bit nicer though!

The Flash and Multimedia Era.

Flash technology enabled interactive and multimedia-rich websites with animations, videos, and interactive elements. However, it had limitations in terms of SEO, accessibility, and mobile compatibility.

Flash was operated as a browser plugin, which could run flash code embedded in web pages. The problem with this was that crawlers (used by search engines to read websites) couldn’t read the flash content, which made search engines effectively blind to what was contained in the flash areas of web pages.

So whilst flash content made web pages more engaging for human’s as it allowed for more human interaction, flash content was effectively invisible to crawlers, and it’s what the crawlers read that result in where sites rank in search engine results.

The other thing about flash was that to create flash content you had to purchase a relatively pricey peice of software to be able to do so. This software wasn’t the easiest to use for your overage layman, as a concept of programming (i.e. logical flow) was required, and the ability to manage layers of content.

Obviously flash had it’s down sides, which is why it isn’t used today.

Responsive Web Design and Mobile Devices.

Up until this point, people had generally used a normal computer to access web pages, so all web pages were designed around being accessed in this manner.

When internet capable mobile devices that could be used to browse websites became more commonplace, websites needed to be able to be displayed on these devices in a manner in which they could be read an used.

As mobile devices have different screen sizes and aspect ratios compared to normal computer displays, there was a need for mobile friendly websites.

Initially mobile friendly websites started off as what was effectively a reworked version of the site suited to the screen sizes and dimensions of mobile devices, but this was a clunky way of doing things, as web designers found themsleves having to manage 2 versions of a website.

The solution to this was what’s called responsive web design. What this is, is the automatic resizing and display of a website based on the dimensions of the screen of the device accessing the website. This meant that only one version of a website needed to be maintained (provided it was responsive and could resize/redisplay automatically).

This website (the one you’re reading right now) is a responsive website that operates in this manner.

It was the proliferation of mobile devices led to the need for responsive design. Websites adapted to various screen sizes and devices, ensuring a consistent user experience across platforms.

The methods that would be used to make websites also changed. WYSIWYG builders were moved away from and people started using Content Management Systems (CMS) such as Joomla, Drupal and of course WordPress to make websites.

CMS were more like programs that ran on web servers, making use of PERL (in the early days) and PHP (later on) to effectively brign some programming and logical flow in to effect. The reason this was needed was due to CMS running on web servers, effectively as programs (or web applications).

The main difference between a CMS and a WYSIWYG editor, is that a WYSIWYG runs on a computer that pushes site files to a web server, where as a CMS runs entirely on the web server, not on the computer.

The programming and processing that a CMS made use of would allow for things like centralised changes (so you could make one change to affect all pages or switch a template or theme to change the overall look and feel of a site) rather than having to make page by page changes. The programming also meant that you could log in to the back end of your site, make a page, and the CMS would then process what you’d made and turn it in to page output by exucuting code when the page was requested by a visitor.

Because programming was now involved in the management of websites, this in turn dictated the need for databases.

From a programming point of view, the code that’s executed is fairly consistent and static, but everthing that’s variable (things that differ between different websites, such as the website address and page content) is held in the sites database.

What the code/database model allowed for, was for many webmasters to create lots of different looking sites, with different addresses, using the same CMS.

If we take WordPress for example, at the moment about 42% of websites on the internet have been made using WordPress, but all these sites look different. Whilst WordPress core is the same across all these sites what this means is that they “work” in roughly the same way. Yet these sites display different content and different addresses held in the databases, as this is where the variable website information is contained.

Whilst this does sound like a bit of a complicated way to run websites, it did mean that it was easier to do more programmatical things like have website members that could log in and add to the website.

It was really this web application / programming approach that meant that the evolution of website design could progress to what’s mentioned below, as more can be done with a progam, than a script, wich is what HTML is.

The Introduction of Parallax Scrolling and Single-Page Sites.

Parallax scrolling is a technique used in web design where background images move at a different speed than the foreground content when a user scrolls down or up a webpage. This creates an illusion of depth and adds a dynamic visual effect to the website.

Parallax scrolling involves dividing the webpage into multiple layers or sections, each with its own content or imagery. These layers are stacked on top of each other.

As the user scrolls, the layers move at different speeds. Background layers typically move slower than the foreground layers. This creates a 3D-like effect, giving the illusion of depth and motion.

Parallax scrolling is often used to create visually engaging storytelling experiences on websites. It can be applied to showcase products, present narratives, or simply add a visually appealing element to the site’s design.

Parallax scrolling can be achieved using CSS, JavaScript, or specialized libraries and frameworks. Developers use these tools to control the speed and direction of movement for each layer, creating the desired parallax effect.

There are different types of parallax scrolling effects, such as horizontal parallax (side-scrolling), vertical parallax (up and down scrolling), and multi-directional parallax, each offering unique visual experiences.

Parallax scrolling and single-page designs gained popularity, offering engaging storytelling experiences by scrolling through a continuous single page with layered visuals and effects.

Whilst CMS like WordPress and Joomla could still be used to make sites that operated like this, it was really the site appearance itself that was changing rather than the method used to create a site, which at this point remained roughly the same (code being executed on webservers and variable content held in sites databases).

Material Design and Card-Based Layouts.

Google’s Material Design and card-based layouts became popular, emphasizing a responsive, content-focused design with cards displaying bite-sized information.

Material Design aimed to create a unified and consistent user experience across different platforms and devices.

The design is inspired by the physical world, with elements resembling paper and ink. It uses realistic shadows, depth, and motion to create a tactile and intuitive experience.

Material Design emphasizes bold colors, clean typography, and intuitive interfaces that guide users through interactions seamlessly. It maintains consistency across various devices, ensuring a consistent user experience whether on a smartphone, tablet, or desktop.

Card-based layouts organize content into distinct, self-contained containers known as “cards.” Each card typically contains a piece of content, such as an image, text snippet, or interactive element.

Cards are modular units that can be rearranged, stacked, or reorganized easily within a layout. They offer a flexible way to present content in a visually appealing manner.

Card-based layouts adapt well to various screen sizes and devices, making them suitable for responsive web design and mobile-first approaches.

Cards allow for the presentation of bite-sized information, enabling content creators to prioritize and highlight specific information or actions.

Platforms like Pinterest, Twitter, and Facebook use card-based layouts to display posts, images, and content in a digestible format. Card-based designs are also often used in e-commerce websites to showcase products, prices, and details, allowing for easy browsing and comparison. Dashboards and news websites use card layouts to present headlines, snippets, and multimedia content in an organized manner.

Again card based layouts could still be generated by CMS based sites, with code execution server side and variable information being stored in the site’s datbase.

Card based layouts began to lead the way for websites to appear in the manner that they do today, but it wasn’t this alone that got us to where we currently are.