"One network", two flavors: responsiveness to adaptability

Source: gbin1.com

Editor's words: This is Mobify's Ceo,igor Faletski published a blog post, mobify, E-commerce optimization platform, for smartphones and tablets to provide a tool to adapt to the site.

You may have heard people say, "We live in the post-computer age." What does this mean for Web developers? It means that your site has 30% to 50% of traffic coming from mobile electronics. It also means that desktop users or laptop users will soon become a minority in the network.

How are we going to cope with this transformation of user model building? We've crossed the M-dot or T-dot era and stepped into a period dominated by response and adaptive design technology, which the world's Web site calls "a network approach." The main advice of the consortium is that "the so-called ' one network ' means that, in terms of rationality, the network should provide users with the same information and services, regardless of what terminal device the user is using." ”

For developers, the use of "a network" is not only to let the site today on the smartphone or tablet computer navigate work, but also today, we can not imagine, facing the future of the terminal to work correctly.

We currently have three of the most common ways to develop "one Web" Web sites: Using responsive design, client-side adaptive design, and server adaptive design.

These three development design patterns, there is no one who is best or who is the worst, each has its own advantages and disadvantages, and smart developers will be in the development of the three methods before taking into account the pros and cons, so as to choose the most appropriate way.

Response-Type Design

Response-Type network design is the most popular "one network" design approach. This approach uses CSS media queries to change the display of the site based on the size of the different terminal displays. From the Boston Globe, to Disney, to Indochino, the number of responsive web sites is increasing rapidly.

One of the most important advantages of this approach is that for all terminal devices, designers only need to use a template to define how different screen sizes can be displayed in CSS. Moreover, these designers can continue to use the technology they are familiar with, such as css,html. In addition, there are now more, friendly, responsive open-source tools, such as Bootstrap or foundation, that simplify the process of building response sites.

On the other hand, there are few quick and easy ways to complete responsive design. To be responsive, organizers often need to assume a complete site rebuild.

Design and testing can be tedious, as it is difficult to design the user experience for each possible device. We see that the layout of the responsive web site looks like a piece of puzzle, not a fit. Responsive web design is best applied to mobile device priority development, that is, mobile device use cases are considered as the top priority in development. Progressive enhancement processing, which extends the design to tablet and desktop use cases.

Performance is also a big headache for responsive web sites. In Mobify, our recently completed analysis of 15 popular e-commerce sites points out that in these sites, the home page loads an average of 87 resources and 1.9MB of data, and some response pages have a 15MB size.

The data that is loaded is so large because responsive web sites need to overwrite all of the devices. Your users use only one device, but he needs to wait for all the interface elements and resources to be fully loaded before they can be browsed. Simply put, the performance issue has touched your bottom line. On smartphones, the user waits a second, and the conversion rate drops by 3.5%. It only takes 3 seconds for the user to choose to completely leave your page.

When responding to a Web site quickly becomes a standard, it poses new challenges for online commerce, including how to handle images, optimize the performance of mobile devices, and have to face the problem of building a Web site into a mobile device.

Client Adaptation site

Adaptive design is based on specific equipment and environment, based on the nature of response design, provide a targeted user experience. It uses JavaScript to provide the advanced features and powerful customization to enrich the site. For example, an adaptive Web site can only provide retina quality images for retina displays (such as the new Ipad,ipad mini), whereas a standard monitor can only receive low pixel images.

There are two types of adaptive design, one is in the client, that is, the user's browser application of adaptability, the other is server-side, the need for heavy detection of a large number of devices and then load the appropriate template. Client-compatible Web sites are used such as threadless and Ideeli. One of the most important ways to adapt to a template is to reuse a set of HTML and JavaScript between different devices, which simplifies the management and testing effort.

Adapting to a Web site means you don't have to rebuild your site. Instead, you can build existing content while transferring the layout of the mobile response. For an expert-level developer, this approach can also be tailored to specific device or screen resolution. For example, for many mobify online fashion retail customers, their mobile traffic 95% comes from iphones. Client-side adaptation means that they can specifically optimize Apple's smartphone.

Unlike the corresponding design, the adaptation template ensures that only the necessary resources are loaded on the user's terminal. Because device detection is moved to the mobile terminal to detect itself, CDN networks, such as Akamai and EdgeCast, can use most of the caching capabilities without disrupting the user experience.

The client adaptation method has a higher threshold than the response design in use. Developers need a solid JavaScript base to use this technology. It also relies on a template that already exists on the site to base it. Finally, because client adaptability adds a layer of code to the underlying code you already have, you have to keep your site as a whole.

Server Adaptation Web site

We can use a variety of methods, server-side plug-ins and user agent detection to complete the development of server-side adaptive Web site. Web sites that are developed with server-side adaptability include Etsy,one Lings Lane and onlineshoes.com.

Why do we choose Server-side adaptation to develop the site? Typically, it provides a unique template for each device, making the site more customizable, and it retains device detection logic on the server side, allowing smaller mobile pages to load faster. In addition, there are now many server-side plug-ins available to most CMS systems and e-business systems.

This is not a good way for the timid-it usually requires a significant change in your backend system, which may require a lengthy (and costly) implementation process. The requirement to manage multiple templates increases the cost of day-to-day maintenance. Ultimately, this approach can also run into performance problems when the server is overloaded. When mobile user agent detection works on the server side, the shared caching mechanism for CDN deployments such as Akamai needs to be shut down. Otherwise, it will slow down the experience of desktop users and mobile users.

Of course, most companies are still grappling with the response, and they are not ready to face more complex flavors-adaptations. However, more and more competition and mobile communications will drive more and more organizations to experiment in three ways and eventually find a way that best suits their users.

Article Source: http://www.gbin1.com/tools/design/20130516-responsive-vs-adaptive/