Strategies for non-responsive ‘legacy’ pages in responsive website

Our web app, for insurance companies, has some legacy pages that aren't responsive. But our new pages are responsive, and I'm sort of split on how to handle these older pages in terms of navigation.

What I do now is that I overflow-x the old page content, and give them the mobile navigation. I thought this would be good for consistency.

Overflow for old content

We heard from a user, though, that they would like to be able to pinch-zoom out to view more of the legacy page. They are able to zoom in of course (using the standard responsive viewport tag), but zooming out for an overall view isn't possible.

So, the options I'm considering:

  • On legacy pages, just force the layout into desktop. (Seems inconsistent, but might be a better experience).

Desktop layout

  • Scale the legacy content container to .5. This seems a little hacky, but gives a more 'zoomed-out' view initially, while still providing mobile nav.

Scaled down, but with mobile nav

  • Stick with the current approach.

Any other ideas are welcome. Thanks!

Tags: