Journey Into Mobile - Level 4

Notes from Code School's Journey Into Mobile - Level 4 (Responsive Adventures)

• The Mobile First Approach
• Responsive Applied
• Advanced Media Queries

The mobile first approach:

prepares you for the explosive growth and new opportunities on the mobile internet, ... forces you to focus, ... enables you to innovate in ways you previously couldn't. -Luke Wroblewski (Mobile First, 5)

The mobile first approach forces you to focus on the most important things, like simplify the content, prioritize layout, and optimize user experience. In mobile, you don't have nearly as much screen real estate, the space you have is more valuable, forcing you to prioritize what is most important.

Is responsive design the same as adaptive?

• all responsive are adaptive
• not all adaptive designs are responsive

Responsive designs are basically fluid sites with a series of break points. Whereas adaptive design is selectively adapted for the context you are targeting.

Responsive designs provide continuity between contexts... Responsive designs are portable and accessible. -Ethan Marcotte

 Responsive Applied

In responsive design content determines the break points. In adaptive design, the height and width determine the break points, but in responsive design where the content breaks down is where the break points are.

Taking a look at our demo site from level 3, if we narrow our browser window, we'll see that at around 870px our header starts to get crowded. This will be our first breakpoint.

In this case, there is a new logo image and we will move all the location information below it.

/* <870px */
@media screen and (max-width: 870px) {
  
  /* Header */
  h1 {
    background: url(images/logo_l.png) no-repeat;
    height: 105px;
    margin: 0 auto;
    width: 400px;
  }
  .location {
    background-color: #26343e;
    float: none;
    min-height: 85px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
  }

Now at 768px, our menu items start to get too narrow and the text is hard to read. Also note that 768px is the width of an ipad, so while it's a good idea to make break points based on content, also keep in mind the widths of common mobile devices. To adjust for our mobile layout, we will stack the menu blocks one above another.

/* <768px */

@media screen and (min-width: 768px) {

  /* -- section -- */

  .box {

    padding: 10px;

    margin: 20px auto;

    width: inherit;

  }

  .beverage {

    float: none;

  }

  .cuisine {

    float: none;

  }

Next, at about 510px, our contact information starts to break below the location information:

    BUT, because we already have a media query at 480px (adapted for the iphone standard screen in level 3), we can just change the 480px media query to 510px. We are able to do this because we are using a fluid layout that scales easily.

/* <480px */
  @media screen and (max-width: 480px) {
}

becomes:

/* <510px */
  @media screen and (max-width: 510px) {
}

Advanced Media Query Options

Here are some advanced media query options from Responsive Web Design by Ethan Marcotte.

For example, instead of defining a screen size, you could use portrait and landscape modes.

/* Portrait */
@media screen and (orientation: portrait) {
  
  /* portrait styles */
}

/* Landscape */
@media screen and (orientation: landscape) {

 /* landscape styles */
}