The responsive revolution
At first, it seemed that the page layout concepts could be applied to Internet pages. Using carefully crafted tables, one could reproduce the page layout building blocks in a web page.
However, with the appearance of new internet-connected devices with various sizes and orientations, this was no longer a viable solution.
The answer was the use of Cascading Style Sheets (CSS), and, specifically, CSS media queries. The intent of CSS style sheets is to separate the content of the web page (HTML) from its form (CSS). This is very important, and it makes a huge difference with LaTeX, where both are mixed in a single document description file. Actually, it is quite common to see authors modify the LaTeX content to improve the appearance of the ultimate page output.
Inside CSS style sheets, media queries select specific styling instructions that will be applied depending on the characteristics of the target device. The latter can be the optical size of the browser window, the type of pointing device (mouse or finger), if the output is for screen or print, etc...
Of course, specifying styling rules by hand for all elements of a web page can quickly become tedious. Fortunately, there is a range of frameworks that takes the heavy work of manually managing the target devices to provide some level of abstraction to the design process.
A standard tool for creating responsive content is the flex system. LaTeX2Web uses it to create its responsive grid. How does it work ? In all generality, there are many configurations available for flex components. We describe here the implementation used in LaTeX2Web.
The first thing to do is to make sure that all components in the flex grid have a minimum width. Once this is done, the browser considers each component of the flex grid as a big character and, if the "word" does not fit in one line, it wraps it into the second line. If it does not fit in the second line, it goes on with the third line, etc...
What is important to understand is that all of this layout is computed in the browser, using the dimensions of the actual browser window. The HTML/CSS code only specifies that the browser should use flex for this content. You do not have to worry about the specifications of the device in your document ; the only thing that you do is mentioning the use of the flex system.