Case study: four key points for optimizing mobile Web products

The number of mobile devices in the world is growing. Faced with the challenge of creating a good web experience across multiple different devices, there are already many solutions. But which of the following solutions is the most suitable for any given project? To answer this question, Luke, author of "mobile first", uses the Bagcheck application as a case (Note: Bagcheck is an innovative enterprise engaged in search and discovery businesses ), the reasons behind the selection of the mobile and desktop editions are explained, and four suggestions for optimizing mobile Web products are extracted through comparison. The full text is as follows:

I am a supporter and fan of the Responsive Web Design concept. However, I am often asked why we need to build a separate mobile version for Bagcheck without using fluid grids and flexible images) and media queries to provide a responsive Web solution for our mobile users?

 

For our Bagcheck website, website performance and website development speed are two crucial issues. Many of our decisions are to make the website performance and development speed as fast as possible (after all, we are a new company ). As part of our focus on website performance, we also focus on the concept of "what is necessary. This means that we need to present something they need to different devices or users. We are happy to do some optimization work. Using dual template system, we can optimize the following aspects, such as source order, media, URL structure, and application design.

At first, we constructed Bagcheck in the form of command-line interface. On this basis, we created a mobile Web experience version of Bagcheck, then we quickly developed a desktop Web experience version of Bagcheck. This process may also affect the development method we use.

It is also worth mentioning that although I am competent for coding, I am mainly a designer. Because my focus is on design elements, this article will include as many technical resources as possible. If you have more resources and implementation ideas, send it to me now!

　Source Order)

The core of Responsive Web Design is to apply the same HTML code to different devices, and dynamically adjusts the Display Based on the performance of the specific device (mainly through CSS. HTML tags have a resource order, which usually specifies how Web pages are rendered by browsers. Although JavaScript and CSS technologies can be used to change the location layout of HTML elements, it is very challenging to relocate HTML elements on multiple devices in a reliable manner.

Take the website navigation menu as a simple example. For devices with Large Screen and mouse/keyboard input, it is common to place a navigation menu on the top of a webpage for the following reasons:

The device screen has enough blank spaces, so the actual content of the page cannot be pushed out of the screen.

It is usually necessary to determine what content is displayed on the website through some key categories and Action sets.

When these key categories and Action sets are aligned with the screen/browser edge, access to them may be faster. It makes sense to place the overall navigation of the website on the top of the webpage. Therefore, marking the resource order becomes the first consideration.

However, it is more reasonable to place the overall navigation of the website at the bottom of the webpage on devices with small screens and touch as input, because:

The small screen device does not have enough blank areas, so the actual content of the webpage is pushed out of the screen by the overall navigation button of the website.

For small screens and low-bandwidth devices, compared with the website navigation function, users are more concerned with the immediate access to website content.

Ergonomic factors make it easier for users to click on targets they are interested in at the bottom of the screen.

Therefore, it is reasonable for mobile devices to place the overall navigation button of a website at the bottom of a webpage. This means that the menu markup) in the resource order, it is likely to be at the end. When the same HTML code is used on different devices, the resource sequence cannot be changed. Using the Dual Template system, we can provide different tags when building Bagcheck, so there will be different resource sequences on mobile devices. This shows two different UI interfaces for mobile devices and desktop devices.

　　

 

Of course, you can also use other solutions to achieve similar results without providing different HTML code. Box-direction can reverse the order of the entry list without affecting the resource tag order. You can also use the display: table Method to regenerate content display and website navigation based on the actual size of the device screen. These methods may be more suitable for you, depending on your needs.

　　Media)

Another method of responsive Web design is the use of flexible images and videos. When it is set to fill their container size format, the elastic image can dynamically adjust its size according to the available blank area in the browser view.

In a large browser view, an elastic image can be filled with more blank areas by displaying its original size. In a small browser view, the same image size can be scaled to occupy less blank areas. In order to achieve this effect, the browser needs some large images, which seem to have a good effect when being zoomed in or out.

The problem is that the larger the image, the larger the file size. Although not all Web browsers display images in their original size, the browser needs to download the entire image file, which will quickly lead to low performance unless it does:

When CSS Media Queries is used in combination, the background image is not displayed, and a large image prepared for a large browser view is not loaded. This method is not effective for those images with the specified image Tag, but only for those images with the CSS image background, thus limiting the applicability of this method.

You can use a solution like Responsive Images, which relies on the Javascript language to replace small HTML-tagged Images with larger ones based on the increase in the browser view size. Browsers that disable the Javascript and cookie functions can only display small images.

Try a method like noscript tag to prevent unnecessary image loading.

Use a server-side solution to detect the devices that access your site and pass only the necessary things.