Research on the multi-terminal adapting Web system construction

Among the various applying patterns of Internet programs, the Web system based on B/S architecture has the congenital advantage of cross platform. The same application could be accessed via the same domain name with any operating system, as long as the client-side software (browser) is installed. Thus, in the development of Internet application, if the function could meet the requirement, the Web system construction should be given the top priority. With the wide development of information technology, such as intelligent terminal, mobile interconnection and cloud computing, how to construct the Web system which could adapt to multi terminals is deserving of research. Based on a systematical and comprehensive investigation, this article aims to explore feasible ways to construct the multi-terminal adapting Web system catering to the current social concern, through feasibility analysis of prototype design.


Introduction
First of all, the definition of the B/S architecture application needs to be clarified. There are some differences between the B/S architecture applications and website, although there are still tight connections. The B/S architecture application is generally a browser-based internet application with complex interactions and operations. While, the website is primarily for exhibition which only could provide simple interaction. In other words, website is a lightweight practical pattern of the B/S architecture application. In the following sections, the word 'Web system' could represent both B/S architecture applications and website.
The 41th Statistical Report on Internet Development in China [1] reported that: in the third quarter of 2017, the weighted average of peak-time and non-peak-time download speeds for fixed broadband users was 16. 4 Mbit/s, the broadband subscribers accessing the Internet at a speed of 20Mbps or above accounted for 91.2% of the total broadband subscribers, and the average download speed for mobile broadband users accessing the Internet via 4G network was 15.4 Mbit/s. Mobile broadband Internet can now basically cover cities and counties uninterruptedly and cover some relatively developed areas in towns and villages. The coverage and users' experience of 4G network in China are superior to those of many developed countries. The internet penetration rate in China is 55.8% and the number of the net citizens in China has reached 772 million, and the mobile net citizens are 753 million that is 92.0% of the net citizens. By December 2017, China had 5.33 million websites, representing a yearly increase of 10.6%.

Web system affected by latest information technique
Web system is one of the important form of the internet application, it is an ideal way for the enterprises to improve the working efficiency, and to demonstrate and publicize to the public. According to the Statistical Report data mentioned above, the number of mobile Internet users in China reached 753 million, which indicates that the intelligent mobile devices represented by cellphone have become the foundation of connecting the Internet. The utilization ratio of PC and laptop computer all declined. The use of mobile device has constantly squeezed the use of other devices to access the Internet. In order to adapt and lead the changes, the enrichment and expansion of the traditional Web system for the multi terminals are necessary. But so far, the reversions of the most traditional Web system have not been completed yet.
Comparing with the PC and laptop computer, the mobile device represented by cellphone and iPad has its own characteristics. First, the interactivities and operations are generally done through touch screen gestures without additional Mouse. Second, the screen of the mobile device is relative small and the operational area is quite limited. The unique nature of the mobile devices has led to a poor browsing experience and a difficult interactivity when it accesses to the traditional Web system. At the current stage, most Web system of enterprises have not been enriched for multi-terminal adapting, which is due to the high cost of development and later maintenance. Based on a systematical and comprehensive investigation, this article aims to explore feasible ways to construct the multi-terminal adapting Web system catering to the current social concern, through feasibility analysis of prototype design.

Construction modes
This study investigates a large number of domestic/abroad Web system including the social media websites, university websites, government websites and enterprise websites. The statistical and systematical investigation suggests that the multi-terminal adapting Web system mainly has three modes of construction. The first mode is to set up the Client-side responsive Web system, which could be accessed from different devices via the same domain name. The second mode is to construct different versions of Web system for PC and mobile devices, respectively. Each version of website is equipped with individual layout and domain name (or path). The last mode is to design the Server-side responsive Web system, which also could be accessed by the same domain name. The details of each mode for the multi-terminal adapting Web system construction are described in the following sections.

