Contributors
@andreea-macoveiciuc-content-expert
Business Benefits
Improve user experience, lower bounce rates, and boost sales by designing a website that works seamlessly with mobile devices.
Design your mobile site first if possible, to avoid building features that don’t work well across platforms or lead to slow page load times.
Use the same visual elements, typography, appearance, icons, and wording across all platforms
Ensure that designers, developers, and testers have the same understanding of how each site component will be deployed on each platform.
Create separate URLs for desktop and mobile views if you don’t want to use a single design version across all devices.
For example, use www.site.com for desktop access and m.site.com for mobile access. Not all websites and web applications can be adapted to a single, responsive design.
Ask your web developer to create separate URLs for different versions of the site and add HTML tags or Javascript to automatically detect the type of device being used.
Determine the essential functions and features that make up your website and apply them to the mobile version.
Mobile websites should allow the same functionality as websites for other platforms. For example, if your desktop eCommerce site depends on product pages, product listings, product search, cart, and checkouts, ensure these features are included in your mobile design.
Add the “viewport” meta tag to all your pages to tailor your website’s display mode for mobile devices and improve user experience.
Add the following code between the and elements of your page’s HTML code to instruct it to match the width of the device screen and maintain a 1:1 pixel ratio regardless of device and screen orientation:
``
Ask your web developer to add the code for you if you’re not technically inclined or need to use a different initial-scale attribute.
Last edited by @hesh_fekry 2023-11-14T15:50:40Z