How to ensure that the content is perfectly displayed on different devices when building a website is a problem that every operator needs to consider.AnQi CMS is aware of this and therefore provides a variety of flexible template display modes to help us choose the most suitable website presentation method according to our actual needs.

The template display mode of Anqi CMS is mainly divided into three types: adaptive, code adaptation, and PC + mobile independent site.Understanding their respective features and application scenarios can help you better plan the user experience and SEO strategy of the website.

First, adaptive (Responsive Design) mode

Adaptive mode, as the name implies, can automatically adjust the layout and content on screens of different sizes (from wide-screen computers to tablets and smartphones) with just a set of template code.It's like a chameleon, able to intelligently adjust the display effect of the website according to the size and orientation of the user's device.

The implementation of this pattern mainly relies on CSS media queries, flexible layout, and streaming images and other technologies.When a user visits your website, regardless of screen size, Anqí CMS will send the same HTML code and then control the layout and size of page elements through CSS to adapt to different viewport.

The biggest advantage of adaptive mode isThe most convenient to maintain. You only need to manage a set of template files and a set of content to cover all devices.This not only reduces duplicate work, but also greatly reduces maintenance costs.In addition, it is also very friendly to search engines, with mainstream search engines like Google more inclined to crawl and index adaptive websites, which is very beneficial for improving the SEO performance of the website.In Anqi CMS, when you select this mode (usually inconfig.jsonIt is manifested in"template_type": 0), just need to prepare a set of HTML and CSS template files that adapt to various screens.

II. Code Adaptation (Dynamic Serving) Mode

The common point between code adaptation mode and adaptive mode is that it also only uses one URL.But the core difference lies in that, on the server side, the Anqi CMS dynamically sends different HTML and CSS code based on the type of device accessing it (such as a computer or a mobile phone).

The system identifies the user's device type (usually User-Agent) to determine which version of the website content to send.This means that although users access the same URL, mobile users may see an HTML structure that is simplified and optimized for mobile devices, while PC users see the full desktop version of HTML.

This patternThe greatest advantage is that we can provide the ultimate optimized experience for mobile devices. Since the server can accurately control the content sent, we can only load the content required for the mobile end, remove unnecessary complex scripts and large images, thereby significantly improving page loading speed and enhancing the mobile user experience.At the same time, because the URL remains unchanged, it also avoids the complexity that may arise from URL switching in SEO.However, the maintenance cost will be slightly higher than the adaptive mode, because you need to manage two (or more) sets of HTML/CSS code for different devices at the same time.In AnQi CMS, select the code adaptation mode ("template_type": 1When this happens, it is usually necessary to create a folder namedmobileThe subdirectory is used to store exclusive mobile templates.

Section 3: Separate PC and Mobile Sites Mode (Separate PC and Mobile Sites)

PC+ mobile independent site mode, as the name implies, it will set up independent domains for PC and mobile terminals separately (such aswww.yourdomain.comandm.yourdomain.com), and use completely independent templates and content.

When a user accesses the PC domain via a mobile phone, AnQi CMS will intelligently redirect them to the mobile domain. This providesthe greatest freedomPC site and mobile site can have completely different designs, functions, and content focuses, without interfering with each other.For example, the PC site can focus on detailed product displays and documentation downloads, while the mobile site may be more inclined towards quick contact and location navigation.

However, this is also the most expensive in terms of management and maintenance among the three modes.You not only need to maintain two completely independent websites, but also pay attention to SEO challenges, such as how to correctly set the Canonical tag and Hreflang tag to avoid search engines mistakenly identifying duplicate content, leading to a decline in ranking.In AnQi CMS, select this mode("template_type": 2）afterwards, except inmobilePlace the mobile template in the directory, and also configure the 'Mobile Endpoint Address' in the 'Global Function Settings' on the backend to clearly indicate the domain of the mobile site.

How to choose a suitable model for you?

Understood the characteristics of these three modes, the choice becomes clear:

  • Pursuing simplicity, efficiency, and SEO-friendliness:PreferredAdaptive mode. It is the easiest to maintain and favored by search engines.
  • We hope to optimize the mobile experience to the maximum, but also want to maintain a single URL:ConsiderCode Adaptation ModeIt can provide different content under the same URL, balancing experience and SEO.
  • The business logic and content display differences between PC and mobile端 are huge, requiring independent operation:SelectPC + mobile independent site modeThis allows you to have absolute control over each platform, but the management complexity is also the highest.

The strength of AnQi CMS lies in the flexible choices it provides for us.No matter the scale of your website or who your target audience is, you can always find a content presentation strategy that is most suitable for you.

Frequently Asked Questions (FAQ)

Q1: Where should I select or switch the display mode of the template in the Anqi CMS backend? A1: You can do so in the directory of the template you are currently using.config.jsonFind the file to set it."template_type"Field, change its value to0Represents adaptive,1Represents code adaptation,2Represents a PC + mobile independent site. Save it after modification, refresh the cache in the background, and the website will display in the new mode.

Q2: Why do some modes require creatingmobilea folder to store templates? A2: mobileThe folder is for code adaptation and independent PC + mobile site mode.Both these patterns need to provide a separate template for mobile devices or at least a differentiated HTML structure.When AnQi CMS detects that it is accessed from a mobile device, it will prioritize to gomobileto find the corresponding template file in the directory to render the page. If there is no template under this modemobileThe directory or if there is no corresponding template, the system may revert to the desktop version of the template or display abnormally.

Q3: If I choose the PC + mobile independent site mode but only deploy the PC site without setting up an independent domain and template for the mobile end, what will happen? A3: If you have enabled the PC + mobile independent site mode but have not filled in the 'mobile end address' in the background 'global function settings', or although it has been filled in but the site corresponding to the address has not been properly configured with a mobile end template, then when a mobile device accesses your PC domain name, you may encounter redirect errors, abnormal page display, or even be unable to access.The system cannot find the corresponding mobile content to display, which affects user experience and the normal operation of the website.Therefore, it is necessary to complete the configuration of the mobile site when choosing this mode.