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.
One of the most frustrating aspects of Web design is constantly dealing with the subtle and sometimes not so subtle differences in browser rendering. While the move to a standards-based CSS control presentation model has made life infinitely easier for web designers, dealing with bad browser behavior is one of the unfortunate side effects. So why don't all browsers render your page the same? Well, as I explained in more detail in the "How Do Browsers Work" movie, each browser reads and renders your HTML and CSS based on its internal rendering engine.
There are four major rendering engines being used by the majority of browsers today and each of them have subtle differences in how they render layout and typography. In addition, each updated version of the rendering engine will contain new rendering rules than the last one. Meaning that even within a browser, older versions will render pages differently than new ones. If you think about it, this type of behavior is inevitable. New standards are being issued as the web evolves, and how a browser decides to support those standards is up to the manufacturer.
As new properties and capabilities have been added to CSS, browsers must change to keep up. So how do you design for such a wildly inconsistent landscape? Well, the first off, it's not as bad as it sounds. Most modern standards-compliant browsers will handle almost any valid HTML and CSS you throw at them without blinking. So, step one is to learn how to write valid HTML code and make sure you understand how to code CSS properly. Focus on not just learning CSS syntax and properties, but also on learning how to write standards-compliant CSS and mastering layout concepts, such as floats and the box model.
Often rendering problems aren't the browsers' fault, but the result of the incorrect layout values that ask the impossible. Trying to put 1000 pixels worth of content and padding into a 900 pixel wide layout for example. Next, learn as much as you can about the different browsers and their support level of CSS. There are tons of articles, charts and tutorials that discuss browser version support for CSS properties. One of my favorite is he chart found on QuirksMode. It lists browsers by making version and shows their level of support for specific CSS properties.
Once you know the level of CSS support that a browser has, it is much easier to avoid problems with your styles and to know when you might need to do a workaround for specific browsers. Once you have a solid grasp on CSS and its browser level support, you can begin to build a strategy around dealing with multiple browsers. Every designer is unique and each site might require a slightly different strategy. However, there are some basic steps that you can take to help you avoid getting bitten by browser bugs. First, know your audience. Not just their likes and dislikes and level of visual sophistication. Understand who they are and what browsers and what versions of those browsers they are likely to have.
Older browsers lack significant CSS support and coding around their idiosyncrasies was a major pain point. As new browsers are adopted, it is not uncommon for designers to stop supporting certain older versions. The trick is to know your audience and what level of browser support they require. For example, at the time of this recording, Internet Explorer 8 is the most current version of the browser. A large portion of Internet Explorer users still use IE 7 and to some degree use IE 6. Therefore when I'm creating a page, I pay close attention to making sure that my CSS works in IE's versions 8, 7 and 6. But for the most part I've stopped worrying about IE 5 and lower, that is unless my audience still uses it.
If I'm working on a project that will be used on a company's intranet or one that will be visited frequently by individuals using older equipment, IE 5 could still pop back up. Understanding your audience gives you the ability to understand what level of CSS support and workarounds you'll need to focus on. Second, use coding practices that avoid browser hacks. Browser hacks are ways of writing CSS properties that gives specific values to one browser and another set of values to others. Now this is usually done by writing CSS using odd escape characters or by using selectors that older browsers don't recognize.
Now while these are effective, they cause your CSS to be cluttered and hard to maintain. Making a simple edit will sometimes require that you make changes in several different parts of your code. By avoiding hacks altogether you'll eliminate the need to constantly refine them, edit them and make sure they don't cause newer browsers to break. Avoiding hacks isn't that hard. It just involves understanding very clearly how specific browsers work and then avoiding triggering those behaviors. Let me give you an example. In older versions of IE, putting a margin on the same side of an element that you've floated it on caused Internet Explorer to double the floated margin.
In most browsers, people would see one margin, but they would see twice that margin in the Internet Explorer. Now as you can imagine the last would often break quite badly in IE. A hack was found to fix this problem by simply changing the display CSS property to inline for that floated element. No one knew why it worked but it worked. Well, this was great, except for the fact that the inline property of a floated element is not valid CSS. As such, your CSS would not validate and there was no guarantee that future browsers wouldn't break because of this property.
A simpler way to deal with this issue was to simply not place margins on floated elements. There are a plenty of other ways to ensure proper spacing within layouts and following this rule prevented me from ever having to worry about the dreaded double float margin bug. By making avoiding bugs part of your CSS workflow in coding practices, you eliminate 80% of the headaches caused by bad browser behavior. There are instances where using a hack or code workaround just can't be avoided. So here's some advice when you have to employ a CSS hack. First, realize that all browsers aren't created equal. While Opera, Firefox, and Safari all have their quirks by far, the worst offender in CSS support is Internet Explorer.
You'll find that well over half of your time is spent dealing with one issue or another in the Internet Explorer and as such when you do have to write a few workarounds you can keep your main CSS hack-free by creating an Internet Explorer bug specific style sheet. CSS styles are usually kept in an external CSS file and then linked to your pages. By creating a separate style sheet for just Internet Explorer bugs, you can use what is known as a conditional comment that pass the IE specific style sheet to just Internet Explorer. These conditional comments are special HTML comments that are read by IE but ignored by other browsers.
You can even specify a specific version or range of versions for Internet Explorer, so that you can pass fixes for older and new browsers in separate files. For other non-IE related hacks, I recommend grouping them in consistent locations in your styles. This makes them easier to find, update and remove when needed. Finally, there is no substitute for testing thoroughly in as many browsers as you can. You should install as many browsers as you can on your system and preview your pages throughout the development process. An hour before launch is no time to learn that your layout doesn't work in Safari.
Try to have multiple testing platforms as well. Having a Mac OS, Window OS and multiple versions of browsers can be a demanding requirement, but it can make all the difference in ensuring consistent design. There are multiple online emulation services that will show you how your page layout appears in multiple browsers. browsershots.org is a free one that offers a wide range of platforms. Using these emulators will give you a good idea about how your page is going to translate over multiple browsers but they're usually not as revealing as actually testing the page yourself.
By planning and maintaining a specific approach for designing for multiple browsers, you'll come closer to the ever elusive goal of ensuring a consistent user experience across multiple browsers. You'll also find that as a byproduct of this you begin to focus very clearly on creating valid, standards compliant HTML and CSS code. Now regardless of which browser you target, this practice will help your sites become more portable and accessible as well.
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.