“HTML5 and CSS3” is available on YouTube at: http://youtu.be/en9ibmol0MQ
This graphic view of your files and their folders shows you the underpinning of the Web you saw in the previous slide. We will spend about the first 4 weeks building this “backroom” shell for your Web; eventually all these files and folders will be populated with some very interesting content.
In HTML5, we pay special attention to the structure of the pages in a site. All are built from the same fundamental grid pattern, depicted in this slide. Note that what you have here is a series of containers, elements that hold other elements. With this model, you will be building your Web pages according to the latest HTML “structural” standards.
Here is the page model again, from the HTML5 perspective. While this markup (“code”) can at first look a little intimidating, you will soon become very comfortable in traversing and populating it. Again, notice how all the elements are contained within larger elements. This is known as “nesting.” The “page hierarchy,” as it is called, consists of parent, child, and sibling relationships.
Once you have built a solidly functioning and validated template, you will then generate the various pages of your Web site from that. These “template-derived” pages will all look basically the same, except for their content. The graphics in this slide show the Home, About Me, and Essay pages as they are generated (derived) from the template. Dreamweaver offers some very nice ways of performing this kind of generation from the template. I think you will enjoy this process of “making” pages for your site.
If you design your site correctly and make it responsive, your pages can be viewed effectively on huge stadium-sized screens, medium-sized screens (from HDTV to desktop computer monitors), and tiny hand-held gaming devices. In effect, you design one time for many uses: design one for many.
This slide depicts the model’s minimum width in a desktop browser. Notice the comfortable reading length of the lines of text on the page; also note that the graphics are sized proportionately and integrated well with the text. The next slide shows how this page would look without the min-width rule.
This slide shows how the page renders in the browser without the min-width rule. Notice how the elements are starting to pile up on each other. You still see some margin because the page has been set to render taking up 70% of the viewport, no matter what the size of the window.
Here you can see what happens to the page in a wide monitor (1680 X 1050). The content spreads a little, but then stops at a maximum width of 80em (1280px); the remainder of the space on the monitor is taken up by a gradient fill. The next slide shows how this page would look without the max-width rule.
Here is how the page renders without the max-width rule. Notice the extreme spreading; the lines become very difficult to read because of the huge left-to-right movement required to take in the content. The page itself still occupies 70% of the viewport, but becomes thinner vertically as it has more room to expand left and right.
The iPhone and iPod Touch handle HTML5 brilliantly, as you can see from the screen shots in this slide. If your visitors want to increase or decrease size, all they need do is pinch in or out, and because the page is built with HTML5 and Vectors, the visual response is crisp and clear.
This slide shows how effectively Apple’s iOS 4.3 on the iPod Touch renders both vector and bitmapped graphics mightily enlarged.
The iPad tablet is able to render our model site flawlessly. And because the pages are built in HTML5 and CSS3 with proportionally correct text and image sizes, visitors will have no trouble interacting with the navigation devices or the various linked widgets (sharing buttons, interactive Google map, HTML5 shield, and the like).
The full-screen portrait view rendered in Safari on the iPad is very easy for visitors to navigate. Enlarging by pinching out results in a beautiful rendering of vector text and bitmapped graphic, as demonstrated in the next slide.
In the iPad’s Safari browser, the vector graphics rendering of the text in the navigation buttons, the H1 headline, and the content is smooth and clear. You can see that the bitmapped graphic, lower right, is starting to pixelate, but not dramatically. With retina display, the next generation of iOS 5 for the iPad will have even better graphics and smoother video. Games anyone?
So how might our model site look in a small phone’s Web browser? This slide shows that with very little tweaking of the CSS, a page will render very well as a single column. Again the key to this adaptability is creating a model that is “responsive” to whatever medium is handling it using HTML5.
Html5 model site
Dr. William BuchholzProfessor and Chair EmeritusInformation Design and Corporate CommunicationBentley UniversityWaltham, MA 02452-4705<br />HTML5 Model Site<br />