With the popularization of mobile internet, the types of devices used by users to access websites are becoming increasingly diverse, ranging from desktop computers to tablet computers, to various sizes of smartphones. Whether the content of a website can be displayed smoothly and beautifully on different devices has become an important standard for measuring the quality of a website.AnQiCMS (AnQiCMS) has fully considered this requirement from the beginning of its design, providing flexible and diverse solutions to ensure that the website content can easily adapt to display on various devices.

The responsive design philosophy of AnQiCMS

The Anqi CMS understands the importance of unified and efficient content management and diverse front-end display.It supports various front-end adaptation modes through built-in template mechanisms and configuration options, allowing users to choose the most suitable responsive solution based on the characteristics of their website and operational strategy.Whether it is a unified responsive design pursuing development and maintenance efficiency or an independent adaptation mode providing an ultimate experience for specific devices, AnQi CMS can provide solid support.

Choose the appropriate responsive mode

In Anqi CMS, there are mainly three display modes for websites, and users can choose and adjust them according to their actual needs in the template configuration. These three modes have their own focuses, understanding their characteristics helps to make more informed decisions:

  1. Adaptive Mode (Responsive Design)This is the mainstream responsive design method. In Anqi CMS, when you select this mode (in the template'sconfig.jsonconfigurationtemplate_type: 0It means that the website will adopt a set of code, through CSS media queries (Media Queries) and other technologies, to detect the screen size and resolution of the user's device, and then dynamically adjust the layout, image size, and font, etc., to adapt to different display environments.Features and Advantages:The maintenance cost is relatively low because all devices share the same set of HTML structures and most CSS styles.Search engine optimization (SEO) performs well because all the content is located under the same URL, making it convenient for search engines to crawl and index.A website suitable for content structures that are relatively uniform and focus on development efficiency.Considerations:Need to carefully design and write CSS to ensure a good experience at various breakpoints.If images, videos, and other media resources are not optimized, it may cause slow loading speeds on mobile devices.

  2. Code Adaptation Mode (Adaptive Design)Code Adaptation Mode (inconfig.jsonconfigurationtemplate_type: 1）Allow the server to provide different HTML content or CSS styles based on the device type requested by the user (for example, through User-Agent detection). This means that the website can provide different template files for desktop and mobile endpoints, such as in/templateIn the directory, you can also create in addition to the main templatemobileSubdirectories store mobile-specific templates.Features and Advantages:Compared to full adaptation, this mode can more accurately control the content and layout presented for each device type, thus providing users with a more customized experience.The mobile page can load lighter resources, improving loading speed.Considerations:Increased the complexity of maintaining the front-end template, may require writing multiple sets of HTML and CSS for different devices. If not handled properly, it may cause duplicate content issues, affecting SEO, and usually needs to be accompanied by the correctcanonicalTags andrel="alternate"Declaration.

  3. PC+Mobile independent site mode (Separate Mobile Site)This mode (inconfig.jsonconfigurationtemplate_type: 2Under this, the website will have two completely independent versions, usually one domain name for the PC end (such aswww.example.com), and one independent subdomain for the mobile end (such asm.example.com)。AnQi CMS supports binding mobile domain names and provides an independent template directory for mobile websites (mobile) and configuration options.Features and Advantages:Provide a completely independent, optimized experience for PC and mobile users, allowing mobile sites to have unique features and content strategies.Very beneficial for complex application scenarios that require highly differentiated experiences on both ends.Considerations:The development and maintenance costs are the highest, requiring management of two independent content and technology stacks. Be cautious in configuring SEO.canonicalTags andhreflangProperty, to avoid search engine misjudgment as duplicate content. In addition, the 'mobile end address' should be correctly configured in the system settings, and the domain resolution should be ensured.

Implementation and content optimization at the template level

No matter which model is chosen, AnQi CMS provides the basis for implementation through its powerful template engine. All template files are based on.htmlends, and follows the syntax similar to Django template engine. Static resources (such as CSS, JS, images) are stored in/public/static/directory for easy management.

  1. Flexible template structure:You can usedesign-director.mdThe folder organization pattern described or the flattened organization pattern to build templates. Especially for code adaptation or independent site mode,mobile/The catalog is specially reserved for mobile template, and its internal structure is similar to that of the PC template.
  2. Practice of CSS and JavaScript:It is crucial to fully utilize CSS media queries to adjust the website layout in adaptive mode.For example, by setting style rules for different screen widths, ensure that images, text blocks, and other elements can automatically adjust size and layout.Using JavaScript, it is possible to implement more complex interactions and dynamic content loading, further optimizing the mobile experience.
  3. Image optimization is the key:Large images are one of the main factors affecting the loading speed on mobile devices. Anqi CMS provides a variety of practical functions in the "Content Settings" to solve this problem:
    • WebP image format:Enable WebP format (help-setting-content.md) You can automatically convert uploaded JPG, PNG images to a smaller, better quality WebP format, significantly improving loading speed.
    • Automatically compress large images:Enable this feature and set a specified width, the system will automatically compress oversized images, reducing storage space and bandwidth usage.
    • Thumbnail processing:Configure the appropriate thumbnail size and processing method (proportional scaling, padding, or cropping) to ensure that optimized images are loaded in the list page or small display area.
    • Image lazy loading:While usingarchiveDetailLabel display can be used tolazy="data-src"The parameter adds lazy loading attributes to images. This causes images to load only when they enter the user's field of view, effectively reducing the initial loading time of the page, which is particularly important for mobile devices.
  4. Adaptive rich text content:Rich text areas such as article details, single-page content, etc. (for example, through archiveDetail with name="Content"Call), try to maintain the adaptability of images, tables, and other elements added in the editor. For example, use CSS.max-width: 100%; height: auto;Make sure the image does not overflow the container. For embedded videos (such as iframes), the container width should also be made responsive through CSS or JS.

actual operation suggestions

  • Continue testing:During website development and content release, it is essential to test on various devices (mobile phones, tablets, desktop computers) and browsers, or use browser developer tools to simulate different device views to ensure that the adaptive display of the content meets expectations.
  • Balancing SEO and user experience:Good adaptive design not only improves user experience, but also is an important factor in search engine ranking.Google and search engines tend to prioritize crawling and indexing mobile-friendly websites, so ensuring the performance of the website on mobile devices is crucial.
  • Select the appropriate mode:Most small and medium-sized enterprises and self-media should adoptAdaptive modeorCode Adaptation ModeIt is usually a choice that balances cost and effectiveness. Only in special cases is considered to build a completely independent PC + Mobile site.

By using these features and flexible configuration options provided by AnQi CMS, you have the ability to create a modern website where content can be perfectly displayed on any device.

Frequently Asked Questions (FAQ)

  1. I have already selected the adaptive mode, why is the mobile phone still displaying incorrectly?This is usually not a problem with the core function of Anqi CMS, but rather the front-end CSS style or JavaScript code has not been fully adapted to different screen sizes.You need to check the CSS code in the template, especially the media query section, to ensure there is the correct layout and element size adjustment for mobile screens.At the same time, some complex JavaScript plugins may perform poorly on mobile devices and may require compatibility debugging or replacement.You can use the browser developer tools (such as Chrome's Elements and Responsive Design Mode) to locate specific issues.

  2. Does AnQi CMS support providing completely different content for mobile devices rather than just different layouts?Yes, Anqi CMS provides this capability through the "PC+Mobile independent site mode" and "code adaptation mode".In PC + Mobile independent site mode, you can design completely different templates for PC and mobile sites, and even bind different domains to achieve a complete separation of content and functionality.In the code adaptation mode, although it is the same domain, the server loads different template files according to the device type