How does a Web page work? The role browsers play in the way your page looks and functions

Websites may be programs in a sense, but they don't run directly on your computer the way a program like Microsoft Word or Windows Media Player does. Not only does the Web browser visually contain the page on your screen, but it’s responsible for receiving and following the instructions that define the Web page. This can cause certain features to become unavailable, depending on the version of the Web browser.

Newer Web development language standards such as HTML5 and CSS3 define an abundance of new and impressive instructions that the browser can follow. However, browser versions released prior to the establishment of these standards won't follow these instructions.

Additionally, determining which instructions from a standard actually make it into the browser software is at the discretion of the browser's developer (such as Apple, Google, Microsoft or Mozilla). As a result, the implementation sometimes won't completely conform to the original specifications, causing differences in interpreting these instructions.

A graphical, highly customized website can only be presented as perfectly as the browser that interprets and renders it. Rather than an image, which is a collection of pixels, a Web page is a collection of elements. An element can be an image, a piece of text, an interactive control such as a text field that permits responses to be entered into a form, or a container that helps determine the page's visual layout and structure.

Most of the instruction interpretation discrepancies between browsers (and legitimate browser bugs) fall under the category of how to visually style and determine the behavior of these elements.

Part of the responsibility of a front-end Web developer is to determine what design approaches are possible given the constraints, and to ensure the designers are aware so that when a design is approved, it can be implemented for the required Web browsers. Other constraints may include the necessity for a screen-reader to navigate the site easily, for a search engine to index the site's content or for the site to load quickly.

At thunder::tech, the front-end development process (often referred to as "slicing") happens after the design has been approved but must be completed before any server-side applications (such as a CMS) or the site's content can be installed.

The computer does not read the code, which is used to build a Web page directly; the browser interprets the code -- and different browsers may interpret the code differently. Therefore, it's necessary to know before development begins which Web browsers the site needs to work in so the site can use the most browser features possible, without relying on the unavailable ones.

Now that you’re familiar with how browsers affect how a page displays, be sure to look for our follow-up post on a Web browser quirk caused by zooming.

About the author::
Benjamin John is an interactive developer at thunder::tech, specializing in front-end Web development.

Related Posts

Digital signage everywhere: B2C (Part 1 of 2)	Five tips for email template design	Apple attempts to change education, one “i” at a time	Knowledge Bombs Away!