As more and more website visitors move to portable devices, e.g., smartphones and tablets, the screen sizes and proportions become more varied. We must make our websites more friendly to these different displays.
In the early days of the Internet, say 15 years ago (yes, I know the 'net is older than that), websites were designed to work well on relatively small* monitors and 800*600 was a typical design size. The next step in the evolution of monitors was to more resolution and 1024*768 became very popular. 1024*768 is still an important size. Note that all of these sizes have a 4:3 ratio of horizontal to vertical. Then came "wide" displays, first on laptops and then flat-screen monitors. One of the first sizes was 1366*768; this is also a very important size. Note that the ratio has changed to 16:9. While 1366*768 is still very common, other, generally larger displays can be easily found on everything from smartphones, to tablets, laptops, and desktop displays. It is now very important that we make our websites so that they work well on most devices and acceptably well on older and smaller displays.
There are two current buzzwords in the website construction field: Responsive and Mobile First design. While different in concept both address the problem of providing website visitors with a good experience. Here are my working definitions of these terms:
- Responsive design says design/style the site first (usually to a size of 1366*768) and make it respond appropriately when the site is displayed on larger or smaller screens.
- Mobile design says design/style the site for portable devices (small screens) and progressively enhance the site when it is displayed on larger devices.
As we build new websites in Drupal 7, and upgrade Drupal 6 sites to Drupal 7, we employ themes that are responsive in nature.
Responsive design does not mean that the site looks the same regardless of the display device. Some older designs try to to that and it results in text too small to read, pictures that are too small to appreciate and navigation that is difficult, at best, or impossible to use. In trying to adapt to larger screen widths some designs older themes using three columns simply float the first column to the left, put the center column in the middle and float the second sidebar to the right. The result is what we call "rivers of white" between the columns and one line paragraphs that stretch across the screen, "from sea to sea," and are difficult to read, especially on physically large, high resolution screens.
Our response (no pun intended) is to move blocks above, or below, main content, or to adjust column widths as necessary.
* In this discussion the terms related to screen size are measured in pixels, not inches. We generally don't care too much about the physical size of the screen.