Response Design in combat: The birth of the IE10 optimized version of Cnbeta

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

Over the past two years, many Internet products have begun to apply responsive design to cross the limits of different devices and browsers. Since the release of IE10, voices have been around the developers. As a response-designed siege weapon, IE10 has added support for more than 10 HTML5 APIs, such as Web Sockets, Web brought, history APIs, drag APIs, and file APIs, and access to the Microsoft IE10 Developer's Guide to see a complete list of support. And how to use HTML5 technology for a traditional layout of the site to quickly develop a waterfall based on the style of response version, developers are concerned about the hot topic.

　　

IE10 optimized version of the Cnbeta

A few days ago, CSDN reporter interviewed the logical point of commercial communications design company project Director Shong (hereinafter referred to as Saber), they and cnbeta cooperation, in IE10, the full use of HTML5 technology to develop a touch-controlled, waterfall streaming layout of the new version. To the domestic user to bring a new experience of news browsing, but also hope to be able to provide some reference to the industry HTML5.

CSDN Reporter: How does this project work, how long is the development cycle, how to divide the development cycle? What are the most time-consuming aspects of the development process?

Shong: Project development Team A total of three people, a master development, a major design, a co-ordination of the entire project, agile development, rapid iteration. The division of labor mainly includes project management, interactive design, UI design and development four parts. Development from the original prototype built to the Web site is a total of 1.5 months time. The development cycle is divided into: prototype construction and page element effect 1 weeks, background data processing 3 days, front and back data transfer (processing background data and display in front) 3 days, ten articles to achieve 1 weeks, debugging 2 weeks.

The most time-consuming development is the debugging of different platforms, the problems we encounter can be divided into three categories:

1. Fragmentation of different resolutions

Different screen resolution needs to design different information presentation, in the page layout and function should be adjusted accordingly, this process will have a lot of complicated problems, such as when the browser width is less than 560px, the article Operation bar occupy too much screen space, So in the way that you should redesign its functionality and interaction in this case (Figure 1-1, 1-2):

　　

Figure 1-1: Explorer width > 560px Action Bar Style

　　

Figure 1-2: Explorer width < 560px action Bar style

The most time-consuming development is the debugging of different platforms, the problems we encounter can be divided into three categories:

We didn't take this into account in prototyping, so the code structure in development has to be adjusted later, which also reminds us of the importance of careful prototyping.

2. Browser compatibility debugging

For a technology, a browser may have its own implementation version, or it will not be implemented at all. For example, the location of the article page in the mobile version of Safari always has a problem, because we use the CSS Calc calculation article location to display the article page, and the browser's support for Calc is not good, finally we change to jquery to achieve.

3. CSS Maintenance and extension

As the structure of the Web app becomes more and more complex, the size of the CSS file will become larger and bigger, so how to plan the style file in the program design, so as to reduce the development and maintenance cost of CSS, and improve the scalability is very important. We use sass and compass to solve this problem. Sass is an extensible language of CSS3, which not only has CSS3 syntax and functions, but also enhances the programmability of CSS. Compass is based on the SASS framework to help people solve browser compatibility, style reset and other issues, improve development speed. Sass and compass make our style files more structured--first, by structuring the style definition, sass allowing the nested definition of the element style, so that the style of the child element can be defined in the parent element, so that the structure of the style becomes clear and convenient for future maintenance extensions, At the same time ensure that the deep level of the element style can be correctly defined, avoid writing a large number of duplicate code, followed by the structure of the file, such as we defined the basic style file, the style reset and other basic setup code here, and SASS also support the definition of variables, so you can define the color of the UI as a variable to put in, You can use this variable in other files by referencing the file by "@import". In this way, we are equivalent to having a global "config file" where making a modification can work with all files. You can also create separate sass files for the style definitions of the important HTML elements, easy to find and modify, and use compass to merge files before deployment.

CSDN Reporter: IE10 to the HTML5 of the support embodied in where? How to embody in the project?

&nbsp; &nbsp; &nbsp; &nbsp; Shong: It helps to develop and maintain a web app by enabling developers to write more semantically explicit HTML files than Ie9,ie10 supports more HTML5 tags. A more semantic HTML file gives you a clear idea of the structure of the element:&lt;nav&gt; is defined in the UI control,&lt;summary&gt; it must be a summary of the following article, which shortens the understanding time. Take our project as an example, a separate article consists of three parts: the content of the article, the comments, and the manipulation controls. The content of the article is expressed in &lt;article&gt; label, and the information of the title and time of publication is included in the &lt;header&gt; label, and the content is put into a &lt;section&gt; tag. The comments section can be viewed as a "sidebar", so use &lt;aside&gt; tags to indicate that each comment is a &lt;li&gt;. Action controls play a role in navigation, you can close the article, view the previous and next article and share, so we use &lt;nav&gt; to mark the navigation. We use jquery template to make various parts of different templates so that we can use the corresponding APIs to get data from the server to render the templates and insert them into the DOM, the semantic document structure helps us to easily split the parts of the article page and design it into a different template. In addition, IE10 also supports drag-and-drop operations, Web sockets, and web worker HTML5 functions, it is worth trying. &nbsp; &nbsp; &nbsp; &nbsp; &NBSP;IE10 for CSS3 also have good support, you can use CSS3 3D transform, animation, elastic box layout and multiple arrangement, and so on, and these APIs are IE10 hardware accelerated, Therefore, the efficiency of execution is much higher than that of browsers that do not use hardware acceleration technology. Our project uses the CSS3 transitions function realizes the button state the gradual change effect, the top navigation color is uses the CSS3 gradient to do the gradient; The ten popular Articles page and the corner effect is uses the turn.js realization, it uses is the transform, Rotate, translate and gradient: each page of the article consists of the area Div-1 and shaded area Div-2 that display the content of the article, and the process of paging is actually using rotate and translate to modify the angle and displacement of the Div-1. It is deformed by transform (as shown in Figure 1-3): &nbsp; &nbsp;

