INDIVIDUAL ESSAY

TECHNOLOGY PARK MALAYSIA

CT035-3-3-HCIAU
HUMAN COMPUTER INTERACTION AND USABILITY
UC3F1810CS
Name: LEONG WENG FON
TP No.: TP038881
Lecturer Name: MS. AIDA ZAMNAH BINTI ZAINAL
ABIDIN
Word: 1510 Words
Responsive vs Adaptive Design
Introduction

The world of web design has changed quite a bit over the years. As it continues to evolve, mobile-
friendly design has become the rule rather than the exception. When it comes to choosing the right
mobile-friendly layout for your websites, there are a number of factors to keep in mind. Websites
used to be built with fixed dimensions. You could look at them on a smaller screen, but they were
really only meant to be viewed on desktop screen. These days website visitors need to be able to
access to functional, ideally and beautiful version of your site on whether device they have within
reach. (Month, 2019)

Adaptive and responsive design are now the dominating factors in web design discussion. Web
design, while once an important accessory within overall brand strategy, is now at the forefront of
user experience.

Both design offer certain design and user experience advantages and disadvantages; the only way
to determine a best practice is to determine the intent, content and calls to action for each unique
site. Despite the constant buzz and conversation surrounding this topic, many people still do not
fully understand the differences in application and implication of both strategies. (pmxagency,
2014)
Responsive Design
Responsive Web Design is a site or pages that have been built upon a grid based framework for
example, Foundation, Skeleton that will allow them to fluidly change and respond to fit any screen
or device size. Responsive frameworks are based entirely upon browser width.

Figure 1 show the responsive design on different devices (pmxagency, 2014)

Responsive design is easier and takes less work to implement. It affords less control over your
design on each screen size, but it’s by far the preferred method for creating new sites at this moment.
This may also have something to do with the large number of cheap templates available for the
majority of Content Management Systems (CMS) such as WordPress, Joomla, etc.

Responsive designers create a single design to be used on all screens and will generally start in the
middle of the resolution and use media queries to determine what adjustments will be made for the
lower and higher end of the resolution scale. This tends to make users happy, because that familiar
web design seems guaranteed to translate across to any device’s screen. Uniformity and
seamlessness are crucial considerations in providing a good user experience. (SoeGaard, 2019)
The downside of Responsive Web Design is that it’s very difficult to design a desktop site that
includes all the desired features, content, and functionality that also works seamlessly on smaller
screens. Given that all the HTML, CSS, and JavaScript files of the desktop presentation – the “full
payload” – will be downloaded by mobile browsers, the potential for slow performance grows. As
a result, Responsive Web Design sites tend to be significantly slower than their m-dot counterparts.
This candefeat the purpose of creating a site that caters to all users, as it simply shifts the mobile
experience problem from one of functionality to one of performance. Successful Responsive Web
Design requires that vendors have an intimate understanding of their business, their website, and
their consumers, so the app content can be highly streamlined and organized properly for optimum
presentation on different devices. (Yottaa, 2019)

Responsive Design doesn’t offer as much control as adaptive, but takes much less work to both
build and maintain. Responsive layouts are also fluid and whilst adaptive can and does use
percentages to give a more fluid feel when scaling, these can again cause a jump when a window
is resized. For example, in the image below, which shows a fluid layout, the designer is using
percentage widths so that the view will be adjusted for each user. (Jerry, 2015)

Responsive web design enables your visitors to view across different devices using the same
design. The design adjusts itself automatically on the basis of the viewers’ screen resolution. For
instance: for a bigger desktop screen, the design may show three columns of content, but it may
adjust itself to just a single or double column on a smartphone or a tablet, and so on. (Sufyan, 2013)

Responsive design is straightforward because it is fluid, it means that users can access your online
world and enjoy as much of it on their handheld device as they would on a massive monitor. For
this to be true, responsive design requires a very good conceptualization of the site and a deep
knowledge of the needs and wants of the end users.
Adaptive Design
Adaptive Web Design is a site or pages that have been built upon a frame that will allow them to
adopt or change to fit a predetermined set of screen and service sizes. Unlike responsive, adaptive
is not just a single template or frame. Adaptive strategy implements three layers of multiple
predetermined templates that load based on device.

Figure 2 show the adaptive design on different devices (pmxagency, 2014)

Adaptive web design is based on server-side customization of the user experience and the ability
for the server to detect the receiving device and deliver the suitable material, rather than having
the device, or client, do all the heavy lifting. Adaptive web design identifies the type of requesting
device and automatically delivers a specific set of HTML, CSS, JavaScript, and media (graphics
and text) that fits its hardware and operating system, whether on a smartphone, tablet, or desktop.
For example, a user on an iPhone6+, which has a particular amount of screen real estate and LTE
capability, will be served a differently optimized experience than a user on an iPhone4. These
contextual elements are addressed in the “backend” at the point of delivery.
Adaptive Web Design detects the screen size and then pulls the appropriate static layout from a
programmed library of options. There are six common screen widths that cover most of the ways
that a user might view a website, so all Adaptive Web Design should have at least these six options.
Although creating multiple widths for the design of one website might seem like extra work, it can
be better for the overall website performance.

