Best Practices For Web Designers: Responsive Layouts Or Native Apps? [Op-Ed]

There’s no denying that mobile is the future. With Google confirming that more searches are done on mobile than on desktop, it’s abundantly clear that all websites really should go mobile if they haven’t already.

But there’s an interesting dichotomy between in-browser content via responsive layouts and in-app content via native apps.

I’d like to explore both areas and dig to the root of each choice. When should a website go with a native app over a responsive layout? Could a site run both? These are vital questions that should be asked with every new creative project today.

The Values of a Native App

Most smartphone users rely on native apps for their favorite programs. Facebook, Twitter, Instagram, and others all run their own native apps.

Since native applications run on the local operating system, they’re a whole lot smoother and easier to operate in regards to animation, UI design, and content organization. Native apps follow UI guidelines keeping them all consistent and naturally assumptive. Users often just inherently know how to use sliding menus and tab bars.

Many major publishers have apps on the iOS Store and the Google Play Store that cover blogs, webapps, and social networks. But it’s fair to say large sites like Facebook and Twitter get more value from native apps than smaller sites.

This debate has expert opinions and major publications offering their viewpoints. It’s a hotly-debated topic both for designers and creative agencies.

But the fact remains that native applications are both useful and appreciated by end users. The only variable is deciding if your website could function better as a mobile app, or if users would even want one.

Fully-Responsive Websites: Pros and Cons

In a general context, responsive web design is always a good thing. Web designers aren’t losing anything by making their layouts fully-responsive and malleable to any screen.

But in the context of native apps there are some considerations. Firstly responsive websites are limited to the browser’s rendering engine. On smartphones this means limited animation, no Flash, and reliance on the browser’s rendering engine.

Native apps can use the core features of a smartphone or tablet. Animation libraries are much more powerful natively than CSS or JS rendered in the browser.

The same goes for input elements in forms, along with data transmission and security concerns. Many people prefer to use the Pinterest app over Pinterest’s website. Same goes for Flipboard, Dropbox, Feedly, Gmail, or any other major web service.

But should those websites not offer a responsive layout? There are three choices:

1. Force mobile web users to download the native app
2. Offer a mobile web layout with an optional link to the native app
3. Just run the mobile web layout separate from a native app

Flipboard goes with the 2nd option by placing a banner at the top of each page. You can sign up for a Flipboard account right in the Mobile Safari browser. But it’s a lot easier, quicker, and more intuitive to use the app.

The news site ZDNet does not even mention their mobile app while visiting on Mobile Safari. It operates like a responsive layout with news stories and featured posts.

The difference lies in user experience. Determine what’s best for users and gauge where most traffic comes from.

Remember that mobile apps require time for design and programming. They often require more work than building a website. If you want an app for your site make sure that it complements your responsive layout enough to provide real value.

Desktop-First or Mobile-First?

When designing for the web should you start with the widest width or the smallest width? It’s a question that gets asked frequently enough by freelancers and big-time creative agencies alike.

A very popular opinion is the mobile-first approach which was popularized by Luke Wroblewski’s book. This method considers progressive enhancement which starts from the basics and increases functionality for environments that can handle it.

Alternatively other designers lean towards the desktop-first approach which oscillates from “mobile first” to “mobile, too”.

This strategy works by planning all the features you’d want on a full-size desktop monitor first. Then from that idea you gradually scale down features, define breakpoints, and eventually get to the smallest layout for smartphones.

Is there a right answer here? Should responsive layouts start with the smallest screens, or is mobile-first an outdated concept?

The only downside of picking one over the other is potentially missing features. Starting with mobile you may omit features or forget to add them at larger resolutions. Starting with the desktop you may design layouts that feel too crowded on mobile.

However neither one is right or wrong. Choose whichever workflow suits you best. Just don’t be afraid to make major changes if they could improve the design.

The Best of Both Worlds

Building a fully-responsive website that runs on any screen will likely satiate the majority of readers. So if you already have a responsive layout, should you even bother with a mobile app?

As found in this great piece by Modo Labs, the answer comes down to user experience. There is no absolute definitive answer. It’s about which method offers the best form of consumption for your specific project on a mobile device. Would your users want a mobile app? Or is a website more than enough?

The tech news blog TechCrunch has a responsive layout for good reason. Their site recently covered a story confirming that folks in the US spend more time in apps than watching TV.

But what if someone links to TechCrunch on Twitter? If someone clicks that link on their iPhone it’s going to open Mobile Safari because it’s an HTTP link. This is where the responsive layout comes in handy because not everyone wants your app.

Granted, some users still want to visit your site and may prefer to visit without being forced to download an app, free or otherwise.

Work on a Per-Project Basis

The best answer for the responsive vs native app debate is to evaluate each project and decide what’s best on a case-by-case basis.

From my experience I’d argue that social networks and interactive websites benefit most from native applications. Both Android and iOS have large frameworks for building apps that can connect into APIs, send database queries, and function cleaner than a webpage.

And native app UIs are rendered like software, so you don’t need to worry about CSS properties or browser limitations. This is huge for platforms that need users to log in and perform detailed interactions.

But general business websites like those of restaurants typically work best with just responsive layouts – especially considering the amount of work it takes to build a native app.

Blogs and digital magazines are somewhat of a grey area. Native apps work well for some but aren’t needed for others. It generally depends on your market size and audience (ie. tech-savvy people).

When launching a new Internet publication there’s a lot to consider. If you’re just getting started I’d recommend building just a website first. From there it’ll be easier to conclude if a native app would be worth the effort.

Wrapping Up

It should go without saying that every modern website benefits from being responsive. Whether you want to build a native application or not, your site’s layout should be responsive and malleable to any screen size. There’s no downside and it provides a stable landing page for mobile users who are on the rise.

Some websites may offer an app download link to mobile visitors. These can be productive and useful for marketing your website’s mobile platform. But sometimes it’s worth offering this as an alternative rather than a mandate.

Gather user feedback if possible and gauge opinions on a mobile app. Try to learn what your visitors actually think of a native mobile app and base your decisions on further research.