Responsive web design optimizes user experience by expanding and stacking content based on the size of the user’s screen, whether it’s a large desktop monitor, a laptop, a tablet or a phone. Responsive design, a beautiful CSS trick, has eased the process of designing, building and managing websites that must accommodate the various devices in use today.
Before responsive design came along, about five years ago, designers, builders and managers of websites had to do everything twice, because desktop and mobile websites were completely separate. Need to create a new page? Create two pages. Need to change a link? Change it twice. Need to add a video? Add it twice. Responsive design put an end to that duplication.
The more recent adaptive web design, unlike responsive design, is a server-side technology that delivers only content targeted for specific devices. Before the page loads, the server detects the user’s device type and then delivers the appropriate content and code to that device. The adaptive design process necessarily raises issues of device appropriateness. For example, maybe those large image sliders in your desktop design don’t work so well on tablets or phones. Maybe user mobile experience really should differ from the desktop experience.
So which option is best for your next website? Let’s weigh the pros and cons.
Responsive Design Pros
- One size fits all: That’s why they call it the silver bullet of web design.
- Easy management: Who has time to manage different websites for different devices?
- Single code base: A single set of html5 and CSS3 means lower development costs and easier development changes.
- Future-proof: Because responsive design doesn’t target specific devices, you can be sure that no matter what the screen size of the IPhone 7 or 8, your website will respond well.
Responsive Design Cons
- Slower loading: Shrinking a site from desktop down to mobile means that smaller devices must load the heavier files created with desktops in mind. Large images tend to be the main culprits in the slowdown.
- Usability issues: Responsive design, when done right, provides great usability. But designers focused on the desktop can neglect the responsive piece.
Adaptive Web Design Pros
- Faster loading: Device-specific content means you won’t be sending those big desktop files – those large pictures, say – to mobile devices.
- Better user experience: If you’re spending the extra resources determining what type of content will deliver on mobile vs. desktop, then you’re likely spending the time to ensure the best UX regardless of device.
Adaptive Web Design Cons
- Resources and budget: The time and expense of building and planning different user experiences for each device can be daunting. Writing separate code sets for specific devices also substantially expands development time.
- Management: Does your company update often? Then you must decide where to apply which updates. That takes time and brain space.
Which option works best for you?
Before you decide on responsive or adaptive, ask yourself: How much different does the user experience need to be on a desktop vs. a mobile device to generate positive ROI?
Unless user experience and functionality need to be drastically different, I would recommend a responsive design approach.
Managing a website is complicated enough without making the webmaster worry about which devices must incorporate the next website change. When you build a company’s website, you’re after two things: The easiest possible updating and management of the site and the best possible user experience. In most cases, responsive design and the Titan CMS accomplish both of these goals.