Web Design

Proud founder of the portmanteau "Redaptive" combining the concepts of RWD & ADW, for a quicker, slicker flexible web.

What is Redaptive?

Redaptive is the combination of Responsive and Adaptive web design. Both methods have their positives and negatives. Depending on your project scope, time restraints and resources both methodologies can be combined together.

This methodology can also be described as RESS (REsponsive web design + Server Side components)

Designed by developers

The scope for a "redaptive" website was approved in May 2014 for the rebuild of Front End and .net developers worked together to create an Adaptive solutions with a Responsive framework.

Time saver

With a small amount of development time, taking a redaptive approach was a real time saver. Having an Adaptive site takes time to build each view, however by using a responsive framework these views can be copied across mobile, tablet and desktop.


A Redaptive site offers unlimited flexibility for UX improvements. Each Adaptive view can be tailored to device needs, truly being mobile first, but at the same time we have the flexibility of having a responsive framework to quickly meet users needs.


The whole purpose of Redaptive Web Design is to excel in device delivery. Mobile and tablets should be your top priority when thinking of SEO, speed and user experience. Being mobile friendly is an understatement, we should now be desktop friendly.

Easy to customise

Using a responsive framework you can quickly launch a site that will serve up mobile friendly pages on an adaptive view. However, after launch you can "cherry pick" enhancements to your device views for a better UX. Doing it this way is far easier and quicker than launching a site with untested UX enhancements.


With any project you need the right resources and technology in place. Responsive frameworks are easy to find, I personally use Bootstrap, but Zurbs Foundation is also awesome! For the Adaptive views we are usin .NET Framework 4 to render the 3 views (mob/tab/desk).

Responsive vs. Adaptive

Here are some of the differences, pros and cons that divide the two. Whats the difference and which is better?

Responsive Pros

  • Close to full site experience
  • Easier to setup for rebuilds
  • SEO only needs to be managed once

Adaptive Pros

  • Fast page loads - only required elements downloaded
  • Tailored UX to device - device first
  • Existing sites don't need alteration

Responsive Cons

  • Longer page load times - all elements downloaded
  • Ground up rebuild
  • Incompatible with older browsers/devices

Adaptive Cons

  • Costly and resource intense
  • Complex - needs advanced JS, CSS and HTML for implementation
  • Structure can be difficult to manage with multiple views

Tom say's:

Both responsive and adaptive web design allows a website to be viewed clean and efficiently across devices. The key differences lie in implementation, and resources, budget, and skills available to you.


With a redaptive website, the pros of one methodology eradicates a con from the other.

Redaptive Pros

  • Reduce DOM elements, nodes, scripts, image sizes where you see fit to do so.
  • Future proof all device sizes and target specific devices without being code expensive.
  • Responsive fall back if the unthinkable happens.
  • Fast project turn around, flexible to make UX improvements
  • Our project was cheap as we already had the tools

Redaptive Cons

  • Need a good infrastructure and strong .NET developers
  • Structure can be difficult to manage with multiple views
  • Haven't encountered anymore cons...

Example code

The code below is a very basic idea and approach we took with our redaptive build. We made extremes to reduce code on devices, took a lot of time creating our site.Master pages to ensure we weren't loading unnecessary JS and other DOM elements.

  • IDE: Microsoft Visual Studio
  • Framework: Bootstrap 3.3.2
  • Languages: HTML5, ASP.NET, JQuery, JavaScript, CSS3, AJAX


Build your responsive desktop site first. Create 3 adaptive Site.Master files, one for each device. Make sure that you reduce and minify each master file to cater for each view. Copy each view/page of your responsive site and create 3 copies each with a different "masterpagefile"

Below is the Site.Master which we use for desktop. It has all classes so it looks graceful on all devices - the responsive site wont be seen but its a good backup.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

    <div class="container">
        <div class="col-xs-12 col-sm-6 col-lg-4 row">
			<p class="my-style">
					Hello World this is your DESKTOP!
			<img class="img-responsive" src="assets/images/profile.png" alt="Tom Rudge" title="Tom Rudge" />


Below is the SiteTablet.Master version of the desktop view, which we use for tablets. We can start removing unwanted DOM elements and nodes. This will make the site quicker and reduce load time.

We can start choosing if we want the view to look different or not, however as its a responsive site too, so it will look good anyway without any amendments.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SiteTablet.Master" Inherits="System.Web.Mvc.ViewPage" %>

    <div class="container">
        <div class="col-xs-12 col-sm-6 row">
			<p class="my-tablet-style">
					Hello World this is your TABLET!
			<img class="img-responsive" src="assets/images/profile.png" alt="Tom Rudge" title="Tom Rudge" />


We can really start to slim out the nodes and DOM elements. Introduce smaller images specific to mobile, so we don't have to worry about loading a big responsive image.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SiteMobile.Master" Inherits="System.Web.Mvc.ViewPage" %>

    <div class="container">
        <div class="col-xs-12">
			<p class="my-mobile-style">
					Hello World this is your MOBILE!
			<img src="assets/images/profile-mobile.png" alt="Tom Rudge" title="Tom Rudge" width="320" />

Same Master?

Remove mobile specific markup /node with server side components.

    <div class="container">
        <div class="col-xs-12 col-sm-6 col-lg-4 row">
        	<p class="my-style">
					Hello World this is your DESKTOP!
            <%if (Request.Browser.IsMobileDevice && Request.HttpMethod == "GET")
        	<p class="my-mobile-style">
					Hello World this is content for MOBILE but don't want it to load on desktop!
            <% } %>
			<img class="img-responsive" src="assets/images/profile.png" alt="Tom Rudge" title="Tom Rudge" />

Spread it!

RWD vs. AWD is always a great debate in the developer community - why not use both?. It can be done, and has been done! Check out and

[Redaptive]: Spread the word, make "redaptive" the new buzz word of 2015!

Tom say's:

Use social media to help us spread this methodology. Share with friends, colleagues and fellow developers out there!


I hope you find this site inspirational, there are a lot of guru developers out there who I would like to hear from and carry this concept forward.

Tom Rudge

Want to know more about me?

UX / Front End Web Developer based in the West Midlands. I'm Passionate about web standards whilst creating simple, usable and beautiful looking websites.

Based in the heart of the West Midlands, currently working in Kings Norton for

Please feel free to get in touch if you have any questions or suggestions.

Tom Rudge
UX Front End Web Developer

Get Connected