Pan-Environment Responsive Designs – Websites with Adaptability Quotient


The Design Impasse

We’re witnessing an unprecedented and explosive surge in internet users worldwide. Internet is accessible 24/7 from any part of the world, on the go. This has been made possible chiefly  because of the various portable handheld devices with capabilities unthinkable a few years ago. While there is no denying the fact that this is attributable to the enormous processing power being packed into these devices, there’s much more to just speed and miniaturization. It’s well known that to access internet or web we require web browsers and web browsers leads to websites. Within websites, the information is displayed on web pages in the form of text, images, video, audio, etc. Hence website is more about design/browsers and less about hardware of the device.

Now the transition from large displays (desktop) to smaller displays (any mobile device in general) posed a herculean challenge for website designers with respect to compatibility in terms of resolution and size. In others words, a website that appeared perfect on desktops was not so on mobile devices. Web designers would know that it’s next to impossible to design device-specific design experience given the diverse range of devices and browsers that are being introduced to the market one after the other in multiple versions. What could be the way out?

Responsive, not mere flexibility

Flexibility would mean that the design layout adjusts well but is not consistent with variations in resolution. At lower resolutions, flexible designs tend to compress its contents towards the center thereby rendering the images and texts very obscure. Simultaneously when the display area is stretched, the images become unhandy and the other contents are magnified to undesirable proportions. Such designs are flexible to the extent it’s built for, especially for desktop but not for mobile devices.

The term “Responsive Web Design” (RWD) was devised by Ethan Marcotte in his article A List Apart. The article tries to address the ever-dynamic outlook of web media by switching to websites with adaptive, fluid and flexible designs.

RWD adopts a combination approach wherein the design is based on the following:
Fixed width layout for medium and large display.
Fluid width for small display

RWD shifts the design convention to:
Browser centered – design compatible with browsers on diverse devices
Emphasis on mobile platform – desktop is already taken care of
Leave no options unexplored – maximum utilization of resources
Modularity in design for easy scalability – conforming to universally accepted standards
“Just the right” content – not too much or too less

Mechanism behind RWD

The RWD is built around three aspects:
Media Queries: In CSS3, media queries has the job of assigning style attributes to media types such as image or text. These attributes determine the max-height, resolution, aspect-ratio, orientation, width, height, device-height, max-width, etc. of the design. Media queries can be applied by:
(I) importing style aspects from other style sheets using @import rule
(II) employing the normal approach of inserting media queries straight away in the style sheet, or,
(III) entering media queries into the attribute of a linked style sheet

Fluid Grids: Grids avoid the use of pixels in web design layout and replace it with percentages for sizing. Pixels cannot render a layout responsive since its dimensions vary from device to device. CSS incorporates relativity between the various elements including width and margins in the design layout through grids. In other words, layout and text size is represented as a percentage of the total i.e. 100%. The unit of percentage measurement is called “em” based on a font’s point size. .

Flexible Images: Flexibility in images are enabled through the use of overflow property in CSS by setting the max-width of the media type to 100 percent. Depending on the screen size, the browser would adjust the image accordingly. The only prerequisite is good quality and size of the image. Alternatively images can be cropped dynamically with CSS using the overflow:hidden property.

Tools for the cause

There are a host of tools out there for RWD, few of the best as per Pinehead.tv are listed below::
Less Framework 4
FitText.js
Adaptive Images
Responsive Testing
Responsive Web Design Sketch Sheets

The Beginning

It has come to realization that RWD centered around CSS and HTML in the nascent phase but is surely on the evolutionary path of refinement. Ultimately the question is about the “need” of the end user and the choice between specific devices or diverse devices. Hence this is just the beginning; a lot is yet to come.

 

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s