How to make AnQiCMS website content adaptable to mobile display?

AnQiCMS is committed to providing users with an efficient and flexible content management experience, of course, also fully considering the display needs of the website on different devices, especially the increasingly important mobile display.Let your AnQiCMS website content adapt to mobile devices easily, it's not a difficult thing.AnQiCMS provides a variety of flexible strategies to ensure that your website provides 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 has built three main website adaptation modes, you can choose the most suitable way according to your website positioning and operation strategy:

1. Responsive Design (Adaptive Mode)This is the most commonly used and recommended way. In this mode, the website uses a set of codes and a set of templates, through CSS media queries and other technologies, to automatically adjust the layout, font size, image size, and other content according to the screen size, resolution, and other characteristics of the user's device, so that the content can be displayed well on different devices.Advantages:Low maintenance cost, a single codebase, developed in one go; friendly to search engines, helpful for SEO optimization, as all content is under the same URL.AnQiCMS support:If you choose or develop a template based on the responsive design principles, AnQiCMS will support it perfectly.You do not need to make any additional backend settings, the system will automatically deliver a responsive page.

2. Code Adaptation mode (Code Adaptation)In this mode, AnQiCMS will dynamically select and provide different template files on the server side based on the type of device accessed by the user (such as a computer or a mobile phone).This means you can provide a fully customized mobile interface for mobile users, while PC users see the traditional desktop version page.Advantages:Can provide more accurate and optimized user experience for different devices, the mobile page can remove unnecessary functions and elements of the desktop page, and load faster.AnQiCMS support:AnQiCMS allows you to create in 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 the call.mobile/The corresponding template under the directory.

3. PC + Mobile Sites (Separate for PC and Mobile)This 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 (such aswww.yourdomain.comandm.yourdomain.comEach site has its own independent code and template. AnQiCMS's powerful multi-site management function provides natural support for this.Advantages:Extremely flexible and customizable, it can make the maximum distinction and optimization in terms of features, content, and interaction according to the characteristics of desktop and mobile devices.AnQiCMS support:You can create two independent sites using AnQiCMS's multi-site management feature, one as a PC site and one as a 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 based on the visited device.

Guide to practice: 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:

First step: Choose the appropriate adaptation strategy

Firstly, clarify the adaptation method your website needs. For most small and medium-sized enterprises and self-media, if your template is responsive, the 'adaptive mode' is 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 + mobile independent site mode' will provide more space for maneuvering.

Second step: 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 contain@mediaQuery rules to adapt to different screen widths. If you are using an AnQiCMS official or third-party provided template, it will usually be explicitly stated whether it supports responsive design.
• 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/您的模板名),mobile/.
  • Put the mobile version template file of the page you want to display on the mobile phone (such as the homepage) inindex/index.html, article detail pagearchive/detail.html, list pagearchive/list.htmletc.mobile/In the directory. These mobile version template filenames and hierarchy should be consistent with the PC version template, just one more layer.mobile/prefix.

Step 3: Backend system settings: key configuration 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. Enter global settings:Find "Background Settings" in the left navigation menu and click to enter "Global Settings".
3. Set the website mode:On the global settings page, you will see an option named "Website Mode".
   • If you chooseAdaptive modePlease make sure to select the "Adaptive" option.
   • If you chooseCode Adaptation ModePlease select the "Code Adaptation" option.
   • If you choosePC + mobile phone independent site modePlease select the 'Computer + Phone' option.
4. Configure the mobile end address (only for PC + mobile independent site mode):If you select the 'PC + Mobile' mode, a text 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.com. Please make sure that the domain name has been correctly resolved to your server

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

Optimizing content and images for any adaptation mode is crucial for enhancing the mobile user experience:

• Image optimization:

  • In the "Background Settings" under the "Content Settings", you can find the option to enable the Webp image format.Enable this feature to automatically convert uploaded JPG, PNG images to a smaller WebP format, significantly reducing image loading time on mobile devices.
  • Whether 'Compress Large Images Automatically' and 'Compress to Specified Width Automatically' can help you automatically shrink the size of images when uploading, to avoid loading large images on mobile devices.
  • “Thumbnail processing method” and “Thumbnail size” can finely control the strategy for generating thumbnails, ensuring that appropriately sized images are displayed on list pages and other places.
  • When calling images in a template, you can usearchiveDetailtags provided bylazy="data-src"parameters to implement lazy loading of images, so that they are only loaded when the user scrolls to them, thereby improving page performance.

• Content structure optimization:

  • Keep paragraphs short, with moderate information density, and avoid long blocks of text.
  • Use clear headings and subheadings (such ash2,h3) to divide content, making it easy for users to browse quickly.
  • AnQiCMS rich WYSIWYG editor features can help you easily format content, ensuring clarity on small screens.Markdown editor also facilitates content creation.

Neglected SEO considerations

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

• Canonical URL:For code adaptation and PC+mobile independent site mode, ensure that your mobile page passeslink rel="canonical"The tag points to the corresponding desktop page, or the desktop page points to the mobile page to avoid the search engine considering it as duplicate.