16. Almost four years later, RWD
has rapidly expanded. New
techniques and ideas are
appearing almost daily.
17. “Testing the top 10,000
websites for responsive
indicators showed roughly
12% of these sites were
responsive.”
http://www.guypo.com/mobile/rwd-ratio-in-top-100000-websites-refined/
26. “Progressive Enhancement is
the principle of starting with a
rock-solid foundation and then
adding enhancements if
you know user-agents can
handle the improved
experience.”
http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-
how-to-use-it/
27. Now let’s look at Adaptive
Web Design and how it relates
to Progressive Enhancement
30. “Adaptive web design is about
creating interfaces that adapt
to the user’s capabilities (in
terms of both form and
function)...
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
31. “Adaptive web design is just
another term for progressive
enhancement - it takes into
account varying levels of
markup, CSS, JavaScript and
assistive technology support.”
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
32. Despite Aaron’s definition, if
you search for “Adaptive web
design” you will get all sorts of
different definitions.
33. One of the better definitions is
by Brad Frost, who described
adaptive as:
34. “Adaptive is creating a single
Web experience that modifies
based on the capabilities of the
device. It’s a singular
flexible experience built
using sound progressive
enhancement techniques.”
http://bradfrostweb.com/blog/post/the-many-faces-of-adaptive-design/
38. According to some, “Adaptive
layouts” are different. They use
a series of fixed-width layouts
that are designed specifically
for different screen sizes.
39. Progressive enhancement
Adaptive web design
Responsive Web design
Responsive layouts
(Fluid grids)
Adaptive layouts
(Fixed-width or semi-fixed
width grids)
48. Let’s use an example where
you want to use a different
navigation for mobile
devices. You might want it to
be simpler and position it in the
footer, rather than the header
of the site.
49. With RESS, we can do this by
providing two alternatives...
such as a wide screen and a
narrow screen header and
footer.
55. “On the new ND.edu we used a
combination of server-side
detection, media queries and
javascript to determine
content.”
http://weedygarden.net/2012/05/a-case-for-ress/
56. “This allowed us to drastically
reduce the amount of resources
that are initially downloaded
and the result is a very fast
mobile experience.”
74. “Mobile First” is about
planning and designing the
entire experience for small
screen devices before wide
screen devices.
75. “Mobile First forces you to
focus and prioritize your
products by embracing the
constraints inherent in mobile
design”.
http://mobilegovwiki.howto.gov/Mobile+First
77. For many Responsive Web
Design projects, I use a
variation on this approach
which is “all screens first”.
78. I try to get the team to focus
on a product that will work at
any screen size (phone, small
tablet, large tablet, desktop) -
not just wide or narrow.
79. The aim is to get teams to
move away from “wide screen
only” thinking.
80. It’s very easy for teams to
accidentally slide back to
“wide screen only” thinking
during a project.
81. For this reason, “Mobile First”
or “all screens first” should be
used through all phases of
the project, from initial
sketches, to wireframes,
prototypes, user-testing,
design and development.
83. In mid 2011, I worked on two
responsive web projects
back to back.
84. This gave me an opportunity to
observe and compare different
two RWD processes in action.
85. The first project was to design
and develop a complex
Responsive web application
for a large “Energy company”.
86. We used the “Mobile first”
approach throughout every
phase of the project.
87. Every decision was made
based on how the web
application would work on
small screens.
88. Because of restricted screen
real estate, the layout and
functionality was focused and
direct.
89. When it came time to work on
the wide screen variations
during each phase, it was
incredibly easy as each
screen had already been
optimised.
90. For the second project, I was
asked to do the front-end
development on a non-profit
Responsive website. When I
came on board, the team were
in the middle of the design
phase.
91. While the wireframe phase had
used “Mobile first”, the design
phase did not. The team spent
weeks focusing on the wide
screen designs only.
92. Once the wide screen designs
were fully signed-off, the team
then moved on to narrow
screen designs.
93. As you can imagine, many of
the decisions made for wide
screen did not work at small
screen.
94. Aspects of the wide screen
layout and functionality had to
either be heavily adjusted for
narrow screen, or revisited at
wide screen.
95. A lot of this pain could have
been avoided if they had
maintained a rigorous
“Mobile first” approach
throughout the design phase.
107. This is where you let the
navigation wrap as needed.
108. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
109. home about us services
portfolio contact us login
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse
molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait
nulla facilisi.
113. At small screen, the header
contains a simple link pointing
to the footer navigation. The
footer contains the
navigation.
114. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
115. home
about us
services
portfolio
contact us
login
Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
119. At small screen, the navigation
is hidden away and replaced
with a link, icon or both.
When users click on the link/
icon, the navigation slides
open, pushing the page
contents down.
120. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
121. Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
122. home
about us
services
portfolio
contact us
login
Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
126. Similar to the toggle approach,
but the menu does not push
the page contents down.
Instead, the navigation sits
over the top of page content.
127. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
128. Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
129. Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
home
about us
services
portfolio
contact us
login
Site navigation
133. Similar to the toggle approach,
but with additional ability to
open and close multiple levels
of navigation.
134. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
135. Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
136. home
about us
services
portfolio
contact us
login
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Site navigation
137. home
about us
our history
our staff
contacting us
where to find us
services
portfolio
contact us
login
Site navigation
139. Pro: Keeps the navigation in
place, which is good for users.
Elegant.
Con: JS dependent. Some
options do not support
keyboard access. Can be
confusing for some users.
141. At small screen, the navigation
is converted into a select
menu.
142. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
143. Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Site navigation
147. At small screen, the navigation
is hidden away and replaced
with a link, icon or both. When
users click on the link/icon a
tray slides in from the left
and the main content is
pushed to the right.
148. Users can close the tray and
the content slides back over to
the left.
149. home about us services portfolio contact us login
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt
ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.
150. home
about us
services
portfolio
contact us
login
Close
Lorem ipsum
ut laoreet dolo
tation ullamco
iriure dolor in
facilisis at ver
delenit augue
Site navigation
Lorem ipsum dolor sit amet consect
etuer adipi scing elit sed diam
nonummy nibh euismod tinunt ut
laoreet dolore magna aliquam erat
volut. Ut wisi enim ad minim veniam,
quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
154. In early 2013, I worked on a
client site where we wanted to
test three different navigation
methods to see which would
be most intuitive at small
screen.
155. The method we chose where:
The footer anchor
The toggle
The select menu
156. Key target audiences were
identified, and 30 users from
these target audiences were
chosen to take part in the
testing process.
157. These users did not know that
the primary purpose for the
test was to watch them
interact with the different
navigation methods.
158. Each user was asked to
perform a range of tasks on
three different sites. Each site
had a different menu pattern.
159. At the end of the process,
users were asked to rate the
difficulty of each navigation
method.
160. Based on our observations
and user ratings:
1. The footer anchor method
and select menu confused
many users
2. Most users preferred the
toggle menu
183. Despite our recommendations,
the client decided to go with
an icon only because it
“looked neater”, and “lots of
other sites use these icons
now”.
186. It allows us to build sites that
work across a wide range of
devices without a lot of the
cost or effort associated with
full mobile or RESS sites.
187. Just as with any website or
web application, with
Responsive solutions we have
to avoid making assumptions
about our users.