Most people know that these days we don't need to build two websites anymore. When I started building websites it was quite common practice to build two versions, one for desktop and another for mobiles and they would reside on different URLs usually.
As I started to build websites, responsive and adaptive design was in its infancy. Many websites were still being built just for the desktop with no allowance for what happened on a mobile and if you did have a phone with a web browser you had to load the desktop version of the site and then scroll it sideways or vertically to see it all and expand it with your fingers to magnify the text sometimes too. The whole experience was rather clunky and not very satisfactory.
With the development of fluid images, fluid grids and with the use of something called a media query, around 2010 it became feasible to start designing sites that gradually responded to many different screen sizes including mobile and tablet sizes.
Possibly the most important element of this advance in design is the use of flexible grids and the use of columns. It is interesting to me that the design of columns is based on the number 12, as opposed to the number 10 say. There is a very good reason for this. If you set up a 12-column grid layout and then as the screen shrinks to tablet and then mobile sizes, you have the option to divide 12 by the numbers 2, 3, 4, or 6. 12 is divisible by all of these numbers. The consequence of this is that as the screen width shrinks you have the ability to create 2 rows of 6 columns, or 3 rows of 4 columns, or 4 rows or 3 columns. The resulting grid will still look even and logical.
With a structure based on the number 10 you would have the choice of 2 rows of 5 columns as the screen width shrinks, or 5 rows of 2 columns. So there is much less flexibility to adapt using the number 10 without awkward rows with different numbers of columns it.
