ISTA 230

ISTA 230 - Introduction to Web Design

Responsive Design

Mobile

Mobile

Mobile Computing

Horse
Car

Mobile

Mobile

Mobile Computing

Horse-Car

Mobile

Mobile

Mobile Computing

Horse and Rider

Mobile

Mobile

Desktop vs. Mobile

Mobile

Mobile

History of Mobile Browsers

Mobile

Mobile

History - Separate Mobile Sites

Mobile

Mobile

History of Mobile Browsers

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" type="text/css" href="style.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

As mobile browsers became more capable, many of them stopped identifying themselves as 'mobile' browsers and would ignore the 'handheld' stylesheets, opting instead to provide the user with the complete website as it would be viewed on a non-mobile device.

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" type="text/css" href="style.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

Mobile

Mobile

History of Mobile Browsers

Mobile

Mobile

History of Mobile Browsers

There’s no chance that the iPhone is going to get any significant market share. No chance. Steve Ballmer, Former Microsoft CEO

Mobile

Mobile

Common Mobile Browsers

It is worth noting that earlier versions of Chrome on

Mobile

Mobile

Mobile Computing

Mobile

Mobile

Mobile Computing

Mobile

Mobile

Mobile Computing

Online usage categories, mobile v. data

Mobile

Mobile

Mobile Computing

Mobile only vs desktop only

Mobile

Mobile

Mobile Computing

Time spent online, mobile v. desktop

Mobile

Mobile

Business of Mobile

Within the business of mobile computing, there are three primary players that we must be aware of:

Service operators are the ones who provide the mobile networks. Verizon, AT & T, and T-Mobile are all examples of service operators. While service operators don't typically play a direct role in building mobile devices and browsers, they do control which devices are allowed on their network. They can further influence consumers by offering some phones at a lower price, offering subsidies for others, etc. Some service providers also offer their employees different commission amounts depending on the type of phone sold to a consumer.

Device providers are the ones who develop the hardware, i.e., the phones themselves. Some examples of device providers include Apple, Samsung, Lenovo, LG, and Sony. There are LOTS of device providers and their popularity varies widely depending on the part of the world you're looking at.

