RWD - Responsive Web Design

Articles
Resources
Mobile Web Apps Development - iPhone
https://www.sitepoint.com/javascript-media-queries

// RWD:

h1 {
  font-size: 22px;
  margin: bottom 10px;
  @media (min-width:@screen-tablet) {
    font-size: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
  }
}

<link rel="stylesheet" type="text/css"  
  media="screen and (max-device-width: 480px)"  href="shetland.css" />

// Media query inside a CSS file:
@media all and (max-width: 400px) {
    // styles assigned when width is smaller than 400px;
    div.sidebar {
        width: 100px;
    }
}
@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}
@media screen and (max-width: 980px) {
    #pagewrap {
        width: 95%;
    }
    #content {
        width: 60%;
        padding: 3% 4%;
    }
    #sidebar {
        width: 30%;
    }
}

// Logical AND
<link rel="stylesheet" type="text/css" 
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)" 
  href="file.css" />

<meta name="viewport" content="width=device-width; initial-scale=1.0; 
    maximum-scale=1.0; user-scalable=0;" />

// Fluid image:
img {
    max-width: 100%;
    height: auto;
}

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

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

/*set initial value*/
html {
    font-size: 100%;
}

body {
    font-size: 0.875em; /*14px*/
}

/*boost it when the time's right*/
@media only screen and (min-width: 768px) {
    body {
        font-size: 1em; /*16px*/
    }
}

@media screen and (max-width: 980px) {
    #pagewrap {
        width: 95%;
    }
    #content {
        width: 60%;
        padding: 3% 4%;
    }
    #sidebar {
        width: 30%;
    }
}

<link ref="stylesheet" type="text/css" 
  media="screen and (max-device-width: 480px)" href="shetland.css"/>

/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-wdith :480px) {
}

What are absolute units?

These units are actual measurements in the physical world. These units are not related to the size of the screen or its resolution. Example: inches (in), millimeter (mm), centimeters (cm), picas (pc), points (pt).

While using absolute lengths there are differences between the same values of a particular unit on different screens. This is because of the difference in the DPI (dots per inch) for a screen. Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller.

The point (pt) unit represents 1/72 of an inch and the pica (pc) represents 1/6 of an inch.

p {
  border-top: 0.5in solid blue;
  border-bottom: 18mm solid green;
  border-left: 1cm solid red;
  border-right: 40px solid black;
  letter-spacing: 0.4pc;
  font-size: 20pt;
}

What are relative units?

Relative units, as the name suggests, don’t have fixed values. Their values are relative to some other predefined value or feature. Relative units make it easy to properly size elements since we can relate their width, height, font-size, etc. to some other base parameter. These units are usually recommended when you creating responsive layouts and are preferred for digital media. Their value can be relative to the fonts you are using, or to the height and the width of the view window of a screen. Relative units include:

  • ex (x-height): The ex unit is rarely used in development. 1ex is equal to the size of the lowercase ‘x’ in the font being used. In most cases, the value of 1ex is nearly equal to 0.5em. However this changes from one font to another. This unit can be considered the vertical equivalent of em.
  • ch (character): The character (ch) unit is related to the ‘0’ character. 1ch is the advance measure of the character ‘0’ in a font.
  • em (named after print ems, but not the same): The em unit has a value equal to the font size of the base element or the parent element. For instance, if the font size of parent element is 20px then the value of 1em will compute to 20px for all immediate child elements. The font size of a child element can be increased or decreased easily based on knowledge of the base unit. The number need NOT be a whole number. Using em makes it easy for us to keep font sizes of various elements in a fixed ratio. For example, if the value of font-size for a parent element is 50px, setting the font size of a child element to 2em will be the same as setting it to 100px. Similarly, setting it to 0.5em will make the font size of the child element 25px.
  • rem (root em): The value of a rem always stays equal to the font size of the root element (which is the html element in HTML documents).
p {
  font-size: 2ex;
}

p {
  margin: 2ch;
}

What are viewport relative units?

Viewport-relative lengths are based on the width and height of the view window or the viewport. A view window or viewport is the visible area or the framed space on the screen. Viewport-relative units include:

  • vh (viewport height): The vh unit is related to the height of the viewport. The value of vh is equal to 1/100th of the height of the viewport. This unit is useful if we want to scale elements based on the height of the browser window. For example, if the height of the viewport is 400px, 1vh equals 4px. If the viewport height is 800px, 1vh equals 8px.
  • vw (viewport width): Just as vh is related to the height of the window, vw units are related to the width of the viewport. The value of 1vw can therefore be deduced similarly. This means that 1vw is equal to 1/100th of the width of the viewport. For example, if the width of the window is 1200px, 1vw will be 12px.
  • vmin (viewport minimum): The vmin unit is related to the side of the viewport with the lower value so it can be either the height or the width. The value of 1vmin is equal to 1/100th of the side with the smallest length. For example, if the dimensions of the viewport are 500 x 700 then the value of 1vmin equals 5px. If the dimensions were 1000 x 700, the value would be 7px.
  • vmax (viewport maximum): Conversely, vmax takes into consideration the maximum value of the viewport. The relation factor is again 1/100, so 1vmax is 1/100th of the edge with the higher value. Taking the same examples as above, if the dimensions of the viewport are 500 x 700 then the value of 1vmax is equal to 7px. In case the dimension was 1000 x 700, the value would be 10px.
