The "Blonde girl" approach in responsive design

The blonde girl (Goldilocks) refers to a familiar story-Three bears. The blonde girl broke into three bears in the forest cabin. The girl sat in three chairs, drank three bowls of soup and slept three beds. The top two is not too big, is too small, is not too hot, is too cool, always in the third, also happens to be the last time to find "just good" that. This story contains a lot of "most appropriate" means. The author uses the term "blonde girl" to refer to simplifying the complex device situation to three situations: too big, too small, just right, and this method is "just" for all devices.

This is an article about "method" greater than "technology", the author puts forward a kind of "generality" design idea, and gives the more concrete realization plan--first based on the readability to make the design, then according to "Too Big", "too small", "just good" three kinds of situation respectively processing. As for how to use the existing technology to achieve, can not be implemented, and the responsiveness of the design itself the performance of the problem is not covered in the article.

Now that the author is proposing a new idea, what is the old idea? If you want to know, you can look at this site: http://stuffandnonsense.co.uk/projects/320andup/

The number of mobile browsers has grown very fast, with more than 400 million mobile devices worldwide. We can no longer assume that the site is browsed only in a desktop monitor with a medium resolution. Maybe we never should have assumed that.

The answer to the question is the responsive web design presented by Ethan Marcotte (Resposive web). Instead of developing a separate Web site for each device, we only develop a Web site that adapts to all devices. However, the current approach to responsiveness design is still based on some popular devices and is likely to be eliminated along with these popular devices.

What if we could create a truly universal, device-independent design? No matter what kind of device you use to browse, this design looks like it just happened to be done for the device. In the New adventures, Mark Boulton talked about designing for the content, not the canvas (designing from the content out, rather than the canvas in), and we agree with him. Perhaps the only way to create a design that is universal in all devices is to forget the device.

Try this online example.

Current practice

The current approach to responsive design is to bind the design to the device. It uses pixel widths based on the most common device sizes, but we don't think this approach is good enough. It causes the design to be based on two very easy to change factors:

The resolution of the equipment;

Pixel

Device resolution

There are tens of thousands of devices and possible environments that we cannot fully support. So we choose some popular devices and design them based on their resolution, ignoring other products in the market. With the development of technology and the improvement of resolution, our website will look very outdated, just like the 600x400 site we see now.

Pixel

The size of the pixel is not fixed-at least the size shown is not. On the iphone, 16 pixels of text may be as big as 60% on a MacBook. A pixel-scale design can produce inconsistent results in different devices and may negatively affect readability and usability.

The device doesn't matter.

So how do we design the content as Mark Boulton suggests? In practice, this means starting with the most common form of content--the paragraph element--and then gradually perfecting the entire layout.

We often tend to set the text size of the body first. But the manufacturer and the user have set the default size for the browser to read, and we don't think there's a good reason why you shouldn't change it.

However, if your entire design is based on this basic text size (that is, using EM as a unit in the design), your design will change accordingly as the basic text size increases or decreases. Use em to make your design independent of the resolution.

Next, use Max-width to set the line width of the paragraph, ensuring readability (one line 66 characters) as much as possible. There is a difference between different fonts, but generally, the effect of 30em is usually good. This setting is the width of your one-column layout, making it just right for reading.

"Blonde Girl" method

Now, no matter what device you use to watch your design, the available space may be larger, smaller, or just as good. You can use media queries to make the most of them.

Too big

If you have a much wider width than the width of a single column, you can consider using a multiple-column layout. For example, if the width of a single column is 28em (in addition to the left and right margins of 1em), the screen is more than 45em wide, you have enough space to switch to the three column layout-the spacing of the column width 13.5em,1em, the main container occupies two columns (this preserves the optimal width of reading).

Too small

If the space is less than the optimal reading width, you need to make the most of all the space possible. For example:

Reduce the outer margin to half the original (but do not remove it);

Set the hanging punctuation to the line (so it will not be truncated).

Just fine.

If the space is right for your single column, you have nothing to worry about. Your work is done, go and have a cup of tea.

We are not saying that a single column layout is the best layout for every site. We don't know what kind of typography the user will see, so we need to make the site look just as good in a single column and a multi column state. However, in practice, we find that this helps to make the status of a single column, and then deal with other larger or smaller cases.

Advantages

We think the "Blonde girl" method has many advantages.

Using the current popular method, even if you only need to design for the Apple device (very lucky), you also need to consider five states:

1 IMac (Large monitor)

2 Macbook (smaller display)

3 IPad (tablet, may be horizontal or vertical)

4 iPhone4 (Retina screen, translator note: 640x960)

5 IPhone (non retina screen, translator note: 320x480)

The Edenspiekermann site looks like this and works well, but it's not a scalable solution. and using blondes, you only need to consider three different states:

1 Too small screen

2 Too big screen

3 Just a good screen

You do not need to consider the resolution of the device, your layout in all the equipment and the environment can work, and even not appear in the equipment. If a user's basic font size is 80 pixels (for whatever reason), this method should still provide the appropriate layout for the available space. This is the device independent.

Eventually, technology will change, but the human body has been fairly stable for the past thousands of years. Design for people (reading), not for technology (device size and resolution), your layout won't be obsolete quickly.

From then on, the designers are living a happy life ...

Via Designbyfront

Author: Chris Armstrong

Source: Seemeloo Sago