Figure 1-3: Using transform, rotate, and translate to make the div-1 deformed

In order to make the page effect more stereo, turnjs use gradient for the page-turning process to add shadow effect (Div-2), the shadow is based on the deformation of the page changes in real time, the principle is calculated by real-time gradient stop position (end point) obtained, as shown in Figure 1-5:

　　

Figure 1-4: Dynamically changing shadow effects generated using gradient

By using the MS Pointers API to add support for the IE10 gesture operation, we finally created a true book-flipping feeling for the top ten popular articles. With the help of IE10 hardware acceleration technology, the calculation of the deformation, displacement and angle transformation of a large number of CSS3 are transferred to the GPU to ensure that the process of turning the book is more natural and smooth.

We use media query to implement the response layout for the article page for different browser widths, for 1. Width is greater than 1230px;2. Width is between 1230px and 560px; 3 width is less than 560px defines different arrangement styles for article contents, comments, and article action bars. The biggest benefit of responsive layouts is that you don't have to think about devices. For our project, we only need in the desktop browser for each width range to design a most suitable article style, and then for different mobile devices to fine-tune, add or subtract function on it. The most important task before that was to modularize the CSS, first defining the style properties that were not changed, and manipulating only those mutable attributes in media query, which was a great help for development and debugging.

CSDN Reporter: How do you view the future development of HTML5?

Shong: We feel that HTML5,CSS3 and JS are now the only cross-platform-supported technology, whether building a Web site or a web app can be efficiently posted to each platform. HTML5 really do not write once, run everywhere, but as long as the willing to optimize the development of the entire cross-platform is still very efficient, this is what I do IE10 optimization version of the Cnbeta experience.

HTML5 design is designed to make the Web site can truly become functional and responsive to local applications comparable to the network applications, along this line of thought, the question points to whether HTML5 can form the same as the current application store ecosystem to contend with. Most importantly, will HTML5 apps be better for users than local apps? The answer is: no one knows. But we can see that browser performance is becoming more and more powerful, you can experience the cut the rope,contre jour such a game from the mobile side in the IE10, countless people in the mail group discussed how to use Backbone.js to build large web apps. We've seen it evolve, but we're looking back at the implementation efficiencies, compatibility, bugs, and so on. This is a cycle, only developers to try, feedback problems, platform vendors will know how to improve, only the implementation platform is more robust, developers are willing to develop a better application for it to attract more users, so HTML5 future development depends on ourselves.

It is worth pointing out that it is not only browsers that support Html5,windows 8 has already supported local applications built through HTML5, so the future HTML5 and JS can also become a local application development technology. #p # subtitle #e#

CSDN Reporter: IE10 optimization version of the Cnbeta how to adopt a responsive design? What problems and how to solve them?

Shong: We use media query to implement a responsive layout of the article pages for different browser widths. Browser width greater than 1230px, the comments of the article are placed on the right side of the content, the action bar of the article is placed on the right side of the comment, the width is between 1230px and 560px, the comment is placed below the content of the article, the action Bar is attached to the right side of the article, we set the overall width of the In this way, the contents of the vertical arrangement will not appear very full, affecting the reading effect; the width is less than 560px, the usable area is already very small, so we set the width of the article and comment content to 100%, hide the article operation bar, when need to pull out.

Two minor problems encountered in development:

Calculate relative width

When the width of the browser is between 1230px and 560px, we begin to set the overall width of the article to 80% of the width of the browser, and the content of the article is 90% the width. In order to ensure that the action bar on the right side of the article will not be distorted with the width of the browser, we give it a fixed width of 60px, which has a problem, the content width of the article will be 90% of the overall width of the story, but the operation bar width is not 10%, so as the browser There is an increasingly narrow gap between the article and the Action Bar. We use CSS Calc () to solve this problem, which is used to compute the relative length of the CSS function, as long as the content of the article to the width of calc (100%-60px) on it (WebKit and Moz browsers need to prefix the corresponding). For browsers that do not support calc, the width is still set to 90%.

Use media query in JS

When the page style changes according to the width range defined by media query, we want JS to do something at this point, but the width detected by JS does not match the width defined by media query. The workaround is to use the MQ function provided by Modernizr to match the media query defined in the CSS, or you can use a JS library such as Enquire.js.

CSDN Reporter: In design, especially waterfall flow and UI design, what do you think, what are the considerations?

Shong: In design, the reason for the waterfall flow is because the Cnbeta content is very large, updated very frequently every day, and the article does not have a clear classification, this aggregate content is suitable for waterfall flow typesetting, this layout as much as possible to use different rates to show content, and through the infinite pull through the rolling loading mode , it also makes it easy for users to see more articles.

The UI aspect, we first want with Cnbeta own brand style unification, cannot let the user feel "Wow, this still is CB". Another is that we are from a web app to define the experience, then when the IE10 full-screen browsing, the interface button is enough to meet the user's operating requirements, the size of the button is suitable for touch, etc., are the issues to consider.

CSDN Reporter: What development tools or frameworks or open source products are used in this project?

Shong: Used in the open Source JS library includes

1. Modernizr: Low version browser function detection and graceful demotion;

2). Turn.js: Ten popular articles of the book effect;

3. jquery Masonry + Infinitescroll: Realize news Waterfall flow layout and infinite load function;

4. jquery Nicescroll: Change browser scroll bar style, scrolling rate, etc.

5. jquery templates: html-based templates, which allow you to define variables in HTML, and assign values to variables using JS objects or array-defined data, the template becomes an ordinary HTML fragment that can be inserted into the DOM via jquery. We define different templates based on the backend interface provided by Cnbeta, and use the data from the server to render the corresponding templates and insert them into the DOM.

6. jquery Tipsy: Generates a control similar to the Facebook message reminder box;

7. Trunk8: Cut text According to the size of text box, used for news digest;

Open Source CSS Framework:

1). SASS

Sass is an extensible language for CSS3, which not only has CSS3 syntax and functionality, but also enhances the programmability of CSS. You can define variables and functions (mixins) in sass, and you can define the style of child elements directly in the style of the parent element; Sass also allows style inheritance, such as you can inherit the style of B in the style definition of element A, along with the style of all the child elements of B. The structure of the style definition becomes clearer and easier to develop and maintain. When testing, compile the sass file into a CSS file.

2). Compass

Compass is an open source framework based on Sass, which provides the calling interface in functional form for common sass functions, such as fixing the style of float elements, you can introduce "@include Clearfix" directly into the style. Compass will compile this clearfix function in real time into CSS code, and if you want to add a pixel fillet to an element, use the "@include Border-radius (1px);" Compass will automatically add the prefix of each browser to the CSS file before Border-radius. Not only that, compass also support plug-ins, if you want to use bootstrap, download the corresponding plug-ins, in the sass file "@import" this plugin can be.

Development tools

1. Vim: Artifact ...

2. Diffmerge: File merging of projects

3). IE10 's F12 development tool

CSDN Reporter: Do you have any suggestions for a team that has plans to do a cross-platform web app?

Shong: We think that the biggest feature of Cross-platform Web Apps-and also its biggest advantage-is that it's easy to apply your desktop-side business logic to your mobile platform, allowing your service to reach the widest audience. So the most important task here is how to optimize for the mobile end: whether to reduce the functionality of unnecessary functionality, whether to add multi-touch capabilities to a device, whether your UI is suitable for touch, and so on. After all these questions are considered clearly, the next step is how to implement Cross-platform, the way we are responding to the layout, which is easy to develop, ensure the consistency of the platform experience, but the cost of traffic. There are other ways to achieve cross-platform, for example, the development of a mobile phone-side of the simple version of the site, speed, save traffic, the price is sacrificing some of the interface of beauty; there are also mobile-side mixed-mode Web apps, you can use local UI controls, content from the Web, which greatly improves the user experience, But it adds some cost to cross-platform development. You can see the pros and cons of these cross-platform approaches, so there should be a trade-off between functionality, response rates, development costs, and traffic.

Regardless of the way you use it, it is a necessary task to plan your CSS. You can use SASS and compass to plan CSS, for example, you can define a _base.scss file to contain some basic work: style reset, set variables, define different sass files for different element styles, make it easier to find and modify, and then decide which files to merge at compile time.

Finally, the hierarchy of business logic. The clearer the structure of the Web app, and the lower the coupling between functions, the easier it is to make cross-platform work. At present, the front-end MVC framework such as Backbone.js is widely concerned, we are also considering using backbone to refactor the code, and we believe that as the Web app becomes more and more complex, MVC will become a common way for people to construct front-end code.

Something: There are a lot of companies that focus on responsive design and there's no stopping the debate. But the fact is that more and more companies are starting to try this design pattern, and the new Cnbeta is a good show. IE10 tightened the embrace of web standards, in addition to support for the new features of HTML5, IE10 provides rich CSS support and provides animations, transitions, and transformations in many new CSS tools. IE10 also provides experimental support for next-generation layout tools, such as CSS grid layouts, CSS Multiple-column layouts, and CSS areas. Developers may wish to pay more attention to them.