Case study: Four key points for optimizing mobile web Products

The number of mobile devices used worldwide is increasing. Faced with the challenge of creating a good web experience across multiple different devices, there are now a number of solutions. But which of these solutions is most appropriate for any given project? To answer this question, the author of mobile priority, Luke, uses Bagcheck as a case in point (note: Bagcheck is an innovative enterprise engaged in search and discovery), explaining the reasons behind choosing to design mobile and desktop editions separately, In contrast, four suggestions for optimizing mobile web products are extracted. The full text reads as follows:

I am a supporter and fan of the responsive web design concept. But often people ask me: Why do we have to build a separate mobile version for Bagcheck, instead of using a fluid grid (fluid grids), elastic images (flexible images), and media queries queries) to provide a responsive web solution for our mobile users?

For our Bagcheck site, site performance and Web site development speed is two critical issues. Many of the decisions we make are designed to make the site as fast as possible both in performance and development (after all, we are a newly established enterprise). As part of our focus on the performance of the site, we also pay attention to the concept of "what is necessary". This means that we need to present something to different devices or users that they need. We are happy to do some optimization work. Using the dual-template system (dual template systems) we can optimize from the following aspects, such as resource order (source), media, URL structure, and application design.

Initially we built the Bagcheck in the form of a command-line interface (command-line interface), on which we created a mobile Web experience version of Bagcheck, and then quickly developed a desktop Web experience version of Bagcheck. This process is likely to affect the development approach we use.

Also worth mentioning is that although I can do the coding work, but I am mainly a designer. Because I focus on the design elements, so in this article will try to contain a number of technical aspects of resource links, if you have more resources and realize the idea, quickly sent to me!

Resource sequence (source order)

The most central part of responsive web design is to apply the same HTML code to different devices, and dynamically adjust (mostly through CSS) the appearance of the specific device itself, depending on the performance of the responsive. HTML tags have a resource order, which usually prescribes how Web pages are rendered by the browser. While JavaScript and CSS techniques can be used to change the placement of HTML elements, it is challenging to find a reliable way to reposition HTML elements on a variety of different devices.

For the simple example of a website navigation menu, it is common for devices with large screens and mouse/keyboard input to place navigation menus at the top of the page for the following reasons:

The

device screen has enough blank space that the actual content of the page cannot be extruded out of the screen. It is often necessary to decide what to display on the site through a number of key categories and action sets when these key categories and action collections are aligned to the edge of the screen/browser, they can be accessed more quickly. It makes sense to place the overall navigation of the site at the top of the page, so labeling the resource order becomes the first concern.

However, in those with the school small screen and touch as input devices, it is more reasonable to place the site's overall navigation at the bottom of the page, because:

The

small screen device does not have enough blank space, causing the actual content of the Web page to be squeezed out of the screen by the overall navigation button of the site. For small screen and low bandwidth devices, relative to the site's navigation function, users are more concerned about the content of the site's immediate access. Ergonomics factors make it easier for users to click on the target they are interested in at the bottom of the screen.

So for mobile devices, it's a good idea to place the overall navigation buttons at the bottom of a Web page, which means that the menu tags are likely to be the markup in the resource order. The resource order cannot be changed when the same HTML code is used on different devices. With a dual-template system, we can provide different tags when building bagcheck, so there will be different resource orders on mobile devices. The following illustration shows two different UI interfaces that we generate for mobile devices and desktop devices.

Of course, you can also use other solutions that can achieve similar results without providing different HTML code. Box-direction can reverse the order of the list of entries without affecting the order of resource tokens. You can also try using the Display:table method to regenerate content display and site navigation based on the actual size of the device's screen. These methods may be more suitable for you, depends on your needs.

Media

Another way to respond to web design is to use flexible pictures (flexible images) and video. When set to fill their container size format, the elastic image can dynamically resize itself according to the available white space in the browser view.

In a larger browser view, a flexible picture can fill more empty areas by displaying its original size. In a smaller browser view, the same picture can scale itself to occupy less white space. To achieve this, the browser needs some larger images, which look good when zoomed in or out.