First mode: Client-side responsive Web system
For the first mode, the server sends exactly identical HTML code to client after receiving the requests. The client-side browser sets up the layout and interactive approach following the CSS typesetting instruction, JavaScript programmed instruction and the characteristic of individual devices. This mode basically relies on the Media Query function of CSS3 assisting with the JavaScript programming. The schematic diagram of the Client-side responsive Web system display has been shown as Figure 1.
Here are some merits and demerits of the first mode. Apparently, the later maintenance of the Client-side responsive Web system is convenient. For example, only one design template for the Web system needs to be debugged, which could adjust the display effects for all kinds of terminals. Furthermore, the server sends the same HTML code to the client-side browser after receiving their requests without any personalized process, which allows to make the most of the static web page prebuilt technology to improve the access experiences. However, the lower version of IE browser cannot support the Media Query function of CSS3, which is not available for accessing the client-side Web system.
Also writing client-side template for the Web system embraces the relatively redundant HTML code to meet the requirement of the multiple terminals serviceability [2] . This kind of redundancy of HTML code can be accepted and tolerated based on the outstanding internet speed and computer performance at current stage. While, this website construction mode requires the excellent programmer with higher special technology.

Second mode: Individual Web systems for different devices
Currently, the second mode is the mainstream way to construct a Web system for mobile device. If the second mode is used to build an individual version Web system for mobile device, the function of existing PC version Web system is not affected. Under this mode of the multiterminal adapting Web system, the main domain name is generally linked to the PC version, while additional subdomain (or path) needs to be provided for the mobile terminal version Web system. The Server-side program directs the client access request to the subdomain (or path), if the request is detected to be sent from mobile devices such as cellphone.
There are two significant advantages using the second construction mode. One is it could make full of the static web page prebuilt technology to improve the access experiences. The other one is it is convenient to modify the individual versions Web system for PC, respectively, and mobile device, and to optimize the access experiences deeply. That is because the two different versions of Web system are independent with each other. However, there are certain disadvantages for this construction mode. The construction cost and maintenance cost are obviously increased, and there always are two or multiple URLs (considering iPad version Web system) for one article or message, due to the independence of these Web systems.

Third mode: Server-side responsive Web system
The working principle of the third mode is that the server timely generates a HTML code after receiving the access request and sends it back to the client. The HTML code should match the characteristics of each Client-side device. All of the access requests should be personalized, so that the congruent HTML code for the individual devices could be sent to the Client-side browser.
For the third mode, each article has the uniqueness URL. Web system is identical to the second mode in terms of the access experiences, in light of its perfect performance on different devices based on the specific and targeted HTML code. However, the complex <768px <992px >=992px Figure 1. Schematic diagram of the Client-side responsive Web system display programming is needed on both Server-side and Clientside to adapting the multiple terminals. Thus, the programming code is less focused, which leads to the inconveniences for the later maintenance and debugging. Besides, the static web page prebuilt technology is not appropriate, because of the instant and personalized processes of each request, which may result in a slower accessing speed.

Determination of the construction modes
Based on the systematical and comprehensive investigation, this study suggests that the Client-side response mode is a future trend of the multi-terminal adapting Web system design, the reasons are as follows.
(1) The workloads of development and maintenance are enormously reduced compared with the other two modes of construction. The construction work mainly focuses on the programming of the Client-side, and it changes little on the Server-side. This avoids the requirement of complex programming on both Server-and Client-sides for adapting the multiple terminals. So it is easy to find the focus in the later maintenance and debugging. (2) The HTML code loaded to the Client-side is relatively redundant under this construction mode. In consideration of the significant improvements of the Internet speed and the computing power of the devices, the relative heavy code does NOT result in intolerable costs. (3) Similar with the third mode, each article also has the uniqueness URL using the Client-side responsive Web system. (4) The compatibility of the lower version IE browser is the biggest obstacle to generalize the Client-side responsive Web system. While, based on the systematical analysis, the total market share of IE browser continues to decrease, let alone the lower version. In China, the website construction has been based on the browsers those perform good compatibility, such as WebKit, Gecko kernel browser and the higher version of IE browser, without considering the lower version IE browser. The website construction based on the newer version of browsers has become a certain scale abroad. The Clientside responsive Web system has been the mainstream. Furthermore, the information displays of the Web system mainly depends on dynamic data, in terms of the complex functions of computation and interactivity. The static web page prebuilt technology is not a good option. The Client-side responsive Web system could reduce the coats of separate generating and maintaining of multiple web pages.

