From the course: Making Sense of the CSS Box Model

Displaying information through the web - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Displaying information through the web

“

- When you look at a well-designed and communicative website, you have to make a conscious effort to remember what you see is not actually the content itself but rather the browser's visualized interpretation of code: HTML and CSS Markup, JavaScript, images, videos, and other media. In its presentational nature, the web is a profoundly skeuomorphic environment. We use the internet, computers, and screens to make visual representations of information that register to the human eye as if they existed in real life. A simple document looks like a printed document but is, in reality, just light and dark pixels on a screen. An image looks like a photo but is, in reality, just projected hues, saturation, and lightness generated by the computer when and if we tell it to do so. The items themselves don't really exist. Instead, what we're presented with are temporary manifestations, or reproductions really, of the items in the context of the screen, and these manifestations are generated by the web browser. If we establish as a baseline that the web is a tool to communicate information from the publisher to the visitor and vice versa and we combine this with the knowledge that the web browser creates temporary manifestations of this information in whatever form the visitor requests, we can identify the job of the web designer and developer as being responsible for providing the browser with the necessary instructions to present the content in the most accessible way for the visitor. This could mean many things: providing proper accessible markup to allow the visitor to choose how they want to consume the information, providing responsive designs to present the content in the best possible way across all screens, creating informational user experiences that are easily understood by the visitor, the list goes on. To meet these goals, it's vital to understand how the browser sees the content and know how to instruct the browser to display the content in the best possible way for humans. After all, the browser has no comprehension of the information. It just seems Markup and parses it to be displayed on a screen based on pre-configured algorithms. Start printing out text from the top left-hand corner in the default font. Display images in line. Use the available space. By understanding how the browser sees the content and how to instruct the browser to display the content in the best possible way, we can change the presentation of that content into anything we want. On the web, content and the presentation of that content are separated between HTML and CSS, meaning we have an almost unlimited canvas to work with, and it all starts with the simple realization that the web is made of boxes.

Contents