As Stuart McMillan writes, “this ability to switch content (templates) based on server-side device
detection is the heart of adaptive design.” Or to make a garment analogy: if responsive web design
is like spandex, stretching to fit any body type, and native apps are like custom-tailored couture
that fits only a specific individual, Adaptive Web Design is like having a massive wardrobe of
easily interchangeable pieces in all shapes and sizes ready to complete an outfit. (Yottaa, 2019)

Adaptive Design is useful for retrofitting an existing site in order to make it more mobile friendly.
This allows you to take control of the design and develop for specific, multiple viewports. It does,
however, afford you a certain amount of control, for example over content and layout that you
won’t necessarily have using responsive design. (Jerry, 2015)

Adaptive Web Design is to create the best experience for the user, irrespective of the browser or
device that he or she uses. Desktop users are shown the full website, whereas mobile users are
presented with a separate mobile version of the site. For your desktop site, on the other hand, you
may even choose to discard the tap-friendly mobile features. On the other hand, you can also
display a “Switch to Mobile/Desktop Site” link in your footer or sidebar, so that users on devices
such as tablets can decide for themselves. (Sufyan, 2013)
The difference between Responsive and Adaptive Design

Figure 3 show the different on adaptive design and responsive design (Usability, 2014)
The Pros and Cons

Figure 4 show the pros and cons on adaptive and responsive design. (Usability, 2014)
Reponsive Design vs Adaptive Design

Figure 5 show the performance and and development on adaptive and responsive design

(stm, 2013)
Conclusion

Both adaptive and responsive design prepare your website for mobile use. Both allow websites to
be viewed on handheld devices and various screen sizes, eventually providing visitors with a better
mobile user experience.

Both responsive and adaptive web designs ensure that your website performs well across different
devices with varying screen resolutions. While responsive design makes your website
automatically adjust its layout as per the screen resolution, adaptive design allows for specialized
user experience by distinguishing between mobile and desktop versions of the same site.

Responsive Web Design is the client-side meaning the layout decision is made on a user’s browser.
The page is sent to the device browser and the browser then modifies the appearance of the page,
with respect to the size of the browser window.

Adaptive Web Design is the server-side where layout decisions are made on the web server. The
page uses this information to deliver different sets of HTML, CSS and JavaScript code, based on
the characteristics of the device that have been detected. (N., 2015)

Responsive web design has become a household term since it was coined by Ethan Marcotte on A
List Apart in 2010; so much that we may take our understanding of it for granted. The concept of
a responsive website is one of the greatest CSS "tricks" in the books and important enough to step
back from in order to both remind what makes a "responsive" website and how it's different from
an "adaptive" one. (tricks, 2019)

As a conclusion, every designer will have a slightly different take on responsive versus adaptive
design, or even why fluid is equal to both of them. Whichever you decide, the principal goals to
keep in mind are desired functionality, adaptability to mobile, and the overall user experience.
References

Jerry, C., 2015. uxpin. [Dalam talian]

Available at: https://www.uxpin.com/studio/blog/responsive-vs-adaptive-design-whats-best-choice-
designers/
[Diakses 15th June 2015].

Month, O., 2019. One month. [Dalam talian]

Available at: https://learn.onemonth.com/responsive-vs-adaptive-vs-fluid-design/
[Diakses 27th March 2019].

N., V., 2015. ZYMR. [Dalam talian]

Available at: https://www.zymr.com/responsive-vs-adaptive-design-for-ui/
[Diakses 15th April 2015].

pmxagency, 2014. pmxagency. [Dalam talian]

Available at: https://www.pmxagency.com/wp-
content/uploads/2014/04/Responsive_vs_Adaptive_Web_Design.pdf
[Diakses 6th April 2019].

SoeGaard, M., 2019. Interaction Design Foundation. [Dalam talian]

Available at: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design
[Diakses 6th April 2019].

stm, 2013. stm. [Dalam talian]

Available at: https://www.stm-
assoc.org/2014_05_01_Spring_Conference_Flash_Hevenstone_Responsible_Design.pdf
[Diakses 23th October 2013].

Sufyan, B. U., 2013. Torque. [Dalam talian]

Available at: https://torquemag.io/2013/09/responsive-design-vs-adaptive-design/
[Diakses 19th September 2013].

tricks, c., 2019. css tricks. [Dalam talian]

Available at: https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
[Diakses 6th April 2019].

Usability, 2014. Usability. [Dalam talian]

Available at: https://www.usability247.com/wp-content/uploads/2014/07/Responsive-Web-Design-
versus-Adaptive-Design.pdf
[Diakses 6th April 2019].

Yottaa, 2019. yottaa. [Dalam talian]

Available at: http://cdn2.hubspot.net/hub/156417/file-2465906446-pdf/docs/AWD-paper-INDD
[Diakses 6th April 2019].