Pacific Trails Resort Case Study

In this chapters case study you will use the existing Pacific Trails (Chapter 7) website as a starting point to create a new version of the website that utilizes media queries to configure display for mobile devices. Figure 8.34 displays wireframes for desktop browser, typical tablet screen, and typical smartphone screen display. When you have finished, the website will look the same in desktop browsers (see Figures 7.43 and 8.35). The mobile displays should be similar to the screen captures in Figure 8.35.

Figure 8.34

Pacific Trails wireframes.

Figure 8.34 Full Alternative Text

Figure 8.35

Resize the browser window to approximate the new tablet and smartphone display.

Figure 8.35 Full Alternative Text

You have five tasks in this case study:

Create a new folder for the Pacific Trails Resort website.

Edit the pacific.css external style sheet to include media queries and styles needed for appropriate desktop, tablet, and smartphone display.

Edit the Home page (index.html).

Edit the Yurts page (yurts.html).

Edit the Activities page (activities.html).

Task 1: Create a folder called ch8pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 7Case Study ch7pacific folder into the ch8pacific folder.

Task 2: Configure the CSS. Launch a text editor and open the pacific.css external style sheet file.

Configure Support of HTML5. Add the following style rule to configure most older browsers to render HTML5 block display elements as expected.

header, main, nav, footer, figure, figcaption, aside, section, article { display: block; }

Configure Desktop Display. Code the following new styles

The mobile id. Set display to none. Youll apply this id when you edit the home page (index.html).

The desktop id. Set display to inline. Youll apply this id later when you edit the home page (index.html).

Configure Tablet Display.

Code a media query below the existing styles to select for typical tablet device viewport size.

@media only screen and (max-width: 64em) { }

Configure the following new styles within the media query:

The body element selector. Set margin to 0 and the background color to #FFFFFF;.

The wrapper id selector. Set minimum width to 0, width to auto, box-shadow to none, and border to none.

The header element selector. Set top padding to 0.5em, bottom padding to 0.5em, and left padding to 0. Set height to auto.

The h1 element selector. Set letter-spacing to 0.1em.

The main element selector. Set left margin to 0.

The nav element selector. Eliminate float (Hint: Use float: none;), set the width to auto, centered text, and configure 0.5em padding.

Navigation list items. Use a descendant selector to configure li elements within the navigation area with inline display, 0.25em top and bottom padding, and 0.75em left and right padding.

The homehero, yurthero, and trailhero id selectors. Set left margin to 0. Set height to 200 pixels.

The footer element selector. Set left margin to 0.

Configure Smartphone Display.

Code a media query below the existing styles to select for typical smartphone device viewport size.

@media only screen and (max-width: 37.5em) { }

Configure the following new styles within the media query:

The main element selector. Set top and bottom padding to 0.1em, left and right padding to 1em, and font size to 90%.

The h1 element selector. Set font size to 2em.

The nav element selector. Set padding to 0.

Navigation list items. Use a descendant selector to configure li elements within the navigation area with block display, 0 margin, and a 2 pixel solid dark (#330000) bottom border.

Navigation hyperlinks. Use a descendant selector to configure elements within the navigation area with block display. This will provide the user a larger area to tap when selecting a hyperlink.

The homehero, yurthero, and trailhero id selectors. Do not display the image. Set the background-image property to none and the height to 0.

The mobile id selector. Set display to inline.

The desktop id selector. Set display to none.

Save your pacific.css file. Use the CSS validator (http://jigsaw.w3.org/css-validator) to check your syntax. Correct and retest if necessary.

Task 3: Edit the Home Page. Launch a text editor and open the index.html file. Edit the code as follows:

Configure a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0.

The home page displays a phone number in the contact information area. Wouldnt it be handy if a person using a smartphone could click on the phone number to call the resort? You can make that happen by using tel: in a hyperlink. Configure a hyperlink assigned to an id named mobile that contains the phone number as shown below:

888-555-5555

But wait a minute, a telephone link could confuse those visiting the site with a desktop browser. Code another phone number directly after the hyperlink. Code a span element assigned to an id named desktop around the phone number as shown here:

888-555-5555

Save the index.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. While your home page will look unchanged in maximized desktop browsers (see Figure 7.43), as you resize and reduce the browser viewport dimensions, the displays should be similar to the screen captures in Figure 8.35.

Task 4: Edit the Yurts Page. When you are finished, the Yurts page will look similar to Figure 8.36.

Figure 8.36

Browser approximation of the yurts.html page mobile display.

Figure 8.36 Full Alternative Text

Launch a text editor and open the yurts.html file. Configure a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0.

Save the yurts.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. Resize the browser window to test the media queries. Compare your work with Figure 8.36, which shows screen captures of the yurts page.

Task 5: Edit the Activities Page. When you are finished, the Activities page will look similar to Figure 8.37.

Figure 8.37

Browser approximation of the activities.html page mobile display.

Figure 8.37 Full Alternative Text

Launch a text editor and open the activities.html file. Configure a viewport meta tag in the head section that configures the width to the device-width and sets the initial-scale to 1.0.

Save the activities.html file. Remember that validating your HTML can help you find syntax errors. Validate and correct this page before you continue. Display your page in a browser. Resize the browser window to test the media queries. Compare your work with Figure 8.37, which shows screen captures of the activities page. Pacific Trails Resort is mobile!