how to convert an existing legacy website into a mobile friendly one?

Make the existing site responsive first; mobile friendliness normally requires updating its shared HTML and CSS, not converting it into a .NET MAUI application or immediately rewriting the ASP.NET back end.

1. Retrofit the current user interface

Apply these changes first to the site’s master page or shared layout so they affect every page.

Add the viewport declaration inside <head>:

<meta name="viewport"
      content="width=device-width, initial-scale=1">

Without this setting, mobile browsers can render the page in a wide virtual viewport and scale it down, producing tiny text and forcing users to zoom. The page must also avoid elements with fixed widths larger than the device.^1^

Replace fixed layouts with responsive CSS:

.page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}
img, video {
    max-width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .columns { display: block; }
    .sidebar { display: none; }
    input, select, button { width: 100%; }
}

CSS media queries let the same page switch from a desktop layout to a mobile layout according to the available width.^2^

Then work through the shared controls and page templates:

1. Replace fixed pixel widths with percentages, Flexbox, or CSS Grid.
2. Collapse multi-column pages into one column on narrow screens.
3. Make navigation usable by touch; do not require mouse hover.
4. Increase spacing around links, buttons, checkboxes, and form controls.
5. Make tables scroll horizontally or replace wide tables with card-style layouts.
6. Serve appropriately sized images and remove unnecessary scripts or assets.
7. Keep primary content and actions visible; hide only genuinely secondary material.

For an ASP.NET Web Forms site, update the master page, shared user controls, and common stylesheet first. For MVC, begin with Views/Shared/_Layout.cshtml, shared partial views, and the common stylesheet.

2. Test page by page

Test representative pages at phone, tablet, and desktop widths, including both portrait and landscape orientation. Do not rely on detecting a particular phone model: screen dimensions can change when a device rotates, and CSS based on layout characteristics is generally better suited to minor presentation differences.^1^

Prioritize:

• Home and navigation pages
• Login, registration, and password-reset flows
• Forms, validation messages, and file uploads
• Search and results
• Checkout or other critical transactions
• Data tables and reports

Check that there is no unintended horizontal scrolling, text is readable without zooming, controls are easy to tap, and workflows can be completed using touch.

3. Use separate mobile pages only when necessary

Responsive CSS is appropriate when desktop and mobile users receive essentially the same content and workflow. If mobile users need substantially different markup or a simplified workflow, ASP.NET Web Forms and MVC can serve mobile-specific pages or views. This provides more flexibility but duplicates UI code and increases maintenance cost; Microsoft’s ASP.NET guidance recommends combining responsive client-side techniques with server-side variations only where major differences require them.^3^

Avoid the obsolete ASP.NET Mobile Controls from older ASP.NET releases. They targeted WAP-era formats rather than the HTML used by modern mobile browsers.^1^

4. Modernize the framework separately

A responsive retrofit does not require an immediate migration to ASP.NET Core. If the 15-year-old codebase is difficult to maintain, migrate as a separate project after stabilizing the mobile UI.

For a production application that must remain online, Microsoft recommends incremental migration for most complex ASP.NET Framework applications.^4^ The documented approach creates an ASP.NET Core application alongside the original application, proxies requests to it, and migrates routes gradually. Authentication, session state, logging, caching, and configuration should be planned before moving dependent routes.^5^

.NET MAUI is relevant only if a separately installed iOS or Android app is required. It does not make an existing browser-based website responsive.

References

1. How To: Add Mobile Pages to Your ASP.NET Web Forms / MVC Application
2. ASP.NET MVC 4 Mobile Features
3. Mobile Apps & Sites with ASP.NET
4. Migrate from ASP.NET Framework to ASP.NET Core
5. Get started with incremental ASP.NET to ASP.NET Core migration