CHS Web Design Track

Tutorial 5 Designing for the Mobile Web

«Previous Lesson | Next Lesson »

Session 5.1 Visual Overview:

Objectives

  • Create a media query
  • Work with the browser viewport
  • Apply a responsive design
  • Create a pulldown menu with CSS
  • Create a flexbox
  • Work with flex sizes
  • Explore flexbox layouts
  • Create a print style sheet
  • Work with page sizes
  • Add and remove page breaks
Materials

Introducing Responsive Design

UXMobile Desktop
Page Content Content should be short and to the point. Content can be extensive, giving readers the opportunity to explore all facets of the topic.
Page Layout Content should be laid out within a single column with no horizontal scrolling. With a wider screen size, content can be more easily laid out in multiple columns.
Hypertext Links Links need to be easily accessed via a touch interface. Links can be activated more precisely using a cursor or mouse pointer.
Network Bandwidth Sites tend to take longer to load over cellular networks and thus overall file size should be kept small. Sites are quickly accessed over high-speed networks, which can more easily handle large file sizes.
Lighting Pages need to be easily visible in outdoor lighting through the use of contrasting colors. Pages are typically viewed in an office setting, allowing a broader color palette.
Device Tools Mobile sites often need access to devices such as phone dialing, messaging, mapping, and built-in cameras and video. Sites rarely have need to access desktop devices.

Quick Quiz:

  1. True/False: The web page content for a mobile device should be extensive.
  2. True/False: Mobile versions of a web page have larger file sizes.

Introducing Media Queries

Mdedia TypeUsed For
all All output devices (the default)
braille Braille tactile feedback devices
embossed Paged Braille printers
handheld Mobile devices with small screens and limited bandwidth
print Printers
projectionProjectors
screen Computer screens
speech Speech and sound synthesizers, and aural browsers
tty Fixed-width devices such as teletype machines and terminals
tv Television-type devices with low resolution, color, and limited scrollability
 

Quick Quiz:

  1. True/ False: An or operator is used to negate any features found in an expression.
  2. True/ False: With a responsive design, it is easier to add new styles through progressive enhancement than to replace styles.

The @media Rule

Media Queries and Device Features

Feature Description
aspect-ratio The ratio of the width of the display area to its height
color The number of bits per color component of the output device; if the device does not support color, the value is 0
color-index The number of colors supported by the output device
device-aspect-ratio The ratio of the device-width value to the device-height value
device-height The height of the rendering surface of the output device
device-width The width of the rendering surface of the output device
height The height of the display area of the output device
monochrome The number of bits per pixel in the device's monochrome frame buffer
orientation The general description of the aspect ratio: equal to portrait when the height of the display area is greater than the width; equal to landscape otherwise
resolution The resolution of the output device in pixels, expressed in either dpi (dots per inch) or dpcm (dots per centimeter)
width The width of the display area of the output device

Applying Media Queries to a Style Sheet

  • The mobile first principle is one in which the overall page design starts with base styles that apply to all devices followed by style rules specific to mobile devices
  • Tablet styles are applied when the screen width is 481 pixels or greater
  • Desktop styles build upon the tablet styles when the screen width exceeds 768 pixels
  • As the screen width increases, more features found in smaller devices are added or replaced
To open the site's home page:
  1. Use your editor to open the tf_home_txt.html and tf_styles1_txt.css files from the html05 > tutorial folder. Enter your name and the date in the comment section of each file and save them as index.html and tf_styles1.css respectively.
  2. Return to the tf_home.html file in your editor and, within the document head, create links to the tf_reset.css and tf_styles1.css style sheet files.
  3. Take some time to scroll through the contents of the document to become familiar with its contents and structure and then save your changes to the file, but do not close it.
 
To add media queries to a style sheet:
  1. Return to the tf_styles1.css file in your editor.
  2. Marjorie has already inserted the base styles that will apply to all devices at the top of the style sheet file. Take time to review those styles.
  3. Scroll to the bottom of the document and add the following code and comments after the New Styles Added Below comment. 
    /* ===============================
Mobile Styles: 0px to 480px
===============================
*/
@media only screen and (max-width: 480px) {
}
/* ================================
Tablet Styles: 481px and greater
================================
*/
@media only screen and (min-width: 481px) {
}
/* =================================
Desktop Styles: 769px and greater
=================================
*/
@media only screen and (min-width: 769px) {
}
  4. Save your changes to the file.
Figure 5-6 highlights the media queries in the style sheet file.

Exploring Viewports and Device Width

  • Web pages are viewed within a window called the viewport
  • Mobile devices have two types of viewports:
    • Visual viewport ‐ displays the web page content that fits within a mobile screen
    • Layout viewport ‐ contains the entire content of the page, some of which may be hidden from the user
