How far can a good front-end engineer advance the HTML5 experience by dancing in handcuffs?
These web apps are the top ten web apps that I have selected in the past year when we run the online app store with clustered browsers. It refers to the opinions of colleagues, but also has a strong subjective tendency, reflecting my personal orientation on the design, implementation and value of a “web application”. Of course, you can also think that as a product manager who thinks he is picky, I would like to award these excellent web application developers or teams on behalf of cloud browser. If you’re still thinking about whether the web experience can be comparable to the native experience (which happened a long time ago on PC), a look at these web apps with excellent experience may give you more references from the real world.
Next, I’ll introduce each of these web apps, explain why it’s ranked, and attach a screenshot. At the end of the article, I will attach a video produced by my colleagues to demonstrate these web apps through practical operation. All demonstrations are carried out in the IOS version of cloud browser.
All the opinions, opinions and comments of this article were published on January 4, 2016. You know, the web can be updated at any time. The web apps I mentioned below may be different from what I saw;
The time range is products that will be launched in 2015 or HTML5 officially launched in 2015;
All of them are domestic web apps, or mainly for the domestic market;
In fact, the original title was “top 10 web apps of 2015”.
10th place “720 clouds”
When I first saw “720 cloud”, I was shocked. It brought me panoramic and VR experience in the browser. Only recently did Mozilla’s aframe framework enable ordinary developers to quickly develop VR scenes. It can be said that “720 cloud” is also a leading technology.
Why does “720 cloud” only rank tenth in my mind? Because their list page is really not friendly to the mobile terminal, it’s OK to give them a “very casual” responsive design. Of course, panoramic page experience is very important, and list page experience is also very important. This degree of responsiveness is just like a bug.
Ninth place “yummy”
Yummy is a female community for young women in the new era. Up to now, the community is divided into “recommendation”, “live”, “OO” and “toys”. For me, this community is a “straight man cancer vaccine”. Regular consumption can prevent straight man cancer. In addition to the positioning and function of the product, its main color is black and dark rose, giving people a secret sense of security. It is based on angular development. Scrolling seems to be a pure JS implementation, with pull to refresh and infinite scroll. However, the performance of this pure JS implementation is not very ideal. Personally, I have always been opposed to using pure JS scrolling scheme. In fact, “yummy” has done a very good job.
The reason why we got to the ninth place is because of a bug. If you need to log in, you will jump to the login box directly. There is a redirection before the login box. When you go back to the previous page, you will fall into a redirection cycle, resulting in that you cannot go back to the page before you need to log in.It seems that they have fixed the bug.
Eighth place “animation home”
“Anime home” has a large number of excellent original comics. Its mobile web design is very refreshing, and its reading experience is also very good. It basically conforms to the use mode of mobile users. What’s more, it doesn’t realize spa, and it doesn’t have enough and meaningful effect.
Seventh place “busyweek!”
「BusyWeek!」 It’s the work of an independent developer. Open source is comingGitHubThe author was born in a non computer science class@Huxpro。 In addition to the basic “todo list” function, its experience is very similar to a native application. From its source code, we can see that this is a Vue project. Through leancloud, it realizes no back-end development (only one server. JS for rendering front-end code). If you want to know more about this project, you can read the source code of this project BusyWeek!」 The disadvantage of “navigation drawer” is that the usage of “navigation drawer” is not standardized: one is login box, another is synchronization box, and the other is filter. As a container component, navigation drawer is mainly responsible for switching the interface of the middle part, not the pop-up box, or updating the interface state. Of course, you can teach me that “the norm is dead and the scene is alive”, but I think that although the norm can be broken, it can not be 100% violated, otherwise users who have been used to the norm will feel very strange.
Sixth place oxygen
Oxygen is an app that focuses on the recommendation of women’s underwear. Its web experience is also excellent. It basically continues the design language of his native app, and can be purchased directly on the web. The disadvantages are similar to that of “anime house”, and spa is not implemented. The essence of this problem is “whether it is server-side rendering or client-side rendering, or which parts are server-side rendering and which parts are client-side rendering. If you have a chance, I hope to write a separate article to discuss.”.
Fifth place “flippboard China”
“Flipboard China” has always been highly rated and ranked in the top of our online app stores. In addition to the information content, it is also inseparable from its excellent experience The slide experience and reading experience of “flippboard China” mobile website are excellent. I think the reason is the very careful experience design, CDN and optimized HTTP request, and its application for GPU acceleration. It is worth mentioning that “Flipboard China” is developed based on react, which is a hot topic recently.
Fourth place: anitama
“Anitama” is a two-dimensional animation media with excellent quality on its website. When it is opened, it will show you an interesting “yellow calendar”. You can swipe between “weekly” and “Daily”. When you click the tab bar in the bottom bar, there is a water ripple feedback similar to material design. Besides, his family’s
<link>The tags are extremely complete, and the friendliness to the mobile terminal can be said to be top-level, not only common
mobile-web-app-capableAnd Google Chrome compatible
theme-color, edge compatible
msapplication-TileColorAnd so on, it can be said that “HTML5 application on the mobile end”
<head>How to write it.
Third place graphite
Graphite’s slogan is “the most beautiful online collaborative document”, which is introduced as “supporting multiple people to edit and comment on documents at the same time, so that you can easily complete collaborative writing, scheme discussion, meeting minutes and data sharing with others.” The function of web server is very powerful. It realizes real-time cooperation through websocket, and can synchronize with all other clients on the web. Although there are limited things that can be done on the mobile web, there is no problem in using the core functions of “collaborative editing” and “inviting collaborators”.
Second place “a little information”
As an information reading web app, “little information” can hardly find any fault. All news typesetting is processed twice after crawler indexing. All interface switches are free of jamming (or designed so that you don’t feel it). The layout is clear, which conforms to the specifications and has your own thinking.
First place “muzzik”
Muzzik is a music sharing community. If I guess correctly, its pronunciation is the same as “music”, and its slogan is “the music story of the best times, the placebo of the worst times” Muzzik “realizes a set of common interface between PC and mobile phone through responsive design. The overall design scheme reveals a strong personality, which should be the personality that their designers believe their user groups have. The music playing scheme uses the technology widely supported by mobile browser
new Audio()Solution, which is created in memory
HTMLAudioElementBut it is not mounted on the dom. Developers may be more concerned about which set of MV * scheme is used by the champion in this selection. The answer is angular.
In 2015, mobile web is still very weak, lacking enough local API and performance; A large number of companies still only use web app as a tool to guide their own app users from wechat or PC webpage, providing services only by the way. However, in the process of operating online application stores, we can still find a large number of excellent web apps every day. These ten are just the tip of the iceberg. It also proves that “your web experience is bad because of bad front-end engineers, bad designers, bad decision makers and bad browsers, not because of the web.”.
The article can be reprinted, but please sign the author: “cloud browser” team.