Advantages and Disadvantages of Responsive Web Design
Frankly speaking, a responsive website is a website that adjusts the content it displays to the size of the actual viewport being used. Such a feature is always in demand amongst salespeople to sell. They go to clients and illustrate the wonders of a brand new website that automatically or magically adapts to whatever device end users might happen to use, today and tomorrow.
It’s a strong selling point, with nearly no chance for anyone to successfully rebut it.
For this sole reason, Seattle Web design creates websites that can adapt displayed content to the requesting device are a must-have these days. It’s not simply a matter of wanting to look nice and smart—it’s a pure matter of business. As often happens, though, the devil is not so much in the strategy but in the details of the tactics.
How should you build a website that adapts any content to the size of the viewing device? Enter Responsive Web Design (RWD).
Foundation of Responsive Web Design
In general, adaptive and responsive can be used interchangeably as if they were synonyms. Effectively, some dictionaries—specifically the Merriam-Webster—define as “responsive” anything that shows the capacity for adaptation. In web development, though, the term responsive sometimes refers to something unique or specific beyond the conceptual level and that is more of an implementation detail.
By describing something as responsive salespeople and clients mean that the site displays nicely on whatever devices are used to navigate it. For developers and designers, on the other hand, a responsive site is an adaptive site built using a particular set of technologies and practices that go under the comprehensive name of Responsive Web Design.
In this article, Seattle web design would explore the pros and cons of RWD, calling attention to possible issues you’ll encounter if you blindly employ RWD to serve mobile views.
A brief history of Responsive Web Design
Seattle Web Design gives basic highlights on the brief history of Responsive web design.
Up until a decade ago, the world of web development was split in two: desktop browsers in one camp and everything else in the other camp. The “everything else” camp included cell phones and a few small palm devices, like Windows CE devices. Early versions of ASP.NET even shipped with a distinct set of controls with a minimal browser-detection engine and mobile-optimized rendering. Mobile controls never became popular because mobile devices were hardly ever used to browse the web.
It all changed when Apple shipped the iPhone. And it changed even more when the iPad was shipped, thus splitting even the mobile camp into two segments: smartphones and tablets. Add in the growing number of brands and models of smart cell phones and you get the big picture. The built-in detection engine centered on the expression-based analysis of user agent strings became quite unmanageable. With the number of user agent strings (and variations thereof) in the order of thousands, determining the ideal content to serve to a device could have easily become a hellish browser nightmare.
A radically different approach was therefore required.
Ethan Marcotte proposed an approach he called Responsive Web Design. Since then, the acronym RWD has become increasingly popular and the practices behind the RWD method have been perceived as the only way to get a responsive website that adapts to the host device. Ultimately, RWD is an approach that works, and it is largely supported by popular design frameworks like Bootstrap. At the same time, though, RWD is just one possible approach—and perhaps not even the most effective one when it comes to mobile devices.
RWD is relatively easy to achieve, whether you do it through manual coding or adaptive HTML templates you get out of the box from designers. We at the Seattle Web design believe it’s the most effective way to serve mobile content is an aspect that must be carefully investigated on a per-project basis.
CSS media queries
There are three pillars of the RWD approach: fluid grids, flexible images, and CSS media queries. The idea behind a fluid grid is that as the outermost container changes its size, the entire content in it reflows and adjusts to the new size. RWD is all about laying out content that can be easily re-rendered in a new, smaller or larger, container. Images can be easily resized via HTML attributes, but in this way they are just stretched regardless of artistic considerations and the size of the download.
CSS media queries are the glue required to assemble the visibility of HTML elements and floating designs, and even the size of containers.
CSS media queries is a well-known World Wide Web Consortium (W3C) standard, and it has been around for a few years now. The term media refers to HTML-defined media types, the most popular and widely used of which are screen and print. The HTML standard defines many more media types, including handheld. The handheld type, at first, seems to be perfect for restricting the application of a CSS style sheet to just handheld devices. Unfortunately, no vendors of smartphones support that media type.
It will probably never happen, but it would be nice to have smartphone browsers reconsider themselves to be handheld devices. That would entirely change the meaning and the numbers behind the definition.
Used in a LINK element, the media attribute indicates the context where the CSS file being downloaded will be used. The default value of screen indicates, as the name suggests, that the referenced CSS file is used while displaying the page on the screen. The value of print, instead, indicates that the referenced CSS file is used while printing the page. Typically, the print CSS differs from the screen CSS because of background images, fonts, and graphical styles.
A simple query language for screen devices
Being restricted to using just one core media type—screen—to face the explosion of devices a basic query language was created to let the use of different style sheets per scenario. This is just what the CSS media queries standard really represents.
A browser that supports CSS accepts a Boolean expression in the media attribute and selects the referenced CSS file only if the expression evaluates to true. To have a sensible Boolean expression, you need to have parameters to combine together with AND and OR operators.
The upcoming CSS media queries level 4 standard
A newer version of the CSS media queries standard is in the works, and newer properties are being added to make it easier to tailor style sheets according to specific device form factors.
Seattle Web Design knows that one of the benefits of the newer version is that detecting non-desktop devices comes easier if you test hover and pointer. For example, the property hover that equals “hover” clearly denotes support for tooltips and then desktop browsers. The property set to a value of “on-demand” will likely suggest the device is an Android device because Android is the platform where long-clicking is a default feature. At the same time, the property pointer set to the value of “coarse” suggests that the underlying device is a touch device, likely a tablet.
Conditional style sheets via media queries
Let’s see how to use media queries properties to switch CSS files on the fly.
Ideally, a web page will host multiple LINK elements, each pointing to a different stylesheet for specific conditions. The evaluation process doesn’t stop at the first match but proceeds through the entire list of CSS references. It’s up to the page author to ensure that the media query of only one LINK element evaluates to true. Browsers re-evaluate the list of linked CSS files whenever the window is resized, whether it’s resized because of a mouse action or a rotation of the screen.
Once the browser detects that the screen size or orientation has changed, it picks up the CSS file that best fits. The content of the page is re-rendered in accordance with the instructions in the current style sheet. Media query properties—such as width, height, and orientation—change dynamically. Other properties—especially those coming in CSS Media Queries Level 4 standard—are static because they depend on the nature of the device.
Important CSS media queries work in two ways. One way to make the desktop experience more pleasant for users is to have the content displayed remain usable regardless of the size of the browser window. The other way is to provide a pleasant experience to users visiting the website with a particular, non-desktop device. This happens without developers needing to deal with the intricacies of user agent strings.
Finally Seattle web design, can say that RWD makes no distinction between a desktop browser resized to 480 pixels and a full-screen browser displayed on a smartphone. All that matters is the screen size, but smartphones and notebooks might work over different forms of connectivity (Wi-Fi, 3G) and be significantly different in terms of CPU power. This is the point that best represents the essence of RWD. And it is RWD’s major strength as well as its most significant weakness.
Handcrafting a grid system with media queries.
Most responsive websites these days are based on some responsive framework—most likely, Bootstrap. Bootstrap comes with its own media queries expressions and splits the screen into four main segments.
You can certainly overwrite the Bootstrap settings or not use Bootstrap at all. In this case, you just end up with a bunch of CSS styles that implement a homemade grid system. As mentioned, a grid system is the core of a responsive design.