ISTA 230

ISTA 230 - Introduction to Web Design

More Responsive Design

Responsive Design

Mobile

Responsive Design

Responsive Design

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) { ... }

Responsive Design

Mobile

Responsive Design

Responsive Design

Mobile

<meta> viewport element

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

Mobile

Mobile

Mobile Design Considerations

Mobile

Mobile

Limited Screen Size

Travelocity's desktop website

The Travelocity website is stuffed full of content. With over 157 links on the home page alone, almost every pixel of the website provides the user with an option of something to click on. On the computer this screenshot was taken from, the homepage in its entirety took up 1200px horizontally × 2734px vertically.

Mobile

Mobile

Limited Screen Size

Travelocity's mobile application

In contrast, the Travelocity mobile app is much more finely tuned. On an iPhone 4, the app has only 320px × 480px available to display its content (a nearly 80% reduction in size compared to the desktop website). With only 9 'touchable' elements, the app provides users with a limited number of options. Additionally, the design is much more streamlined, relying on only a few images. The links in the app are also much larger than those on the desktop website, providing greater affordance for 'clicking'.

Mobile

Mobile

Mobile Design Considerations

Mobile

Mobile

Mobile First

Mobile

Mobile

Design Components - Content

Mobile

Mobile

Design Components - Header

Mobile

Mobile

Design Components - Header

Example of a desktop header Example of a mobile header

Mobile

Mobile

Design Components - Navigation

Mobile

Mobile

Design Components - Navigation

Top Navigation (a.k.a., "Do Nothing" navigation)

Example of top navigation on a desktop computer Example of top navigation on a mobile device

Mobile

Mobile

Design Components - Navigation

Top Navigation (a.k.a., "Do Nothing" navigation)

Mobile

Mobile

Design Components - Navigation

Fixed Navigation

Mobile

Mobile

Design Components - Navigation

Fixed Navigation

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

Design Components - Navigation

Fixed Navigation

Mobile

Mobile

Design Components - Navigation

Vertical-to-Horizontal Navigation

Mobile

Mobile

Design Components - Navigation

Footer-Only Navigation

Mobile

Mobile

Design Components - Navigation

Footer Anchor

Example of footer anchor navigation on a desktop computer

Mobile

Mobile

Design Components - Navigation

Footer Anchor

Example of footer anchor navigation on a mobile device1

Mobile

Mobile

Design Components - Navigation

Footer Anchor

Mobile

Mobile

Design Components - Navigation

Pop-Out Navigation

Mobile

Mobile

Design Components - The Hamburger Icon

Mobile

Mobile

Design Components - Forms

Mobile

Mobile

Design Components - Forms

<input type="text" name="email" autocorrect="off" />

Mobile

Mobile

Design Components - Forms

<input type="text" name="email" autocapitalize="none" />

Mobile

Mobile

Design Components - Tables

Mobile

Mobile

Design Components - Responsive Tables

<table>
   <tr>
      <th>Fruit</th>
      <th>Price</th>
   </tr>
   <tr>
      <td>Apple</td>
      <td>$1.00</td>
   </tr>
   <tr>
      <td>Banana</td>
      <td>$0.50</td>
   </tr>
   <tr>
      <td>Coconut</td>
      <td>$2.00</td>
   </tr>
</table>
      

Mobile

Mobile

Design Components - Responsive Tables

         
FruitPrice
Apple$1.00
Banana$0.50
Coconut$2.00

Mobile

Mobile

Design Components - Responsive Tables

<table>
   <tr class='headers'>
      <th>Fruit</th>
      <th>Price</th>
   </tr>
   <tr>
      <td data-header='Fruit'>Apple</td>
      <td data-header='Price'>$1.00</td>
   </tr>
   <tr>
      <td data-header='Fruit'>Banana</td>
      <td data-header='Price'>$0.50</td>
   </tr>
   <tr>
      <td data-header='Fruit'>Coconut</td>
      <td data-header='Price'>$2.00</td>
   </tr>
</table>
      

Mobile

Mobile

Design Components - Responsive Tables

@media (max-width: 600px) {
   tr.headings {
     display: none;
   }

   tr {
     display: block;
     border-bottom: 1px solid #999;
     width: 100%;
     margin: 1em auto;
   }

   td {
     display: block;
   }

   td:before {
     content: attr(data-header) ': ';
     font-weight: bold;
   }
}
      

Mobile

Mobile

Design Components - Responsive Tables

         
FruitPrice
Apple$1.00
Banana$0.50
Coconut$2.00

Mobile

Mobile

Design Components - Responsive Tables

         
Fruit: Apple
Price: $1.00
Fruit: Banana
Price: $0.50
Fruit: Coconut
Price: $2.00

Mobile

Mobile

Responsive Design - Steps

Steps for
  1. Create your base mobile design
  2. Stretch your browser wider until the design no longer looks right
  3. Add a media query for the given 'breakpoint' and adjust your design as needed
  4. Repeat steps 2-3 as needed

Mobile

Mobile

Responsive Design - Common Patterns

Mostly Fluid
Mostly fluid

Mobile

Mobile

Responsive Design - Mostly Fluid

Mobile

Mobile

Responsive Design - Common Patterns

Column Drop
Column Drop

Mobile

Mobile

Responsive Design - Column Drop

Mobile

Mobile

Responsive Design - Common Patterns

Layout Shift
Layout Shift

Mobile

Mobile

Responsive Design - Layout Shift

Mobile

Mobile

Responsive Design - Common Patterns

Rotating Blocks
Rotating Blocks

Mobile

Mobile

Responsive Design - Common Patterns

Featured Items
Featured Items

Mobile

Mobile

Responsive Design - Common Patterns

Off Canvas
Off Canvas

Mobile

Mobile

Responsive Design - Common Patterns

Off Canvas
Off Canvas

Mobile

Mobile

Responsive Design - Off Canvas

Mobile

Mobile

Responsive Design - Planning

When setting out to create a new website design, everyone has their preferred method of figuring out what they want to do. Below are some of the more common approaches:

Mobile

Mobile

Responsive Design - Testing