The Goldilocks Approach To Responsive Website Design: Where Screen Resolution No Longer Matters
Researches have revealed that the number of people accessing the Internet from their cell phones has crossed the 4,000,000,000 mark in recent years. Moreover, the figures are all set to surpass the percentage of people using desktops and laptops to surf the net.
Image Source : best-webdesign-tools.com
Due to the easy portability and mobility of cell phones, users prefer to use these devices to access the Internet, even while they are on the move, rather than carry heavy and bulky laptops. Given these figures, the growing need of designers and developers to build websites that open up seamlessly on mobile screens has given rise to the concept of responsive web designing.
Current Approach To Responsive Web Design
Website designers feel the need to design and develop web pages that open with ease on the screens of computers, and mobile devices as well. Apart from this, the process of constructing separate websites for mobile phones and desktops requires a lot of time, man power and financial resources. For small start-ups, it is not feasible to develop websites that will suit screen sizes of different resolutions. As an alternative, website developers use the guidelines and norms of W3C to create sites that are responsive in their layout, and can open easily on screen sizes with different resolutions. A single web page is structured by using fluid grids which function well on both mobile screens, and desktops alike. However, the present range of websites that have been responsively designed will soon become outdated, as the process of responsive design cannot keep pace with the rapid developments in technological innovations. Universal standards of RWD are yet to be established, and hence there is still no full-proof designing module.
Disadvantages Of RWD
The current practices of RWD requires the incorporation of the layout within the format of the device by the virtue of pixel-strength. But this is not a very healthy practice, as website patterns tend to be hindered by two unchangeable factors- the resolution of the screen of the device, and the pixel count.
The Device’s Screen Resolution:
With rapid technological innovation, a new mobile device is being introduced into the market every single day, with features that are almost totally different from its counterparts. Every single model has a unique resolution and websites need to be designed in such a way that the layouts can easily adapt themselves to varying screen sizes.
The measurement of pixels varies from one device to another. For example, a text of 16 pixels on the iPhone is almost 60 times bigger than a text of 16 pixels on a Macbook. Therefore, a layout that has been designed for a particular device with a certain measurement of pixel counts may not function seamlessly on a device with a different set of features, and thereby have a negative impact on both the readability and functionality of the content and the various navigational features of the website.
The Goldilocks Approach
The Goldilocks Approach to website design works on the simple theory that media queries can be used to design websites in such a way so that the functionality of a web page is not compromised due to interfaces of different sizes. With the use of these features, it is possible to design websites that open on screens which might be big, small or just perfect, without hindering the flow.
If there is excessive space compared to the requirements of a single column, then designers can implement the usage of multiple columns in the layout. For instance, if the width of the single column is 28em, with an additional space of 1em on either sides for the margins, while the size of the screen is 45em or more, then there is enough space to implement a layout with three columns, each with dimensions of 13.5em, and gutters of 1em. To maintain the optimum width of readability, the main content can be spread over two columns.
If there is shortage of space, then designers have to carefully make use of whatever is available for usage. Two such methods are:
- Reducing the size of the margins to half their original measurement, but not removing them altogether, and/or,
- Introducing the usage of hanging inline punctuations, so that the text doesn’t seem to break off.
The work of the designer is simplified if the space that is available is just perfect, and does not require any implementations in the overall design and layout.
The Perks Of Goldilocks Approach
Designers who are building a website on the basic tenets of responsive designing generally have to consider five basic states:
- iMac- large display.
- Macbook- smaller display.
- iPad- for tablets,it could be both landscape and portraits as well.
- iPhone 4- retina.
- iPhone- non-retina.
However, with the Goldilocks approach, only three specific areas need to be considered:
- Multiple Columns, for screens that are too big.
- Narrow Columns, for screens that are too small.
- Single Columns, for screens with the perfect dimensions.
By removing the resolution of the device from the equation, it is possible to build websites that work well on all contexts and devices, even on one’s that have not been created as yet. Even with the size of the base font being set at 80px, it is possible to use this technique to create a website with an appropriate layout for the available space.
Although this method is relatively new, designers have claimed that by following this approach, they have been able to move beyond technological restraints of screen resolution and size, and cater to human constraints of functionality and usability. In this way, designers have been able to build websites that are not overcome by technological innovations, and are not rendered redundant with the launch of new devices.