In this new age, when our PCs and Macs are fast getting replaced with Smartphones, Tablets and iPads, we might well be witnessing a revolution in the way that we connect and access data.
The writing is on the wall!!
In 2014, Mobile will be the dominant form of Web Browsing. And in answer, The Web has responded.
Four years ago, Ethan Marcotte wrote ‘Responsive Web Design ’for ‘A List Apart’ in what would become one of the most talked about techniques in the industry ever.
Responsive web design has been heralded as one of the top web design trends each year since 2011. We at Srishti, believe that with rapid mobile adoption and close to 1.3 billion of the workforce projected to be mobile by 2015 representing 37.2 percent of the total workforce ( Courtesy : www.eweek.com), it has finally come of age.
In itself, the technology behind responsive web design isn’t complex. Let’s delve deeper to understand why it has become imperative to have it as a part of your web strategy.
Google recommends that webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.
Responsive Web Design (RWD) suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. For instance when a user switches from a laptop to tablet or from Landscape to Portrait view, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
How is it achieved?
Improved Media Queries in CSS3
Today, media queries can be used to scope and apply styles to specific capabilities. You can even combine queries that test for several features by using semantic operators such as AND and NOT). Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution among others.
The CSS Object Model Working Group at World Wide Web Consortium (W3C) has also created media query listeners that provide API for responding to media query changes. With the API one can download images in a particular size when a media query match is triggered.
Flexible Grid System
A flexible grid-based layout is the basis of responsive design. CSS is used to position and lay out margins and spacing, and implement various Web Layouts. Layouts and text sizes are normally expressed in pixels. But a pixel might be a dot on one device and eight dots on another rendering it useless. Using percentages or the ‘em’ (a unit of measurement based on font point size) for sizing is considered as a better option. Flexible grids use this approach and some of the popular frameworks used to cast your grid are the Fluid Grid System and Fluid 960 Grid System,
Flexible Images and Media
Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property.
Next Gen RWD : Responsive Website with Server Side Detection (RESS)
As per Luke Wroblewski, the renowned web design expert, RESS approach is a good well-rounded approach that gives a high level of customizability. Here the server detects what device is used to access the website and delivers an appropriate experience to that device (also referred to as “adaptive design”).
A Responsive Website consists of tons of complex code, and instead of delivering all of these codes to every website visitor RESS will deliver specific code and specific image sizes optimized for the device. This allows a website to load much faster and also improves user experience.
ROI for RWD:
For the business owner, there is serious ROI potential associated with using responsive Web design
- Improved SEO - A single URL for content and services
- Faster Response Times – A single URL for all devices
- Reduced Development and Change Management -A single code base
- Faster go to market - A single code base and wider browser support
- Faster iterations – A single, integrated team sharing knowledge and skills across channels
- Robust and engaging cross-channel experience – A unified planning and execution team structure.