Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Web Design Fundamentals is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing.
Most people use web browsers like they use their cars. They have little to no idea of what's going under the hood. They just turn the key and drive it. For the casual web user, there is nothing wrong with that. For web designers and developers however, knowing what's going on inside the browser is very important, key, in fact, making sure that your websites look and perform the way that you design them to. It doesn't help that there are so many browsers and each of them perform tasks a little bit differently from the rest. We'll start by taking a look at the basics of how browsers work, discuss why differences exist between them and finish by examining the evolving web standards and what they mean to designers when dealing with browsers.
The basics of how a browser works are pretty much the same, regardless of the browser itself. Browsers use HTTP or Hypertext Transfer Protocol to communicate with web servers and request pages and content. Once the requested page, usually an HTML document, is fed to the browser, the browser then uses its internal rendering engine to translate the page and render it on screen. Any additional content, such as images or video, is requested and rendered based on whether the browser supports the file type or whether the plug-ins necessary to view the content are installed.
The four most common rendering engines are Trident, Presto, Gecko and WebKit. The Trident engine was developed by Microsoft and is a proprietary engine used in a multitude of browsers and web clients. Internet Explorer and most AOL browsers use Trident. Presto is another proprietary engine developed by Opera Software for their browsers and licensed to other devices. Gecko is an open source rendering engine, originally developed by Netscape, but released to the open source Mozilla project which continued development. It powers browsers like Firefox and Camino.
WebKit is another open source rendering engine, developed by Apple, Google, Nokia and others. It powers browsers such as Apple's Safari browser and Google's Chrome. It's worth noting that these rendering engines are still being developed and older versions of the browsers will have older versions of the rendering engines as well. This is why web designers should test their pages in not just multiple browsers, but multiple versions of the same browser. Although many differences still exist between how these browsers handle events and render page elements and layout, there aren't as many differences now as there have been in the past.
This convergence in browser behavior has been driven in large part to something called Web Standards. To understand what Web Standards are, it's useful to engage in a little bit of web history. In the mid to late 90s, two browsers, Netscape and Internet Explorer, were battling each other for market dominance. Some refer to this period as the Browser Wars. In order to build better browsers with cooler capabilities, each would release proprietary features that were not supported by other browsers. This meant that with every new release, web designers would have to learn new ways of developing websites to take advantage of these features.
This would often lead to designers needing to develop multiple versions of pages for different browsers or just picking a browser to design for and not worrying about the rest. Does anybody remember those Designed for Netscape Navigator badges? It was inevitable that as the browser market became more crowded, designers and developers would face an impossible task when trying to create pages that looked good everywhere. Now, this led to the creation of the Web Standards Project in 1998 by a group of designers and developers frustrated with the current state of browser development.
They began supporting, in an organized way, the adoption of the World Wide Web Consortium's recommendations. The World Wide Web Consortium, or W3C, began in 1994 and attempted to standardize web protocols and technologies by issuing a series of recommendations for everyone to follow, but obviously, at this point, no one was listening. So, the Web Standards Project started referring to the recommendations as standards in an attempt to convince browser manufacturers to follow them.
They began an education initiative, to make sure designers and developers were aware of these standards and would push for them. They also educated the general public by encouraging the use of browsers that supported these standards. Now, in the end, the outcry from the design and development community along with the rise of open source browsers, such as Firefox, helped other manufacturers realize the advantages of supporting Web Standards. Now you can learn more about the Web Standards Project, and even join it, at www.webstandards.org. So what makes understanding Web Standards so important to designers? Well, if most modern browsers support Web Standards, and to an extent they do, that means that by learning these standards and staying current with their development, you ensure that your sites will have a consistent design and user experience across multiple browsers.
You can simply design with these standards in mind and make minor tweaks when needed, based on browser deficiencies. It is important to note that Web Standards are a moving target. New recommendations are being published often, in an effort to drive the web forward. The adoption of new standards can be slow and in most browsers, it's a gradual process. So, it's important to track which standards are supported, which are partially supported, and which lack support, based on specific browser versions.
There are currently no FAQs about Web Design Fundamentals (2010).
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.