As a senior personnel engaged in content operations of AnQiCMS, I deeply understand that providing excellent mobile experience to users is the cornerstone of a website's success in today's mobile Internet era.English CMS provides a variety of solutions to meet the challenges of mobile devices with its flexible architecture.Today, I will elaborate in detail on how to design high-quality mobile templates for independent mobile sites or code adaptation mode in AnQi CMS.
Mobile first strategy and mobile support of Anqi CMS
When considering any content display plan, I always adhere to the 'mobile first' philosophy.This means that we not only need to ensure that the website displays normally on small screens, but also provide a smooth and efficient browsing experience tailored to mobile users.The Auto CMS has given us strong support in this aspect, it provides three core website modes to handle mobile access: Adaptive (Responsive), Code Adaptation, and PC+Mobile Independent Site (PC+mobile independent site).
Adaptive mode adjusts the layout automatically for the same HTML structure across different screen sizes using a set of CSS and JavaScript code, achieving content reuse.However, for certain business scenarios, we may need more fine-grained control, or provide content or features slightly different from the PC end on mobile devices. In such cases, code adaptation and the PC+Mobile independent site mode are particularly important.These modes allow us to provide independent templates for mobile devices, thereby achieving deeper optimization and personalization.
Code adaptation and template design philosophy for independent mobile sites
When choosing code adaptation or PC+Mobile independent site mode, the core lies in providing a separate, optimized frontend presentation for mobile users.This is not just a style adjustment, but a re-creation of the experience.
Firstly,Minimalism and efficiency are the primary principles of design.Users of mobile devices are often in fragmented time, with extremely high requirements for loading speed and ease of operation.The AnQi CMS is developed based on Go language, which already has the advantages of high concurrency and high performance in the backend, laying a good foundation for the rapid response of the frontend.When designing templates, we should avoid redundant animations, complex interactions, and excessive image resources.Every pixel, every click should serve the core needs of the user.
Secondly,Content first, highlighting the key points.In the limited screen space, users need to quickly find the information they care about.The mobile template should reorganize the content hierarchy, placing the most important and frequently accessed content in a prominent position.This may mean discarding some minor elements on the PC side, or incorporating them into collapsible menus.The content model and flexible content fields of AnQi CMS provide convenience here. We can define specific fields required for mobile端 according to the model, or selectively call them in the template.
Moreover,Optimize mobile interaction.A large clickable area, intuitive navigation, and avoiding excessive text input are key to improving the user experience on mobile devices.For example, the navigation bar should be designed as a collapsible hamburger menu, and form inputs should make use of the keyboard features of mobile devices, such as the automatic popping up of a numeric keyboard for numeric input boxes.
The specific implementation of the AnQi CMS mobile template in English
In the AnQi CMS, create a mobile template for independent mobile stations or code adaptation mode, mainly involving the following key steps and design considerations:
Configure template type and directory structure
In your CMS template root directory/templatebelow, each template needs to have aconfig.jsonfile. This is the core definition of template behavior. For mobile templates, we need totemplate_typeset1(Code adaptation) or2（PC+手机）。“English”
Most importantly, all independent template files for mobile devices must be stored in the template directory.“English”mobile/In the subdirectory. This means that if your PC homepage template isindex.html, then the corresponding mobile homepage template should bemobile/index.html. Other pages like document detail pages ({模型table}/detail.html), list pages ({模型table}/list.html）etc., also need to have correspondingmobile/version (for examplemobile/{模型table}/detail.html).
This clear directory structure allows the Anqi CMS to automatically load and render the corresponding template based on the user's device type, without the need for complex backend logic judgment.
The flexible application of template language and tags
The template engine of Anqi CMS is similar to Django syntax, supporting the powerful features of Go language templates. When writing mobile端 templates, we can fully utilize the built-in tags to dynamically retrieve content and display it:
- Get system configuration: Use
{% system with name="MobileUrl" %}Can obtain the mobile end URL configured on the background, which is very useful when adding a jump to the mobile end link on the PC page in the PC+Mobile independent site mode. - Content call:
archiveList/categoryList/pageListtags can be used to get various list data, andarchiveDetail/categoryDetail/pageDetailis used to get the details of specific content. On mobile devices, we may need to adjust these tagslimitParameters to reduce the amount of content loaded, or adjust the loop structure to accommodate a single-column layout. - Image OptimizationEnglish translation: In the mobile template, images are the key factors affecting performance.We can use the backend content settings of the security CMS to enable WebP image format, automatically compress large images, and set thumbnail processing methods, etc., to reduce the server load and speed up loading.
item.Thumboritem.LogoGet the thumbnails processed by the system, even througharchiveDetailTagslazyParameters are coordinated with the front-end Lazyload library to implement image lazy loading. - Interaction and data display:
navListUsed to build the common hamburger menu navigation on mobile terminals;stampToDateFormat timestamps;breadcrumbBuild breadcrumb navigation. For user interaction forms, such as message forms (guestbook) or comment forms (commentList), ensure that the input box and button sizes are large enough for easy touch. - Modular development: Utilizing
include/extendsandmacroEnglish auxiliary labels, which can divide the mobile template into reusable modules, for example, separating the mobile header (mobile/partial/header.html）和底部（English）mobile/partial/footer.html) to improve development efficiency and maintainability.
Mobile SEO considerations
Even for independent mobile templates, SEO is still an indispensable part. The Anqi CMS is equipped with powerful SEO tools, which we should make full use of:
- TDK（Title, Description, Keywords）Optimization: Use
{% tdk with name="Title" %}The tags are used to set exclusive titles, keywords, and descriptions for mobile page settings. Sometimes, the titles of mobile pages can be more concise and directly to the point. - Standardized Link (Canonical URL)If the content on the PC and mobile ends is consistent,
<link rel="canonical" href="PC端URL" />Point to the corresponding page on the PC end to avoid the penalty of duplicate content from search engines. Conversely, it is the same. It is the Anqi CMS.{% tdk with name="CanonicalUrl" %}Tags can help us output this information. - Hreflang TagIf your website supports multilingual and both PC and mobile versions are available in multiple languages,
{% languages %}The hreflang attribute generated by the label will help search engines correctly identify the geographical and language targets of the content, ensuring that users receive the most relevant language version. - Static URL：English CMS supports flexible pseudo-static rules to ensure that the URL structure of mobile devices is clear and easy to crawl, which is crucial for SEO.
Practice and Iteration
Template development is a continuous iterative process. When designing and developing a mobile template, we should:
- Start from the design draft.：Prioritize mobile design and then expand to PC, or redesign the mobile user experience (UX) for existing PC design.
- Multi-device testing：In the real mobile devices with different brands, models, operating systems and browser combinations, extensive testing is performed to ensure compatibility and user experience.
- Performance Monitoring：Use professional tools (such as Google PageSpeed Insights, Lighthouse) to continuously monitor the loading speed and performance metrics of mobile page and optimize according to the report.
Through the above detailed planning and the powerful functions provided by CMS, we are fully capable of building a high-performance mobile website that can attract users, effectively convert them, and meet the preferences of search engines.
Common Questions and Answers (FAQ)
1. Can I display completely different content or features on the mobile end in the 'Code Adaptation' or 'PC+mobile independent site' mode?
Yes, this is one of the main advantages compared to the adaptive mode. By creating independentmobile/Template file, you can fully control the layout, content, and even functional modules of the mobile page.For example, you may display detailed product parameter tables on the PC side, and only show core parameters and a "View More" button on the mobile side; or design a dedicated lightweight form for the mobile side to optimize the filling experience.Although the core data usually comes from the same backend, the independence of the template gives you great freedom in presenting front-end content.
2. How does AnQiCMS identify whether a user is on a PC or mobile end and load the corresponding template?
The CMS identifies the type of the accessing device by recognizing the User-Agent string of the user's device. When a mobile device is detected, the system will prioritize