"Blonde Girl" Approach to Responsive Design

Reprinted please indicate from Seemeloo sago

Translator's Note: Goldilocks (Goldilocks) refers to everyone familiar story - three bears. Blonde girl broke into three bears in the forest cabins. Girl sat three chairs, drank three bowls of soup, sleep three beds. The first two are not too big, too small, not too hot, too cold, always for the third time, and it is just the last one to find the "just good" one. This story contains many "most appropriate" means. The author uses "blonde girl" should refer to the complexity of the device is reduced to three situations: too big, too small, just, and this method is "just right" for all devices.

This is an article on the "method" is greater than "technology", the author put forward a "universal" design ideas, and gives a more concrete realization of the program - to do the design based on readability, and then based on " Too big "," too small "," just good "three cases were handled separately. As for how to use the existing technology to achieve, can not be achieved, as well as the performance of responsive design itself is not within the scope of the article discussed.

Since the author is a new idea, what is the old idea? If you want to know, you can check out this website: http://stuffandnonsense.co.uk/projects/320andup/

============= Beginning of the dividing line of translation =============

Original Address: http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design
Author: Chris Armstrong

The number of mobile browsers has grown very rapidly, with more than 400 million mobile devices worldwide. We can no longer assume that the site is only viewed on a desktop monitor with a medium resolution. Perhaps we should never assume this.

The answer to this question is Resposive Web Design by Ethan Marcotte. Instead of developing a separate website for each device, we only develop a single site for all devices. However, the current approaches to responsive design are still based on some popular devices and, as a result, are likely to be phased out with these popular devices.

If we can create a truly universal, device-independent design? No matter which device you use to browse, this design looks like it's just done for this device. In New Adventures, Mark Boulton spoke of designing from the content out, rather than the canvas in, and we agree with him. Perhaps the only way to create a universal design across all devices is to forget about the device.

Try this online example.

The current method of responsive design is to bind the design to the device. It uses the pixel width according to the most common device size, but we do not think this approach is good enough. It led to design based on two factors that are very easy to change:

With thousands of devices and possible environments, we can not fully support it. So we chose some popular devices and designed them based on their resolution, ignoring the rest of the market. As technology evolves and resolution increases, our site will look outdated, just like the 600 × 400 site we now see.

The size of the pixel is not fixed - at least the size shown is not. On the iPhone, 16-pixel text may be as big as 60% on a Macbook. Designing on a pixel scale can produce inconsistent results across devices and can have negative effects on readability and usability.

So, how do we design something based on the content, as suggested by Mark Boulton? In practice, this means starting with paragraph elements, the most common form of content, and then gradually refining the entire layout.

We often tend to set the body's text size first. But manufacturers and users have set the browser's default size for reading, and we think there is no good reason you should not change it.

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

Next, set the line width of the paragraph with max-width to be as readable as possible (one line of 66 characters). Differences between different fonts, but in general, about the effect of 30em is usually good. This setting is the width of your single-column layout, making it just suitable for reading.

Now, no matter what device you are using to look at your design, the available space may be larger, smaller, or just fine. You can use media queries to make full use of them.

If you have a much wider width than the width of a single column, you might consider using a multiple column layout. For example, if the width of a single bar is 28 cm (in addition to the 1 cm left and right margins) and the width of the screen is over 45 cm, you have enough room to switch to a three-column layout - 13.5 cm wide and 1 cm wide, Two columns (this preserves the optimal width of reading).

If the space is less than the optimal reading width, you need to make full use of all the space. E.g:

If space just fits your column, you have nothing to worry about. Your work is done, go for a cup of tea.

We are not saying that a single-column layout is the best layout for every website. We do not know which typesetting users will see, so we need to make the website look just as good on single and multiple columns. However, in practice, we find it helps to do a single bar, and then deal with other larger or smaller situation.

We think the "blonde girl" approach has many advantages.

Using the current popular method, even if you only need to design for Apple's device (very lucky), there are five states to consider:
1 iMac (large monitor)
2 Macbook (smaller monitor)
3 iPad (tablet, may be horizontal or vertical)
4 iPhone4 (Retina screen, translator's note: 640 × 960)
5 iPhone (non Retina screen, translator's note: 320 × 480)

The Edenspiekermann website looks like it works well and works well, but it is not a scalable solution. The Blonde Girl method, you only need to consider three states:
1 too small screen
2 too big screen
3 just a good screen

You do not need to think about the resolution of the device, the device that your layout can work with in all devices and environments, or even not yet present. If a user's basic font size is 80 pixels (for whatever reason), this method should still provide the right layout for the available space. This is device independent.

In the end, technology will change, but the body has been fairly stable over the past few thousand years. Designed for people, not for technology (device size and resolution), your layout will not be outdated quickly.

Since then, designers live a happy life ... :)