div {
  height: 80vh;
  width: 95vw;
  padding: 1vw;
}

div {
  height: 80vmin;
  width: 95vmax;
  padding: 1vmax;
}

Which browser support which CSS unit?

  • em, ex, px, cm, mm, in, pt, and pc: Supported in all browsers, including old IE.
  • ch: Firefox, Chrome 27+, IE 9+, Safari 7+, and Opera 20+.
  • rem: All in-use browsers including IE9+. If you need more support, here is a polyfill.
  • vw, vh, and vmin: Chrome 20+, IE 9+, Firefox 19+, Safari 6+, Opera 20+. One thing worth remembering is that in Internet Explorer vmin is supported by the non-standard vm syntax. For a polyfill you can try vminpoly or use -prefix-free with a plugin.
  • vmax: Chrome 20+, Firefox 19+, and Opera 20+, and Safari 6.1+. No support in IE. You can try this polyfill for some hacky support and help with some bugs in different mobile browsers.

What are different CSS units?

Point values (pt): Point values are only for print CSS! A point is a unit of measurement used for real-life ink-on-paper typography. 72pts = one inch. One inch = one real-life inch like-on-a-ruler. Not an inch on a screen, which is totally arbitrary based on resolution. Point sizes are dead-accurate on paper.** By nature, point size (pt) is not intended to be used with screen media (therefore cross-browser results are drastically different on screen), so using pt for screen display is not advised. For best cross-browser and cross-platform results while printing pages, set up a print stylesheet and size all fonts with pt.**

Pixel (px): Pixel is an absolute unit for screen media, but it is not an absolute unit in the same sense as pt for print media. A pixel is just a dot on the screen. An inch on a screen can contains a variable number of dots depending on the resolution / DPI the monitor is configured. px is actually defined by the w3c as a relative measurement, but this means relative to the device it is being viewed on, not relative to the browser’s base font size.

EM: 1em is equal to the current font-size. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px. The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn’t cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em.

Percentage: If a parent has the font-size of 20px and the child has a font-size of 50%, it will come out to 10px. Just like em’s the very nature of percentage sizing is that it is relative. It also cascades in the same way, so the very problem described above of the list item and the paragraph item applies here as well. Percentage is like em in term of its cascading effect. However, percentage does not have the special relationship with other non-font dimension dimension as em does. When the width of an element is defined using em, its width is dependent on its font size. When the width of an element is defined using %, its width is dependent on the width of its parent.

The point (pt) unit represents 1/72 of an inch and the pica (pc) represents 1/6 of an inch.

0.5in, 18mm, 1cm, 0.4pc, 20pt

For other CSS units, see http://www.sitepoint.com/look-at-length-units-in-css/

Why do some people prefer to use em instead of px?

  1. They ARE resizeable in IE 6
  2. The relationship to other sizes (elastic width sites)

Em’s aren’t just for fonts, it’s a unit of measure that you can use for any other length (height, width, etc). Elastic width sites use em values for everything, which essentially makes the site “zoomable”, meaning that when you bump the font-size up everything bumps up all the way down to the width of the site. Em’s have a direct relationship to each other in this way. If you have a box that is 10em in height, and a font inside that is 1em in size, it will take up exactly 1/10 the height of that box. That exact proportional relationship makes em values a powerful web design technique.

When using em for non-font dimension (height, width, margin, padding, etc) , non-font dimensions are always calculated relative to its font dimensions.

What is one potential concern with em?

There is one potential concern with em’s. They do indeed cascade. Every em value is relative to its parents value. If you are using em’s as a straight substitution for pixel values, this can cause problems. For example, you might set both your “p” (paragraph) and “li” (list item) font-sizes to be 1.2em. Looks great for you today, but tomorrow some content is published to the site that has a paragraph inside a list item. Those two values will cascade (1.2 x 1.2) and that list item will be bigger in font-size than any of the others. No way around that, other than removing the tag.

Sometimes, however, em units produce undesired results in the case of nested elements. This is because the em value takes the value of the immediate parent tag, so each nested child will have the same em value, but a different computed value, because the computed value is always relative to its immediate parent. Thus it makes it difficult if we need to set the value of the current element in ratio to a parent element that is not immediate or not the root parent.

If you use em, you probably should:

  1. Set the font-size on the body, and resist changing the font-size of elements unless you absolutely have to.
  2. Avoid specifying font size with just tag name. If you have to specify font size for an element, use a CSS class

Why do some people prefer to use px instead of em?

In IE 6 and below, font-sizes set in pixels cannot be resized by the user, but it is on its way out. Browsers are getting better at resizing px. IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only. On the other hand, because the user can customize the browser default font size, and if the font size of some section on your site is smaller than the user-specified minimum font size, the browser will use the user-specified minimum font size for that section, and now your site may be dis-proportioned. Using em may be a better idea.

What is the rule about using em?

