Most websites are responsive in today’s world; looking great on any device at any viewport size. We’ve come a long way since the days of building “mobile” sites, meaning a separate desktop and mobile version of a website. Of course, there are a few unique situations where this approach could still be justified, but we’ve come a long way since this was a recommended approach. If you’ve heard the term adaptive, it’s possible you immediately associate adaptive, with mobile sites. This is not what I’m going to talk about. I’m going to talk about how you can use this technique to better optimize and polish that fancy responsive website.


If you’re unfamiliar with what I mean by adaptive and responsive websites, here are their respective definitions:

  • Adaptive web design (AWD) promotes the creation of multiple versions of a web page to better fit the user’s device, as opposed to a single version like other web design techniques. Adaptive web design encompasses a range of other strategies that can be combined with responsive web design. Learn more about adaptive design.
  • Responsive web design (RWD) is an approach to web design aimed at allowing desktop web pages to be viewed in response to the size of the device one is viewing with. Learn more about responsive web design.

When to use adaptive design?

Take our website for example… On the homepage we have this awesomely huge full-screen video loading on desktop… but on mobile, you’ll notice it’s a static image with content over it (resizing your browser window will have no effect, the browser must return a mobile or tablet user agent for this content to switch).

This is because this area of this website is adaptive. Why you ask? Well first, if you’ve ever struggled trying to autoplay a video on IOS, you’re not alone. Unless you’re playing it from a native app, you can’t! You can’t even play that video inline on the page… Apple has disabled autoplaying videos in webkit until a user action. This is so your monthly data bill from your carrier isn’t through the roof. So instead of using responsive media queries to add display:none / display:block to switch out the content, why not check if it’s mobile or even go as far as if it’s IOS to instead load an image. This way even if your browser on desktop is resized, you still get the video autoplaying.  It’s also possible that a user’s mobile browser may still try to load or pre-fetch that video data (even if it’s hidden) which isn’t good since there is no need to load anything and will, in turn, slow down your site. So instead, I can just run a quick server side check for the device and write a conditional for the content.

Most CMS’s have this built in and if not there are plenty of libraries out there.

 

Some other cases where this technique can be used:

  • You could write an adaptive conditional for instructions that should say “scroll” or “swipe“.
  • You could write conditionals for touch icons and app capable meta tags so this markup is only rendering when needed.Wordpress example:
    <?php if(wp_is_mobile()) : ?>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="white">
      <meta name="apple-mobile-web-app-title" content="<?php bloginfo('name'); ?>">
      <link href="<?php echo home_url('/'); ?>wp-content/uploads/site/ios/icon.png" rel="apple-touch-icon"> 
      <link href="<?php echo home_url('/'); ?>wp-content/uploads/site/ios/icon-76x76.png" rel="apple-touch-icon" sizes="76x76"> 
      <link href="<?php echo home_url('/'); ?>wp-content/uploads/site/ios/icon-120x120.png" rel="apple-touch-icon" sizes="120x120"> 
      <link href="<?php echo home_url('/'); ?>wp-content/uploads/site/ios/icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
    <?php endif; ?>

    You could even go as far as checking if for rel="apple-touch-icon" or just rel="touch-icon" and what size should be set.

  • Another trick I like to use is to add an html class to use for a check in javascript instead of using javascript to sniff out the user agent. This is particularly useful when you don’t want bootstrap tooltips showing up on initial tap making the user tap twice to get to where ever that button is going. You could also make an argument for writing this conditional for the data-toggle markup, but lets assume this isn’t an option for this example.Wordpress html example:
    <html class="<?php echo wp_is_mobile() ? 'js_is_mobile' : 'js_is_desktop'; ?>">

    jQuery to go with it:

    if(!$('html').hasClass('js_is_mobile')){
     $('[data-toggle="tooltip"]').tooltip();
    }

Did you know that even if you hide an <img> tag, your browser still makes a network request for the source? The only way around it is a nifty trick using background images and hiding the container of where that background is set. Once that container is visible by toggling classes, only then does that background image get called in the network… But why go through that much trouble with css and breakpoints and different image sizes when you can run adaptive images that will auto resize and cache? Learn more about this at adaptive images.

When not to use adaptive design?

Honestly, I shouldn’t have to tell you when not to use this. If you’re second guessing it, you probably shouldn’t be doing it. I usually try to limit it to anything cosmetic or device specific. I wouldn’t recommend ever using it (or even responsive media queries for that matter) to switch out entire content blocks. If this is the case, then you really need to rethink your layout and hierarchy.

Responsive design is great, but responsive + adaptive can work very well together.