Responsive Web Design
The Concept
We are currently living in an age where the lines between which device we use to view and interact with the Web is becoming more ambiguous. As a website owner, you will never know how a person will potentially view your website. They may be on their phone, on their laptop, or sitting on their sofa and viewing it through a gaming console on a big screen TV.
The fact of the matter is that web browsers now run on a range of electronic devices with various input methods and screen sizes. Because of this, the web design community has proposed various solutions to foresee any usability and accessibility issues and try to address them appropriately.
It was the case that designers tackled the solution by creating separate sites for devices; thus, a separate “mobile” and “desktop” version of the site was created. However it soon became clear that the amount of devices and screen sizes available to users made this approach unrealistic. You simply couldn’t build separate websites for all of the devices on the market.
A newer solution has emerged in what is known as “Responsive Web Design.” What Responsive Web Design (RWD) does is address the problem of a multi-device landscape, as smartphones and tablets are now just as capable as, if not better than, a traditional “desktop” computer when it comes to browsing the web.
Cascading Style Sheets (CSS) are what give a website its appearance, everything from the color, line-height and size of font, the layout of the pages and the color of the buttons.
A technique known as Media Queries (CSS version 3) now allow designers and developers to apply CSS rules depending on variables such as the “max-width” and “height” of the screen or the orientation of the device, among other things, and are supported by all modern browsers.
The major browser vendors now acknowledge that the web landscape is changing and have implemented media query support to help address the problem of a multi device landscape.
How it Works – Adjusting Screen Resolution
We don’t know how people will be accessing a website, as they may have different hardware, network connections and web browsers. RWD allows us to target all ranges of devices, from HDTVs to smartphones, but applying certain rules depending on variables such as the viewport of the screen, both vertically and horizontally, and the aspect ratio, be it landscape or portrait.
What this does is allow websites to become very “fluid.” Ironically a web page with no style or CSS is responsive by default.
It should also be noted that RWD isn’t necessarily focused on “mobile” devices, as you can also make a website look good on huge screens (like an HDTV). In essence, we can now focus on how a page looks regardless of the device.
Google Analytics can give you an accurate statistic as to how people are viewing your site, organized by types of devices, browsers, and resolutions. The ”Screen Resolution” metric will show you what size the screen is (not the width of the actual browser window).
Why It Needs to Be Considered – Mobile First
Mobile is growing fast.
The reality is that mobile usage is growing fast. In a report by Kleiner Perkins Caufield & Byers (Venture Capital Company), as of 2013, mobile traffic is 15% of global Internet traffic, up from 10% in 2012
Growth is increasing at a rate of 1.5x per year and will probably maintain, if not increase.
Morgan Stanley’s analysts believe that, based on the current rate of change and adoption, the mobile web will be bigger than desktop Internet use by 2015.
http://mashable.com/2010/04/13/mobile-web-stats/
Mobile Internet adoption has outpaced desktop Internet adoption by eight times. These statistics should be enough evidence to show you that the mobile trend is very real and here to stay.
Why this mindset?
As project stakeholders, designers and content writers, if we start out on a small browser, we are limited, so our mindset switches to what’s really important. By doing so, we trim away the fluff and focus on the essentials and the core values of the website’s design, in turn making our site more relevant, usable, and accessible.
It’s clear that we don’t have long to impress a potential client that visits our website. If your service or core message is not clear, if your text is illegible or if your menu items are unusable, there is a very good chance that they will simply click back on their browser and move elsewhere. All you have to do is to put yourself in the user’s shoes.
With the small screen mindset, we don’t have the luxury of 1920 x 1080 (2,073,600 px) pixels a canvas. One of the main issues with many websites has been the “kitchen sink” mentality, because its so easy to add more elements to a website on a large canvas. It’s then up to the web designer to try and find a good balance with all of these UI (User Interface) elements.
With this approach, it’s often the case that the core purpose or message of the website is unclear and, in the worst case scenario, completely lost.
The Process – At a base level.
Not all websites are the same, but at a basic level all of the following should be addressed:
RWD can be thought of as building a very robust and highly functional foundation for a website. It the site looks good and functions perfectly on a phone, then ultimately this foundation will help shape “larger versions” of the site
As a business owner, you need to ask yourself: “What is the message I want to communicate to my users?” or “What are the core values of my company/website?” By using this approach, you focus on what matters most, and this can then be applied to the mobile version of the site.
UI elements need to be made more “clickable,” as the most common method of interaction is by using a touch screen. The precision of a mouse is not an option.
Optimizing images for different devices and connection speeds.
Changing navigational position to account for how people hold a mobile device.
Ensuring elements like video or data tables re-size properly rather than just hiding them.
Dynamically resizing fonts to work better at different screen resolutions.
Providing retina versions of graphics.
All of the above are what your site should be doing at the very least in order for it to be as accessible and usable to the public as possible.
With this new approach, just one site is built and maintained. While it may require more resources initially, the long-term benefits should outweigh any additional costs.
Also as a bonus, you are building a site that’s optimized by default. Assets such as images need to be served appropriately and this approach should ultimately lead to a fast-loading website, which both your users and the search engines will greatly appreciate.
Conclusion
We should be creating websites that are future-ready today. RWD isn’t the ultimate answer, however, it’s a technique that, when executed correctly, can improve the end user experience.
The web offers us many choices that it can be both a positive and negative thing for a website owner. Ultimately though, it’s up to you to put your best foot forward and serve your client base as best as you can.