Changing faces of Responsive Web Design

by in Web Design & Dev

When Sir Tim Berners-Lee helped pioneer what we know as the World Wide Web, one could hardly fathom the extent to which it would grow to shape our day-to-day lives.

The first website put online was at CERN, a company where Berners-Lee worked to develop the WWW project. The website was incredibly basic in comparison to today’s standards, as semantics have improved over the years.

The personal computer, or PC for short, was the way to access the internet, explore and share information, globally.

Websites on mobile

It took only 5 years for the first mobile web access to be commercially accessible. This consisted of lightweight webpages, which utilised similar formats and variants to that of HTML, the markup language which is the scaffolding of all websites, even to this day.

Mobile websites were separate from the sites found on desktop computers. This was due to the fact that mobile web was relatively new and websites on portable devices were only able to handle basic textual data.

Evolution of web design

With the overwhelming majority of internet users surfing the web on desktop computers, the standard for web design was fixed-width. Most monitors were 800 or 1024 wide and as a result, websites were designed to fit those.

2007 saw the release of the first iPhone. The iPhone was the first major smartphone to introduce a state-of-the-art mobile device which was capable of running more content heavy websites, which had not been possible before then.

This giant leap for mobile web meant that website developers were, for the first time, able to develop websites on mobile with the use of cascading stylesheets (CSS) and Javascript, which displayed data the exact same way as desktops. The only problem, however, was that these websites weren’t very navigable.

In a responsive design a website can fit any screen perfectly

In a responsive design a website can fit any screen perfectly

The need for Responsive Web Design

Responsive Web Design, is a phrase which was first coined by Ethan Marcotte, when he described how the design landscape was rapidly changing due to the exponential growth of mobile users.

The early, primitive forms of Responsive Web Design, or RWD for short, came in the forms of fluid or liquid layouts. Fluid layouts are defined areas of a page using percentages instead of fixed pixel widths. The main difference between fluid layouts and RWD is that fluid layouts are based on proportionally laying out a website so elements take up the same percentage of space on different screen sizes, where as RWD uses media queries to determine the device size or type of screen being used, to output a different layout for improved usability.

With the rise of mobile devices being used for more than just phone calls and text messages, the need for more mobile-friendly websites was more important than ever.

Mobile users are taking over, and in order for companies to compete and meet demand, their websites must be optimised seamlessly for all devices.

In 2016, mobile browsing took over desktop for the first time in the internet’s history, with over 51% of online internet traffic now being seen via mobile devices, including tablets.

RWD combines three concepts – media queries, flexible widths and flexible images. Each of these on their own is not especially revolutionary. However, when combined together, the concept of RWD opens doors to the provision of a successful and dominant platform which provides scalability and improved performance.

RWD websites have one URL and one set of code, meaning there is no need to design multiple websites or worry about managing multiple URLs. Whether the user is visiting on their mobile, tablet or desktop, they will always see the same site.

At Wave, we produce RWD websites as standard. In the last 20 years, the internet has come on leaps and bounds in what is possible and what it can be capable of. We future-proof and optimise our websites so they can stand strong in the dominant internet space. A high-quality, seamless experience on desktop, tablet and mobile is more important than ever. Who knows what will happen in the next 20 years?