Software providers are the ones who provide the operating system and applications for the mobile device. In some cases, the device provider may also be the software provider (e.g., Apple in the case of the iPhone and it's operating system, iOS). In other cases, the operating system and applications are developed apart from the device itself and are then licensed to the device provider to be used on the device.

All these roles coming together results in a large variety when it comes to mobile browser implementation and functionality!

Mobile

Mobile

Types of Mobile Browsers

To help make sense of the options we need to consider when moving our websites online, we'll look at four categories of mobile browsers:

Mobile

Mobile

Common Mobile Browsers

Mobile

Mobile

Mobile Browser Usage

"Which mobile devices are most popular?" That question doesn't usually have a very straight-forward answer. Many argue that there is no one answer because there isn't really a global market. Instead, there are many regional markets, each of which have their own answer. For example, the mobile browser usage statistics for Pakistan in July 2015 were as follows:

During the same time period, here were the statistics for mobile browser usage in the United States:

Mobile

Mobile

Mobile Browser Usage

Mobile browser usage, US

Mobile

Mobile

Mobile Browser Usage

Mobile browser usage, Pakistan

Mobile

Mobile

Mobile Testing

Mobile

Mobile

Fixed-Width Layouts

<div id="wrapper">
   <div id="header">...</div>
   <div id="nav">...</div>
   <div id="content">...</div>
   <div id="footer">...</div>
</div>

Mobile

Mobile

Fixed-Width Layouts

#wrapper { width: 900px; ...
#header  { width: 700px; ...
#nav     { width: 200px; ...
#content { width: 500px; ...
#footer  { width: 700px; ...

Mobile

Mobile

Fixed-Width Layouts

Mobile

Mobile

Fixed-Width Layouts

Fixed-width layout

Mobile

Mobile

Fixed-Width Layouts

Fixed-width layout

Mobile

Mobile

Fixed-Width Layouts

Fixed-width layout

Mobile

Mobile

Fixed-Width Layouts

Mobile

Mobile

Fluid Layouts

#wrapper { width: 87.89%; ... /* 900 ÷ 1024 = .8789  = 87.89% */
#header  { width: 77.77%;
#nav     { width: 22.22%;
#content { width: 55.55%;
#footer  { width: 77.77%;

Mobile

Mobile

Fluid Layouts

Fluid layout

Mobile

Mobile

Fluid Layouts

Fluid layout

Mobile

Mobile

Fluid Layouts

Fluid layout

Mobile

Mobile

Fluid Layouts

Mobile

Mobile

Fluid Layouts

Mobile

Mobile

Fluid Images


Image Container

Mobile

Mobile

Fluid Images

Too big for my container!

Mobile

Mobile

Fluid Images


Image Container

Mobile

Mobile

Fluid Images

Too big for my container!

Mobile

Mobile

Fluid Images

img { max-width:100%; }
Too big for my container!

Mobile

Mobile

Fluid Layouts

Mobile

Mobile

Desktop Browsers - Viewports

Desktop Browser Viewports

Mobile

Mobile

Mobile Devices - Viewports

Mobile Device Viewports

Mobile

Mobile

Mobile Devices - Visible Viewport

Visible Viewport

Mobile

Mobile

Mobile Devices - Layout Viewport

Layout Viewport

Mobile

Mobile

Mobile Resolution - Visible Viewport

Mobile

Mobile

Mobile Resolution - Layout Viewport

Mobile

Mobile

Mobile Devices - Viewport

Simple Webpage

Mobile

Mobile

Mobile Devices - Viewport

Mobile

Mobile

Mobile Devices - Viewport

Simple Webpage

Mobile

Mobile

Mobile Devices - Viewport

Simple Webpage

Mobile

Mobile

Mobile Devices - Viewport

body { width: 320px; }

Mobile

Mobile

Mobile Devices - Viewport

body { width: 320px; }
Simple Webpage

Mobile

Mobile

Mobile Devices - Viewport

<head>
<meta name="viewport" content="width=320px" />
</head>

Mobile

Mobile

Mobile Devices - Viewport

<head>
<meta name="viewport" content="width=device-width" />
</head>

Mobile

Mobile

Mobile Devices - Zooming

<meta name="viewport" content="..." />

Mobile

Mobile

Mobile Devices - Zooming

<meta name="viewport" content="initial-scale=1.0" />

Mobile

Mobile

Mobile Devices - Zooming

<meta name="viewport" content="user-scalable=no" />

Mobile

Mobile

Mobile Devices - Zooming

Mobile

Mobile

Mobile Devices - Zooming

<meta name="viewport" content="                                   " />
Default webpage in mobile browser

Mobile

Mobile

Mobile Devices - Zooming

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Appropriately scaled and zoomed web page

Mobile

Mobile

Viewport Meta Tag - Browser Compatibility

Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

Mobile

Mobile

Mobile Devices - Zooming and IE

@-ms-viewport
{
    zoom: 1.0;
    width: device-width;
}

Mobile

Mobile

Lots of devices...

Lots of devices...

Fluidity won't solve all our problems

Mobile

Mobile

Fluid on a desktop computer

      
Column 1
50% width
Column 2
This is also 50% width. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque venenatis justo, at tempor ipsum sodales vel. Integer bibendum cursus ipsum vitae vulputate. Mauris diam tellus, malesuada sed interdum id, semper at orci.

Mobile

Mobile

Fluid on a very large monitor

      
Column 1
50% width
Column 2
This is also 50% width. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque venenatis justo, at tempor ipsum sodales vel. Integer bibendum cursus ipsum vitae vulputate. Mauris diam tellus, malesuada sed interdum id, semper at orci.

Mobile

Mobile

Fluid on a mobile device

      
Column 1
50% width
Column 2
This is also 50% width. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque venenatis justo, at tempor ipsum sodales vel. Integer bibendum cursus ipsum vitae vulputate. Mauris diam tellus, malesuada sed interdum id, semper at orci. Curabitur vulputate leo non nisl placerat lacinia semper arcu facilisis. Nam dolor nisl, pretium id facilisis nec, convallis non ipsum.

Mobile

Mobile

Better mobile device view

      
Column 1
50% width
Column 2
This is also 50% width. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque venenatis justo, at tempor ipsum sodales vel. Integer bibendum cursus ipsum vitae vulputate. Mauris diam tellus, malesuada sed interdum id, semper at orci. Curabitur vulputate leo non nisl placerat lacinia semper arcu facilisis. Nam dolor nisl, pretium id facilisis nec, convallis non ipsum.

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" type="text/css" href="style.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />


Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" type="text/css" href="style.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" type="text/css" href="style.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" type="text/css" href="style.css"  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"  media="print" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="max-width: 480px" />

Mobile

Mobile

CSS Media Queries

Mobile

Mobile

CSS Media Queries

Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 9 only

Mobile

Mobile

CSS Media Queries

* Some properties accept 'min-' and 'max-' prefixes

Mobile

Mobile

CSS Media Queries

* Some properties accept 'min-' and 'max-' prefixes

Mobile

Mobile

CSS Media Queries

* Some properties accept 'min-' and 'max-' prefixes

Mobile

Mobile

CSS Media Queries - Keywords

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" media="(max-device-width: 480px) and (orientation:portrait)"... />

Mobile

Mobile

CSS Media Queries

      <link rel="stylesheet" media="print and (min-width: 8.5in)" ... />

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" media="not screen" ... />

Mobile

Mobile

CSS Media Queries

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mediaQueries.css" />

Mobile

Mobile

CSS Media Queries

@media screen and (min-width: 320px) and (max-width: 480px)
{
   body
   {
      background-color:red;
   }
}
@media screen and (min-width: 481px) and (max-width: 600px)
{
   body
   {
      background-color:green;
   }
}

Mobile

Mobile

Common Device Widths

Mobile

Mobile

Common Device Widths

Mobile

Mobile

CSS Media Queries

@media screen and (max-width:  480px) { ... }
@media screen and (min-width:  481px) and (max-width: 600px)  { ... }
@media screen and (min-width:  601px) and (max-width: 800px)  { ... }
@media screen and (min-width:  801px) and (max-width: 1024px) { ... }
@media screen and (min-width: 1025px) and (max-width: 1200px) { ... }
@media screen and (min-width: 1201px) { ... }

Mobile

Mobile

CSS Media Queries - Breakpoints

Breakpoints should be based on your design, not on devices.

Mobile

Mobile

Mobile-Specific Options

Mobile

Mobile

Mobile Tricks - Telephone Numbers

<a href="mailto:email@example.edu">Email Me</a>
<a href="tel:15206216406">520-621-6406</a>

Mobile

Mobile

Mobile Tricks - Form Fields

<input type="text" ... />


Mobile

Mobile

Mobile Tricks - Form Fields

Form field

Mobile

Mobile

Mobile Tricks - Form Fields

<input type="text" ... />
<input type="tel" ... />

Mobile

Mobile

Mobile Tricks - Form Fields

Phone field

Mobile

Mobile

Mobile Tricks - Form Fields

<input type="text" ... />
<input type="tel" ... />
<input type="email" ... />

Mobile

Mobile

Mobile Tricks - Form Fields

Email field

Mobile

Mobile

Mobile Tricks - Form Fields

<input type="text" ... />
<input type="tel" ... />
<input type="email" ... />

Mobile

Mobile

Mobile-Specific Options

Mobile

Mobile

Lower Resolution

Low resolution grid

Mobile

Mobile

Midrange Resolution

Medium resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

Lower Resolution

Low resolution grid

Mobile

Mobile

Midrange Resolution

Medium resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

Resolutions - Dots-per-inch

Mobile

Mobile

Resolutions

div
{
   border: 1px solid #09f;
}

Mobile

Mobile

Lower Resolution

Low resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

Mobile Resolution - Pixels per Inch vs. CSS Pixels

Mobile

Mobile

Mobile Resolution - Virtual Pixel Calculation

Mobile

Mobile

Lower Resolution

Low resolution grid

Mobile

Mobile

Midrange Resolution

Medium resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

Low Resolution

High resolution grid

Mobile

Mobile

High Resolution (Retina)

High resolution grid

Mobile

Mobile

Mobile Resolution - Responsive Images

Pros? Cons?

Mobile

Mobile

Mobile Resolution - Responsive Images

Pros? Cons?

Mobile

Mobile

Mobile Resolution - Responsive Images

Pros? Cons?

Mobile

Mobile

Mobile Resolution - Responsive Images

Mobile

Mobile

Mobile Resolution - Responsive Images

Mobile

Mobile

Responsive Images - Resolution Switching

The W3C Responsive Images Community Group has defined multliple use cases for responsive images, all of which can be found at https://usecases.responsiveimages.org/. There are a number of use cases worth exploring but the two categories that are most useful for our purposes are resolution switching and art design.

Resolution switching is the case when you have an image that simply needs to be displayed at different sizes. This case doesn't involve any changes to the image's content or aspect ratio.

Multiple sizes of elephants

This is basically a way to give the browser some information so that it can make an informed decision about which image file to download.

Mobile

Mobile

Responsive Images - Resolution Switching

<img src="elephant.jpg" srcset="elephant.jpg, big-elephant.jpg 2x" />
      

Mobile

Mobile

Responsive Images - Resolution Switching

The simplest implementation of responsive images utilizes the well-supported <img> and adds new optional attributes. We can use the 'srcset' attribute to specify a set of images that can be used for different dot densities. For example, consider the following:

<img src="elephant.jpg" srcset="elephant.jpg, big-elephant.jpg 2x" />
      

In the example above, we specify a normal 'src' attribute. On older browsers, the srcset attribute will be ignored and the 'src' will be used to determine which image to display. On newer browsers, the comma-separated list of values will be parsed and on lower resolution screens, the first image source will be used. However, on higher resolution screens (those with a display density greater than or equal to 2), the image 'big-elephant.jpg') will be used.

