Literature Review: Mobile-Friendly Web Design

Stephen Lansford, Morgan Madry, and Joyce Chiu

As the number of mobile device users increase, more businesses are moving towards making
their websites mobile-friendly in order to reach a wider audience of users. Mobile-friendly web
design means the design of the website works well with various mobile devices, such as
iPhones, Android phones, iPads, and tablets. When designed well, mobile-friendly web design
allows readers to have an easy time reading the websites contents and navigating through the
website on any of their mobile devices (Futterman). This literature review will cover current
mobile-friendly web design trends, websites versus dedicated mobile applications, and mobile
website design.

Current Trends
One approach to targeting the mobile-device audience is to modify an existing site to work with
desktop and tablet devices as well as mobile devices. This approach saves money on paying a
developer to make a website for multiple kinds of devices. At the same time, it is difficult to
construct a website that works and appeals to users on different devices. adaptive and
responsive design.
The website must be designed for the smallest screen, which are smartphones. Because of the
limitation in viewing port, the content that is displayed must be valuable, so users do not have to
dig through information that is unnecessary. Good practice says to reduce content and prioritize
what the website offers. The designer must question every piece of content that is displayed,
and determine its potential value to users as well as compare its usefulness to other pieces of
content (Cerejo).
Taking the motion that is performed to navigate the page and the site must be considered as
well. Many modern websites (especially those of designers) are built as one page; Very little
clicking is required, which is a great trend for both desktop and mobile devices. Scrolling on a
mobile device is an easier motion to perform rather than clicking on links or buttons and waiting
for the page to load. Scrolling on a desktop with a mouse is also much easier than moving the
mouse around clicking on links that lead to different pages. Scrolling on one long page creates a
story, an interactive experience for the user which creates an enjoyable experience for the user
(The Frank Agency).
Two approaches are available when designing a website: mobile-first or mobile-second.
Designing a site for mobile-first is exactly that: constructing the website for mobile-device
screens first, then scaling the pages up to fit the size of larger screens. This technique saves
time and money, and follows the ideas of the previous points of reducing content and motion for

the user. Mobile-second is constructing a website with larger screens in mind, and shrinking the
content down to fit smaller screens. This is not best practice for the field of web design, as
shrinking content down clutters the usable space of the screen. Designing small and scaling up
is much more predictable (Distilled).

Adaptive Design and Responsive Design

There are two types of design that make websites mobile-friendly: adaptive design and
responsive design. Adaptive design involves creating and having separate websites for a
businesss or companys websites. When a user goes to the site, a script is used to determine
what screen size she or he is using. The website that best fits the users screen size is then
displayed for the user. Adaptive websites are more expensive since different variations of the
website needs to be designed to fit different electronic device screens (Futterman). The
American Airlines website is a quality example of adaptive design (Schenck). As shown in the
images below, the site adjusts its contents according to what type of device (in this case, on a
computer screen and on a smartphone screen) the user is viewing the website on.

Figure 1.1: American Airlines website on a computer screen.

Figure 1.2: American Airlines site displayed on a smartphone screen.

The other type of design is called responsive design. Responsive design responds to the size of
the users browser by adjusting the contents of the website to fit within the window space
available. Responsive websites cost less than adaptive websites since the existing websites
contents and code can be reused, and adjustments can be made, to make the website mobilefriendly (Futterman). The Next Webs website is a suitable example of responsive design. The
images below show how as the user adjusts their screen size, by either making it smaller or
larger, the websites contents resize and change to fit inside the users screen.

Figure 1.3: The Next Webs site displayed in a small window on a computer screen.

Figure 1.4: The Next Webs site displayed in fullscreen on a computer screen.

Websites vs. Dedicated Applications

Another alternative is to create a mobile device application for the website. In some ways
applications are very different from websites, but they require many of the same considerations
and design techniques and often serve many of the same purposes.
Mobile applications are usually considered to be the next step after creating a website, as it
doesnt usually make sense to have an application and no website, even if the website simply
redirects to an application as is often the case. Websites are capable of reaching a wider
audience than applications because they do not have to be downloaded from a store and can
be accessed from any device. Another advantage is that they can be updated instantly, unlike
applications which must be redownloaded and updated through the third party store. They are
also usually easier and less expensive to develop than dedicated applications (Summerfield).
Similar to adaptively designed websites, applications are tailored to each device they are
available on, which utilizes the unique features of each device in ways that websites usually
cannot. Creating a dedicated application specifically for mobile devices ensure it will work
especially for mobile device screens; however, downloading mobile device applications do take
up space. Users will most likely not want to take up their mobile devices space by having to
download a separate application (Futterman). Depending on the application, however, the
space it takes up can be made up for by not needing to connect to the internet every time it is
accessed, unlike a website. Ultimately, it is up to the business or entity looking to develop their
web presence to decide whether a website or application is more worth their time and resources
(Summerfield).

