Mobile subdomainsĪll this was happening right around the time that more mobile devices were going online.
#RESPONSIVE GRIDS HTML W3 CODE#
In fact, that's one of the major reasons that jQuery first became so popular at the time – it abstracted a lot of the browser differences away so you only had to write your code once. There were a whole lot of browsers at the time, and sometimes they handled HTML, CSS, and JavaScript differently. The downside of this method was that developers had to create different stylesheets for each target resolution, and ensure that the styling and JavaScript worked across all major browsers. Adams' example of a resolution dependent layout ( Source) Even though it was a bit of extra work for developers at the time, it allowed more fine-grained control over the layout of the site, and functioned as an early version of CSS breakpoints before those were a thing. This technique came to be known as resolution dependent layouts, named after Adams' blog post. In 2004, Cameron Adams wrote a blog post where he detailed a method of using JavaScript to swap out different stylesheets based on the size of the browser window. On liquid layout sites, content could overflow and text could break on smaller screens, and on larger screens there could be a lot of unnecessary white space.
An example of liquid design ( Source)īut it wasn't perfect. While fixed-width layouts might break if your monitor wasn't the same resolution as the one the site was designed on, liquid layouts were much more flexible, and could adapt to different monitor resolutions or browser sizes. Liquid layouts, first coined and popularized by Glenn Davis, were revolutionary at the time, and can be considered one of the first major methods of responsive web design. MDN has some good examples of both fixed-width and liquid layouts. Liquid layoutsĪccording to MDN, the two main layout options developers had early on were either fixed-width, where content was set to an exact, to-the-pixel width, or liquid, where content was sized using percentages. Still, developers found a few different ways to work with these monitor or browser window sizes, which eventually lead to responsive web design as we know it today. But one thing they didn't have to worry much about was adapting to different screen sizes. With the wider adoption of CSS, developers had to spend a lot more time on things like layout, design, and typography.
#RESPONSIVE GRIDS HTML W3 ARCHIVE#
Internet Archive in 1997 ( Source)īy the late 90s to early 2000s, patterns in web design and user experience had emerged, and websites started to look like the ones we use today: DeviantArt in 2000 ( Source) Early responsive design methods With CSS and other technologies like JavaScript and Flash, web developers could get more creative and playful with their designs. Then in 1996, the World Wide Web Consortium (W3C), also founded by Berners-Lee, released the first formal specification for Cascading Style Sheets, level 1 (CSS1). Though methods of styling websites existed in some form or another, Håkon Wium Lie first proposed CSS in 1994 while working at CERN. More complex sites had to use tables to control the layout of the page, and create things like navigation and sidebars that are common today. Most websites used simple header, paragraph, and early list tags like, , and tags to organize information. In the early 90s, web design was very simple. Every year, thousands of websites were launched, and new design techniques developed as rapidly as web technology itself. The web changed rapidly since Berners-Lee's first website went online. If you'd like to check out yourself, it now lives at. While the original 1991 version of the website was lost, they were able to restore a version from 1992. Though the original site went offline, CERN launched a project in 2013 to "preserve some of the digital assets that are associated with the birth of the web." Everything from the original machine names, IP addresses, and URL of the first website was restored to the best of their ability. It originally ran off of a NeXT computer at CERN, the European Organization for Nuclear Research. The site was created by Tim Berners-Lee, and detailed the World Wide Web (W3) project. On August 6, 1991, the first website ever came online. In this article, we'll take a look at the early web, different ways developers would adapt a site to different screen sizes, and modern responsive design. When we visit a website, we expect it to work and look good on all our devices, no matter what the screen size is.īut it took us a long time to get to this point, and developers came up with a number of techniques to adapt sites to different screen sizes before settling on responsive web design. These days, responsive web design is something we all take for granted.