Mobile Web Design
General Principles and Best Practices
IT 4213 Mobile Web Development
Dr. Jack Zheng
Spring 2021
Overview
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
2
Small Screens
• The DeviceAtlas reported in 2019 that 5.5-inch and 4.7-inch screen
sizes most popular
– https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and-
dpi-most-popular-smartphones
• statcounter reports the dominant resolution is about 400x700
– https://gs.statcounter.com/screen-resolution-stats/mobile/united-states-of-
america/#yearly-2019-2019-bar
3
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
navigate.
• Major issues (see https://www.viget.com/articles/do-responsive-sites-
have-to-be-so-tall-on-mobile/)
– 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-
websites/
4
Content Prioritization
• 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.
• Generally
– 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 off
screen (or activated by command).
• Common examples of non-major content (also depending on situations)
–
Informational or presentational: hero image/video/carousel, greetings,
background, date/time, weather, etc.
– Supporting (including those usually in a fat footer): menus, social actions,
quick links, related/recommendation, contact info, footer
– Promotional: ads, sponsors, etc.
• Other best practices:
– Remove background image; use smaller images.
– Hide navigations like menu, footer texts
– Use shorter titles
Example
Menu is
minimized.
Ads are gone (or
moved to background
in the latest Yahoo)
Headline image
is shrunk.
Carousal is
shortened
Trending is
rearranged.
Greeting is
removed.
Extra-on-Demand
• Content prioritization commonly works together with Extra-on-Demand, which is a general
information seeking practice that leads users to additional content only upon explicit request.
•
First some sign or limited information is shown. It can be
– An icon
– Beginning part of the text
– A few summary words
– First a few items in a list
– First part/page of the content
•
Then, some additional actions/gestures
– Simple tap (on a button or icon)
– Horizontal swipe: horizontal scroll is much easier with finger than mouse.
– Edge swipe
•
Last, more content will be reached
–
In a second screen
–
In a tab of the same page
–
In-line expansion of a page section
–
Items listed horizontally off-screen
• Be responsive and adaptive: extras can be hidden on smaller screens only, but revealed in
larger screens
7
Extra-on-Demand Examples
• Use an icon or an
edge swipe
gesture for menu
or commands –
see module 6 as
well
• Horizontal swipe
(scroll) for
carousal items or
wide tables – see
module 6, 7, 9
• Use Accordions
• Bing more in-line
expand
• Google horizontal
scroll
8
Layout Adjustment
• Adjust the layout to
content to be
suitable for vertical
narrower screens.
– Including page
layout and local
layout
• Example
– https://www.viget.c
om/articles/do-
responsive-sites-
have-to-be-so-tall-
on-mobile/
• More layout
patterns will be
covered in module 5
and module 7
9
Instead of simply
rearranging items
vertically, the image
and texts are put
side by side to save
space.
Touch Oriented UI
• Understand the difference of touch-oriented input. Some are weaknesses,
some are advantages, and some are, just different.
• Major differences
– Finger touches are generally less precise and less accurate
– Direct input, generally lack of external input devices like mouse and keyboard
• No hover, no right-click, no scrolling wheel
• No keyboard shortcut
– Easy to use gestures, direct action, smoother movement
• Touch UI does offer opportunities to design better interaction methods and
enable additional functionalities than traditional UI.
•
Finger’s advantages vs. mouse
– Accuracy: less accurate on pointing/tapping, but more accurate in movement (moving,
dragging, drawing, etc.)
– Multi-point input
– Flexibility: gestures are richer and more advanced
– Direct action: easy to directly tap on a target; horizontal scroll is easy
• Use of soft (on-screen) keyboard on mobile devices
– Allows various keyboard types based on contexts: alphabet, number, special characters,
etc.
10
Review module 2 on this.
Mouse vs. Fingers as Input Device
Mouse
Fingers
Precision
High
Low
Number of points specified
1
usually 1
2–3 with multi-touch
Number of controls
3: left/right button, scroll wheel
1
Homing time?
Yes
No
Signal states
Hover, mouse-down, mouse-up
Finger-down, finger-up
Accelerated movements
Yes
No
Suitable for use with
big desktop monitors
(30-inch or more)
Yes,
because of acceleration
No:
arm fatigue
Visible pointer/cursor
Yes
No
Obscures view of screen
No, thus allowing for continuous visual
feedback
Yes
Suitable for mobile
No
Yes:
nothing extra to carry around
Ease of learning
Fairly easy
Virtually no learning time
Direct engagement with screen
and "fun" to use
No: an indirect pointing device
Yes
Accessibility support
Yes
No
11
https://www.nngroup.com/articles/mouse-vs-fingers-input-device/
Design for Touch-Friendly UI
• Grand principle
– Avoid touch weaknesses and maximize its
advantages
• Best practices (details in the slides followed)
– Aware of hot touch area – positioning of
common commands and actions
– Set the right touch target style and size
– Provide interaction feedback
– Ease user input/typing
– Take advantage of touch gestures (NOT covered in this
class; gestures represent the future UI opportunities -
http://www.lukew.com/touch/)
12
Hot Touch Area
• Rule of the thumb: thumb (one or two) oriented
operation is common
– The bottom of the device is the easy area for thumb
operations https://alistapart.com/article/how-we-
hold-our-gadgets
– Put most often used actions and commands at the
bottom, such as navigation menu, tool bar, action
button, etc. http://www.lukew.com/ff/entry.asp?1649
(more details in module 6).
13
Image from
http://www.uxmatters.c
om/mt/archives/2013/0
2/how-do-users-really-
hold-mobile-
devices.php
Touch Target Style
• Use regular shaped areas (square, rectangle, circle, etc.) instead of
textual links
– Tap the whole area not just the text/link
–
Icons/Boxes/Buttons – Yes
– Stacked/list of links – No
• Give clear visual clues about touchable target
– Use button styles or explicit action terms so users know what to expect. See
an example problem here https://baymard.com/blog/mobile-product-list-hit-
areas
– Also use visual cues to show touch states (touched, not been yet touched,
disabled, etc.)
• Use consistent style
• Examples: next slide
• CSS tip:display links (URL, “a” tag) as block or inline-block so the whole
area can be tapped.
14
Image (screenshot) from
https://www.youtube.com/watch?v=V9hkxQx8t-M
Tap Area Examples
• More examples
– https://baymard.com/blog/mobile-product-list-hit-areas
15
Dealsea.com
Anywhere in the
rectangle area
can be tapped for
each item for
more details.
Apmex.com
Only the title can
be tapped for
each item. There
is no visual clue
that the title can
be tapped for
more details.
Touch Target Size
• Sizes affect touch accuracy
• Recommendation
– https://www.lukew.com/ff/entry.asp?1085
Images from
http://www.smashingmagazine.com/20
12/02/21/finger-friendly-design-ideal-
mobile-touchscreen-target-sizes/
Feedback
• Feedback is an import general user experience
principle, and especially important for touch UIs
as fingers are less accurate in hitting the target
correctly. Clear visual feedback shows that a
user is hitting the target accurately.
• Key practices
– Style changes after tapping or holding (in dragging
actions). For example, change of background color,
border, size, etc.
– Or some physical indication like a vibration or
sound.
– No pop-up pages; instead, use in-page div (modal)
for feedback
17
Hover/MouseOver Replacement
• The difficulty on touch interface is the lack of preview
(usually the hover action using mouse).
• Common hover applications
– Content preview
– Tooltip or quick help
– Dropdown menu
– Expandable region (for additional information or operations)
• Best practices
– Use direct actions that gives command directly. For example,
display a button for direct actions.
– Use on-tap context menu or toolbars.
– Replace with long press.
– https://ux.stackexchange.com/questions/14257/re-thinking-
hover-functionality-with-touchscreens-in-mind
18
Ease User Typing
• Almost all mobile devices use soft (on-screen)
keyboards. Soft keyboards have several difficulties
– The keys are usually very small and too close to each
other.
– There is no physical feel or feedback
– Users are often in motion when using a mobile device.
• Best practices
– Activate the most appropriate keyboard type based on
contexts: alphabet, number, special characters, etc.
– Use selection from a list instead of typing where possible
(more details on designing forms will be covered in
module 8)
19
Key Readings and Resources
• Design for small screens
– https://www.viget.com/articles/do-responsive-sites-have-
to-be-so-tall-on-mobile/
– https://www.sitepoint.com/6-ways-to-improve-long-scroll-
mobile-websites/
• Design for touch
– https://alistapart.com/article/how-we-hold-our-gadgets
– http://www.smashingmagazine.com/2012/02/21/finger-
friendly-design-ideal-mobile-touchscreen-target-sizes/
– http://www.uxmatters.com/mt/archives/2013/03/common-
misconceptions-about-touch.php
– https://www.4ourthmobile.com/publications/designing-
for-touch
– http://fatfingertest.com
20