Responsive web design is a direct result of the emergence and widespread adoption of mobile devices for personal computing. Traditionally, the web designer sought to optimize a design for viewing on desktop computers, and that tended be a more straightforward process since desktop computer monitors didn’t drastically vary in width and height. The rise of smartphones and tablets brought with it a much wider variety of screen sizes and resolutions, which today’s web designer has to account for. Somehow a web page has to look relatively coherent, text and images have to be viewable, on a screen that may be 1,920 (or more) pixels wide on a large high-definition desktop monitor or a mere 320 pixels wide on an iPhone.
Simply allowing a layout designed for desktops to scale down to smartphone size tends not to look very good. Generally there are two problems. One is that everything is too small/zoomed in too close. Two is that desktop monitors are oriented horizontally and smartphones (tablets less so) are usually initially oriented vertically. Web pages are designed vertically, in a way, to be scrolled up and down like pages of a book, but most smartphones’ screen heights are more severe relative to their width, so either the page, again, is rendered too small/zoomed in if proportions are kept the same or else it’s scrunched together.
The overwhelmingly popular and successful solution has been to tailor the design to the device. There are a number of approaches to achieve this, but they are all referred to as responsive approaches to web design- that the design forms or responds to the hardware used to view it. Elements on a web page may scale down and rearrange themselves appropriately to preserve a harmony among all the elements on the page. Text size may be increased if it is otherwise uncomfortable to read, larger images and unnecessary items may be replaced with stripped-down versions, or replaced altogether to improve performance. By now a lot of that is common knowledge and is regularly observed by us all on a daily basis. Facebook on a mobile browser doesn’t look like it looks on a larger monitor. A lot of the styling is the same, but elements are rearranged to co-exist with one another in the limited space and remain accessible.
Another popular solution has been the native application solution, apps run directly from the device apart from a web browser, which Facebook and other larger organizations that have the resources to develop them have moved towards. And those can look different still. There are typically different technologies involved in developing native apps, though, and they don’t involve a website’s styling rules changing to suit the user’s device in the same way. Usually a native app is made to work with specific devices in mind running specific mobile operating systems. Also, native apps are meant not so much to stand in place of a mobile web experience but rather to supplement it. In no case is it advisable to forgo a design optimized for viewing in mobile browsers.
There is an elegance to responsive web design that is unmistakable. There is a respect for the perspective of the user when it’s done well. In the end, responsive web design is a response to a changing technological landscape. Web designers have had to account for users’ preference for viewing content online using hardware with much smaller screens. Those that haven’t accounted for it risk losing traffic and potential business because unoptimized sites are just harder to navigate.
It’s something that Cold Snap has had to account for as well. We currently develop fully responsive websites and collaborate with businesses to build a contemporary web presence and showcase their content on any device. The mobile era certainly presents its demands, but it’s an exciting and rewarding time to be in web development for the same reasons.