The internet is a funny place. First off, the internet acts as if it has always been around. And when faced with a problem (issue). The solution is presented as if that too has always been around.
Responsive Web Site Design – by 2014 is not new, though much of the older websites are still catching up. The basic concept is that responsive design can deal with all the many different devices that may access the site information. In the past, website designers simply built for a small array of browser sizes. In 2014 the top six devices had different browser sizes.
- iPhone 4S and iPhone 5 – 640 pixels
- iPad first and second generation – 1024 pixels
- Samsung Galaxy Note – 1280 pixels
- Microsoft Surface – 1366 pixels
- iPad 3 – 2048 pixels
- Google Nexus 7 – 2560 pixels
Sure, those numbers all look great! But, what does those different pixel sizes mean? When two different customers access your website to many a purchase.
- Customer #1 is on the new iPhone with a screen width of 640 pixels.
- Customer #2 is on the new Google Nexus with a 2560 pixel width.
The difference between these two screen sizes is shocking.
2560 px – 640 px = 1920 pixels difference. The difference is this case is larger than the resolution for most computer monitors. The difference between what Customer 1 & 2 will experience when they arrive at the same content will require responsive design.
People like to read – and research has documented many times how people prefer to read. On a computer screen, the ideal characters per line are 50 to 75. While on a mobile device 50 characters is the top range for how many characters to include on a line. With many the lower range of the curve being 35 characters per line on a mobile device. Again another clever use for responsive CSS is to scale the width of website content to a suitable width for each device, or device orientation.
While character density is one observation. Font leading is another cross-platform concern. Typically, the typesetter was assigned 120% main value for printed material. Web designers when given the ability to incorporate leading into their CSS code settled on 140% for leading. For smaller screens increasing the leading can significantly aid readability.