Design
Web design, especially for mobile websites, is constantly evolving to keep up with popular
trends and improve usability. There are many special considerations to keep in mind when
designing a website for mobile users, such as screen sizes, how the user interacts with his or
her device, and the limitations of the devices that may be visiting the site.
Most people using mobile devices use touch-based navigation to browse the web on their
device. Touch-based navigation has unique advantages and disadvantages which are important
to consider when designing mobile-friendly websites. There are many design techniques that
can be implemented that will make the website easier for mobile users to navigate.
Fingers are clumsy, which makes touch-based navigation more challenging than navigating a
webpage with a computer mouse. It is often too easy for mobile users to mistakenly navigate
somewhere they did not intend to because the links or buttons on the website are too small.
Generally speaking, there should be a minimum of 30 pixels of space around links to avoid this
problem. This extra space reduces the possibility of large fingers selecting wrong or multiple
links, as well as makes it easier for the user to see what they are selecting. It is also very helpful
to mobile users when there is some sort of feedback indicating when they select a link or button
and which one they selected. This feedback often takes the shape of the selected link being
highlighted or changing colors (Distilled).
A new term for the style of design that occurs in modern websites is flat design. Flat design
works well as a mobile-first design technique; it embraces the two-dimensional nature of device
screens. Since its inception, it revolutionized modern design techniques and practices.
Flat design entered the modern world in 2006 when Microsoft released its Zune MP3 player,
which contained elements of flat design. This style was continued and built upon with the 2010
release of the Windows Phone 7. Flat design was solidified in the 2013 release of Apples iOS
7, eschewing its old coat of three-dimensional menus and buttons (Asghar).
Flat design frequently makes use of bright, vivid colors to accentuate areas in expansive white
space. Flat design is inherently minimalist, building on the mobile-first idea of reducing and
prioritizing content on the screen, while also maintaining a clean, interesting visual experience
(Taylor). Another characteristic of flat design is the extensive use of typography. Uses of
typography in flat design consist of using contrasting font color and background color to again
accentuate important pieces of content and to maintain a clean visual look, as well as create
smooth user interface interactions. Much of flat design is constructed using fluid grids, like
Twitters CSS Bootstrap, to align content and ease the designing of future content layouts.
Googles Material Design is an excellent example of flat design.

Figure 1.5 Googles Docs, Sheets, and Slides apps are constructed using Material Design
principles and techniques, and maintains a consistent and clean look throughout different apps.

Conclusion
Mobile devices are how the majority of users surf the web, and as such business and entities
must evolve to service their customers on the media they are using. However, it is not good
enough to just let the website be as is. Websites made for larger screens do not convert well for
smaller screens. However, websites and their designers have adapted, and this literature review
covered the main trends and how designers have implemented these changes into their work.

References

Asghar, Taimur. "The True History Of Flat Design." Web Design Ai. Web Design Ai, 19 July
2014. Web. 19 Nov. 2015.
Cerejo, Lyndon. "A User-Centered Approach To Web Design For Mobile Devices Smashing
Magazine." Smashing Magazine. Smashing Magazine, 01 May 2011. Web. 17 Nov. 2015.
Futterman, Emilie. "A Guide to Mobile-Friendly Design and Content Organization." TNW
Network All Stories RSS. TNW Network All Stories RSS, 28 July 2014. Web. 17 Nov. 2015.
Schenck, Barbara F. "How to Make Your Website More Mobile-Friendly." Entrepreneur.
Entrepreneur, 06 May 2013. Web. 17 Nov. 2015.
Summerfield, Jason. "Mobile Website vs. Mobile App (Application) Which Is Best for Your
Organization? | Human Service Solutions." Mobile Website vs. Mobile App (Application)
Which Is Best for Your Organization? | Human Service Solutions. Human Service Solutions, n.d.
Web. 17 Nov. 2015.
Taylor, Adrian. "Flat And Thin Are In Smashing Magazine." Smashing Magazine. Smashing
Magazine, 03 Sept. 2013. Web. 17 Nov. 2015.
"4 of the Latest Trends in Mobile Website Design." 4 of the Latest Trends in Mobile Website
Design. The Frank Agency, n.d. Web. 17 Nov. 2015.
"Building Your Mobile-Friendly Site The Distilled Best Practice Guide." Building Your MobileFriendly Site. N.p., n.d. Web. 17 Nov. 2015.