ebook-responsive-elearning-with-links-us

20
2
Understanding
Responsive eLearning Design
2.3: Adaptive Vs. Responsive Design
A better understanding of the benefits of each design approach can be achieved by discussing their
fundamental differences.
Attributes
Device Identification and
Content Delivery
Content Optimization
Device Optimization
Approach
Adaptive (AWD)
AWD uses client-side code or server
to detect devices. The most
appropriate set of HTML and CSS files
(based on screen size) are then
selected and delivered.
Information is pre-selected and
only device-friendly assets are
downloaded.
For each template, separate
options are developed based on
screen sizes and housed on the
server.
A layered approach is applied in an
adaptive design framework. This
approach utilizes scripting to detect
the device or browser properties, and
then delivers the matching or closestmatch
template.
Responsive (RWD)
RWD uses media queries to detect the
device media features. The same
HTML and CSS files are delivered,
through which fluid grids and flexible
images kick in to align the content
according to the screen size.
All assets are downloaded
regardless of whether they are
used or not. Information for every
device is included.
For each template, a single file is
created with multiple breakpoints
that can handle displays on
multiple screen sizes.
A responsive design framework
applies a comprehensive approach
which addresses all the features that
the browsers on the various devices
can support. This can include defining
fallback options (e.g. Flash), image
and video resolutions, etc.