If we use em for font, use em for everything else. Some people prefer to use em for font, and use px for things that needs pixel-perfect such as images. But what happens when the user zoom in, increase the font-size. We have to test to find out.

Why do some people use em at 62.5% during design phase but convert change it to 100% later on?

If we use em, perhaps, during design phase, we can specify font size for the body tag as 62.5%, but when we are done with designing, we should change it back to 100%. Using 62.5% during development makes it easier for us to use em for other non-font related size (width, height, margin, padding, etc..).

The problem with ems is IE PC will take sub 1 em sized text and display it as microscopic when the user has their browser set at Smaller. And a great many IE PC users surf at Smaller; it makes default text a nice readable size, yet doesn't adjust pixels. So these surfers get to have both the Geocities and the K10K type sites look good. …and when they hit the site of a designer who's trying to be responsible by using ems to achieve smallish text size, the result is lines of unreadable fuzz. Setting the base font size set to 100% when using sub 1 ems prevents IE PC from going microscopic.

What can we do when the page load to improve readability?

On page load, determine the screen size, the browser width, determine the best font size on the body. This may only work if you use em. If we use px, perhaps there is a way to cause the browser to zoom to a certain percentage. Store this in a cookie so the next time the user visit this page, he would see the text with proper size and we would not have do this calculation.

What is the fuss about resizable/scalable font sizes?

The problem with px font sizes is that they don't scale in IE6 (7 may be different), whereas ems do. Non-px based declarations are not size-consistent across browsers, nor platforms. Use x-small, small, medium, etc.. Only if one of these doesn't suite, then use percentages, ems, or pixel. This tip come from a programmer, not a designer.

pt based sizes come from print-based media. The web is not print-based media. I would recommend using pt sizes for media="print" stylesheets, but not for screen media, where there are too many different screen sizes and resolutions. The end user could be viewing your site through anything from a cellphone, a PDA, or a 30" PC screen at 2560x1600 px resolution.

What are the hot keys for zooming?

CTRL + // Zoom-in (increase the size of text and images)
CTRL -  // Zoom-out (decrease the size of text and images)
CTRL 0 // Reset everything back to normal

How can the user configure the minimum font-size?

Nowadays, users can configure minimum font-size. If you come across a page with font-size smaller than what you specified, the browser will use your specified minimum size. If you are using Firefox, you can configure minimum font-size by Firefox -> Preferences -> Preferences -> Content. Look at the "Fonts & Colors" section.

What is the problem with page zooming?

Page Zoom is nice if the browser can remember the zoom level when we navigate between page, which they don't seem to remember right now. Just confirm this with Firefox on Linux. Need to test this with other browsers on other platforms.

What do we need to know about font-size keywords (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) ?

Sizing with keywords in CSS is a simple concept. There are seven absolute-size keywords: xx-small, x-small, small, medium, large, x-large, xx-large. These keywords, although likely to generate slightly different sizes on different browsers, all defined in relation to one another. The CSS 2.1 specification defines a sepcific scaling factor for each keyword. Many modern browsers such as Firefox follow this scaling factor, but most use a scaling factor of 1.2 between adjacent keywords as define in CSS 2. The suggested scaling factor in CSS 1 was 1.5. After user feedback proved this to be too large, CSS 2 redefined this scaling factor, but some older browsers still use the old scaling factor. There are also two relative-size keywords: smaller, larger. See http://www.alistapart.com/articles/say-no-to-faux-bold/

What is DPI?

DPI: Dot Per Inch. Inch is an absolute physical measurement unit. We cannot scale or stretch an inch. On the other hand, a dot has arbitrary size. It can be big, it can be small, depending on how many of them (dots) you want to put inside one inch. Is a dot the same as a pixel? Is a pixel same as a dot? What is a definition of a pixel? Like a dot, the size of a pixel is also arbitrary.

You might observe that while using absolute lengths there are differences between the same values of a particular unit on different screens. This is because of the difference in the DPI (dots per inch) for a screen. Higher resolution screens have a higher DPI compared to smaller resolution screens, thus making the image or text look smaller. http://www.sitepoint.com/look-at-length-units-in-css/

Can a screen with 15 inches in diameter have more pixels than a screen with 17 inches in diameter?

Yes. The size of a pixel (or a dot) on a screen is arbitrary. We can make it bigger or smaller if we want. The size of the pixel is not measured with a physical measurement unit such as centimeters or inches. Therefore, we can fit as many dot or pixel into one square inch if the firmware and the hardware can support it.

The user can change the screen resolution. If he use a super high resolution on this 15 inch screen, and standard resolution on his 17 inch screen, it is possible that he will end up having more pixels on his 15 inch screen than on his 17 inch screen. Note that we are just talking about the number of pixels. Whether the user can see the complete image with all the details is a different topic.

A device pixel on a mobile may be smaller than a device pixel on the desktop. Even though the screen of the mobile phone is small. It may be able to handle the same amount of device pixel as a desktop, by reducing the size of the device pixel.

Can the user change the screen resolution?

Yes and no. For desktop and laptop, the user can change the screen resolution. I am not sure if the user can change screen resolution on smart phones and tablets though.

