What Is Responsive Web Design?
In this day and age, there are more ways than ever to access the internet. From smartphones to tablets to gaming consoles, the number of devices with internet access has ballooned, and it will likely continue to rise with each passing day. While this variety drastically enhances our accessibility, it also poses a headache for website designers and programmers. There’s only one internet, but the number of screens that we view it from is enormous.
If you’ve ever wondered why a website appears different on your home computer than on your mobile devices, it’s because each of your screens have different resolutions. Screen resolution is the size of a screen measured in pixels by height and width. For example, if you’re reading this article on an iPhone 5s, your phone’s resolution is 1136 pixels tall by 640 pixels wide, or 1136 x 640. When website designers and programmers are tasked with making their websites look nice, they must conform to a device’s resolution. Otherwise, a website won’t look right, and viewers will likely leave the site.
The iPhone 5s is just one device. Your computer has its own resolution, as do other models of mobile phones and tablets. In order for websites to look nice on each of these devices, website designers and programmers must create new designs and write code specifically meant for every single unique device. Otherwise, website compatibility will flounder. As it becomes time-consuming and costly for businesses to constantly create new designs for each new device, it is essential to have one solution that will make your website compatible across all platforms. That is whereresponsive web design comes into play.
Responsive web design (RWD) is an approach where a website is responsive to a user’s environment and behavior; it adjusts its design based on the user’s device platform (e.g. iOS, Android, etc.), screen resolution and orientation. In an ideal situation, good RWD is a one-time project. Once your website is designed using the RWD approach, it will work across all devices, from smartphones to desktop computers. The following are the four major highlights and factors of RWD:
- Fluid Grids: This incorporates the idea of “liquid layouts,” meaning that designs expand or shrink when a user adjusts the size of their web browser window.More commonly, we have seen websites created with “fixed-width layouts,” meaning designs that are a fixed number of pixels across and centered on the page. Fluid grids take the classic liquid layout to a new level. They are more meticulously designed in terms of proportions; therefore, no matter how large or small a screen is, all of the components in the layout will resize their widths to fit within the window.
- Flexible Images: Just as fluid grids are sized in relative units so that devices can display them properly, flexible images are created in the same way, allowing them to stay within the allotted size of the browser screen.
- Media Queries: CSS3 media queries allow a page to use CSS-style rules based on the device used to view a site. This allows for a webpage’s content to adjust to the size of the device’s screen based on information exchanged between your device and the website.
- Faster Loading Sites: Properly coded sites incorporating RWD load faster because your device only loads what it needs. Because a smaller screen doesn’t require as much content as a larger screen, pages load faster, which is beneficial when accessing content over cellular networks.
For a good example of an RWD-optimized website, use a desktop web browser and go to Mashable. Using your mouse, go to the lower right-hand corner and slowly make the window thinner, all the way to the size of a smartphone screen. You’ll notice that the layout and content automatically adjust and constrain to the new width of your browser, which is indicative of a responsive design. Now, still on your desktop, try doing the same thing at New York Times. Notice that the layout simply gets cut off as you adjust the browser size and does not adapt to the size of the browser window. Since it’s not responding to the size adjustment, it can’t be called responsive web design.
The Time Is Now
Over the past year, responsive web design has become the hot topic among site owners. Businesses don’t want to have to pick and choose which devices they have the time and/or money to pursue. If you are stuck having to make a choice between supporting the Samsung Galaxy S5 or the iPhone 5s, and you ultimately choose to have your site designed only for the iPhone, then you risk losing all of your potential Samsung-owning clientele. And since none of us want to limit our client base, the time to take advantage of responsive web design is now. At the end of the day, you will actually save time and money by avoiding the need to write new code for new devices. RWD is one of those rare “do it once and forget it” type of opportunities that allows you to cover the spectrum of existing and future devices.
This is especially important because mobile browsing is expected to surpass desktop browsing by the end of 2014. If you hope to reach an international audience in emerging economies like China’s or those in Africa, jumping on the RWD train now can let you tap into those new and very profitable markets.
Who Is It Right For?
Responsive web design benefits smaller retailers that don’t have the means to create native apps or separate mobile websites like larger retailers. But no matter what the size of a business, RWD is advantageous for any e-commerce site. Offering too much on-screen information can hinder a site’s usability, and bad content layout can distract visitors. When using RWD, retailers and designers have no choice but to eliminate the excess, resulting in a cleaner layout and a streamlined checkout process. Examples of e-commerce sites that made great use of the responsive web design approach include A Book Apart, Starbucks and Indochino.
E-commerce or not, responsive web design is the present and future of web browsing, so it’s best to jump onboard as soon as you can.
0 Comments