AnQiCMS is dedicated to providing users with an efficient and flexible content management experience, of course, also fully considering the display needs of websites on different devices, especially the increasingly important mobile end display.Make your AnQiCMS website content responsive on mobile devices, it's not a difficult thing.AnQiCMS provides a variety of flexible strategies to ensure your website offers an excellent user experience on any device.

The flexible adaptation method of AnQiCMS

AnQiCMS deeply understands the diverse display needs of mobile devices, therefore it built three main website adaptation modes. You can choose the most suitable method according to your website positioning and operational strategy:

  1. Adaptive Mode (Responsive Design)This is currently the most commonly used and recommended method.In this mode, the website uses a set of code and a set of templates. Through technologies such as CSS media queries, it automatically adjusts the layout, font size, image size, etc., based on the screen size, resolution, and other characteristics of the user's device, ensuring that the content displays well on different devices.Advantages:Low maintenance costs, a single codebase, one-time development; friendly to search engines, helpful for SEO optimization, as all content is under the same URL.Support for AnQiCMS:As long as the template you choose or develop on your own is based on responsive design principles, AnQiCMS will support it perfectly.You do not need to perform any additional backend settings, the system will automatically deliver responsive pages.

  2. Code Adaptation ModeAdvantages:Can provide a more accurate and optimized user experience for different devices, the mobile page can remove unnecessary functions and elements from the desktop version, and load faster.Support for AnQiCMS:AnQiCMS allows you to create under the template directorymobile/Subdirectory, and place special template files designed for mobile devices within it. When the system detects access from a mobile device, it will prioritize callingmobile/the corresponding template in the directory.

  3. PC + Mobile Sites Standalone ModeThis is the highest level of adaptation, which means that your PC website and mobile website are completely independent two sites, with different domain names or subdomains (for examplewww.yourdomain.comandm.yourdomain.com）。Each site has its own independent code and template. AnQiCMS's powerful multi-site management feature provides natural support for this.Advantages:The highest degree of flexibility and customization, which can make the maximum distinction and optimization in terms of features, content, and interaction according to the characteristics of desktop and mobile devices.Support for AnQiCMS:You can create two independent sites using the multi-site management feature of AnQiCMS, one as the PC site and the other as the mobile site.At the same time, in the global settings, you can specify the access address of the mobile website, and the system will automatically redirect according to the visited device.

Practical Guide: Make Your Website Content Dynamic

After understanding the adaptation strategy provided by AnQiCMS, let's take a look at the specific configuration and operation steps:

Step 1: Choose an appropriate adaptation strategy

Firstly, clarify which adaptation method your website needs.For most small and medium-sized enterprises and self-media, if your template is responsive, then 'Adaptive Mode' is already sufficient.If you have higher requirements for the mobile experience and hope to present simpler and more focused content on your phone, then the 'Code Adaptation Mode' or 'PC + Independent Mobile Site Mode' will provide more room for maneuver.

Step 2: Prepare your template

  • For adaptive mode:Ensure that the template you are currently using is itself responsive designed. This means that the CSS file in the template should include@mediaQuery rules to adapt to different screen widths. If you are using an AnQiCMS official or third-party provided template, it will usually clearly state whether it supports responsiveness.
  • For code adaptation mode and PC+mobile independent site mode:Both of these modes require a set of independent templates for mobile devices.
    • In the root directory of your website template (usually)/template/您的模板名Below, create a template file namedmobile/.
    • Place the mobile version template file of the page you want to display on the mobile phone (such as the home page)index/index.html, article detail page)archive/detail.html, list pagearchive/list.htmland others) intomobile/In the catalog. The filenames and hierarchical structure of these mobile version templates should be consistent with the PC version templates, but with an additional layer.mobile/Prefix.

Step 3: System settings: Key configurations all at once.

In the AnQiCMS backend management interface, select the mode and related configurations:

  1. Log in to the backend:Access your AnQiCMS backend (usually)您的域名/system/).
  2. Go to global settings:Find "Backend Settings" in the left navigation menu and click to enter "Global Settings".
  3. Set website mode:On the global settings page, you will see an option named 'Website Mode'.
    • If you chooseAdaptive ModeMake sure to select the 'Adaptive' option.
    • If you chooseCode Adaptation ModeSelect the 'Code Adaptation' option.
    • If you choosePC+Mobile Site Mode Independent ModePlease select the "Computer+Mobile" option.
  4. Configure Mobile Endpoint Address (only for PC+Mobile Site Mode Independent Mode):If you select the 'Computer + Mobile' mode, an input box for 'Mobile End Address' will appear at the bottom of the page. Please enter the full domain name of your mobile site here, for examplehttps://m.yourdomain.comPlease ensure that the domain has been correctly resolved to your server.

Step 4: Content and image optimization: Improve loading speed and user experience on mobile devices

No matter which adaptation mode you choose, optimizing content and images is the key to enhancing mobile user experience:

  • Image Optimization:

    • You can find the option 'Enable Webp Image Format' under 'Content Settings' in 'Background Settings'.Turning on this feature will automatically convert uploaded JPG, PNG images to a smaller WebP format, significantly reducing the loading time of images on mobile devices.
    • The 'Compress Large Images Automatically' and 'Auto-compress to specified width' options can help you automatically shrink the size of images when uploading, avoiding the loading of large images on mobile devices.
    • The 'Thumbnail Processing Method' and 'Thumbnail Size' can finely control the strategy for generating thumbnails to ensure that images of appropriate size are displayed on list pages and other places.
    • When calling images in a template, you can utilizearchiveDetailtags providedlazy="data-src"parameters to implement lazy loading of images, loading them only when the user scrolls to them, which further enhances page performance.

  • Content structure optimization:

    • Keep paragraphs short, with moderate information density, and avoid long blocks of text.
    • Use clear titles and subtitles (such as)h2,h3) to divide the content, making it easy for users to quickly browse.
    • The AnQiCMS rich text editor features can help you easily format content, ensuring it is clear and readable on small screens.Markdown editor is also convenient for content creation.

Negligible SEO considerations

While implementing mobile adaptive display, also pay attention to search engine optimization. AnQiCMS provides powerful SEO tools that can work in coordination with your mobile adaptation strategy:

  • 规范链接（Canonical URL）：Ensure that your mobile page passes through for code adaptation and PC+mobile independent site mode.link rel="canonical"Tags point to the corresponding desktop version page, or the desktop version page points to the mobile version page, to avoid search engines considering it as duplicate