What are the differences between the size of the screen, the size of the window, and the size of the viewport?

The size of the screen is different from the size of the browser window. When the browser window is maximized, the size of the browser window is equal to the size of the screen. The size of the viewport is also different from the size of the browser window (perhaps considering the space taken up by the browser toolbar, title bar, etc).

Is a pixel on a smart phone the same as a pixel on a large screen monitor?

No. In most cases, a pixel on a smart phone will be much small (physical size of a pixel) than a pixel on a laptop or desktop monitor.

The physical size of a monitor may or may not have anything to do with its resolution.

What are the differences between CSS pixel and device pixel?

The size of a device pixel is a property screen / monitor. It depends on the DPI and / or the resolution configured by the user. The size of a CSS pixel is dependent on current zoom level. At zoom level 100%, one CSS pixel is exactly equal to one device pixel. If you give a certain element a width: 128px, and your monitor is 1024px wide, and you maximize your browser screen, the element would fit on your monitor eight times (roughly, considering that borders and margins are not accounted for). If the user zooms, however, this calculation is going to change. If the user zooms to 200%, your element with width: 128px will fit only four times on his 1024px wide monitor. Modern browsers implemented zooming by stretching up the pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels. When the user zoom, the size of the device pixel is not changed (either stretched or scaled). However, the size of the CSS pixel is stretched / scaled.

We are, most of the time, only interested in CSS pixels. It’s those pixels that dictate how your style sheet is rendered. Device pixels are almost entirely useless to you. Not to the user; the user will zoom the page in or out until he can comfortably read it. However, that zooming level doesn’t matter to you. The browser will automatically make sure that your CSS layout is stretched up or squeezed in.

The screen.width and the screen.height represents the total width and height of the user's screen. These values are measured in device pixels because they never change. They are the feature of the monitor, and not of the browser. These values do not represent the size of the browser window.

At 100% (normal or no zooming) zoom level, how big is a CSS pixel compared to a device pixel?

At zoom level 100%, one CSS pixel is exactly equal to one device pixel.

At 200% zooming level, how big is a CSS pixel compared to a device pixel?

At 200% zooming level, a CSS pixel can contain 4 device pixel. In term of just the width, a CSS pixel is twice as big as a device pixel. Similarly, in term of height, a CSS pixel is also twice the height of a device pixel. Considering both height and width, the physical area of the screen taken up by a CSS pixel is equal to the area taken up by four device pixels.

If the user zooms to 200%, your element with width: 128px will fit only four times horizontally on his 1024px wide monitor.

A device pixel (or physical) pixel is the tiniest unit in a display. Each and every pixel sets its own color and bright-ness as instructed by the operating system, while the inperceptable distance between these tiny dots takes care of tricking the eye into perceiving the full image. Screen density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI). Apple has coined the marketing term "Retina" for its double-density displays, claiming that the human eye can no longer distinguish individual pixels on the screen from a natural viewing distance. A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on web pages. Generically, CSS pixels are referred to as device-independent pixels (DIPs). On standard-density displays, 1 CSS pixel corresponds to 1 device pixel.

How many times can an element with 128px width fit on a 1024px screen at 100% zoom level and at 200% zoom level?

8 and 4 correspondingly. If you give a certain element a width: 128px, and your monitor is 1024px wide, and you maximize your browser screen, the element would fit on your monitor eight times (roughly, considering that borders and margins are not accounted for). If the user zooms, however, this calculation is going to change. If the user zooms to 200%, your element with width: 128px will fit only four times on his 1024px wide monitor. In this question, the height of the element is not known, so this answer only cover how many times the element can fit horizontally on the screen, and does not cover how many times the element can be rendered without vertical scrollbar.

What is a Retina display?

A device pixel (or physical) pixel is the tiniest unit in a display. Each and every pixel sets its own color and bright-ness as instructed by the operating system, while the inperceptable distance between these tiny dots takes care of tricking the eye into perceiving the full image. Screen density refers to the number of device pixels on a physical surface. It is often measured in pixels per inch (PPI). Apple has coined the marketing term "Retina" for its double-density displays, claiming that the human eye can no longer distinguish individual pixels on the screen from a natural viewing distance. A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on web pages. Generically, CSS pixels are referred to as device-independent pixels (DIPs). On standard-density displays, 1 CSS pixel corresponds to 1 device pixel.

An image that is 200x300 pixel would normally occupy 200x300 device pixels. On a Retina display, it would occupy 400x600 device pixels in order to keep the same physical size.

How do modern browsers implement zooming?

Modern browsers implemented zooming by stretching up the pixels. That is, the width of the element is not changed from 128 to 256 pixels; instead the actual pixels are doubled in size. Formally, the element still has a width of 128 CSS pixels, even though it happens to take the space of 256 device pixels (twice as large just in term of width, but 4 times as large considering both width and height, but normally we just concern with the width). When the user zoom, the size of the device pixel is not changed (either stretched or scaled). The size of the element in term of CSS pixel is not changed neither. However, the physical size of the CSS pixel is changed.

