Mobile Web Design
General Principles and Best Practices
IT 4213 Mobile Web Development
Dr. Jack Zheng
Two key differences of mobile web use are the
small screen and touch-oriented operations.
This lecture notes discuss some general
design principles and best practices based on
these two key differences.
1. Design for small (multi) screens
2. Design for touch UI
• The DeviceAtlas reported in 2019 that 5.5-inch and 4.7-inch screen
sizes most popular
• statcounter reports the dominant resolution is about 400x700
Design for Small Screens
• The grand general principle of small screens is to keep the page short
– Most mobile websites are viewed in portrait mode with narrow width.
Stretching a normal multi column webpage will make the page extra long.
Long stretching pages are more likely to get user lost and difficult to
• Major issues (see https://www.viget.com/articles/do-responsive-sites-
– Scrolling quickly becomes sluggish and boring
– Navigation can be unfriendly
– Hindrance for the footer elements
• Some general design practices (details on following slides)
– Content/feature prioritization: identify main content and give more screen
area to the main content.
– Extra on demand: more content with additional actions
– Layout adjustment: change how content is arranged and grouped
– More at https://www.sitepoint.com/6-ways-to-improve-long-scroll-mobile-
• Content prioritization is a process to assess and determine the
importance of content, and in turn determine how they will be displayed
on the page.
– The most important content and features need to be on the first screen or
fixed (docked) on screen.
– Non-major content needs to be minimized, shortened, or completely