As a senior person in charge of content operations for AnQiCMS, I deeply understand that providing excellent mobile experience to users is the foundation for the success of a website in today's mobile internet era.AnQi CMS, with its flexible architecture, provides us with a variety of solutions to meet the challenges of mobile devices.Today, I will elaborate 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 conceiving any content display plan, I always adhere to the 'mobile first' philosophy.This means not only do we need to ensure that the website displays normally on small screens, but also to provide a customized, smooth, and efficient browsing experience for mobile users.AnQi CMS provided us with strong support in this aspect, it offers three core website modes to handle mobile access: responsive, code adaptation, and PC+mobile independent site.
The adaptive mode adjusts the layout of the same HTML structure automatically across different screen sizes using a set of CSS and JavaScript code, achieving content reuse.However, in some 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 model are particularly important.These two 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 is to provide a set of independent and optimized frontend presentations for mobile users.This is not just a style adjustment, it is also a reconstruction of the experience.
first, Minimalism and efficiency are the primary principles of designUsers of mobile devices are often in fragmented time, with high requirements for loading speed and operational convenience.AnQi CMS is developed based on Go language, which has already achieved high concurrency and high-performance advantages in the backend, laying a good foundation for the fast response of the frontend.When designing templates, we should avoid redundant animations, complex interactions, and large image resources.Every pixel, every click should serve the core needs of the user.
secondly,Content first, highlighting the key pointsIn a 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 means giving up some secondary elements on the PC side or incorporating them into a collapsible menu.The Anqi CMS content model and flexible content fields provide convenience here, we can define specific fields needed for mobile based on the model, or selectively call them in templates.
Moreover,Optimize mobile interaction. A large click 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, form input should take advantage of the keyboard features of mobile devices, such as the number input box automatically popping up the numeric keyboard.
The specific implementation of AnQi CMS mobile template
Create a mobile template for independent mobile sites or code adaptation mode in AnQi CMS, mainly involving the following key steps and design considerations:
Configure template type and directory structure
In your AnQi CMS template root directory/templateunder, each template needs to have oneconfig.jsonfile. This is the core of defining template behavior. For mobile templates, we need totemplate_typeis set to1Or (code adaptation)2(PC+mobile).
It is most critical that all independent template files for mobile devices must be stored in the template directory.mobile/In the subdirectory. This means that if your PC homepage template isindex.htmlThen the corresponding mobile homepage template should bemobile/index.html. Other pages such as document details page ({模型table}/detail.html), list page ({模型table}/list.html) and so on also need correspondingmobile/versions (for examplemobile/{模型table}/detail.html)
This clear directory structure allows Anqi CMS to automatically load and render the corresponding template based on the user's device type, without complex backend logic judgments.
The flexible application of template language and tags
The AnQi CMS template engine is similar to Django syntax, supporting powerful features of Go language templates. When writing mobile templates, we can fully utilize 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 in the background, which is very useful for adding a link to jump to the mobile end on the PC page in the PC + Mobile independent site mode. - Content call:
archiveList/categoryList/pageListTags can be used to retrieve various list data, whilearchiveDetail/categoryDetail/pageDetailis used to retrieve the details of specific content. On mobile devices, we may need to adjust these tags.limitParameters to reduce the amount of content loaded, or adjust the loop structure to accommodate a single-column layout. - Image optimization: Images are a key factor affecting performance in mobile templates.We can take advantage of the backend content settings of Anqi CMS to enable WebP image format, automatically compress large images, set thumbnail processing methods, and other functions to reduce server load and accelerate loading.When calling images in the template, you can use
item.Thumboritem.LogoGet the thumbnails processed by the system, even by means ofarchiveDetaillabel'slazyParameter配合front-end Lazyload library to implement image lazy loading. - Interaction and data display:
navListUsed to build common hamburger menu navigation on mobile devices.stampToDateFormat timestamp.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 developmentUtilize
include/extendsandmacroAuxiliary tags, which can divide the mobile template into reusable modules, such as separating the mobile header (mobile/partial/header.html), and footer (mobile/partial/footer.html) to improve development efficiency and maintainability.
Mobile SEO considerations
Even if it is an independent mobile template, SEO is still an indispensable link. Anqi CMS is built-in with powerful SEO tools, we should make full use of them:
- TDK (Title, Description, Keywords) Optimization: Use.
{% tdk with name="Title" %}Set the title, keywords, and description exclusively for the mobile page with the tag. Sometimes, the title of the mobile page can be more concise, straight to the point. - The (Canonical URL)If the content on the PC and mobile end is consistent, it should be passed through the mobile page.
<link rel="canonical" href="PC端URL" />Point to the corresponding PC page to avoid duplicate content penalties from search engines. Conversely, as well. 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 have multilingual versions,
{% languages %}The hreflang attribute generated by the tag will help search engines correctly identify the geographic and language targets of the content, ensuring that users receive the most relevant language version. - Pseudo-static URL: AnQi CMS supports flexible pseudo-static rules to ensure that the mobile URL structure 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 mobile templates, we should:
- Start from the design draft: Prioritize mobile design, then expand to PC, or redesign the mobile user experience (UX) for existing PC design.
- Multi-device testingOn actual mobile devices of different brands, models, operating systems, and browser combinations, extensive testing is conducted 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 web pages and optimize according to the reports.
With the meticulous planning and powerful functions provided by AnQi CMS, we have the ability to build a high-performance mobile website that can attract users, effectively convert them, and meet the preferences of search engines.
Frequently Asked Questions (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 a detailed product parameter table on the PC side, while only displaying the core parameters on the mobile side and providing a "View More" button;Or design a dedicated lightweight form for mobile to optimize the filling experience.Although the core data usually comes from the same background, the independence of the template gives you a great deal of freedom in presenting content on the front end.
2. How does AnQiCMS identify whether a user is on a PC or mobile end and load the corresponding template?
The AnqiCMS identifies the type of the accessing device by recognizing the User-Agent string of the user's device. When it detects a mobile device, the system prioritizes