At zoom level 100%, one CSS pixel is exactly equal to one device pixel. At 200% zooming level, a CSS pixel can contain 4 device pixel. In term of just the width, a CSS pixel is twice as big as a device pixel. Similarly, in term of height, a CSS pixel is also twice the height of a device pixel. Considering both height and width, the physical area of the screen taken up by a CSS pixel is equal to the area taken up by four device pixels.

As a web developer, when I declare the size of an element in my CSS, am I using CSS pixel or device pixel?

CSS pixels. We are, most of the time, only interested in CSS pixels. It’s those pixels that dictate how your style sheet is rendered. Device pixels are almost entirely useless to you. When the user change the screen resolution, he is changing the physical size of the device pixel. As a web developer, we do not have much control over that other than supporting that resolution. When the user zoom, the browser will automatically make sure that your CSS layout is stretched up or squeezed in (the browser does not make another request to the server, or refresh the page).

What is the definition of layout viewport?

When iPhone was first introduced to the market, Apple wanted to deliver the desktop experience as much as possible. Apple chose 980px as the standard. This is known as the layout viewport. The width of the layout viewport never change, regardless of orientation, but different browser vendor use a different number (iPhone Safari uses 980px. Opera mobile use 850px. Android WebKeit use 800px) . The height of the viewport, on the other hand, varies depending on the length of the document, or the number of elements on the page, etc.

So, the layout viewport is the desktop resolution that mobile vendors choose to support on their mobile devices.

What is the definition of the visual viewport?

The visual viewport is the part of the page that is currently shown on the screen. The user may scroll to change part of the page he sees, or zoom to change the size of the visual viewport. CSS layout, especially percentage widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport. The <html> element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site's layout behave as it does on a desktop browser. Both viewports are measured in CSS pixels. But while the visual viewport dimensions changes with zooming (if you zoom in, less CSS pixels fit on the screen), the layout viewport dimension remain the same (if they didn't remain the same, your page would reflow as percentual widths are re-calculated).

Are layout viewport and visual viewport measured using CSS pixels or device pixels?

Both layout viewport and visual viewport are measured using CSS pixels.

Can the visual viewport be larger than the content of the page?

No. The visual viewport cannot be any larger than the content on the page. The content's dimensions are largely dictated by the layout viewport. The layout viewport's dimensions are set by the meta-viewport rule. Therefore, the visual viewport's dimensions should change in reaction to changes in the meta-viewport rule.

On a mobile device, the screen is already small, if it is possible for us to make the visual viewport bigger than the size of the content, we are not making effective use of the available screen space, while the content is not really viewable.

What happens to the layout viewport and the visual viewport when we rotate our mobile device?

The width of the layout viewport is always the same. If we rotate our phone, the visual viewport changes, but browser adapts to this new orientation by zooming in slightly so that the layout viewport is again the same as the visual viewport.

Why does the width of the visual viewport (in term of CSS pixel) get reduced when the user zoom in?

The visual viewport is just the viewable area of the page in CSS pixels. If you zoom in on a page, you're increassing the size of the CSS pixels, which naturally reduce the number of CSS pixels that can fit on the device. That is why the visual viewport's dimensions shrink when you zoom in.

Why do mobile browsers initially show any page in fully zoomed-out mode?

Many mobile browsers initially show any page in fully zoomed-out mode. When we zoom out, we can see the entire picture from one edge to the other edge, but we may not be able to see the details, and the image is not clear. When we zoom in, we can see the details, but we may not be able to see the entire image from one edge to the other edge.

On mobile devices, the screen is already small. If we can zoom out any more, the text would be too small to read. Therefore, it makes sense for the browser to display any page in a fully zoomed-out mode.

How can we measure the layout viewport on mobile device?

On mobile device, why do we care to measure the layout view port? Isn't it always the same? The width of the layout viewport is a constant determined by the phone vendor, but the height of the layout viewport is not. The height of the layout viewport is the height of the document.

We may want to measure the width of the layout viewport as a way to detect what the phone's vendor is, but hopefully there is a better way of getting this information. Sniffing user-agent is not good compared to feature detection, but can we use feature detection on mobile platform because these mobile browser are modern browsers, and typically they all support the modern feature. So how can we detect the phone's vendor? Perhaps, we can go back to sniffing the user-agent string. Perhaps we can use feature detection. Perhaps we can use a combination of both user-agent sniffing, feature detection, and the width of the layout view port.

We may want to measure the height of the layout viewport if we need have some analytic code that track user behavior on the site. This code is not supposed to alter the display of the page. To verify that our code does not alter the display of the page, before the code is executed, we measure the height of the layout viewport, then execute our code, measure the height of the layout viewport, and compare.

To measure the layout viewport, use document.documentElement.clientWidth and document.documentElement.clientHeight

How to measure the visual viewport?

I am not sure why we may want to measure the visual viewport. To measure the visual viewport, use window.innerWidth and window.innerHeight. The measurements change when the user zoom in or out because more or fewer CSS pixels can fit into the screen.

Why is the screen size usually not important as compared to the size of the browser window?

The screen size is usually not important to us as compared to the size of the browser window. The size of the browser window tell us exactly how much space is available for our CSS layout.

What is the mobile first movement about? What is Responsive Web Design (RWD)?

