Responsive web design – Online video’s best friend


It is absolutely imperative to make your site friendly to all users. What we need here is a cross-platform friendly solution that receives from, organizes, displays and delivers information to all users across screens.

“What you see is only half the story”
Miley Cyrus from the album Just Like You

Wisely said, indeed!

A mobile web strategy is a mandate that every business conceives like desperate newly-weds.

Let’s have a very superficial look at what the web is made of before we venture forward.

HTTP (Hypertext Transfer Protocol) is a series of guidelines that define how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. For example, when you enter a URL in your browser, this actually sends an HTTP command to the Web server directing it to fetch and transmit the requested Web page.

HTML (Hypertext Markup Language) is the language that is used to create webpages that we see every day. It defines how exactly the content we see should be represented to us for viewing.

CSS (Cascading Style Sheets) is another language that is used within HTML to describe the look and formatting (color, font, margins etc) and of a document written in HTML.

Okay, that we have an agreement on basic understanding of webpage architecture, lets look at the type of sites that a small or large enterprise must choose to create to engage with their online audience, retain customer base, improve churn rate and achieve results that keep them snowballing towards success.

There were originally two types of sites – the customary Desktop site ( and the device-specific mobile (WAP) site (

Desktop site (


Mobile site (



There are a lot of challenges in this conventional system of maintaining separate desktop and mobile sites such as

1. Dilution of brand equity – A digressive top-down approach from desktop to mobile leads to difference in appearance of the sites when viewed from different devices. This might hurt the brand value of the company

2. Multiple legacy codebases – A mobile site is a copy of a website, where the server does the work to deliver an optimized page that’s smaller and easier to navigate, according to device. Though there is selective display of information, easier navigation, larger buttons (phone numbers that could be clicked on to place a phone call) etc that offer a unique experience to the mobile user, it is too complicated for developers to maintain separate codebases for the desktop and mobile site. This demands for large staff sizes, to ensure data coherence between two front-end codebases and possibly one backend codebase

3. Disparate Domains – A mobile site’s domain is defined differently from that of the desktop (i.e. the sub-domain “m.”). This results in the dilution of domain and affects organic search traffic. Besides, the admin or webmaster will have to maintain two separate silos of content. Links shared from a mobile browser will not count as search related traffic for the primary site

4. Future-(un)friendliness – Mobile sites need to be constantly re-worked and re-designed to stay with the times as devices and browsers update constantly. That certainly cries for extra maintenance and developmental expenses besides other complexities

5. Avalanche of apps – Independent mobile platforms, multiple devices and shifting users have effected the introduction of mobile apps. Mobile apps are the newest way brands and businesses are engaging with customers.

The solution – Responsive Design. But what is it?

By 2015, local mobile searches would exceed local desktop searches [e-marketer].

We’re looking at the great divide the digital infrastructure is about to witness and 2015 happened 7 months ago. It is essential to formulate a good mobile strategy (Flipkart has emphasized on its preferences while Myntra already seems to have made one) going forward.

A responsive website that follows the responsive design holds only one version of the site that will respond to whatever device the site is being viewed on. In most cases, large images that are not necessary on a small screen will compact or disappear, content, articles and other elements on the page will neatly stack themselves on top of one another to accommodate the screen you are viewing it on. But with the responsive web design, all elements in the website are preserved even while being viewed on a mobile device of any kind or size. There will be no redirecting either (as would in the case of a mobile site). It also ensures businesses reach all users irrespective of platform or device manufacturer, scaling above apps.

The other more prominent website designs are mentioned below for quick reference

Fixed websites have a set width and resizing the browser or viewing it on different devices won’t affect the way the website looks.

Fluid websites are built using percentages for widths. As a result, columns are relative to one another and the browser allows it to scale up and down fluidly.

Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

Responsive websites are built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.


Responsive = Fluid + Adaptive

Why Responsive and how does it influence online video?

A responsive website eliminates nearly all the challenges one would face on a mobile-first site

A very flexible website solution that adjusts player size according to screen size and orientation (portrait or landscape). On-the-fly switching ability. Media attributes within HTML5 (rendered obsolete on latest versions of Firefox) or media queries within CSS for fluidic video delivery across screens

A singular domain that enhances brand equity, avoids redirects and simplifies web search as well as sharing of web address across any device. Enhanced SEO opportunities with video.

Most certainly a greater return on investment.

If your business is creating a new web presence, responsive should be your choice.
If your business has a large, mature codebase and the capacity to maintain them both, then bifurcate it and have two disparate desktop and mobile strategies.

But you can always revive your site and unify the strategies together into one responsive site later. To enable videos on your desktop, mobile or responsive site contact

Add comment