12 HTML5 design tips and html5 tips that are not well-known

12 HTML5 design tips and html5 tips that are not well-known
The following are 12 tips for HTML5 design that are not well-known:

1. for interaction, use the sliding operation to the right with caution.

For example, the effects of scratch and smear, and sliding pages between left and right.
Cause: Sliding to the right of an Apple mobile phone is easy to trigger and return the "upper-level page" effect.

2. for interaction, use a landscape screen with caution.

Cause: In terms of user experience, you need to enable the screen rotation function on your device to watch the video normally. the operation cost is high. For mobile phones on different screens, the ratio of length to width is different and it is difficult to display the best visual effects.

3. Visually, functional buttons, etc., away from the bottom of the page (about 128px, this size is not a fixed Z value). See the adaptation method used for refactoring (for reference only: 640*1136 px, from top to bottom, the main content is within px ).

Cause: Better devices use mobile phones on various screens to avoid button blocking.

4. Visually, use "Light overlay effect" or "layer style" effect in PS with caution.

For example, add a "soft light", "filter color", "color", and so on to the layer, unless this visual element can be merged into one.
Cause: the image cannot be cut and the visual effect cannot be restored.

5. What is a visual vector image? Want to make a simple animation? Try exporting SVG format!

Cause: Why can't we reduce the volume ......

6. Try to avoid full-screen animation, and give priority to local animation.

For example, the effects of various particles float in full screen.
Cause: If the displayed visual effect cannot be implemented by code, it means that the full screen size sequence frame is used for processing, and the volume will soar, affecting the loading experience.

7. animation, sequence frame compression tips, static images, high quality storage. Blur the intermediate motion, and boldly reduce the image quality.

Cause: the volume is compressed, and the movement status is not obvious even if there is a tooth.

8. For refactoring, please upload the image "tinypng.com" and compress it to effectively reduce the volume.

Reason: Well, why? Well, I secretly tell you that this website can not only compress png, but also jpg, and more importantly ...... Batch download is supported!

9. In refactoring, compress the music to greatly reduce the overall volume.

Tip: If there are no special requirements, you can consider making it a single-channel audio file with a bit rate of 48 or lower.

10. In reconstruction, Android does not support simultaneous playback of multiple audios ...... This means that the background music and sound effects cannot be played at the same time! (Apple is OK)

11. During Reconstruction, the video cannot be played automatically. You need to click to trigger the first playback.

(What video format is used? Mp4 format and H.264 encoder are recommended)

There are so many tips:
◆ What is the browser kernel? Well, this question is hard to tell.
Android:
5.4-6.1. If a QQ browser is installed, use the QQ browser kernel. Otherwise, use the built-in mobile phone system.
After Version 6.1, the kernel of the QQ browser is embedded.
QQ Browser: Version 6.2 and later use the blink kernel. We used the webkit kernel before.
Apple:
Always comes with the system ......
◆ Slide pages up. The visual arrow should be up rather than down. The downward arrow is used unless you click the page flip effect.
◆ Fingerprint scan? Triggering interaction on the screen? How does one blow breath to detect gas composition?
These are all pseudo-technologies, so it's good to be happy with them, haha.
However, for example, multi-screen interaction and audio analysis, technical support is provided through various interfaces to achieve some interactive operations. These are the future trends!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.