As far as I am concern, mobile first and RWD are the same.

Mobile first does not necessarily mean that you should start styling from a 320px screen width all the way up. It is more about considering all the possible use cases right from the start.

Another definition for RWD: The premise behind a responsive web isn't purely that websites be built in a mobile-friendly way. It is about setting our content free so that it can be experienced by whatever mean necessary - and that include large screen. See http://webdesign.tutsplus.com/articles/life-beyond-960px-designing-for-large-screens--webdesign-7348

What is the definition of break-point?

Break-point is another term for resolution.

What are common break-points?

  • 320px - iPhone in portrait orientation
  • 480px - iPhone in landscape orientation
  • 768px - iPad in portrait orientation
  • 960px
  • 1024px - iPad in landscape orientation (as well as netbooks because these devices typically have a horizontal resolution of 1024px)
  • 1140px
  • 1170px
  • 1280x800
  • 1680x1050
  • 2560x1440px - Apple 27" iMac and Thunderbolt display

What are defined media types?

  • all: Suitable for all devices.
  • braille: Intended for braille tactile feedback devices (screen reader devices intended for partially blinded people)
  • embossed: Intended for paged braille printers.
  • handheld: Intended for handheld devices (typically small screen, limited bandwidth).
  • print: Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
  • projection: Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
  • screen: Intended primarily for color computer screens.
  • speech: Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
  • tty: Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
  • tv: Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

See http://www.w3.org/TR/CSS21/media.html

What considerations do we have to make?

  • Different screen sizes
  • Restricted bandwidth (in cases of mobile devices)
  • Performance on high-resolution retina displays

What are the guidelines to implement RWD?

  1. Think about interactions. Desktop has keyboard and mouse. Mobile has touch and gestures. If you were, for instance, designing an interaction with drag-and-drop, that needs very different implementation depending on the environment
  2. Hover is totally out
  3. Responsive is not just about putting everything into one long column. Think about what you really need to deliver on a mobile device, and cut (remove / hide) the rest, and display those on the desktop or when the user ask for it (by clicking on a button)
  4. Avoid explicitly setting the width on elements (including images). It was, at one point, recommended that we explicitly declare the width and height of the image either using HTML or CSS so that the browser can just pre-allocate the space for the display even before downloading the image. However, responsive design recommends that we do not declare the size of elements using HTML or CSS, so that the browser can decide what is best.
  5. Do not serve big high resolution desktop quality images on mobile devices because mobile devices have limited bandwidth. Consider reducing the size or resolution.
  6. Rather than hiding the content using "display:none", do not send that content to the mobile browser because mobile browser have limited bandwidth

Responsive Web Design provides developers with a way to accommodate the vast and ever-growing variety of screens and devices. It takes into account several important factors such as user behavior, screen size, and operating platform. Responsive design responds automatically and optimally to the user behavior, screen size.

Thinking in these terms, you might think that this practice is alreay widely used through the use of fluid layouts, media queries, and various scripts able to adjust the layout of the web pages.

What are the tools that make RWD possible?

Responsive Web Design take advantages of:

  1. Fluid images
  2. Fluid Grids
  3. Media Queries

What is the ideal number of characters per line?

In order to preserve readability, you should aim to be around 45 to 75 characters per line. Too many characters and it becomes difficult for the reader's eye to move back across the text and locate the beginning of the next line.

What is the recommended viewing distance?

Apple recommends that you sit between 18" and 24" from your display, depending on its size. They suggest 15" from the newest iPad, 10" from an iPhone 4.

How can we design for large screen?

To design for large screen, we must keep in mind that different users use their large screen differently. For some users, having a large screen means that the text can be made bigger so that it is easier to read. For other users, having large screen allow the user to have more windows on the same screen so that he can perhaps watch a movie in one window / application, and browse the web using another window / application.

If we are going to support large screen where the browser window take up the entire screen, we need to make the font size larger as well. Some browsers have the zooming feature. Make sure we test for that as well.

Once the zoom property becomes supported in Firefox and Opera, the screen resolution at which the web site is made become irrelevant. People will just need to detect the screen size, divide it by the screen size the site was optimized for, and zoom by that number via JS.

Does the layout viewport have anything to do with RWD?

I don't fully know the answer to this question yet. Apple choose to emulate 980px desktop resolution onto their iphone. So, I guess, if we want to support iphone, we need to design for 980px resolution. Different mobile vender choose to emulate different desktop resolution onto their mobile devices, so if we want to support those devices, we would have to design our web site to support those desktop resolutions as well. This maybe the perspective that mobile vendors implement so that their mobile devices can be immediately useful with the vast amount of existing web pages that were designed for desktops and laptops. However, designing for desktops and laptops and expecting it to work on mobile devices seems a bit backward. I am not sure if or how this has anything to do with RWD.

I have a feeling that RWD is not about supporting all individual specific resolution that each device vendor choose as their default. It is more about dividing all these resolutions into categories (breakpoints) and supporting each category. Each device within each category would possibly render a slightly different user experience (font size, line length, etc) but overall acceptable.

What is media query?

Media query is a feature of CSS specification. It allows us to specify CSS for specific devices.

A media query allows us to target not only certain device classes, but to actually inspect the physical characteristics of the device rendering our work. For example, following the recent rise of mobile WebKit, media queries became a popular client-side technique for delivering a tailored style sheet to the iPhone, Android phones, and their ilk. To do so, we could incorporate a query into a linked style sheet’s media attribute:

<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 480px)"  href="shetland.css" />

The query contains two components:

  1. a media type (screen), and
  2. the actual query enclosed within parentheses, containing a particular media feature (max-device-width) to inspect, followed by the target value (480px).

In plain English, we’re asking the device if its horizontal resolution (max-device-width) is equal to or less than 480px. If the test passes—in other words, if we’re viewing our work on a small-screen device like the iPhone—then the device will load shetland.css. Otherwise, the link is ignored altogether.

div.sidebar {
    width: 300px;
}

@media all and (max-width: 400px) {
    // styles assigned when width is smaller than 400px;
    div.sidebar {
        width: 100px;
    }

}

Now the sidebar is 300px wide, except when the width is smaller than 400px, in which case the sidebar becomes 100px wide. The question is of course: which width are we measuring here? There are two relevant media queries: width/height and device-width/device-height. Use width and forget device-width

Can we perform logical and with media queries?

Yes:

<link rel="stylesheet" type="text/css" 
    media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="file.css" />

How to use a different CSS base on orientation?

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Can we use media query inside our CSS file?

Yes, but perhaps we should keep CSS for a specific breakpoint in its own file and use media queries on the link tag rather than keeping all the media queries inside a single CSS file.

How can we use media query inside our CSS file?

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Can we use media query with @import?

Yes:

@import url("shetland.css") screen and (max-device-width: 480px);
@import "screen.css" screen;

What are the meaning of each attribute of the viewport meta tag?

<meta name="viewport" content="width=device-width; initial-scale=1.0; 
    maximum-scale=1.0; user-scalable=0;" />

Here's what each field means:

  • width=device-width This fits the page to the device's width. The iPhone's display is 320x480 pixels in portrait mode, and 480x320 pixels in landscape mode, which is why you sometimes see sites use width=320 instead of width=device-width.
  • initial-scale=1.0 This is the scaling when the page first loads up.
  • maximum-scale=1.0 This is the maximum scaling allowed.
  • user-scalable=0 This determines whether the user is allowed to zoom in and out by pinching/double-tapping. You can also use user-scalable=no and user-scalable=yes instead of 0 and 1.

How does media queries work on mobile devices compared to desktops and laptops?

Media queries work the same as on desktop. The width and height properties use the layout viewport as its reference and are measured in CSS pixels. The device-width and device-height properties use the device screen and is measured in device pixels.

In other words, width and height mirror the values of document.documentElement.clientWidth and document.documentElement.clientHeight, while device-width and device-height mirrors the value of screen.width/height.

How to implement fluid images?

There are several techniques to resize images proportionately. Some of them are very simple to apply. The most popular, cited in the article by Ethan Marcotte on fluid images is to set two simple CSS rules:

img {
    max-width: 100%;
    height: auto;
}

The first rule ensure that images remain in their container box without falling out. By omitting both the height and width of the element, you let the browser resize the images relatively to the device. Another technique is presented by Filament group that aims not just to resize images proportionately, but also reduce the resolution of images on smaller devices in order to not waste space, loading time, and expensive mobile bandwidth. This requires some files (available on Github): a javascript file (rw-images.js), Htaccess file, and an image (rwd.gif). In the HTML code, we refer to both images: a small one with an "R" prefix to clarify that must be adaptable (responsive), and for the large one, data-fullsrc (which is an attribute enabled by HTML5. Implementing this technique will look like this:

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg"/>

For any screen wider than 480 pixels, the image with the higher resolution (largeRes.jpg) will be loaded. What you can do on the server side is to check the user agent that made the request. If the device was an iPhone inject the smaller image:

if (strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') === false) {
    // Not an iPhone
    echo '<img src="heavy-image.png"/>';
} else {
    echo '<img src="light-image.png"/>';
}

This method is easy to implement. However, this approach is not very reliable. A similar solution is proposed by Matt Wilcox. It involves determining the size of the screen first, and then creating (and caching) a scaled version of the correct image dimensions. This is an ideal technique to make the images of an existing web site responsive. After downloading the code from adaptive-images.com to make this solution operational and running properly, you need to follow three simple steps:

  1. Add two files: .htaccess and adaptive-images.php to the root folder
  2. Create a cache folder and allow write permission
  3. Add the following line of Javascript code at the beginning of your document:
<script type="text/javascript">
    document.cookie = 'resolution='  + Math.max(screen.width, screen.height) + '; path=/';
</script>

Thanks to this one line of code, the screen resolution is captured and stored in a browser cookie. It's possible to configure multiple options in the file adaptive-images.php, but the primary purpose of the file is setting the variables for the resolutions ($resolutions):

$resolutions = array(800, 480, 320);

These resolutions are the "breakpoints" of images based on the screen resolution (a width to be measured in pixels). In this case, this tool will serve out a small, mobile-friendly image for devices with a pixel width of 320 or smaller. If the display exceeds 320 pixels, the new reference value is 480, which is the next numerical value in the array above. Once created, the images will be stored in the cache folder (where you can change the filename) so that you will no longer need to generate them. Alternatively, instead of using server side script to resize the image, we can manually resize the image, and use media queries to load appropriate image.

How to use media queries with older browser?

Media queries do not work with older browser. Fortunately, there are 3 JavaScript solutions that can help us serve responsive websites to older browser lacking CSS3 support:

How to implement RWD?

I think the basics behind RWD is using media query to apply different CSS style based on the size of the browser window. I am not sure how this work when the browser is resized, or does not occupy the entire screen. Need concrete example here.

Media Queries are probably the most important tool that a web designer has to make their sites responsive. This set of rules enables developers to create fluid designs that adapt without distortion or loss of quality to the viewer's device.

Media Queries should be contained in a separate style sheet. Do not forget to link this style sheet in your HTML code:

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

The first style sheet file contains all the media queries. Perhaps, we can have one file for each different screen size, if it is more maintainable that way. Anyhow, the media queries inside this file guarantee that the CSS rules contains within this file are not applied unless condition for the media query is satisfied. I am not sure why the second CSS is necessary. Perhaps this file contains the CSS rules that get applied to all situation regardless of the size of the browser window. Does the CSS contains inside the media query file have a higher weight? Should we link to the media queries file after we link to the core.css file?

You can write as many media queries as you like. The main purpose is to apply different CSS rules in order to obtain different layout, depending on the width of the display window afforded to your content. The values in the media queries have the peculiarity of being expressed in percentage and not pixels, and it's this specific choice that makes the various page elements fluid and flexible.

An example of CSS code you might write could be:

@media screen and (max-width: 980px) {
    #pagewrap {
        width: 95%;
    }
    #content {
        width: 60%;
        padding: 3% 4%;
    }
    #sidebar {
        width: 30%;
    }
}

