Building large-scale community sites with responsive technology

Mobile is a big trend in the future, any internet project must put the mobile strategy in a very important position, for the Echo is no exception. Although the Echo is still in the text as the main carrier of the content, it must also take into account the mobile side of the use of the scene and experience.

In general, there are three ways to move a community website: 1) to develop and provide native app;2) to create a dedicated mobile website, or Web app;3, using responsive technology, with a set of code, a website to adapt to different terminals. We weighed on each other and finally opted for the adoption of responsive design techniques.

Responsive design is one of the most Popular front-end development technology in the last two years, comparatively, it is more popular in foreign countries, and is used more conservatively in China. It is characterized by a single set of code can be good support for PC, tablet and mobile phone and other different terminal access.

In fact, the principle of responsive design is very simple, its core includes: 1. the drain grid layout; 2. Use media query resolution detection to output different styles; 3. An adaptive content element (slice). The focus of this article is not on technical details, but on the advantages, disadvantages and application scenarios of responsive design from a macro perspective, and share some of our experience and thinking in the process of using responsive technology to develop echoes.

Echo is a responsive design, mainly for the following considerations:

1) Improve the focus of development

To pursue the strongest performance and best user experience, the Native app is still a choice, but the cost of developing the Native app is high, especially for a variety of mainstream platforms that need to be developed and tested separately. The Echo team is small, and starting from scratch, if you start with the development of both the website and the native app, it will not only lengthen the cycle of the project, but also bear the risk of a high demand change due to the uncertainty of the demand. The use of responsive design allows us to focus all our energies on developing and maintaining a core set of code under limited resource conditions.

2) Reduce long-term maintenance costs

If you choose to develop a dedicated mobile site, although the initial difficulty, but in the long run, the addition of new features need to take into account two sets of code, maintenance costs are high. While the results from our responsive design have significantly increased upfront development costs, the ability to maintain mobile and PC-side functionality over the long term is maintained for future site maintenance without the need for additional consideration of mobile sites every time you add functionality to your Web site.

3) based on the site's own characteristics

In general, responsive design is very suitable for content-based Web sites, in foreign countries, the application of responsive design of typical cases are: Starbucks, Smashingmagazine, Sony and so on. Responsive design means that the URL of the page on the mobile side and the PC can be unified, do not have to judge the type of terminal frequent URL jump, for SEO has great benefits, but also more convenient for social networking site sharing and dissemination. For example, the content URLs that echo spreads in a circle of friends are consistent with the PC side, but when opened in a mobile browser, the interface that is optimized for the mobile terminal is seen.

(Example of a responsive design for Starbucks website)

Although the echo is mainly content, but at the same time there are many interactive operations, relatively complex, such a scale of the community using responsive technology to build, in the domestic and rare, so a lot of experience needs to explore in practice, the following share some echoes in response to the experience of the design summary:

1) Select the appropriate frame as the starting point

At present, the market has a lot of responsive design of the comprehensive framework, such as Bootstrap,zurb Foundation. A well-known responsive design framework like Bootstrap, with a good visual style and integrated with many common components, allows you to quickly build a complete website.

But if the style of your website is more personal (and the default style of Bootstrap is different), and you want to have more control over the underlying code, you can choose Html5boiler as the starting point, including the underlying CSS and JS libraries, as well as echo. Makes it easier for you to develop based on web standards without worrying about support for HTML5 in older browsers and the uniformity of different browser rendering effects. Yahoo! has introduced a lightweight responsive design framework called pure, which is also a good choice.

2) Transformation of product design ideas

The idea of designing mobile products in the era of PC Internet is often based on PC website, and then the PC website is designed, then the function of mobile terminal is degraded. But we tend to ignore the mobile side in the actual implementation, the use of many new technologies in the PC site and the pursuit of the best visual and interactive experience, which will make it difficult to achieve functional degradation, and ultimately have to weaken the user experience, this is a very painful process.

In the recently popular mobile first concept, it is emphasized that in the design of the product, priority should be given to the presentation of the mobile side, and then the incremental upgrade (Progressive enhancement) to the PC side, the benefits Can force us to put the mobile terminal at least as important as the PC in the position to consider. In contrast, progressive upgrades from the mobile to the PC are a much more enjoyable process because we can focus on thinking about how to make the Web site experience better on a PC without having to face the pain of functional reduction.

For example, the following is the echo of the member home page under different terminal rendering effect:

In the product design, we need to grasp the principle from the macro to the local, first of all the performance of the site at different end of the overall concept, in particular, page layout, navigation and other macro elements, not only to adapt to different terminal use characteristics, but also consider the unity of the overall style of the website.

It can be seen that in order to adapt to the requirements of responsive design, ECHO member home to take the flow of layout + card-style processing, when using different terminal browsing, navigation and content layout will have corresponding changes, and the overall style can maintain good consistency.

In order to ensure the experience of the small screen terminal browsing, we did not force the PC and mobile end in the content consistency, but the appropriate trade-offs and reorganization, such as the large screen on the left of the personal information module in the small screen is placed in the slide out menu.

