Share On:

Review of Adaptive Website Design

For people not in the industry of web design, keeping up with the industry can sometimes be a pain. First you needed a website, from there you needed a good website, after that it had to have SEO, and then you needed a mobile site. As technology progresses so does the need for a business to change their website to match. So with that in mind, does your website need an Adaptive Design?

Of course you might be thinking, “…and what exactly is an adaptive design?”

Adaptive and Responsive

The most common options for web design currently are adaptive and responsive. Both methods have some similarities along with key differences. Also both are preferred to the old “standard” method which involved designing to a fixed or standard size.

Responsive and Adaptive web pages both have the ability to adjust their size based on the screen, or even size of a browser, you are using to view them. The reason they are becoming the norm for web design is because of the increased usage of smart phones and tablets for surfing the web. Ideally your business wants to cater to its’ customers and ensure they get the most out of your site no matter how they connect to it.

True responsive design is fluid and responds to any screen size by having text wrap and images shrink, or vice-versa depending on if the site was built from phone up or browser down. Adaptive design uses multiple static layouts based on certain breakpoints such as 320 pixels for a phone or 760 pixels for a tablet. For adaptive design the files detect the device making the request and calls up the properly sized layout.

Visual Optimization

One of the biggest reasons to use an adaptive design is to optimize visual data that is being received by the various devices. This is important when you are considering retina display and other high pixel density displays. One drawback to responsive design is that you are trying to cover all the bases so images need to load fast and would preferably be lower-density.

For those not familiar with the term, “Retina” is Apple’s brand name for the double-density screens they use on iPhones, iPads, and MacBook Pros. Other manufacturers are making similar displays although with a different term. Currently it is mostly available on high-end devices however eventually it is expected that Retina-like screens will be on all devices, slowly working their way down from top to bottom.

So with that in mind, if you cater to the high end client or wish to be forward thinking and ahead of the curve, you should be planning appropriately.

What Retina has is four times more pixels than standard screens. That means to render a good looking image you would need to use an image with four times the pixels, such as an 800 x 600 rather than a 400 x 300. So in the case of a Retina device, using an adaptive design is one way to deliver the higher pixel images to those devices that can utilize it while not overwhelming a device that can’t with a pixel-heavy image.

Adaptive Images

Another adaptive option is to utilize ‘adaptive images’ on your site. The adaptive image detect the visitor’s screen size and then delivers device appropriate versions of your web page’s HTML images that are scaled appropriately. Ideally this works well with responsive web design and can be implemented into existing responsive website to help keep high pixel images on desktops while still providing fast load times for handheld devices with smaller versions of the images.

The Bottom Line

Providing what your clients want and need is often the bottom line for any business. If your site is competing against many others and you want the ability to stand out on any device then your website needs an adaptive design or in the very least to incorporate adaptive images to your existing responsive design. That way when people using high pixel density displays load your page up they will notice how much better you look compared to the competition.

Share Article