In Part I, I gave a brief synopsis of what responsive design and development is and how it came about. It was a general overview that probably made you scoot to the edge of your seat with wide-eyed anticipation of what was to come next. Or you may have fallen asleep. Either way, if you’re reading this, there must have been something in your soul that yearned for more. So, without further ado, let’s jump into Part II.
The Evolution of the Website
Brace yourself, because it’s probably hard to imagine this simple fact: Websites used to not exist. I know, I know! It’s crazy. In a world where the internet rules and Facebook and Twitter are a mere click away, at one point the only way to “like” someone was getting to know them outside of a technological application.
Most people aren’t actually aware that the theory of a “worldwide wireless network” has been around for quite some time — bouncing around the head of one Nikolas Tesla in the early 1900s, to be exact! Of course, the technology to build such an infrastructure wasn’t available at the time, and had to wait another 60 years to come to fruition with the creation of the Advanced Research Projects Agency Network (ARPANET), which allowed multiple computers to speak to one another on a single network. In the 1970s, scientists developed Transmission Control Protocol and Internet Protocol (TCP/IP), which set the data transmission standards between networks. And on January 1, 1983, ARPANET adopted TCP/IP, and the “network of networks” became a reality, leading to what would become the modern Internet.
Now, let’s take a brief moment to put the kibosh on something: The Internet is not the World Wide Web. Sure, society in general tends to swap either term out willy-nilly, and the majority of us allow it to happen because we understand the direction of the conversation. However, to be clear: The Internet is a system of interconnected computer networks utilizing TCP/IP to link devices worldwide. The World Wide Web is merely a service that operates over the Internet.
“So what about the evolution of the website?”, you may be asking yourself. Well, here ‘tis. After Sir Tim Berners-Lee (that’s right, he’s a knight!) invented the World Wide Web in 1990, he published the world’s first website on August 6, 1991. And guess what? It’s still up!
Websites have come a long way since 1991. Single column, text-based pages done in Hyper Text Markup Language (HTML) eventually gave way to tables, allowing developers to create multiple columns and better content organization. Images, visual hit counters, scrolling text and animated GIFs became the norm until Macromedia launched Flash in 1996, which dominated the landscape throughout the late 1990s and well into the 2000s. Cascading Style Sheets (CSS), though initially released in late 1996, started to become a foundational cornerstone in the web world in 2000, allowing developers an easy way to control the global look-and-feel of a website. JavaScript showed its glorious face in the early 2000s, as well, computing data, adding brilliant solutions for animation without the use of Flash, and much more. Tables faded into the background of HTML, replaced by Content Division elements (<div>), a generic container that has no effect on the content or layout until styled using CSS, allowing for a wide range of styling opportunities.
How and Why Did Responsive Development Come About
You may be wondering where responsive development merges into the history of the website. Technically, 2013 was considered the Year of Responsive Web Design, at least according to Mashable. Businesses began to delve into the benefits of having their websites more legible on smaller browsers, such as tablets and mobile phones, and flexible web technologies were beginning their meteoric rise into the world of development.
Yet, it was in late 2001 that the first adaptive website was launched: Audi.com’s Jim Kalbach, information architect on the project, wrote this in Jan. 2002:
“Developing fixed-size Web pages is a fundamentally flawed practice. Not only does it result in Web pages that remain at a constant size regardless of the user’s browser size, but it fails to take advantage of the medium’s flexibility … Never before has the demand for flexibility been greater.”
It was the perfect argument for the push towards responsive website development. However, Audi.com was not a true responsive website. It was liquid. It used JavaScript to determine the user’s viewport size – the visible area of a web page – to serve up one of three different sizes dynamically.
Now, I can tell that I’m losing some of you here with all this talk about responsive and adaptive and liquid. What does it all mean? Let me explain.
Fixed vs. Fluid vs. Adaptive vs. Responsive
I mean, who knew there were so many different ways to develop a website, right? To the average client or consumer, in the end, it really doesn’t matter. The bottom line is that it looks good and is functional. Nothing more. And in this day and age of application build, responsive development can combine both aesthetics and performance into an end product worthy of a repeat visit. But that wasn’t always the norm. Let’s take a look at that evolution.
Fixed
Fixed websites are built using a specific width in pixels and is extremely limited when it comes to user experience. The content on a fixed website won’t resize or re-position. Smaller browser widths will produce a horizontal scrollbar and a website that is cut off.
Fluid
Fluid websites are the grandfather of responsive development. Fluid – or Liquid – websites use percentages instead of pixels. So, consider your viewport 100% wide. The area this post takes up may be 60% wide, and the sidebar could be 40% wide. As you shrink your browser’s width – or view on a tablet/mobile – that ratio would stay the same.
Adaptive
Adaptive websites utilize something called media queries to target specific devices, such as Android, iPad, or iPhone. Sound interesting? It is, but with a huge caveat: New devices mean new code. Not a horrible thing if you are only targeting those three devices. However, with the ever-increasing number of handheld devices on the market, that code will need to be updated constantly, which, as a developer, would become a gargantuan undertaking.
Responsive
Responsive websites, like Adaptive, use media queries. However, the difference lies in one glorious idea: Let’s not target specific devices, but instead breakpoints. What’s a breakpoint? A breakpoint is a specific point where your site’s content will respond to fit the user’s device in the best layout possible. Breakpoints are determined by the developer based on how the elements on the page are arranged at any given browser width. If two columns become too close, a developer may create a breakpoint to stack them. If copy on a page is too large, a breakpoint may be coded to decrease the font size. Basically, responsive web development allows for scalable content.
Final Thoughts
As you hopefully can tell, responsive design and development has come a long way since that first website from August 1991. The history of the Internet, World Wide Web, and sharing of information have all shaped the evolution of the website. Handheld devices, more than anything, have continued that evolution at a rapid pace, moving from static, fixed-width websites to free-flowing responsive development.
I had wanted to give some information on a few key components responsive development utilizes, however, I believe this can be saved for Part 3. Stay tuned to learn more about fluid grids, media queries, and flexible content.