Alternatively, we can also provide the width of the image instead of the target display density. This allows the browser to make the decision about what image to use based on the size of the display. Image width should be specified as an integer value followed by a "w".

<img src="elephant.jpg" srcset="elephant.jpg 300w, big-elephant.jpg 900w" />
      

In the case above, the browser would examine the device display to determine it's display density. For our example, let's say that it is a high resolution device with a 2x display density and a width of 320px. The browser would examine the image and determine the target display density:

In the above case, the first image would be found to be below the target display density. Since the second image is greater than or equal to the display density of the device, it would be considered the best fit.

Mobile

Mobile

Responsive Images - Resolution Switching

We can also use the "sizes" attribute to provide media queries for a specific image. This allows us to provide an optional media query followed by a target width for the image. Target widths can be specified in pixels or using the suffixe 'vw' to specify a percentage of the viewport's width. Using the percent character is not allowed. In the example below, we use the sizes attribute to specify that the image should be 100% of the viewport width on screens with a max width less than or equal to 480px. On screens bigger than 480px wide and less than or equal to 768px wide, the image should be 33% of the viewport width. On all other screens, the image should be 400px wide.

<img src="elephant.jpg" srcset="elephant.jpg 300w, big-elephant.jpg 900w"
sizes="(max-width:480px) 100vw, (max-width: 768px) 33vw, 400px"
/>

