Journey Into Mobile - Level 1

Notes from Code School's Journey Into Mobile - Level 1 (Foundations for Mobile)

What is the mobile web?

There is no mobile web, in as much as there is no "desktop web." This is the only web:

The web is not limited to one particular device or environment.

The primary design principle underlying the web's usefulness and growth is universality. -Tim Berners-Lee

The web:
- Must work with any form of information
- Must be accessible from any device

mobile design. adaptive design, and responsive design all just mean web design.

This course covers:

• Fluid Layouts
• Adaptive Design
• Responsive Design

Fluid Type

Example sentence:

<h1>It is quite a three pipe problem. <a href="#">Please get me a pipe.</a></h1>

h1 {
  font-size: 30px;
  font-weight: bold;
}

This would be fine, except we want our type to be relative in size, so that when our site scales the type will scale too. Instead of our font-size being a static 30px, we want to convert the pixels to ems.

pixels --> ems

The standard font-size for most browsers is 16px. To make sure our base font-size for our site is 16px for all browsers, we will set it as the standard in our html style.

html {
  font-size: 16px;
}

Next, because we will be converting all our pixel font-sizes from here on to ems, and that includes lots of dividing by 16 (not fun math), we'll change our base from 16px to 10px. Yay! 10 is so much easier to work with.  10/16 = .625 = 62.5%

body {
  color: #352a25;
  font-family: Georgia, serif;
  font-size: 62.5%;  /* 1em = 10px */
}

How to Convert Pixels to Ems

target ÷ context = result

target = font-size

context = font-size of containing element

result = value of ems

30px(value of h1) ÷ 10px(default browser font-size) = 3em

result:

h1 {
  font-size: 3em;  /* 30px/10px */
  font-weight: bold;
}

But, we also have an anchor tag inside our h1 that needs to be sized correctly.

h1 a {

  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  color: #6c564b;

}

target ÷ context = result

Bad example:

14px(a font-size) ÷ 10px(default font-size) = 1.4em

result of 'h1 a' with wrong context

Now the anchor text is too large. That is because we used the wrong context. Because the anchor text is within the h1 tags, the h1 is its parent text, and thus its correct context.

Good example:

14px(a font-size) ÷ 30px(font-size of h1) = 0.4666667em

result:

h1 a {

  font-size: 0.4666667em;
  text-transform: uppercase;
  text-decoration: none;
  color: #6c564b;
}

result of proper 'h1 a' pixel to em conversion

Note: It is perfectly okay that the number 0.4666667 is long and complicated; it is the exact pixel value that we want. There is no need to round up or down.