To define the visual viewport:
  1. Return to the tf_home.html file in your editor.
  2. Below the meta element that defines the character set, insert the following HTML tag:
    <meta name=”viewport” content=”width=device-width, initial-scale=1” />
  3. Save your changes to the file.
  4. Open the tf_home.html file in your browser.
Figure 5-8 highlights the code for the viewport meta element.
Figure 5-9 shows the initial design of the page.
 

Quick Quiz:

  1. True/ False: Widths in media queries are based on the width of the visual viewport.
  2. True/ False: The line initial-scale=1 is added so that the browser doesn't automatically zoom out of the web page to fit the page content within the width of the screen.

Creating a Pulldown Menu with CSS

  • The following selector can be used to select the submenu that is immediately preceded by a hovered submenu title:
    a.submenuTitle:hover+ul.submenu
  • In order to keep the submenu visible as the pointer moves away from the title and hovers over the now-visible submenu, use the following:
    a.submenuTitle:hover+ul.submenu, ul.submenu:hover
  • To make a submenu visible, change its display property back to block, using the following style rule:
    a.submenuTitle:hover+ul.submenu, ul.submenu:hover {
    display: block;
}
To hide a submenu:
  1. Return to the tf_styles1.css file in your editor.
  2. Scroll to the Pulldown Menu Styles section and add the following style rule:
    ul.submenu {
    display: none;
}
  3. Save your changes to the file and then reload the tf_home.html file in your browser. Verify that the navigation list no longer shows the contents of the submenus but only the Home, Classes, Parents, About Us, and Contact Us links. See Figure 5-12.
Figure 5-11 highlights the styles to hide the navigation list submenus.
Figure 5-12 Navigation list with hidden submenus
 
To redisplay the navigation submenus:
  1. Return to the tf_styles1.css file in your editor.
  2. Add the following style rule to the Pulldown Menu Styles section:
    a.submenuTitle:hover+ul.submenu, ul.submenu:hover {
    display: block;
}
  3. Save your changes to the file and then reload the tf_home.html file in your browser. Hover your mouse pointer over each of the submenu titles and verify that the corresponding submenu becomes visible and remains visible as you move the mouse pointer over its contents.
Figure 5-13 highlights the styles to display the navigation list submenus.
Figure 5-14 shows the revised appearance of the navigation list using the pulldown menus.

Testing your Mobile Website

