Supporting Novice Development of Webpage Layouts For Multiple Display Devices

2010 IEEE Symposium on Visual Languages and Human-Centric Computing
Supporting Novice Development of Webpage Layouts

for Multiple Display Devices
Thomas H. Park
College of Information Science and Technology
Drexel University
thomas.park@ischool.drexel.edu
Abstract
approaches is particularly well suited for novice web

developers. We therefore propose a model that aids
rather than replaces the developer, and utilizes concrete
representations that map closely to the desired
implementations. In the following sections, we
describe related work, a study of novice web
developers, our proposed model, and future directions.
As the types of devices capable of accessing the web

diversify, developers face the challenge of tailoring
webpage layouts to accommodate their different
display, interaction, and use characteristics. This
challenge is particularly severe for novice web
developers, who often have difficulty maintaining the
separation of content from presentation and
comprehending the flow-based visual formatting
model. We propose an approach to developing
webpage layouts for multiple display devices that
addresses these and other barriers commonly faced by
novices. In this paper, we describe findings from a
study of web design students and discuss their
implications for this approach.
2. Related Work
Prior research has explored the modification of
webpage layouts at use-time, particularly for display
on small-form-factor devices. Systems such as
Digestor [2] use automatic transformation techniques,
while Chickenfoot [4] and PageTailor [3] empower end
users to customize webpage layouts for themselves.
Numerous efforts have also been devoted to
supporting the development of user interfaces for
multiple display devices at design-time. Abrams et al.
[1] present UIML (User Interface Markup Language),
a device-independent language that can be used to
describe interfaces semantically and then map to
markup or programming languages particular to target
devices. Mori et al. [5] describe TERESA, an authoring
tool based on three levels of abstraction that progress
from a general task model to device-specific system
task models, abstract user interfaces, and finally
concrete user interfaces.
Our work differs from these previous efforts in a
number of ways. First, our work is restricted to static
webpage layouts, which remain a significant barrier to
novices, rather than structural (i.e., spanning multiple
pages), dynamic, or multi-modal aspects of interface
development. Second, our approach enables users to
initiate transformations on relatively concrete
representations, rather than automating transformations
or having users apply them to highly abstracted
models. Third, our work is aimed at novice web
developers, introducing additional concerns, and is
informed by the study of them.
1. Introduction
Translating webpage layouts from envisioned
designs to renderable code can present significant
challenges for novice and even seasoned web
developers. This task is made all the more critical by
the diversification of web-enabled devices, from
personal computers to cellphones, televisions, and
entirely new classes of devices. In order for webpages
to be made usable on these devices, their layouts must
be adapted to the unique display, interaction, and use
characteristics of each. For example, a webpage
designed for touchscreen smartphones may need to
have a narrow, one-column layout with clickable
objects scaled up to accommodate fingertips rather
than mouse cursors.
A number of languages and tools have been created
to support the development of user interfaces for
multiple devices. However, most have focused on
automated methods that remove developers from the
loop or model-driven approaches with multiple levels
of abstraction that require significant front-end
investment for training and planning. Neither of these
978-0-7695-4206-5/10 $26.00 2010 IEEE
DOI 10.1109/VLHCC.2010.49
261
3. Interviews
The model maintains a separation between a

semantically labeled content layer and the devicespecific presentation layer while keeping them tightly
coupled within the user interface. Thus, the content
layer, which serves as an abstract model that can be
specialized to multiple display devices, is created
within the context of developing a webpage layout
targeted to a specific display device. Users can then
apply transformations to modify this prototypical
layout for other display devices (e.g., mobile phones).
During the development of an environment that
embodies our approach, we will conduct formative
user studies to learn which display devices are of
interest to web developers, how they conceptualize
common sections of webpages in terms of types and
names, and the transformations they would like to
apply to these sections for various display devices.
Summative work will include a task-based think-aloud
study in which novice web developers use the
environment to build webpage layouts for PCs and
then develop layouts for alternate display devices.
We are interested in supporting novices because

they comprise a significant proportion of people who
engage in web development, due to its accessible and
social nature. To investigate the challenges faced by
novice web developers in their early encounters with
code, we interviewed library and information science
students with minimal coding experience after they had
completed a web design course. Two course projects
were assigned to the students, the first requiring the use
of a text editor and the second open to the software of
their choice. During the interviews, we asked
participants about the challenges they faced with
respect to various aspects of the projects and the
strategies they used in response to them, utilizing
course artifacts to elicit recall and stimulate discussion.
From the interviews, we discovered that novices
experienced difficulty coding the layout of webpages
as they envisioned them. The participants lacked
intuition about the flow-based visual formatting model
and often turned to absolute, pixel-based layout
techniques. Participants also had trouble using CSS,
particularly to maintain a separation of content from
presentation, preferring instead to code style inline
with content. These two issues, troublesome for
novices, are crucial to the effective development of
webpage layouts for multiple display devices.
Furthermore, we found that novices did not engage
in distinct design planning stages. Instead, they had
mental images of their webpage layouts, proceeded
directly to coding, and then debugged their desired
layouts or an approximation of them into existence [6].
For the second project, they were also initially
enthusiastic about the use of WYSIWYG editors,
which provided a visual, direct manipulation interface,
although many subsequently found that their feedback
and control was hampered by them. Nevertheless, these
findings suggest that novices have a strong preference
for interacting early with concrete representations.
5. Conclusions
Prior research has investigated ways of developing
user interfaces for multiple display devices. We are
interested in building on this work with a focus on
novice web developers. Informed by interviews we
have conducted and future formative studies, we will
explore ways to engage and support novices in
developing webpage layouts that are usable for the full
reach of the web.
6. References
[1] Abrams, M., Phanouriou, C., Batongbacal, A.L.,
Williams, S.M., and Shuster, J.E. UIML: An applianceindependent XML user interface language. Computer
Networks, 31, 1999, 1695-1708.
[2] Bickmore, T.W. and Schilit, B.N. Digestor: Deviceindependent access to the World Wide Web. Computer
Networks and ISDN Systems, 29, 1997, 1075-1092.
[3] Bila, N., Ronda, T., Mohomed, I., Truong, K.N., and de
Lara, E. Pagetailor: Reusable end-user customization for
the mobile web. MobiSys, 2007, 16-29.
[4] Bolin, M., Webber, M., Rha, P., Wilson, T., and Miller,
R.C. Automation and customization of rendered web
pages. UIST, 2005, 163-172.
[5] Mori, G., Patern, F., and Santoro, C. Design and
development of multidevice user interfaces through
multiple logical descriptions. IEEE Transactions on
Software Engineering, 30(8), 2004, 1-14.
[6] Rosson, M.B. and Carroll, J.M. Active programming
strategies for reuse. ECOOP, 1993, 4-20.
4. Approach
Informed by these findings, we wish to create a
more natural webpage layout development model for
novice web developers. The main aspect of our
approach is to enable users to proceed directly to
developing a prototypical webpage layout for a target
device (e.g., PCs). Users should be able to accomplish
this without significant training or having to design an
abstract model in advance.
262

Supporting Novice Development of Webpage Layouts For Multiple Display Devices

Uploaded by

Copyright:

Available Formats

Supporting Novice Development of Webpage Layouts For Multiple Display Devices

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Supporting Novice Development of Webpage Layouts For Multiple Display Devices

Uploaded by

Copyright:

Available Formats

2010 IEEE Symposium on Visual Languages and Human-Centric Computing

Supporting Novice Development of Webpage Layouts

approaches is particularly well suited for novice web

As the types of devices capable of accessing the web

The model maintains a separation between a

We are interested in supporting novices because

You might also like