Mobile DevicesLesson 11

Objective:

• The challenges of designing for mobile devices• Using CSS3 media queries• Converting a fixed width layout to a single

column layout

In this lesson, you will learn to convert an existing site to one, optimized for smartphone.

Deciding which type of mobile device to

target• There are a wide variety of mobile devices

on the market and the numbers are still growing and there are many challenges viewing websites on small screens of these devices.

• The best way for you to understand the limitations and conventions of web pages is to visit some popular websites on the Mac and view each of the same websites using your cell phone.

For another experiment

• (if you have an iPhone or an Android smartphones), take a screenshot of a popular site’s home page and then compare the screenshot to the desktop version of the site. Then answer the following questions –

1. how mobile-friendly is the site?2. What gets lost in the translation?3. What, if anything could the designer have done to improve the design?

To take a screenshot on an iPhone or iPad, press the sleep and home buttons simultaneously. The screen will flash white, and a screenshot will be saved into your Cameral Roll as a .png image.  

To take a screenshot on a Windows phone, press the Home and on/off switch at the same time. The screen will make a camera shutter noise and a screenshot will be save into your Camera Roll as a .png image.

The simplest way to take a screenshot on an Android device is with a native application designed for this purpose. One such application is called “ScreenShot”.

Using CSS3 media queries

•As mentioned in the booklet, CSS3 media queries offer the most powerful techniques for designers to create custom layouts for smartphone devices such as the iPhone.

•The key is know where to place the media query codes.  

Take the following code example –h1 {• font-size: 1.5em;• }• Now to add a media query to the

style sheet you would add the following –  

@media only screen and (max-device-width:480px) {•} 

so now you have •h1 {•font-size: 1.5em;•}•@media only screen and

(max-device-width:480px) {•}• 

The media query will target devices such as the iPhone that have a maximum screen width of 480 pixels, however, the new styles need to go inside of this media query like this –

h1 {font-size: 1.5em;}@media only screen and (max-device-width:480px) { h1 {

font-size: 2em;color: blue;

 } }

•in other words, the styles that are being used to target the devices need to be nested inside the media query curly braces.

• Failing to do so will result in styles that may override or compete with the styles in the main style sheet.

This concludes Lesson 11 teacher demo1. Please listen to Lesson 11 video tutorial2. Read to follow the steps and complete Lesson 11 Project 3. Take the Review Questions_L 11 Test on Schoology