This article explains the sticky‑footer problem when page content is short, defines the sticky‑footer effect, and provides four CSS‑based solutions—absolute positioning, calc(), table layout, and Flexbox—detailing their code, advantages, and drawbacks for responsive web design.
This tutorial walks through three practical approaches—pure JavaScript, jQuery, and pure CSS—to create a responsive waterfall (masonry) layout, covering the required HTML structure, script inclusion, dynamic loading logic, and the ultra‑simple three‑line CSS solution.
This article provides an extensive overview of frontend optimization techniques, covering work efficiency, speed performance, stability, responsive design, cross-browser compatibility, SEO best practices, and accessibility measures, offering practical tools, workflows, and strategies to improve web development productivity and user experience.
Learn how to create responsive, full‑screen mobile event promotion pages by mastering background‑size techniques, viewport ratios, CSS positioning, animation integration, and handling special cases like transform conflicts and viewport‑height units, ensuring consistent layouts across diverse devices.
In this second‑edition Quick Q&A, the author answers practical CSS questions about choosing a build setup, customizing radio button colors, using Flexbox for responsive layouts, and selecting useful books and resources for front‑end developers.
Discover how using the dedicated development browser Blisk, combined with BrowserSync’s automatic reload feature, can streamline debugging, isolate tabs, manage cache, and preview responsive designs across multiple devices simultaneously, enhancing efficiency for front‑end developers.
This article explains how to design and implement a fully responsive web page by planning the layout, structuring HTML, applying CSS techniques like flexbox and media queries, and enhancing interactivity with JavaScript, while sharing practical code examples and best‑practice tips.
This guide explains why responsive design matters, defines breakpoints, shows how to set the viewport and media queries, and offers practical rules and examples for planning breakpoints across phones, tablets, and various desktop screens.
This post presents a mobile‑first layout challenge: three 60 px orange circles must be spaced equally across a full‑width yellow background using only HTML and CSS, while remaining compatible with Android 4.0+ and avoiding JavaScript.
This article examines how to choose between px, %, and rem units for mobile web layouts, discussing width and height uncertainties, the role of media queries, and practical recommendations for using each unit effectively across various screen sizes.
This article walks through the development of the HandQ Weather H5 page, covering REM‑based responsive layout, Flexbox sectioning, HTML5 canvas charts and animations, CSS3 transitions, and a suite of performance and compatibility optimizations for mobile browsers.
This article explores how to design smooth, intuitive mobile and tablet experiences when devices rotate, presenting four orientation design categories, real‑world examples, visual cues, and best‑practice recommendations for developers and UX designers.
This article explains how WeChat introduced a global font setting and configuration‑driven UI parameters to adapt iOS interfaces across iPhone, iPad and split‑screen devices, handling logical resolutions, proportional scaling, and webview font adjustments.
This article explores the challenges of traditional responsive design across diverse mobile platforms, defines responsive design, outlines its advantages and pitfalls, and presents a comprehensive workflow—including product planning, UI/UX design, testing, development, and on‑demand resource loading—to achieve efficient, cross‑device web experiences.
This article outlines five frequent user‑experience errors—overlooking micro interactions, over‑investing in homepages, over‑reliance on text, generational design gaps, and ignoring multi‑screen behavior—and offers practical guidance to create more user‑centric websites.
With mobile device usage surpassing PC, the article explains why HTML5‑based H5 pages are essential for modern media, compares them to native apps, outlines their technical advantages, and showcases a 3D rotating schedule interface created for the 2014 World Cup as a successful case study.
This article reviews the origins, widespread adoption, design patterns, and future challenges of responsive web design, explaining fluid grids, media queries, and scalable images while arguing for a content‑first approach and outlining obstacles such as responsive images, cross‑device interaction, performance, and workflow integration.
This article shares practical H5 design lessons from JDC, covering font choices, layout focus, motion and audio effects, responsive adaptation, and different H5 types to help creators build engaging mobile experiences while balancing performance and shareability.
Web image optimization, covering when to use images, selecting appropriate formats like JPEG, PNG, GIF, SVG, and WebP, sizing strategies, responsive techniques, and a range of tools—from command‑line utilities to GUI applications and automated workflows—helps reduce bandwidth, improve performance, and enhance user experience.
The Baidu Technical Salon article traces 25 years of web‑design evolution—from text‑only Unix browsers in 1989, through Mosaic’s image tables, JavaScript and Flash, the rise of CSS, the iPhone‑driven shift to responsive and flat design, and looks ahead to tools that will finally free designers from cross‑browser hassles.
This article explains the core principles of responsive web design, comparing it with adaptive design, and covers concepts such as content flow, relative units, breakpoints, max/min values, nested objects, mobile‑first versus desktop‑first, web versus system fonts, and bitmap versus vector graphics.
Understanding mobile web app adaptive design requires grasping PPI/DPI concepts, the variable meaning of CSS pixels, and using viewport meta tags—especially target-densitydpi and initial-scale—to achieve 1:1 rendering across Android density buckets and iOS Retina screens while balancing layout and asset sizing.
This article explores the unique constraints of mobile platforms, the diverse devices and operating systems, performance and cost considerations, and outlines the essential new skills, tools, and workflows designers must adopt to create effective, responsive mobile experiences.
This article explores how traditional web UX principles apply to mobile, emphasizing the need to understand user contexts, device capabilities, performance, content structure, and clear interaction flows to create effective mobile web experiences.
