Relative Linking | Found in Chapter 2 Discussion Notes. |
Fragment Identifiers | Found in Chapter 2 Discussion Notes. |
figure Element | The figure element comprises a unit of content that is self-contained as well as one optional figcaption element. |
figcaption Element | The figcaption element is nested inside the figure element below the image or content displayed. |
Floating images | Found in Chapter 7 Discussion Notes. |
Element | Purpose |
---|---|
hgroup | Use hgroup tags for heading level tags. They contain both the website name and a tagline. |
section | Use section element to indicate a section of a document. |
article | Use the article element to present an independent entry. |
aside | Use the aside element to indicate a sidebar or other tangential content. |
time | Use the time element to represent a date or a time. |
Compatibility | Solution | |
---|---|---|
Style Upgrade | HTML5 shim | Use conditional statements for older browsers to interpret JavaSript sections to process new HTML5 element selectors. <!--[ if lt IE 9] > <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> <![endif] --> |
Value | Purpose |
---|---|
screen | The screen value indicates the style sheet for a browser on a computer screen. |
The print value indicates the style sheet for a printed format. | |
handheld | The handheld value indicates the style sheet for handheld mobile devices. |
Design Considerations | Accommodation |
---|---|
small screen size | The size of the header area is reduced to accommodate a small screen display. |
bandwidth, connection speed | Omit large images. Additionally, some plans charger per kilobyte, so images become expensive to the user. |
font, color, media issues | Use common fonts and colors. Also, flash is not always supported. |
controls, processor, and memory | Use a single column layout that facilitates keyboard tabbing and ease of touch control. |
functionality | Place hyperlinks directly under the header. Consider using a search feature. |
directives | values | Purpose |
---|---|---|
width | Numeric value or device-width. | The width of the viewport in pixels. |
height | Numeric value or device-height. | The height of the viewport in pixels. |
width | Numeric multiplier; set to 1 for 100% initial scale. | Initial scale of the viewport. |
width | Numeric multiplier; Mobile Safari default is 0.25. | Minimum scale of the viewport. |
width | Numeric multiplier; Mobile Safari default is 1.6. | Maximum scale of the viewport. |
width | yes allows scaling, no disables scaling. | Determines whether a user can zoom in or out. |
Media Type | Purpose |
---|---|
all | All devices |
screen | Screen display of web page. |
only | Causes older nonsupporting browsers to ignore the media query. |
Print out of web page. |
Values | Purpose | |
---|---|---|
max-device-height | Numeric value | The height of the screen size of the output device in pixels is smaller or equal to the value. |
max-device-width | Numeric value | The width of the screen size of the output device in pixels is smaller or equal to the value. |
min-device-height | Numeric value | The height of the screen size of the output device in pixels is greater than or equal to the value. |
min-device-width | Numeric value | The width of the screen size of the output device in pixels is greater than or equal to the value. |
max-height | Numeric value | The height of the viewport in pixels is smaller than or equal to the value; (revaluated when screen is resized) |
min-height | Numeric value | The height of the viewport in pixels is greater than or equal to the value; (revaluated when screen is resized) |
max-width | Numeric value | The width of the viewport in pixels is smaller than or equal to the value; (revaluated when screen is resized) |
min-width | Numeric value | The width of the viewport in pixels is greater than or equal to the value; (revaluated when screen is resized) |
orientation | portrait or landscape | The orientation of the device. |
A flexible image is a fixed image that will not break the page layout as the browser viewport is resized. |
Background images can also be configured for a more fluid display at various viewport sizes. |