Best practice for mobile optimization for content-driven site?

Question

We are creating a new website using Sitecore, and it seems that we have several options for mobile optimization:

• Responsive design (like on any CMS)
• Mobile device/presentation layer with device detection
• Conditional rendering for mobile (personalization rules)

The site is primarily content-driven ("brochureware"), but there are pieces of the site that are highly interactive and may merit a mobile-specific approach. We'd obviously like to avoid the costs of maintaining essentially a separate mobile site.

How should I decide which of these (or which combination) to use for my site? It seems like a responsive approach will be lowest cost long-term. Can I use this with device detection as well? Should I use a device layer or conditional rendering on pages with a mobile-specific UX?

Answer 1

TL/DR; It Depends :)

This was an exercise that we used to undertake at the start of every project, and it came down to Context and Content.

• Is what we're building essentially an application or a website? Most projects didn't gravitate to one extreme of those poles, but certainly lended themselves to be more aligned with one or the other. Are visitors coming to perform a specific action? Are they coming to consume content, or just get in and get out?
• What interactions are our visitors having with the site? Are they watching videos, filling out forms, creating lists and customized content? The more interactive the site was, the more consideration needed to be paid to specific interfaces for our visitors' devices.
• Then, we'd consider context: Are people visiting on a mobile platform more likely to perform an interaction than those on PC devices? If I'm a banking site, people on mobile may proportionally care more about finding a branch or ATM near them than another user.

My team's reaction was always to assume responsive design unless the design phase moved us out of it. We always wanted to deliver all functionality of the site to all users, and use conditional rendering to service users of one platform or another where needed. If the interactions with the content were so radically different from two devices, or impossible to complete on one device (ye olde Flash Video!) we'd try to use devices in Sitecore to target specific presentation to those users.

Edit: Given the clarified requirements you posted, I think the approach of starting with a responsive design makes a ton of sense.

Well considered interactive components can also work with this approach. For example, in the past we've built appointment booking components utilizing React on the same responsive grid system the rest of the site used. Our designers and devs took the time to make sure the component worked with smaller touch targets, and that the sections collapsed in a way that was perfectly functional. We ended up using the exact same components for all viewpoints on a single responsive design.

I think if your design and research leads you to a point where a separate component makes more sense, your thought about using dynamic presentation via some conditional rendering to replace that component will work well.

Again, there are more devices, viewports, browsers and configurations than we'll ever be able to test and validate. By defaulting to responsive, we'll make an experience that should be optimal for them all, but at the very least, somewhat usable!

Answer 2

Google recommends responsive design

https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design

"Why responsive design

We recommend using responsive web design because it:

Makes it easier for users to share and link to your content with a single URL.

Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages. Requires less engineering time to maintain multiple pages for the same content.

Reduces the possibility of the common mistakes that affect mobile sites.

Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see Pitfalls when detecting user agents" section for details).

Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh."

Some things may want to change though are, showing links to download apps for the platform detected the user is on. Showing links for maps etc in the format that work for the target platform device, etc.

You may have reasons not to use responsive design, e.g. Legacy etc. But would have thought a Greenfield project would be responsive by default, requirements depending.

Answer 3

Any of those options are valid for what you're trying to achieve - it's more of a matter of preference.

Responsive design will ensure a good experience regardless of device size and is typically considered as best practice. It does take a little more work on implementation and testing. Also, from a design perspective, the best practice is to design for small glass devices first and enhance the design for large glass. If you already have an existing visual design, it may require a bit of tweaking to set the appropriate break points and ensure that the flow of the page reacts accordingly depending on the display size. It may be easier at this point to just do a separate design for mobile and potentially tablet and use device channels to control it.