Before the arrival of the mobile web, the landscape of internet-enabled end devices was relatively homogenous: There were laptops and desktop computers, which were very similar with respect to input and output media. Both types of devices had a keyboard, either a mouse or trackpad, and a screen with a width of 1,000-2,000 pixels.
Back then, it didn’t require any special effort to develop a website that would be properly displayed on any device. The simplest solution was to limit the width of a page to the smallest common denominator. A popular approach was to display pages as 800 pixels wide and centered or left-justified. On larger screens, there might be some extra white space, but the pages were easy to read on every device.
This changed with the arrival of mobile devices and the significant diversification of end devices. Smartphone and tablet screens differ from desktops in several respects. Pixel dimensions now play an important role, and physical resolution (pixels per inch or ppi) also came into focus with the arrival of retina screens. And these devices are of course navigated using one’s finger rather than a mouse. In addition to smartphones and tablets, large high-resolution monitors have also come on to the market, meaning that a modern website needs to work on screens with widths ranging from 320 pixels to over 4,000 pixels.