The following is an example of a group page echo, the differences in the layout of various screen sizes are more obvious:

3) Select the appropriate functional component

In pursuit of speed, we used a lot of jquery-based open source components to support response, such as a date selector using DatePicker, a new user guide using the Joyride, a pop-up modal window using tinybox and a responsive improvement, The use of these mature open source components can significantly reduce project development time.

4) Make full use of debugging tools

Both Chrome and Firefox browsers have many extensions that support responsive design, which makes it easy to test the display of a Web page at different screen resolutions. In addition, the Chrome browser on Android can also support debugging on the PC via USB, which can refer to the relevant documentation.

He stone can attack Jade, echo in the development of a number of excellent responsive web site design, and through debugging tools to analyze their code implementation, such as Starbucks, Medium, Google Plus, and so on, these mature web site of the responsive design of our design ideas and code planning has a great inspiration.

Specific details on the experience there are many, here will not repeat, the entire site's function development lasted 2 months, the results are relatively satisfactory. Currently, access traffic from mobile devices accounts for approximately 1/4 of total visits, and more importantly, it is possible to synchronize support for mobile when new features are added, and we've also encapsulated the Android version of mobile apps, where the decision to use responsive design is a must.

However, we have found some problems and drawbacks of reactive technology in the process of developing ECHO, and some of our findings and countermeasures are as follows:

1) Loading additional content affects the phone's access speed

There is no absolute, a set of programs compatible with different terminals is the advantage of responsive design, but this also leads to the need for HTML and CSS files to contain content and code for various screen resolutions. In other words, even with mobile access, people have to spend more time waiting to download the content and style for display on the PC site.

Last year, Akamai's product architect, Guy Podjarny, tested 347 Web sites with responsive design, and found that the content size and loading speed of these sites were almost the same on different terminals. This situation for Chinese mobile internet users to withstand the lag speed and high cost, means the user experience is reduced.

To improve this, we have adopted a number of strategies, such as: for high-consumption images, we have specifically generated a small size thumbnail for mobile devices, so that users do not need to load large-scale, high-definition images on the mobile device, for JavaScript and CSS files, We have adopted a cache and compression mechanism to ensure that users do not have to repeat the download when content is not updated, and that the content transmitted over the network is as small as possible.

2) High level of complexity in early response design

Although the reactive technology itself is not complex, it requires a lot of extra time and effort to be well compatible with all sizes of terminals. The initial estimate of the echo of the cost of development to achieve more than 30%, simply from a one-time development costs, not necessarily more than the development of a separate webapp save much. Whether the use of responsive design is actually a balance between immediate interests and long-term interests, in other words, we pay a higher initial cost of implementation, in exchange for the convenience of long-term maintenance of the site.

Designing responsive sites requires better architectural planning than regular mobile sites, especially if you want to ensure access speed and user experience. For example, in order to optimize site access speed, it is now popular "conditional loading (conditional loading)", that is, under the same URL under the different access terminals to load different content and styles.

3) A headache for browser adaptation issues

IE8 below the old version of the browser does not support the mediaquery mechanism, so can not apply responsive technology, HTML5 support is not good enough to be compatible with a lot of difficulties. The echo gave up this time. On the PC compatible with the kernel under 8.0 Internet Explorer, when this part of the user access to the Echo will jump to the browser upgrade reminder page. However, because there are still a certain proportion of the population in China, from the flow of the IE6 still have a certain loss, which is also our use of responsive design, tilt to the mobile side must pay the price.

4) User experience optimization is difficult

Since the development of the terminal to take into account a variety of screen resolutions, not as the development of a separate mobile web site as no burden. Mobile Web development framework such as jquery Mobile, in order to simulate the effect of the native app introduced a lot of special effects, developers call it is very simple, relatively speaking, responsive design is more suitable for more plain, concise content-based site, in the pursuit of cool effect has no advantage.

Echo has made a lot of effort in optimizing the user experience, for example: we use the asynchronous loading mechanism of content extensively in the full-site list page and support dynamically loading more content when the page slides to the bottom. In addition, we also record the open position of the user's previous page through the local Storage of the browser, and when the user rolls back through the browser, they can quickly navigate to the previous location, and the optimization of these details will make it easier to access the echo through the phone to get a smoother experience.

5) Functional Limitations

Responsive design is essentially a webapp, compared to native applications, there are congenital deficiencies in the use of mobile phone features, such as photo and image uploading, recording functions, geo-positioning, etc., if your product requirements for user experience and performance is very high, or need to use some HTML5 not good support of mobile phone native features , it is recommended that you develop native apps first.

So far, the responsive design is still a controversial topic in China, compared with the native app, the responsive design is relatively small in the domestic large-scale application. In fact, the responsive design and the mobile site and the native app, from the technology itself does not compete with the points, only adapt to different scenarios. Rather than stay in contention, fully understand the characteristics of responsive technology and apply it to appropriate projects. The above is the echo in the design of the response to accumulate some experience, hope to bring you some useful inspiration.

