The 3 Best Resources for Responsive Web Design
The term responsive web design is being kicked around the digital world with such fervor these days that is impossible to have professional conversation without it appearing. Frequently, the question pops up “Is this going to be responsive?” and the answer usually is, well, yes and no. How much money do you have to spend? Is the better question. But, do business professionals like that question? No, of course not.
Firstly, what is Responsive Web Design?
Responsive web design means that your website, in essence, “responds” to device resolution. Historically, web sites were designed just for the desktop in mind, with fixed-width table structures that were set to mimic the average, standard monitor resolution at the time. Now, websites are designed with fluid-width containers using percentages instead of pixels. Before smartphones became mainstream, desktop monitors, over time, started to increase in size, which increased web sites’ width. You commonly saw websites go from 768px wide, to 1024px, 1120px, etc.
These days, web designers have multiple devices to design for, which break down into 3 categories: desktop, tablet and smartphone. Desktop is the most straightforward, but once you get to tablet and smartphone, you’re dealing with many different device manufacturers, which gets more complicated. The main device operating systems for tablets and smartphones are iOS, for Apple devices, and Android, for Google Nexus, Samsung Galaxy, LG G4, and others. Windows Phone, by Microsoft, was at one point a consideration, with Microsoft even paying companies to develop apps, but at this point it’s defunct and generally considered as not important (sorry Microsoft).
With responsive web design you’re designing one website that accommodates 3 main form factors: desktop, tablet and smartphone. As the device gets smaller, content from the website is rearranged or hidden entirely. This is accomplished by media queries, which is a switch that says: If the device browser is x width, show this. If the device browser is y width, show that, and so on. The idea is that as you go from desktop to tablet to smartphone, the css stylesheet controlling the visual skin of the website changes and rearranges certain elements to appear correctly within the smaller screen.
The main benefit of this approach is that for certain companies responsive web design is far less expensive. It becomes unnecessary to build a native iOS or Android app because the cost far outweighs the benefit. Native apps are inherently expensive and time consuming to develop, so it behooves a company to strictly examine what type of website they have, and, if it skews towards being strictly content-driven, maybe having one responsive website is more effective. It’s up to each company to consult trustworthy design professionals to aid in this decision making process.
So what do you really need to know about Responsive Web Design?
- It’s a method for designing one website that changes to appear correctly for desktop monitors, tablets and smartphone devices.
- It uses media queries to swap CSS, which changes the front-end appearance for each device stipulated.
- Ideal for companies who have content-rich sites (blogs, portals, brochure-based sites) that do not need to build native mobile applications for iOS and Android.
Absolute must for information on all things responsive. Used by many professional designers as a go-to-guide and starting point for a responsive website project.
When you’re developing a responsive website, you frequently need to check it on multiple device resolutions, to make sure that every looks like it should. Below are a couple resources to help out.
Here’s another responsive web design checker: http://mattkersley.com/responsive/
Responsive Web Design by Ethan Marcotte is THE go-to book on responsive web design in general. He coined the term, so he must know what it’s all about. If you finish his book, try reading Mobile First by Luke Wroblewski.