The problem now is that the larger the image, the larger the file size. Although not all Web browsers display images in their original size, browsers need to download the entire picture file, which can quickly result in low performance unless:

combines CSS Media Queries, background images are not displayed, and do not load methods such as larger graphs that are only prepared for larger browser views. This method is not valid for those pictures that specify picture tags (image tags), only for those pictures that use the background of the CSS picture, which limits the applicability of this method. You can use a solution such as a response picture (responsive Images), which relies on the JavaScript language to replace HTML-tagged small pictures with larger images depending on the size of the browser view. Browsers that disable JavaScript and cookies are only able to display the appropriate small picture. Try a method like noscript tag to prevent unwanted pictures from loading. Use server-side solutions to detect devices that access your site, and only deliver what is necessary.

The same idea hidden under these solutions is to use media queries, background images, JavaScript, or server-side solutions to present only what is necessary to the device. This approach can significantly reduce file transfer size and improve site performance.

For example, the Bagcheck Mobile optimization template provides a 50x50 pixel sized compressed picture (average size of 3KB) for items on each list, while the Bagcheck Desktop optimization template provides a picture of 200x125 pixel size for the corresponding list item (the average size is 15KB). A page with 20 entries-300KB size plus less than 20 HTTP requests-has a significant impact on the performance of the site. We have a separate mobile template, so we just need to display the top 10 table entries on the mobile device so that we can reduce the load by another 30KB.

A total of 360KB images in a category page on a desktop device, and the corresponding page has only a 30KB size on a mobile device, which is a really big difference.

But optimizing pictures is not just a file size optimization, you can also design a few display pictures for small screen devices, rather than scaling to fit the size of the screen. This is especially important when the content in the picture is important.

The same system can be used to optimize video display. On all devices, we want to be able to perform video playback with simple click Operations. So our desktop template embeds the video file directly into the page, and the mobile template only shows a thumbnail, both of which require a simple click to start playing the video. Using thumbnails on your mobile device can make your video load faster and better control page layout/pixel dimensions.

URL structure (URL businessesflat-out)

We are not only optimizing the mobile version of the Bagcheck from the resource order and media two. In some cases, a unique URL structure will have a significant impact on site performance and the user experience of small screen low-speed connected devices.

For example, the desktop version of Bagcheck displays all the content listings, comments, updates, and preferences on a URL. We bundle these parts or modules in a single file, and then dynamically load each module without refreshing the page. Doing so creates a smooth transition in the desktop experience, but adds a lot of bandwidth burden to the mobile experience.

So the mobile web version of Bagcheck uses a different URL structure. The same URL loads the same initial content, but each child module has a unique URL and a separate page, as shown in the following illustration:

In this model,

bagcheck.com/bag/7811

Load the same content on mobile devices and desktop devices, but the following

Bagcheck.com/mobile/bag/7811/updates
Bagcheck.com/mobile/bag/7811/comments
Bagcheck.com/mobile/bag/7811/likes

Are URLs that are available on a mobile device. With such a structure, we can further optimize performance by dividing larger files into smaller chunks. It is also noteworthy that we set these mobile device-specific URLs to "nofollow" so that they are not indexed by the search engines.

application Design (creator)

The URL structure can also help optimize extended interactions on mobile devices. Organizing longer tasks or multiple-step/multiple-module applications on different pages allows users to process only one interaction at a time. On a larger screen, interaction through modal dialogs or modules/panels can usually achieve the effect of using separate pages on smaller screens.

The performance of devices between modern smartphones and desktops/laptops varies widely. For example, on a mobile device, you can get accurate location information within the 10-50m range, but only a smaller range of information on your desktop/laptop. The acquisition of this information can significantly alter the design of the application interface.

The dual-template system we use to build Bagcheck allows us to optimize for longer interactions and to leverage device capabilities within our applications. On the mobile device we started the barcode scanning function, so that users can use the mobile phone built-in camera to identify items. We have also recreated the Non-linear list creation tool (Non-linear List Creation tool) as a series of more focused and short tasks on the phone.

SOURCE Author: Luke Wroblewski September 1, 2011

Luke Wroblewski International Renowned digital products expert, profile: http://www.lukew.com/about