Mobile Emulators Description
Android SDK Software development kit for Android developers (developer.android.com/sdk)
iOS SDK Software development kit for iPhone, iPad, and other iOS devices (developer.apple.com)
Mobile Phone Emulator Online emulation for a variety of mobile devices (www.mobilephoneemulator.com)
Mobile Test Me Online emulation for a variety of mobile devices (mobiletest.me)
MobiOne Studio Mobile emulator software for a variety of devices (https://www.genuitec.com/products/mobile/)
Opera Mobile SDK Developer tools for the Opera Mobile browser (www.opera.com/developer)
Windows Phone SDK Software development kit for developing apps and websites for the (dev.windows.com/en-us/develop/download-phone-sdk)
 

Class Discussion:

Have you had any prior experience in working with software development kit (SDK). If yes, make a list on how the SDK is different for Android, iOS, and Windows Phones.

 
Viewing the Google Chrome device emulator:
  1. Return to the tf_home.html file in the Google Chrome browser and press F12 to open the developer tools pane.
  2. Click the device iconmobile iconlocated at the top of the developer pane to display a list of devices in the developer window.
  3. Select a device of your choosing from the list of mobile devices in the top-left corner in the developer window. Note that the device's width and height (for example, 400 × 640) are displayed below the device name.
  4. Refresh or reload the web page to ensure that the display parameters of your selected device are applied to the rendered page.
    The emulator also allows you to view the effect of changing the orientation of the phone from portrait to landscape.
  5. Click the swap dimensions buttonmobile iconlocated below the name of the mobile device to switch to landscape orientation. Click the swap dimensions button again to switch back to portrait mode.
    Google Chrome's device emulator can also emulate the touch action. The touch point is represented by a semi-transparent circlemobile icon.
  6. Move the touch point over Classes, Parents, or About Us and verify that when you click (tap) the touch point on a submenu title the nested submenu contents are displayed.
  7. Verify that you when you click elsewhere in the page the submenu contents are hidden.
Figure 5-16 shows the effect of opening a submenu with the touch emulator.
 
To hide the customer comments:
  1. Return to the tf_styles1.css file in your editor and go to the Mobile Styles section.
  2. Within the media query for screen devices with a maximum width of 480 pixels, add the following style rule to increase the font size of the hypertext links in the navigation list. Indent the style rule to offset it from the braces around the media query.
    nav.horizontal a {
    font-size: 1.5em;
    line-height: 2.2em;
}
  3. Add the following style rule to hide the aside element (once again indented from the surrounding media query):
    aside {
    display: none;
}
  4. Save your changes to the file and then reload the tf_home.html file in your browser. Reduce the width of the browser window to 480 pixels or below (or view the page in your mobile emulator). Verify that the customer comments are no longer displayed on the web page and that the size of the navigation links has been increased.
Figure 5-17 highlights the style rules in the media query for mobile devices.
Figure 5-18 shows the final design of the mobile version.

Creating a Tablet Design

To begin writing the tablet design:
  1. Return to the tf_styles1.css file in your editor and scroll down to the media query for the tablet styles.
  2. Within the media query, add the following style to float the five list items, which are direct children of the main menu, side-by-side. Set the width of each list item to 20% of the total width of the main menu.
    ul.mainmenu > li {
    float: left;
    width: 20%;
}
  3. Double the widths of the submenus so that they stand out better from the main menu titles by adding the following style rule.
    ul.submenu {
    width: 200%;
}
  4. Save your changes to the style sheet and then reload the tf_home.html file in your web browser.
  5. Increase the width of the browser window beyond 480 pixels to switch from the mobile design to the tablet design. Verify that the submenu titles are now laid out horizontally and that if you hover your mouse pointer over the submenu titles, the contents of the submenu are made visible on the screen. See Figure 5-20.
Figure 5-19 highlights the style rule within the media query for tablet devices.
Figure 5-20 Pulldown menus for the tablet layout
 
To position the navigation submenus:
  1. Return to the tf_styles1.css style sheet in your editor.
  2. Locate the style rule for the ul.mainmenu > li selector in the Tablet Styles section and add the following style:
    position: relative;
  3. Add the following style to the ul.submenu selector in the Tablet Styles section:
    box-shadow: rgb(51, 51, 51) 5px 5px 15px;
    position: absolute;
  4. Save your changes to the style sheet and then reload the tf_home.html file in your web browser.
  5. Verify that when you open the pulldown menus, the subsequent page content is not shifted downward.
  6. Scroll down as needed and note that the customer comments now appear at the bottom of the page because they were only hidden for the mobile version of this document.
Figure 5-21 highlights the new styles.
Figure 5-22 highlights the final design for the tablet version of the home page.
 

Class Discussion:

Express your views on how a tablet differs from a mobile. Rresearch how a phablet merges both the features of a tablet and a mobile device together.

Creating a Desktop Design

To start working on the desktop design:
  1. Return to the tf_styles1.css style sheet in your editor and within the media query for devices with screen widths 769 pixels or greater insert the following style rule to format the appearance of the navigation submenus.
    ul.submenu {
    background: transparent;
    box-shadow: none;
    display: block;
    position: relative;
    width: 100%;
}
  2. The navigation list itself needs to expand so that it contains all of its floated content. Add the following style rule to the media query for desktop devices:
    nav.horizontal::after {
    clear: both;
    content: “”;
    display: table;
}
  3. Finally with no hidden submenus, there is no reason to have a submenu title. Add the following style rule to remove the submenu titles:
    nav.horizontal a.submenuTitle {
    display: none;
}
Figure 5-23 highlights the new style rules in the desktop media query.
 
To change the layout of the article and aside elements:
  1. Within the media query for desktop devices, add the following style rules to float the article and aside elements:
    article {
    float: left;
    margin-right: 5%;
    width: 55%;
}
aside {
    float: left;
    width: 40%;
}
  2. Save your changes to the style sheet and then reload tf_home.html in your browser.
  3. Resize your web browser and verify that as you change the browser window width, the layout changes from the mobile to the tablet to the desktop design.
Figure 5-24 highlights the final style rules in the desktop media query.
Figure 5-25 shows the final appearance of the desktop design.
 

Class Discussion:

Differentiate between mobile, tablet, and desktop design techniques.

Session 5.1 Quick Check
  1. What is responsive design?
  2. What are the three primary parts of responsive design theory?
  3. Provide the code to create a link element that loads the talk.css style sheet for aural browsers.
  4. Provide the general syntax of a CSS rule that loads style rules for braille devices.
  5. Provide the general syntax of a CSS rule that loads style rules for screen devices up to a maximum width of 780 pixels.
  6. Provide the code for a link element that loads the tablet.css style sheet for screen devices whose width ranges from 480 pixels up to 780 pixels (inclusive).
  7. How should you arrange the media queries in your style sheet if you want to support mobile, tablet, and desktop devices?
  8. What is the difference between the visual viewport and the layout viewport?
  9. Provide the code that sets the width of the layout viewport equal to the width of the device with an initial scale factor of 1.
«Previous Lesson | Next Lesson »