Adaptive Website Made Easy

Feb 27, 2019

A few years ago a colleague of mine and fellow developer, Craig Verrastro, invited his daughter’s music teacher to come present to my department. Why? Because he was seeing impaired, and we wanted the team to see what browsing the web (especially our own applications) was like for someone using a browser for the visually impaired.

During the presentation, the music teacher encountered a site that detected he was using a seeing impaired browser and redirected him to a simplified version of the site, which was also the site’s “mobile friendly” version. This frustrated him, and he immediately found the link to go to the full site. He pointed out that he disliked sites that did this. He said he noticed most people with normal eyesight often disliked these sites just as much, “who wants only a part of the site? No, I want the whole site. If it’s interesting enough to go on the full site, why wouldn’t I want to get it too?”

This got me thinking. A mobile site should not be a reduced version of the desktop site. If we follow best practices and coding standards, we should be able to create clean and adaptive web applications and sites easily without sacrificing quality regardless of the device being used.

The Adaptive Approach

This article demonstrates a method of creating an adaptive website using pure CSS/HTML, without requiring any programming language or even JavaScript in its basic form. The approach focuses on designing around available screen real estate rather than targeting specific devices.

Three Responsive Modes

The adaptive design uses three distinct modes based on screen width:

Full Mode (blue): Screen is > 800px wide
Compressed Mode (green): Screen is < 800px wide
Minimal Mode (red): Screen is < 400px wide

Technical Implementation

The core of this solution involves using multiple CSS stylesheets with media queries. Here’s how to implement it:

<link rel="stylesheet" media="all"
  href="main.css" type="text/css" />
<link rel="stylesheet"
  media="only screen and (max-width: 800px)"
  href="mid.css" type="text/css" />
<link rel="stylesheet"
  media="only screen and (max-width: 400px)"
  href="min.css" type="text/css" />

Each stylesheet handles the layout and styling for its respective screen size range:

main.css: Contains the full desktop layout and default styles
mid.css: Adjusts the layout for medium-sized screens (tablets, small laptops)
min.css: Provides minimal layout for small screens (mobile phones)

Key Benefits

This approach offers several advantages:

Device Agnostic: Works across all devices - iPad, iPhone, Android, and even web-enabled refrigerators
Accessibility: Compatible with screen readers and assistive technologies
SEO Friendly: Search engines can easily crawl all content
Full Content: No reduced functionality - users get the complete site experience
Maintainability: Single HTML structure with CSS-based adaptations

Live Demonstrations

To see this approach in action, check out these examples:

Viewport Example: http://www.rwblackburn.com/viewport/ - Demonstrates how layouts change based on screen resolution
Craft Profit Calculator: http://www.rwblackburn.com/craft-profit-calculator/ - Shows subtle responsive design in a real application

Design Philosophy

The key principle here is to design content first, then adapt it to different screen sizes. Don’t create separate versions for different devices - instead, use CSS to intelligently adjust the layout based on available space.

This ensures that everyone, regardless of their device or accessibility needs, gets access to the full website experience they deserve.

Back to all guides