Smashing Html5 : Navigation Strategies - Single-Page Web Sites with Iframes

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
2/16/2015 3:41:11 AM

Think of a Web site as a loading zone. Whenever, you click a link, you load another page — graphics and all. Sometimes, all you want to do is load just one thing. That saves the user from having to wait for all the other stuff to load or reload. If you know a bit of JavaScript and Ajax, you can do that, but what about with just HTML5? The answer is yes!

This section examines how to link to graphics and change the graphic in an iframe. When creating applications designed specifically for mobile devices, you want to use as little bandwidth as possible. By changing just one thing on a Web page, the mobile device just has to load or reload a single item, so the response time is less.

Linking to a graphic

Generally, when we think of adding graphics to a page, we think of the <img> tag. After all, that tag is what we use to place graphics on a Web page. However, you also can use the <a href> tag to load a graphic. Instead of assigning a Web page path to the href assignment, assign a graphic. For example, the following line of code loads a blank page with a graphic:

<a href=”myGraphic.jpg”>My Graphic</a>

When users click on the link text, the current page disappears, and the graphic appears in the upper-left corner of a new page.

Placing a graphic in an iframe element works just like placing a Web page in an iframe . The link is to the target within the iframe and instead another Web page. That means that the current Web page stays in place, and the graphic opens in the iframe.

The following script uses graphic icons for the navigation. However, instead of navigating to another page, the navigation places a different graphic in the main viewing area — an iframe. By making miniature versions of the graphic to be displayed (called thumbnails), users see their selection first in the navigation design. That is, the thumbnails guide users to the full-size view.

Making and using thumbnail icons

To prepare for the application, first create full-size versions and thumbnails of all the graphics. The full-size graphics and the thumbnails should all be the same size. In the following example, the full-size graphics are set to 250 x 312 pixels, and the thumbnails are set to 63 x 79 pixels. Thumbnails need to be small enough to serve as navigation buttons but large enough for users to get an idea of what the larger graphics will look like. Notice that the iframe dimensions are the same as the full-size graphics. Once the graphics are prepared, they’re placed in separate directories for the thumbnails and full-size graphics. 




<style type=”text/css”>


body {

font-family:Verdana, Geneva, sans-serif;





h1 {

font-family:”Harrington”, Arial, sans-serif;





h4 {

font-family:”Arial Black”, Gadget, sans-serif;




aside {



h5 {




<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Iframe Navigation</title>








<h1>Portrait Studio</h1>



<iframe name=”fullSize” width=”250”, height=”312” seamless src=”portraits/man.jpg”></iframe>



<nav> <a href=”portraits/man.jpg” target=”fullSize”><img src=”thumbs/thumbMan.jpg”></a> <a href=”portraits/woman.png” target=”fullSize”><img src=”thumbs/thumbWoman.png”></a> <a href=”portraits/boy.jpg” target=”fullSize”><img src=”thumbs/thumbBoy.jpg”></a> <a href=”portraits/girl.png” target=”fullSize”><img src=”thumbs/thumbGirl.png”></a>

<h4>Select portrait</h4>




<h5> All of the creations are by a little-known artist, <b>Mo Digli Anni</b>, from Spunky Puddle, Ohio. By clicking on the thumbnail buttons, you can send the image to the larger viewing window. </h5>





When you test the example, you’ll see the man’s portrait and then the four thumbnails of the man, woman, boy, and girl beneath the image inside the iframe. Figure 1 shows the page on a computer monitor screen.

As you can see in Figure 8-10, users are instructed to click on the thumbnail buttons to view the different “portraits.” The interface is fairly intuitive and users know what to expect when they click on one of the graphic buttons. The best part is that only the graphic for the selected portrait is loaded into the iframe instead of loading a new page with all the graphic buttons and other page materials.


Figure 1: Images used for navigation.

Using iframes on mobile devices

In testing the application on a mobile device, the results depended on the HTML5 mobile browser in use. Figure 8-11 shows the Opera Mini browser on the left; as you can see, the text beneath the images is formatted to be readable. However, at the time of testing, the Opera Mini seemed to reload the entire page as each button was selected.

The image on the right in Figure 2 is from the Safari mobile browser. The text at the bottom didn’t follow the CSS3 formatting and ran off to the right side of the screen. However, the images in the iframe worked perfectly, and as each thumbnail button was clicked, the full-size image loaded without reloading the entire page.


Figure 2: Different mobile browsers handle text differently.

Several different kinds of businesses and social networking sites use similar applications. For example, professional photographers use thumbnails of their photographs that users click to view the full-size images. Likewise, social networking sites can use similar pages to display and load pictures of each users’ friends without having to leave the page.

Because mobile devices have such small display areas, using iframes in navigation designs is quite helpful. Trying to click small text links can be difficult, but as you can see in both mobile browsers in Figure 8-11, the graphic buttons are easy to see and tap for loading the full-size image or other materials into the iframe space.

  •  Smashing Html5 : Navigation Strategies - Creating Consistency (part 2) - Understanding the HTML5 mechanics of vertical navigation
  •  Smashing Html5 : Navigation Strategies - Creating Consistency (part 1) - Vertical and horizontal navigation, Applying CSS3 pseudo-classes
  •  Smashing Html5 : Navigation Strategies - Using JavaScript to Call a Linked Page
  •  Smashing Html5 : Web Navigation Concepts (part 2) - Using lists in global navigation
  •  Smashing Html5 : Web Navigation Concepts (part 1) - Designer navigation and user navigation, Global navigation
  •  Sharepoint 2013 : The Managed Metadata Service (part 4) - Term Sets
  •  Sharepoint 2013 : The Managed Metadata Service (part 3) - Term Store, Groups
  •  Sharepoint 2013 : The Managed Metadata Service (part 2) - Associating with a Web Application
  •  Sharepoint 2013 : The Managed Metadata Service (part 1) - Taxonomy and Folksonomy, Initial Setup
  •  Sharepoint 2013 : Publishing and Web Content Management - Content Deployment - Configuring the Destination Farm, Configuring the Source Farm
    Top 10
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
    - Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
    - Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
    - Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
    - Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
    - First look: Apple Watch

    - 3 Tips for Maintaining Your Cell Phone Battery (part 1)

    - 3 Tips for Maintaining Your Cell Phone Battery (part 2)
    programming4us programming4us