Mastering H5 Design: Fonts, Layout, Animation, Audio, and Adaptation Tips

Last year JDC produced many outstanding H5 projects, gaining valuable experience and lessons. This article discusses fonts, layout, animation, audio, adaptability, and ideas, using our own examples to illustrate effective H5 design.

Within the limited space of a mobile screen, our experience shows that the best results come from a simple, focused design with a single core element; avoid clutter and highlight the main focus.

For example, JDC’s “Paipai Twelve Constellations Handbook” uses only simple graphics and centered text. Another example, Coca‑Cola’s “We Are Here, We Care” uses left‑aligned layout, which quickly captures attention because the brain perceives the clean design as easy to read.

1/ Early collaboration with front‑end designers is essential to decide motion effects such as displacement, rotation, scaling, frame‑by‑frame animation, fade‑in/out, particle effects, photo processing, and 3D displays (see http://fffNaNiscm.com for H5 capabilities). JD’s “HR Recruitment” H5 uses displacement, scaling, and fade‑in effects, while the “JD Microstore Seven Sins” page employs particle effects for realistic coin drops. The viral Victoria and Tesla H5s use erase effects and blurred masks to spark curiosity.

2/ For background motion, easing effects are recommended; for instance, the “JD Management Trainee Recruitment” page features a subtle shooting‑star animation that adds flair without stealing focus.

3/ Complex or heavy animations can hurt load speed and user experience, so they must be used judiciously.

When adding background music, keep it subtle and progressive, allowing users to mute it before it becomes intrusive. For game‑type H5 pages, a toggle may be unnecessary because users expect the audio.

Music buttons should be clearly visible; using other UI elements as icons can work well.

Recommended audio specifications for front‑end designers: MP3, mono, under 30 seconds, file size under 100 KB (compress with tools like Adobe Audition). For looping background music, ensure seamless head‑to‑tail connection.

H5 can be categorized into three types:

Display type: Simple page‑flip or scrolling layouts for showcasing products, features, or events; often built with online H5 generators.

Interactive type: Click, text input, swipe, shake, gravity‑sensor interactions; e.g., the “Paipai Christmas” activity used shake‑to‑randomize for user engagement.

Game type: Small logic‑driven games that calculate scores or outcomes, such as “Jump” mini‑games.

Product type: Long‑term H5 products like shopping pages that receive frequent visits.

Design dimensions typically start at 640 × 1136, with a reference line at 960 px height; keep main elements below this line for better adaptation across devices. Android screens can stretch slightly without major issues.

Responsive Web Design (RWD) adapts layout, images, and CSS media queries to user behavior, device platform, screen size, and orientation. Prefer solid colors over gradients for better performance.

Content that encourages sharing usually falls into three categories: direct benefit (e.g., rewards), useful novelty, or participation in a game/test. Coca‑Cola’s polar‑bear photo‑share campaign and UJEANS’ denim‑selection tool are good examples.

When designing an H5 page, always consider whether you and your audience would want to share it—does it entertain, inform, or provide value?

In the “1212陪你一二到底” campaign, the final screen introduced a coupon offer after engaging copy and visuals, highlighting the importance of persuasive copy as the soul of the H5.

For both display and interactive H5, the core is the idea; often the concept phase takes longer than the actual development.

For instance, turning a simple iPhone 6 announcement into a “Goldbach conjecture” style puzzle made the share incentive more subtle and enjoyable.

In the past year JDC created over ten H5 pages. Compared with native apps, H5 offers shorter development cycles, efficient distribution, and lower update costs. Especially for games, H5’s potential continues to grow, and we will keep exploring new technologies and creative marketing methods.

Thank you for reading; stay tuned for the next episode!

Recruitment is always open!

Copyright Notice

This article is original content from JDC; please credit the source when reproducing.

WeChat ID: JDCdesign