Peter Bissmire

17-07-30

Responsive Web design

Great emphasis is now placed on the mobile-friendliness of Web-sites and the magic word is "responsive".
Early solutions attempted to identify the user agent and/or operating system from the information sent in the http request header so that the page could be adjusted on the server side. This resulted in enormously long regular expressions that needed to be updated regularly. However, it is the browsing device that knows its screen/window (viewport) size and a page can be adjusted by the browser to fit this if the right information is sent with the page content and can be interpreted by the browser. CSS has responded to this by making proportional sizing available. The width of an element can be made proportional to the viewport width. We can even set limits to this "rubber-banding".
Thus:

width: 50vw; /*1vw = 1 % of the viewport width. Note that vh (viewport height) is also available.*/
min-width: 200px;
max-width: 400px;

sets an element's width to half the viewport width so long as the element remains between 200-px and 400-px wide.
It would be nice to be able to do the same with font sizes.
Some fonts should remain the same size to maintain readability. Others, large headings, for example, should scale to the viewport but only within limits. We don't want them unreadable on a low-end smart phone and gigantic at full-screen on a desktop monitor. Unfortunately, min-size and max-size for fonts are not (yet?) available. A solution using calc() to calculate the size is possible but this function is not yet implemented in many mobile browsers. Hence the decision to make the layout element widths of this Web-site scale below their maximum size but keep the font sizes constant.

18-08-18
Many Web-sites are now being redesigned for small touch-screen devices only. The consequences can be:
the site is often laid out as a series of billboard posters, presumably to provide large, easily readable, touch targets,
individual items of information are enlarged while their content is reduced,
the information that you want is harder to find or left out entirely;
in the limit, such Web-sites can be of little more use than a chocolate teapot.

Mobile-friendly tests

There are many Web-sites claiming to test a site for mobile-friendliness. Careful examination of their responses shows that some fall down badly on their emulation of a mobile device or fail to interpret your styling correctly, leading to false rejection or criticism. So don't forget your pinch of salt when reading what they tell you!

That's life in an evolving world.