Day 22: Adaptive, Responsive & Native Apps

There are three main strategies for making websites and applications mobile-friendly. Each has advantages and disadvantages.

What it is.

Adaptive websites are those that have a separately designed and built site just for mobile.

Responsive websites are sites that dynamically fit whatever screen size it’s displayed on.

Native apps are compiled programs that you download from iTunes or the Android store.

How it’s used.

Businesses opt for one of these solutions based on their goals, history, work flow and budget.

Discussion.

Before there was mobile, designing online products was easy.

Sure, there were a lot of different browser versions, and we had to test sites to be sure they worked on most of them, but screens were uniformly small. There were limited colors and fonts, and all websites looked pretty crappy anyway. A good designer learned to work with these restrictions.

Then smart phones became a thing and suddenly we didn’t just have a few monitor sizes to worry about. We had these teeny tiny screen sizes.

They weren’t all uniform either, because we had iPhones and Samsung and Microsoft (and for a blip of time, Amazon phone and poor old Blackberry).

What was a hard working designer to do?

Adaptive websites.

The Adaptive website has several distinct layouts for multiple screen sizes. Each layout is a different code base and set of assets that must be maintained.

Early on — around 2007–20010 — our solution to multiple screen sizes was to design two separate sites, one for desktop and one for mobile devices.

Sure, it was a pain to maintain. We had two separate code bases, assets for each site and advertising for each. We had to constantly rework everything so the mobile site wouldn’t look entirely crappy. But nobody was really on mobile phones looking at websites back then, anyway.

Until they were.

Advantages: Often outperform, on speed tests (2–3 times faster than responsive). Custom user experiences for each screen size. Doesn’t require rebuilding the entire website like a responsive site does.

Disadvantage: More engineering costs. More maintenance costs.

Responsive websites.

A responsive design is one website built with fluid grids, flexible images, and media queries to fit any screen size.

Around 2010, something new hit the scene, that was the responsive website. This kind of design automatically resized itself to respond the the screen size.

That meant we only had to design one website. When displayed on a desktop monitor it looks big and beautiful. Display it on an iPhone and it looks little but still beautiful.

Responsive sites use something called the flexible grid to resize and rearrange images and text so that it fits on any size screen. (< — more about that on another day.)

Advantages: Create a single design to be used on all screens. Consistent design across all devices. Less engineering & maintenance costs

Disadvantage: Not always the best user experience. Hard to deal with legacy code. Responsive sites are great, but they mean rebuilding the whole website from the ground up. Not something ginormous established websites want to undertake.

Native apps.

Native apps are a whole different creature from mobile web. They’re a compiled program that is (usually) built in a different programming language, and have to be downloaded from a central place like iTunes or the Android store.

Native apps aren’t websites at all. They’re software, and they can do things that websites can’t. Like listen for high frequency audio cues, or use the phone’s gyroscope or voice commands or finger print recognition. Essentially, almost anything you can build into a piece of software can be built into a native app.

But that also makes them more expensive to build and to maintain.

Advantages: Can access all hardware features and do (almost) anything any piece of software can do.

Disadvantage: Expensive to build and maintain. Requires the user download the app.

Your Assignment

Find an example of an adaptive site and a responsive site.

• Find an example of an adaptive website (compare the desktop and mobile versions of the site)
• Find an example of a responsive website.
• Analyze why each business may have made the decision to create that kind of website.

Deliverables

Share the URLs for the sites you analyzed and your reasoning in the comments and/or on Dribbble and Twitter #100daysdesign.

Originally published at 100days.design on August 3, 2017.