Additional description of the Client-side responsive Web system
On the Client-side responsive Web system, the server sends the identical HTML code to the individual devices, which is the combination of the HTML label, CSS3 and JavaScript. The webpage layout and the interactive approach are set up according to the code instructions and the access device characteristics after the client-side browser receiving the HTML code. Ultimately, the website presented to the client is suitable for the screen size and interaction characteristics of the access terminal. The resolution of client devices is the main factor affecting the layout of web pages. Client-side responsive Web system is reflected in the below ways. (1) The HTML code delivered by the server is identical. (2) The HTML code is responsive to the characteristics of the user device, which is the basis to reasonably adjust the webpage layout and human-computer interaction mode.
(3) The final displays of a website are different although the HTML code delivered by the server is same, due to the individual responses of each type of device.
The layout of the Client-side responsive Web system basically relies on the Media Query function of CSS3. There are two ways to introduce the Media Query function. One is link element, the other one is CSS. The first method is based on the CSS2 standard, and its biggest drawback is that the times of http request are increased [3] . The second method, achieving the Media Query in the style sheets, is the better choice. Each basic media query in a style sheet contains all of the default media types and their properties, presented as follow: @media all and (min-width: 700px) { } The keyword of 'all' could be omitted, 'and' or 'or' is used to combine the multiple conditions. Media type is the medium for displaying web pages, which is used to distinguish computer screen, cellphone, iPad, etc. Most media types have been abandoned, only a few of them can be selected: 'all' means all kinds of devices; 'print' means printer or print preview; 'screen' means computer screen, cellphone, iPad, etc.; 'speech' means sound equipment applied on the screen reader. The media attributes that currently can be detected by Media Query contain: width, device-width, height, device-height, orientation, aspectratio, device-aspect-ratio, color, color-index, monochrome, resolution, grid, etc.
Since CSS3 is not perfect for the detection of media type, the visual width of the browser is the main factor to determine the device type at the current stage. If the precise type of the device is needed to detected, JavaScript programming is the solution. Generally, if the browser visual width is smaller than 768px, the device is considered to be cellphone; if the browser visual width is smaller than 992px, the device is considered to be iPad or antiquated computer; otherwise it is considered to be PC. The division intervals could be modified according to the special needs of the program. In addition, with the improvement of screen resolution, the above division intervals probably need to be adjusted accordingly.
The core functionality of the Client-side responsive Web system is the timely adjustment of the website layout according to the user terminal screen size via the complex instructions of CSS and JavaScript. The set of instruction is characteristic of system, complexity and repeatability. So a large number of responsive front-end frameworks are available in the open source community. These frameworks, such as Bootstrap, Foundation, Golden Grid System, Skeleton, Less Framework, Gumby and so on, could provide not only the infrastructure for building Client-side responsive Web system, but also some commonly used components. This article makes a brief introduction for the representative frameworks. (1) Bootstrap framework is the most popular front-end component library at present, which was built at Twitter. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. Its functions basically cover all the infrastructures and components of building a responsive Web system [4] . (2) Foundation framework has introduced the Flex Grid, an optional replacement for the standard grid, which adopts the latest technology to become the representative of the advanced responsive front end framework. The concept of framework design is mobile-oriented, so the Foundation framework shows a better performance on the mobile devices [5] . (3) Golden Grid System is a folding grid system for responsive design. The idea is to take a 18-column grid, use the outermost columns as margins, and use the remaining 16 to lay elements out. On smaller screens the 16 columns could be folded into 8, 4 or 2 to fitting the screens of iPad or cellphone. Because the responsive front-end frameworks are numerous, the study cannot write all go into detail be limited by the space restrict.

Conclusions
Among the various applying patterns of Internet programs, the Web system based on B/S architecture has the congenital advantage of cross platform. The same application could be accessed via the same domain name with any operating system, as long as the clientside software (browser) is installed. The cross platform character of Web system is mutually beneficial in general. (1) For the society, the application of Web system could reduce the manpower and resources; (2) For the website owner, the application of Web system could reduce development and maintenance costs; (3) For the clients, the application of Web system could reduce the installation of additional applications; (4) For the developer, the application of Web system could reduce burden of development and maintenance, because additional development of specific application for each operating system is not necessary. In view of the above-mentioned benefits, in the development of Internet application, if the function could meet the requirement, the Web system construction should be given the top priority.