How to ensure that the website content is adaptively displayed on PC and mobile terminals?

In this era of widespread mobile device usage, ensuring that website content can be displayed adaptively and smoothly on devices of different screen sizes (whether it's a wide PC monitor or a small mobile screen) has become one of the key factors for website success.AnQiCMS (AnQiCMS) provides powerful functions for users, helping us easily achieve this goal.

1. Understand the adaptive display mode of AnQiCMS

AnQiCMS understands the importance of multi-device access and therefore provided various website display modes from the beginning of system design to meet different needs, which is explicitly mentioned in the system introduction, including:

• Adaptive Mode (Responsive Design)This is the most recommended pattern. It means that the website uses a set of codes and a set of templates, through CSS media queries and other technologies, to automatically adjust the layout and style of web elements according to the screen size and resolution of the user's device.This pattern has the advantage of low maintenance costs, as the content only needs to be managed once.
• Code Adaptation Mode (Adaptive Design)In this mode, the system will judge the type of device being accessed (such as a PC browser or a mobile browser) and return optimized different HTML, CSS, or JavaScript code for that device.It is more complex than the adaptive mode, but it allows for more detailed customization and performance optimization for different devices.
• PC + mobile independent site mode: As the name implies, PC端 websites and mobile websites are completely independent of each other, usually with different domain names (such aswww.example.comandm.example.comThis pattern can provide the ultimate user experience and design freedom, but it also brings the highest development and maintenance costs as it requires managing two independent content and template sets.

In AnQiCMS, you can in the template configuration file,config.jsonbytemplate_typefield (0represent adaptive;1represent code adaptation;2Represent computer + mobile independent sites) to select and switch the website's operating mode.For most users, choosing the 'Adaptive Mode' is the most efficient and cost-effective solution, which can effectively balance user experience and management convenience.If you choose the "PC+mobile independent site mode", you also need to set the "mobile end address" in the "global settings" on the back end, and bind the domain name of the mobile end website.

2. Key strategies for implementing adaptive display and AnQiCMS function

No matter which mode you choose, the following key strategies and AnQiCMS features will help ensure a high-quality experience for website content across multiple terminals:

2.1 Responsive Layout and Template Construction

AnQiCMS template creation follows certain basic conventions, template files use.htmlSuffix, supports syntax similar to Django template engine.This means you can freely write or introduce the CSS framework (such as Bootstrap), Flexbox, or CSS Grid layout required for responsive design.

• Static Resource ManagementThe template uses styles (CSS), JavaScript scripts, and images as independent static resources stored in/public/static/In the directory, this makes it convenient for you to manage these resources centrally, and you can also introduce external libraries or custom styles for responsive design.
• Modular design: Template support of AnQiCMSinclude/extendsandmacroThese are auxiliary tags. Through these tags, you can divide the page into reusable modules such as header, footer, sidebar, etc.For different devices, different display effects and layout adjustments can be achieved in these modules through CSS media queries, such as hiding the sidebar or adjusting the navigation menu style on mobile devices.

2.2 Smart Image and Media Resource Processing

Images and media files are important factors affecting the loading speed and display effect on mobile devices. AnQiCMS provides powerful content settings functions to help you optimize these resources:

• WebP format conversionIn the "Content Settings", you can choose whether to enable the Webp image format.After enabling, uploaded JPG, PNG, and other images will be automatically converted to WebP format, which can significantly reduce the file size of images, thereby speeding up the loading speed of mobile page, while maintaining good visual quality.
• Automatically Compress Large ImageThe AnQiCMS supports the 'Auto-compress large images' feature and can be set to 'Auto-compress to a specified width'.This can effectively avoid loading oversized images on mobile devices, saving user traffic and loading time.
• Flexible thumbnail processingThe system provides multiple "thumbnail processing methods" and customizable "thumbnail sizes".You can automatically generate thumbnails of different sizes according to the needs of different pages (such as list pages, detail pages) to avoid loading full-size images on mobile devices, thus improving loading efficiency.
• Image lazy loadingWhen calling article or product content in the template, AnQiCMS supportsContentfields support lazy loading of images (for example, throughlazy="data-src"This means that the image will only start loading when the user scrolls into the visible area, greatly enhancing the first screen loading speed and overall user experience on mobile devices.
• Remote image localization: By setting 'Download remote images', the system can download external images referenced in the content to the local server.This helps ensure the stability and speed of image loading on mobile devices, avoiding the impact on user experience due to the failure or slow loading of external links.

2.3 Flexible content display and dynamic adjustment

Even in adaptive mode, you may still want to fine-tune the way content is presented on different terminals. The powerful content model and template tags of AnQiCMS provide great flexibility:

• Flexible content model: AnQiCMS allows you to customize the content model, which means you can define rich fields for articles, products, and other content.Although adaptive design encourages content sharing, when necessary, you can use these custom fields, through template logic, to display different focus information on the PC and mobile端.
• The refined use of template tagsUtilizearchiveDetail(Document Details),categoryDetailTags such as (category details), you can precisely control which content elements are displayed