The world of web development and design is always evolving. When the first website, CERN, went live in 1992, it was entirely text based with no real layout to speak of. As time went on, the possibilities of the web led to incredible developments from innovators all over the world. In 1993, ALIWEB launched what is considered to be the first web search engine. The first landing page was launched soon after. 1994 brought the first banner advertisement and in 1995, JavaScript allowed developers to experiment with adding motion to static HTML for the first time—inevitably leading to the first pop-up window. In 1996, Flash made animation possible and CSS provided an answer to the long-sought question of how developers could format their pages that were built with HTML, a technology that was only ever intended to describe the content of a web page.
New technologies inevitably paved the way for innovative new businesses. Google came onto the scene in 1998. PayPal made eCommerce a reality at the turn of the century. Everyday users started blogging with WordPress in 2003, choosing their top friends on Myspace in 2004, and a select few were setting up an account on “The Facebook” in 2006. But, it wasn’t until 2007, when the first iPhone was released, that web developers and designers had to really think about how they presented data on their sites.
Before the iPhone made smart devices mainstream, designing for mobile web browsing was hardly even a thought. Phones had extremely basic browsers with little incentive to use them. Designing for any kind of changing layout didn’t make sense. Everybody was accessing the web through a desktop computer and there wasn’t a huge market of computers with various screen sizes, resolutions, and aspect ratios. But, as with all groundbreaking technological advances, there comes new ideas borne from the benefit of a new perspective.
Adaptive Web Design
The first instinct amongst designers in this new mobile-friendly world was to simply create separate versions of a site depending on device and screen size. This approach is called Adaptive Web Design and is most often implemented through a process called Dynamic Serving, where the server checks whether the device sending the request is a mobile or desktop and dynamically serves the appropriate version. This practice was common among early adopters of the web such as Facebook, YouTube, and Wikipedia, as they had large existing codebases and a high price to pay for breaking functionality. Mobile applications were a natural evolution of this strategy. There are, however, some downsides to this approach, such as poor SEO due to duplicate content, increased access granted by mobile applications, and the expense of creating nearly identical mobile applications for a variety of platforms. Today, Adaptive Web Design as the sole technique has largely been phased out, though it is sometimes used in combination with other techniques like Responsive Web Design.
Responsive Web Design
While Adaptive Web Design was a viable option for many pre-existing websites, web development and design is always looking to the future. Many developers recognized the need for a more fluid approach as technological advancements gave devices of all shapes and sizes access to the internet. In 2010, a web designer named Ethan Marcotte released an article titled “Responsive Web Design,” coining the term and outlining his approach of using “fluid grids, flexible images, and media queries,” allowing developers to “design for the ebb and flow of things.” He proposed “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”
A common approach to Responsive Web Design is the mobile-first approach. This applies the universal concept that it’s always easier to build on something smaller than to carve out a viable piece of something larger. As this article from freeCodeCamp so eloquently puts it, “Suppose you have a suitcase with some stuff in it. Would it be easier to transfer things from a smaller suitcase to a larger one, or from a larger to a smaller?” The mobile-first approach prioritizes content first, building to a more robust design as the screen size grows.
Fluid Web Design
One other sometimes used method for design is Fluid Web Design. A fluid design uses relative units like percentages to dynamically change the width of elements. For example, instead of specifying a specific pixel width for each column in a three-column layout, a fluid design would specify the width for each column as ⅓. Then, the width of each element would adjust to ⅓ of the total screen width as the screen size changes. Fluid Web Design as a standalone method is usually not sufficient to meet the wide range of devices and screen sizes available, and is most effectively used in combination with Responsive Web Design, or a fluid-responsive layout. This is seen most commonly in frameworks like Bootstrap, which uses percentage widths in combination with CSS breakpoints.
The Future of Web Design
As the web continues to evolve, so will the priorities of developers. The proliferation of information provided by the web has opened many developers’ eyes to the need for accessibility for disabled users. The widespread use of web crawlers has sparked the need for well-organized semantic content that crawlers can make sense of, and that need will only be increased as machine learning and artificial intelligence advances further. The increased focus on performance and user experience will lead to new and innovative web design methods and the rethinking of old methods. We may even see entirely new ways of browsing the web that are difficult to conceptualize given our current knowledge. One thing is for certain though, the internet will grow and change and the methods of web design will grow and change right alongside it.
Subscribe via RSS
