Optimizing mobile user experience is crucial for modern website operations, and designing content templates specifically for mobile devices is an efficient way to achieve this goal.AutoCMS provides a flexible mechanism, allowing users to provide the most suitable browsing experience for different terminals according to their needs.

Understanding the mobile template mode of Anqi CMS

The autoCMS is designed to meet the diverse mobile adaptation needs, and it is built with three main website modes, which determine how content is displayed to mobile users:

  • Adaptive template type (Responsive)This is the most common pattern, meaning that the website will automatically adjust the layout and style according to the screen size of the user's device with just one set of templates.This model has the advantage of lower development and maintenance costs, unified content management, but the disadvantage is that the design flexibility of mobile and PC ends is limited, and may not meet the needs of highly customized mobile end experience.
  • Code adaptation template type (Code Adaptation)In this mode, the system will automatically determine the user's access device (PC or mobile) and provide different template files.This means you can design two independent templates for mobile and PC separately, but they usually share a set of backend data and logic.This mode is a very practical choice, which is between adaptive and independent sites for PC and mobile phones in terms of design freedom.
  • PC+Mobile Site Mode Independent ModeThis is the most thorough independent mode. You can set completely different domain names for the PC and mobile end, and have independent templates and content display strategies for each.This pattern provides the greatest flexibility, even allowing different content focal points on mobile and PC platforms, but the management and maintenance costs are relatively high.

Choose the appropriate mobile strategy

When faced with these modes, the choice depends on your specific needs and resource investment.

If your website's content structure is relatively simple, there are no particularly complex requirements for mobile design, and the budget is limited, thenAdaptive templateIt is probably the most economical and efficient choice. It ensures that the website is basically accessible on various devices.

If your goal is to provide an optimal experience for mobile users, or if you want the mobile end to have a layout, interaction, and even some content that is completely different from the PC end, thenCode adaptation templateorPC+手机端独立站点has more advantages.Especially for those who want to highlight touch interaction on mobile devices, simplify the information hierarchy, or carry out specific marketing activities, these two modes can provide greater creative space.

For the goal of 'Designing and displaying content templates specifically for mobile devices,' Code Compatible Template TypeIs a direct and commonly used implementation method. It allows you to provide a customized mobile interface while maintaining unified content management.PC+手机端独立站点Then it provides a higher level of separation, suitable for websites with completely independent movement strategies.

How to design templates separately for mobile devices

When you choose the code adaptation or PC+mobile independent site mode, AnQi CMS provides an intuitive template separation mechanism. The core is to create a special directory:mobile.

  1. CreatemobileDirectoryIn the folder of the current template theme you are using (for example/template/您的主题名/), create a folder namedmobile.
  2. Copy and customize the template：Copy the corresponding template file on the PC end, according to its original directory structure, to the newly createdmobiledirectory. For example, if your PC end homepage template isindex/index.html，then the corresponding template for the mobile end is placedmobile/index/index.html. Similarly, the document detail page template ({模型table}/detail.html), list page template ({模型table}/list.html), single page template (page/detail.html) can all be copied and customized tomobileIn the catalog.
  3. Follow the same structure:mobileThe template files and directory structure within the catalog should be consistent with the template structure on the PC end. This means that if there ispartial/directory storing common code fragments,mobile/The following can also be includedpartial/Used to store public segments specially customized for mobile endpoints.

For example:

Assuming the structure of your PC template is as follows:

/template/your_theme/
├── config.json
├── index/
│   └── index.html
├── article/
│   └── list.html
│   └── detail.html
└── partial/
    └── header.html
    └── footer.html

When designing a template specifically for mobile endpoints, you will create:

/template/your_theme/
├── config.json
├── index/
│   └── index.html
├── article/
│   └── list.html
│   └── detail.html
├── partial/
│   └── header.html
│   └── footer.html
└── mobile/ # 新增的移动端模板目录
    ├── index/
    │   └── index.html # 移动端首页模板
    ├── article/
    │   └── list.html # 移动端文章列表模板
    │   └── detail.html # 移动端文章详情模板
    └── partial/
        └── header.html # 移动端公共头部
        └── footer.html # 移动端公共底部

So, when users access through mobile phones, the security CMS will automatically identify and load it first.mobileThe corresponding template files under the directory.

Design and optimization suggestions for template content

Solely designing a mobile template is not just about adjusting the layout, but also an opportunity to optimize the user experience.

  1. Touch-friendly designEnglish: Phone screen primarily operates with touch.Ensure that the clickable elements such as buttons, links, etc. have sufficient touch area and maintain appropriate spacing to avoid accidental touches by users.The navigation menu usually takes the form of a hamburger menu (Hamburger Menu), folding secondary information, and only displaying the most critical navigation entries.
  2. Simplified information hierarchy：Mobile users often have limited patience and need to quickly obtain information.Prioritize displaying the most important content, folding or placing secondary information at a deeper level.Use titles, subtitles, short paragraphs, and lists to make the content easy to scan and read.
  3. Optimization of images and multimedia：Mobile network environment may be unstable. Ensure all images are appropriately compressed and consider using more efficient image formats such as WebP. Safe CMS providesContent SettingsThe images in the picture are automatically compressed, WebP conversion, and other functions, combined with lazy loading in the template (for example, inarchiveDetailthe label uselazy="data-src"), can significantly improve loading speed.
  4. Font readability：Choose fonts that are clear and easy to read on small screens, and set appropriate font size and line height to avoid overly small or dense text.
  5. Reduce unnecessary interactions：Complex forms, hover effects, etc., are not well-experienced on mobile devices, and it should be simplified or replaced with operations more suitable for touch screens.
  6. Using the tag feature of AnQiCMS: InmobileIn the template, you can continue to use various tags provided by Aiqi CMS, such asarchiveList/categoryDetail/systemThe, to flexibly obtain and display content. For example, you may want the article list on the mobile end to only display the title and thumbnail, while on the PC end, more descriptive information is displayed.

Background configuration and details

After the creation and optimization of the mobile template, you still need to perform the corresponding configuration on the security CMS backend to ensure that the system can correctly identify and enable these templates:

  • Template type settingin your template theme directory.config.jsonthe file.template_typefield.
    • If you want to use the code adaptation mode, please settemplate_typeset1.
    • If you want to use the PC + mobile independent site mode, please settemplate_typeset2.
  • Mobile end address (only for PC and mobile independent site mode)If the PC and mobile independent site mode is selected, you need to fill in your[en] Global function settingsin[en]Mobile end addressMake sure that this domain is resolved and points to your server.

Through the above steps, your CMS website can present specially optimized mobile content templates to mobile users, thereby significantly enhancing their browsing experience and helping to achieve better performance in mobile search rankings.

Common Questions and Answers (FAQ)

1. If I create one for mobilemobilethe catalog, but it lacks a template file for a certain page, how will the system handle it?

The AutoCMS is designed to be intelligent. If the system detects that the user is accessing from a mobile device, andmobileThe corresponding template file cannot be found in the directory, it will automatically fallback to the default template file on the PC for rendering.This means you do not need to customize mobile templates for each page individually, but can only deeply optimize key pages, while other pages continue to use the PC template, thereby effectively reducing maintenance costs.

2. Can I publish completely different content for mobile and PC ends in the independent site mode for PC+mobile?

PC+mobile end independent site mode provides high flexibility.Although they share the same security CMS backend system and content model definition, you can control the way content is displayed at the template level.For example, the PC template can be designed to display all articles, while the mobile template only displays specific "mobile exclusive" article categories.Content Modelcustom fields, and you can even add custom fields to each piece of content