HTML and CSS Reference
In-Depth Information
you start with simple but completely functional web pages and then layer on enhance-
ments that add to the experience for people with newer or more capable browsers with-
out breaking the experience for the people using their mobile device or the old browser
that their employer forces them to use.
You'll want to start with valid, standards-compliant HTML when you're creating web
pages. There are a number of relevant standards, including HTML5, which is not yet
complete. I talk about the differences among them shortly. Regardless, you'll want to
choose one of them and make sure all of your pages adhere to it.
Your initial pages should consist only of HTML markup with no JavaScript or CSS, and
they should look fine and work properly. All of your navigation should be present and
should work properly. Your main page content should be visible. In other words, you
should start out with a fully functional, very plain website. This ensures that your site
will work for even the most rudimentary mobile browsers and also for vision-challenged
users with screen readers. Taking this approach also ensures that your markup reflects
the content of your site rather than how you want to present it.
When that is complete, you can start layering on the more advanced functionality.
First, implement the visual design for your website using CSS. You can organize your
content into columns, transform your navigation so that it is presented in collapsible
menus, and add visual interest by using image backgrounds for various elements. Given
the robust support for CSS in the current browsers, there should be no need to use
HTML to define the appearance of your website. You might find you need to add con-
tainer elements to your page that provide the necessary structure for your styles. For
example, if your page layout is split into columns, it will be necessary to add <div> tags
for the contents of each column. Fortunately, such tags do not create any visual differ-
ences unless they are styled, so your page's appearance will not be altered for users who
don't have CSS support.
18
Finally, add dynamic technology like JavaScript or Flash. In Lesson 15, “Using
JavaScript in Your Pages,” I discussed unobtrusive JavaScript. That approach comple-
ments progressive enhancement. When you add JavaScript to the page, make sure the
page provides some minimum level of functionality without the JavaScript, and then use
JavaScript to enhance that baseline functionality. For example, if your page includes col-
lapsed elements that can be expanded with JavaScript, make sure to start out with them
expanded on the page, and then collapse them when the page loads using JavaScript.
That way, content will not be permanently hidden from users who don't have JavaScript.
There are also methods for adding Flash to pages in unobtrusive ways. Many websites
present all their content using Flash, but it is possible to do so while also providing
Search WWH ::




Custom Search