ITSE 1411 Beginning Web
More on Links, Layout, and Mobile Chapter 8
Discussion
  1. Linking
    Relative Linking Found in Chapter 2 Discussion Notes.
    Fragment Identifiers Found in Chapter 2 Discussion Notes.

  2. Figure and Figcaption Elements
    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.

  3. Images can be floated on the page to fill the available space in the browser viewport.
    Floating images Found in Chapter 7 Discussion Notes.

  4. More HTML5 Elements
    ElementPurpose
    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.

  5. Use this style for HTML5 elements header, hgroup, nav, footer, section, article, figure, figcaption, aside { display: block; }
    HTML5 Compatibility with Older Browsers
    CompatibilitySolution
    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] -->

  6. Printed web pages often use different CSS than pages are displayed. The media attribute has different values for alternate purposes. You can use styles that are only show on printed format.
    ValuePurpose
    screen The screen value indicates the style sheet for a browser on a computer screen.
    print The print value indicates the style sheet for a printed format.
    handheld The handheld value indicates the style sheet for handheld mobile devices.

  7. Design Techniques for Mobile Web Design
    Design ConsiderationsAccommodation
    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.

  8. Viewport Meta Tag
    directivesvaluesPurpose
    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.

  9. Media Types
    Media TypePurpose
    all All devices
    screen Screen display of web page.
    only Causes older nonsupporting browsers to ignore the media query.
    print Print out of web page.

  10. <thscope="col">Features
    CSS3 Media Queries
    ValuesPurpose
    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.

  11. Flexible Images
    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.