Flexible websites for a mobile world

Responsive Website

In the last few years, the number of mobile users and devices has grown exponentially. As a result of this, providing a seamless, high-quality user experience on desktop, tablet, and mobile is more important than ever. Responsive Web Design (RWD) is arguably one of the best ways to tackle the issues that arise when designing for multiple devices.

BDM Infotech defines RWD as “an approach to web design aimed at crafting sites to provide an optimal viewing experience - easy reading and navigation with a minimum of resizing, panning, and scrolling - across a wide range of devices.”

To fully understand why we have RWD and why it is a big deal, it’s helpful to know a little bit of the history behind it.

Responsive web design (RWD) is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device. Google’s algorithms should be able to automatically detect this setup if all Googlebot user agents are allowed to crawl the page and its assets (CSS, JavaScript, and images).

We love data, and spend a lot of time monitoring the analytics on our websites. Any web developer doing the same will have noticed the increase in traffic from mobile devices of late. Over the past year we’ve seen many key sites garner a significant percentage of page views from Smartphone’s and tablets. These represent large numbers of visitors, with sophisticated browsers which support the latest HTML, CSS, and JavaScript, but which also have limited screen space with widths as narrow as 320 pixels.

Our commitment to accessibility means we strive to provide a good browsing experience for all our users. We faced a stark choice between creating mobile specific websites, or adapting existing sites and new launches to render well on both desktop and mobile. Creating two sites would allow us to better target specific hardware, but maintaining a single shared site preserves a canonical URL, avoiding any complicated redirects, and simplifies the sharing of web addresses. With a mind towards maintainability we leant towards using the same pages for both, and started thinking about how we could fulfil the following guidelines:

  • Our pages should render legibly at any screen resolution
  • We mark up one set of content, making it viewable on any device
  • We should never show a horizontal scrollbar, whatever the window size

Fixed - Width Design:

Until the last few years, website was specifically designed to fit well on most desktop screens because the overwhelming majority of internet users surfed the web on desktop devices. Most monitors were 800 or 1024 pixels wide and as a result, websites were designed to fit those sizes. However, eventually other size screens began flooding the market, and web designers wanted their sites to look exactly the same no matter which screen users viewed them on.

RWD is the modern solution to the fixed - width problems of the past. Perhaps surprisingly, fixed width designs are still somewhat common. In the early 2000s, terms like fluid design and liquid layout were, sort of, primitive versions of RWD.

The Mobile Revolution:

Mobile phones gained the ability to access the internet in the late 1990s but could only display basic textual data. It wasn’t until the mid - 2000s when Smartphone’s were popularized that mobile browsers began to display what we now consider to be “real” webpages using CSS 2 and JavaScript.

For the first time, cell phones had the ability to display websites the exact same way as desktops, but there was still one problem, they weren’t very navigable for the user. Mobile users had to pinch and zoom to do anything and load times were incredibly slow, especially when smartphones were still running on 3G speed.

Why RWD is Important???:

Mobile users are taking over, and for companies to be successful in the new mobile-dominant internet space, their websites must be optimized seamlessly for all devices. RWD websites have one URL and one set of code, so you do not need to design multiple websites or worry about multiple URLs; whether the user is visiting a website on a tablet, their smartphone, or a laptop, they will see the same site. And the website will automatically reorient and organize itself to fit the device’s screen being used to view it.

With RWD, your website has the right design for every device. Not only that, it will save you money from both a web design and administration standpoint. You only need to design one website, and you only need to administer one website. As if that wasn’t convincing enough, RWD produces the most seamless, high-quality experience you can provide users who are likely to browse your website on multiple devices. All in all, the positives greatly outweigh the negatives when it comes to RWD.

Have a project you'd like to discuss?

We are happy to discuss the project with you in person or just call us @ 022-65999099