Mobile

Mobile

Responsive Images - srcset & size

Chrome: Yes
Firefox: Yes
Opera: >= Opera Not supported in Opera Mini only
Safari: Yes
MS Edge: Yes
IE: No

Mobile

Mobile

Responsive Images - Art Direction

Mobile

Mobile

Responsive Images - Art Direction

In some cases, you need more than just an image at different sizes. For example, consider the picture of the Statue of Liberty below. At smaller sizes, the statue's details become barely visible. Resolution switching only gets us so far. In this case, we'd want to consider the art direction use case.

Art direction is the case when you have different images that need to be displayed depending on the size of the viewport. This is the case any time you need to make changes to the content or the aspect ratio of an image. This often is needed with panoramic photos that have a focal point (e.g., a speaker on a stage, etc.) or that have text which would be unreadable at small sizes.

This use case is much less common than the resolution switching use case.

Mobile

Mobile

Mobile Resolution - Art Direction

<picture>
   <source srcset="statue.jpg">
   <source media="(min-width: 480px)" srcset="statue-tablet.png" />
   <source media="(min-width: 1024px)" srcset="statue-desktop.png" />
   <img src="statue.png" alt="A photo of the Statue of Liberty" />
</picture>
      

Mobile

Mobile

Responsive Images - <picture>

Chrome: Yes
Firefox: Yes
Opera: >= Opera Not supported in Opera Mini only
Safari: Yes
MS Edge: Yes
IE: No