A boilerplate taken from the Skeleton:

/*all your initial styles go here..*/
body {
    width: big-ish;
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/*set initial value*/
html {
    font-size: 100%;
}

body {
    font-size: 0.875em; /*14px*/
}

/*boost it when the time's right*/
@media only screen and (min-width: 768px) {
    body {
        font-size: 1em; /*16px*/
    }
}

What are the two main parts of a media query?

  1. @ media screen: The first part of a media query is the type of media that it supports. You might recognize this syntax from writing your own CSS styles, especially if you use this method before when designing printing options for your site
  2. (min-width: 500px): The second part is the query itself. It includes the function to be evaluated (in this case, the minimum width of the browser window) and the corresponding value to test that the rule has been applied (in this case, a value of 500px)

Example:

@media screen and (max-width: 980px) {
    #pagewrap {
        width: 95%;
    }
    #content {
        width: 60%;
        padding: 3% 4%;
    }
    #sidebar {
        width: 30%;
    }
}

Can we use media query inside the media attribute?

Yes.

<link ref="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css"/>

Can we use a combination of min-device-width and max-device-wdith?

Yes.

/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-wdith :480px) {
}

Is the width property the only property that we can use?

No. When thinking about responsive web design, there is a tendency to focus exclusively on the width property, but there are quite a few other attributes to consider:

  1. width / height: With these properties, you can set the width and height of the display area including any scrollbar. You can use the prefixes min and max.
  2. device-width / height: These properties set the width and height of the rendering surface, that is, the width and height of the entire screen of the device and not simply of the display area of the document. You can also use min and max prefixes here.
  3. orientation: This set the vertical or horizontal orientation. By specifying particular rules in the CSS stylesheet, you will be able to define how the various elements of a web page will be displayed on the device. We can then specify the type of orientation (landscape or portrait)
  4. aspect-ratio: This is a property that sets the ratio between the width and height of the display of a document. You can also use min and max prefixes here.
  5. device-aspect-ratio: This attribute monitors the ratio between the width and height of the device. You can also use min and max prefixes here.
  6. color: This applies certain CSS styles for all color devices. Prefixes min and max are allowed, but very few black and white devices (Kindle) remain as popular browsing options.
  7. color-index: This describes the number of colors in the palette supported by a device. It can have min and max prefixes.
  8. monochrome: This indicates the number of bits per pixel of a monochrome device (grayscale)
  9. resolution: This sets the resolution (the density of pixels) of the output device. The values of the resolution can be expressed in DPI (dot per inch) or in DPCM (dots per centimeter)
  10. scan: a valid property for television screen that indicates the type of scan, interlaced, or progressive. The values can be precisely progressive or interlaced.
  11. grid: This indicates whether the device is a bitmap type or a "grid" equivalent.

How to make your favicons retina-ready?

Favicons are getting their fair share of attention, being increasingly used outside of browser chrome as an icon representation of our web sites or apps. To make your favicons Retina-ready, export an .ico file in both 16- and 32-pixel versions. If you are using a Mac, you can create your own .ico files with Apple's Icon Composer (included in the Graphic Tools in Xcode) or with Icon Slate, a paid third-party application.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License