40 February 2013 FCW.COM
The fundamentals
Responsive Web designers rely on HTML5, certain Java-
Script applications and three key elements of Cascading
Style Sheets (CSS) --- scalable images, media queries and
uid content grids --- that combine to dynamically adjust
content for each device. Those elements are able to detect
screen size and scale the page accordingly. They can also
prioritize and move layout elements or content based on
whether the screen is in vertical or horizontal orientation,
and can resize fonts, images and other page elements.
Vanderlan said responsive
design is a front-end solution
that doesn t require a speci c
technical platform. However,
his team does use PHP, an
open-source server-side script-
ing language, on the back end
to provide responsive images
and smaller graphics.
"Some users are de nitely
limited by data plans, so you
don t want to be delivering
500M of images and heavier
media to someone who s link-
ing in over a mobile phone
with a 3G connection," he said.
Designers must have or
develop advanced HTML
and CSS skills and have a
fairly deep understanding of
JavaScript, Bernard said, but
"there s really not a lot of addi-
tional software coding expe-
rience that would be needed
other than that."
In fact, responsive Web
design is ideal for resource-
strapped agencies trying to do
more with less, said Vikrant
Binjrajka, chief techology of -
cer at mobile app developer
INADEV. "They don t need to
invest in a lot of equipment
or a lot of environments. It s
something that can be incor-
porated right within the plat-
form and tools that agencies
already have today."
The hurdles
Responsive Web design does
have some limitations. "It s not
going to completely replace
mobile apps or designing speci c work ows to help cre-
ate transactional apps for certain agency requirements,"
Binjrajka said. "It s complementary technology that applies
to certain types of applications and content that agencies
have, but it does has very wide applicability because it opti-
mizes the usability and the user experience."
With responsive design, two-way interactions between
the website and mobile users can be cumbersome, large
tables of numbers and data don t always display well, and
graphic-intensive images and some JavaScript calls will
result in larger download
times for mobile users. More-
over, many mobile devices
are limited in their ability to
upload les, and some docu-
ments, PDFs in particular, do
not present as well on tiny
screens. Agencies that con-
tinue to use older browsers,
such as Internet Explorer
7 and 8, will have to devise
workarounds to overcome
compatibility issues.
That s why it is critical
for Web teams to take their
time, think things through
and design with exibility in
mind, said Mindy Chiat, pro-
gram manager at the Of ce
of Federal Student Aid. "We
have a lot of content and
complex tables and we were
introducing a number of new
infographics and visuals, so
making sure that all of those
display correctly on differ-
ent types and sizes of mobile
devices is an ongoing chal-
lenge, to be quite honest,"
she said.
In order to meet a tight
development time frame,
her team decided to get the
core site launched and then
make ongoing adjustments.
"We ve continued to work on
it, sought out user feedback
and industry best practices,
and communicated with
other agencies doing similar
things," she said. "As a result,
we already have some plans
to improve." ■
ExecTe c h
Tips for adopting
responsive design
Here are some best practices to keep in mind when tran-
sitioning to responsive Web design:
1Start preparing sooner rather than later. It takes time
to overhaul a website, especially at larger agencies,
said Vikrant Binjrajka, chief technology of cer at mobile
app developer INADEV. "You can begin to integrate it as
you're going through a technical upgrade or a content
refresh,
" he said. "The key is to start thinking about it
upfront and creating that ability within [agencies'] archi-
tecture, within their design teams, within their planning
process to make a commitment to support a wide variety
of devices because, like it or not, they will have no choice
but to support all these Web devices in the future.
"
2Bring together all technical, content, communica-
tions and policy stakeholders to discuss chal-
lenges and expectations. "Understanding mobile and
responsive design is really a team exercise,
" said Jer-
emy Vanderlan, technical lead for the AIDS.gov site. "It
requires everyone to understand it --- not just the guys
writing the code.
"
3Think mobile rst and place content over naviga-
tion. Steve Wenrich, front-end developer on the
Sandia.gov redesign, said the site continues to display
on desktop PCs with the classic horizontal banner and
top-of-page navigation buttons, but mobile users see
the most-requested content rst, such as agency news,
career opportunities, the employee directory and direc-
tions to the facility.
4Test the site using as many types of devices as pos-
sible. "Sometimes people get caught in the trap of
testing on only one type of product, like an iPhone, and
then they nd that the site looks great on my phone and
on my desktop but looks like garbage on a mini-tablet,
"
said Mike Bernard, digital marketing manager at
GovDelivery.