![](bg2.png)
carried out in January 2013 (Davies, 2013) showed
that there is no average screen resolution, as it can
be seen in the scattered plot shown in Figure 1. This
plot displays screen dimensions used by two groups
of users, technical and non-technical users, and
vertical scale is screen height, whereas horizontal
scale is screen width. The survey was based on a
sample of 5,000 unique visitors to two different
websites: one aimed to technical users, and another
aimed to non-technical users. The results of this
survey confirm the importance of making a web
page look good at different screen resolutions. And
what is worst, the number of devices with the ability
to access Internet and surf the Web is increasing day
by day. This is just the beginning of a new era of
access to the Internet and the Web. No one knows
which devices will be used by users to access the
Internet and the Web in the future, so websites
should be prepared to be compatible with a plethora
of current and new devices.
Therefore, nowadays it is needed to design web
sites for different users’ scenarios, not for different
screens. Besides, the users’ interaction patterns also
change from one device to another device, and
websites should adapt to these changes.
The current solution to this problem is to use
“Responsive Web Design” (RWD), a new web
design technique that has become very popular
during the last two years. However, due to the
novelty of this technique, it is not clear if it can
santisfy the same user experience when applied to
different elements in a web page. The goal of this
paper is to assess the differences of user experience
when this technique is used to adapt a website to
different users’ scenarios.
Two methods are applied to assess user
experience in a controlled experiment: expert
analysis and cognitive walkthrough were adapted to
rate the GUI and the user experience on different
kind of devices.
The rest of the paper is structured as follows.
Section 2 provides a brief introduction to responsive
web design. Section 3 contains the description of the
method applied in the case study. The method is
based on the expert analysis and cognitive
walkthrough. Section 4 presents the RWD web
application, which was used to perform the case
study. Section 5 provides the details of the case
study. It contains the description of the analysis
process and presents the results of the case study
using both methods: expert analysis and cognitive
walkthrough. Conclustions are presented in
Section 6.
2 RESPONSIVE WEB DESIGN
Responsive web design is a term coined by Ethan
Marcotte in his seminal article in 2010 (Marcotte,
2010). The following year, Ehan Marcotte wrote his
book “Responsive Web Design” (Marcotte, 2011),
in which he explored new techniques and proposed
some design patterns. .net magazine, one of the most
famous magazines between professional and
amateur web designers, declared “responsive
design” as the second development trend of the year
2012 (Grannell, 2012).
The goal of RWD is to deliver a quality
experience to users no matter how large or small the
display they use is. But RWD is not only about
changing the way elements are displayed in a web
page: RWD is also about how to provide easy
reading and navigation with a minimum of resizing,
panning, and scrolling across a wide range of
different devices.
Responsive web design mixes three different
techniques, fluid grids, flexible images, and media
queries, all of them based on the use of CSS
(Cascading Stylesheets).
The RWD techniques have been compiled in
design patterns, common solutions to different
design problems (Wroblewski, 2012; Frost, 2013).
For example, there are layout patterns, navigation
patterns, menu patterns, form patterns, etc.
3 APPLIED METHOD
GUI of the responsive design web page needs to be
checked and tested by users working on different
type of devices. The site designed in this way should
be adjusted to different kind of screen resolutions
(computer monitors, smart phones, tablets, etc). It
should be readable with a minimum of resizing,
panning, and scrolling.
To check users’ viewing experience GUI quality
evaluating methods might be used. During such case
study users experience also needs to be regarded.
Novice users interacting with a system for the
first time prefer simple actions and ease of learning
(Shneiderman, 1998), but their behavior and work
quality changes as their experience with the system
increases. This is an important point of view when
evaluating GUI quality over time, but to setup such
a study requires observation over time and lots of
resources (Phung, 2007), which are often hard or
even impossible to obtain.
An expert analysis in combination with cognitive
walkthrough seems to be the most reliable method
ICEIS2013-15thInternationalConferenceonEnterpriseInformationSystems
112