What’s the Best Choice for Designers: Responsive vs. Adaptive Design? - PowerPoint PPT Presentation


Title: What’s the Best Choice for Designers: Responsive vs. Adaptive Design?


1
Responsive vs. Adaptive Design Whats the Best
Choice for Designers?
Presented by Priya Rana
2
Table of Content
  • Introduction
  • Whats the Difference?
  • Why Use Adaptive?
  • Why Use Responsive?
  • Considerations to Take into Account
  • The Decision
  • Conclusion
  • Contact Us

3
Introduction
  • Google has always recommended responsive web
    design (RWD), especially after rolling out a big
    update on the 4/21/15 which ranked
    mobile-friendly sites higher.
  • It doesnt specify in the update that you must
    use responsive design though, just that a site be
    accessible on mobile, with good UX and
    performance.
  • With that in mind, lets examine the pros and
    cons of adaptive vs. responsive design with
    regards to performance and UX.
  • One of the biggest debates that weve seen since
    the rise of mobile is whether you should choose
    to develop a responsive, adaptive web design
    (AWD) or standalone mobile site (with its own m.
    URL). 
  • For the purposes of this discussion, well leave
    out standalone m. sites as it appears to be the
    least favorite solution for designers and
    businesses since they must be created separately
    (which accrues more upfront cost and maintenance
    costs).

4
Whats the Difference?
  • So first up, whats the key differences between
    responsive and adaptive design?
  • Put simply, responsive is fluid and adapts to the
    size of the screen no matter what the target
    device. 
  • Responsive uses CSS media queries to change
    styles based on the target device such as display
    type, width, height etc., and only one of these
    is necessary for the site to adapt to different
    screens.

5
Whats the Difference?
  • Adaptive design, on the other hand, uses static
    layouts based on breakpoints which dont respond
    once theyre initially loaded. 
  • Adaptive works to detect the screen size and load
    the appropriate layout for it generally you
    would design an adaptive site for six common
    screen widths
  • 320
  • 480
  • 760
  • 960
  • 1200
  • 1600
  • On the surface, it appears that adaptive requires
    more work as you have to design layouts for a
    minimum of six widths. 
  • However, responsive can be more complex as
    improper use of media queries (or indeed not
    using them at all) can make for display and
    performance issues.

6
Why Use Adaptive?
  • Adaptive 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.
  • The number of viewports that you choose to design
    for is entirely up to you, your company and
    overall budget.
  • It does, however, afford you a certain amount of
    control (for example over content and layout)
    that you wont necessarily have using responsive
    design.
  • Generally, you would begin by designing for a low
    resolution viewport and work your way up to
    ensure that the design doesnt become constrained
    by the content.
  • As mentioned previously, its standard to design
    for six resolutions. 
  • However, you can make a more informed decision by
    looking at your web analytics for the most
    commonly used devices and then designing for
    those viewports.

7
Why Use Responsive?
  • The majority of new sites now use responsive,
    which has been made easier for less experienced
    designers and developers,  thanks to the
    availability  of themes accessible through CMS
    systems such as WordPress, Joomla and Drupal.
  • Responsive doesnt 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.

8
Why Use Responsive?
9
Considerations to Take into Account
  • As discussed earlier, responsive sites can suffer
    when it comes to site speed (if they arent
    properly implemented).
  • Responsive also requires more in the way of
    coding in order to ensure that the site fits each
    and every screen that access it. 
  • However, the extra work is debatable (compared to
    adaptive design) since adaptive design requires
    that you develop and maintain separate HTML and
    CSS code for each layout. 
  • Modifying adaptive sites is also more complex
    since its likely youll have to ensure that
    everything is still working sitewide (such as
    SEO, content and links) when its time for
    implementation.
  • You should, of course, also consider the user
    experience.
  • Because responsive essentially shuffles the
    content around in order to fluidly fit the device
    window, you will need to pay particular attention
    to the visual hierarchy of the design as it
    shifts around.

10
The Decision
  • When it comes down to it, the key is to consider
    your audience first and foremost no matter what
    design technique you adopt.
  • Once you know exactly who they are and what
    devices they tend to access the site on, then
    its easier to design with them in mind when it
    comes to layout, content and so on. 

11
The Decision
  • It will also depend largely on whether you have
    an existing site to work with or youre starting
    from scratch. 
  • Responsive design has become the go-to design
    technique and its thought that around 1/8
    websites now use responsive (while theres little
    to no data on how many use adaptive).
  • Adoption rates for responsive are growing quickly
    too and have almost reached the same level as
    standalone mobile sites.
  • With all of that in mind, its safe to say that
    responsive is usually the preferred technique if
    only because of the ongoing work that adaptive
    design demands.
  • However, if a client or company has the budget,
    then adaptive might be a better choice, according
    to a test carried out by Catchpoint.
  • They built two sites in WordPress, one using the
    standard WP TwentyFourteen responsive theme and
    the other using a plugin called Wiziapp.

12
Conclusion
  • Responsive design will remain popular, but that
    might be because we have not yet found a decent
    solution to the heavy maintenance that adaptive
    demands.   
  • Adaptive design hasnt died out though, despite
    the webs apparent love of responsive, so its
    possible in theory at least that well see
    some improvements emerge yet that will blow
    responsive web design out of the water.

13
Contact Us
  • Vintage Coders
  • Address SCO 35F City Center, near Bus Stand
  • Hoshiarpur, Punjab, India.
  • Website http//vintagecoders.com/
  • Phone 07837982287
  • Office Email vintagecoders89_at_gmail.com
  • Email vintagecoders786_at_gmail.com
  • Resources https//goo.gl/VMubBX

14
(No Transcript)
View by Category
About This Presentation
Title:

What’s the Best Choice for Designers: Responsive vs. Adaptive Design?

Description:

In this presentation, there is explanation about the difference between responsive & adaptive design and conclude it, also describes that which is commonly use nowadays. – PowerPoint PPT presentation

Number of Views:17

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: What’s the Best Choice for Designers: Responsive vs. Adaptive Design?


1
Responsive vs. Adaptive Design Whats the Best
Choice for Designers?
Presented by Priya Rana
2
Table of Content
  • Introduction
  • Whats the Difference?
  • Why Use Adaptive?
  • Why Use Responsive?
  • Considerations to Take into Account
  • The Decision
  • Conclusion
  • Contact Us

3
Introduction
  • Google has always recommended responsive web
    design (RWD), especially after rolling out a big
    update on the 4/21/15 which ranked
    mobile-friendly sites higher.
  • It doesnt specify in the update that you must
    use responsive design though, just that a site be
    accessible on mobile, with good UX and
    performance.
  • With that in mind, lets examine the pros and
    cons of adaptive vs. responsive design with
    regards to performance and UX.
  • One of the biggest debates that weve seen since
    the rise of mobile is whether you should choose
    to develop a responsive, adaptive web design
    (AWD) or standalone mobile site (with its own m.
    URL). 
  • For the purposes of this discussion, well leave
    out standalone m. sites as it appears to be the
    least favorite solution for designers and
    businesses since they must be created separately
    (which accrues more upfront cost and maintenance
    costs).

4
Whats the Difference?
  • So first up, whats the key differences between
    responsive and adaptive design?
  • Put simply, responsive is fluid and adapts to the
    size of the screen no matter what the target
    device. 
  • Responsive uses CSS media queries to change
    styles based on the target device such as display
    type, width, height etc., and only one of these
    is necessary for the site to adapt to different
    screens.

5
Whats the Difference?
  • Adaptive design, on the other hand, uses static
    layouts based on breakpoints which dont respond
    once theyre initially loaded. 
  • Adaptive works to detect the screen size and load
    the appropriate layout for it generally you
    would design an adaptive site for six common
    screen widths
  • 320
  • 480
  • 760
  • 960
  • 1200
  • 1600
  • On the surface, it appears that adaptive requires
    more work as you have to design layouts for a
    minimum of six widths. 
  • However, responsive can be more complex as
    improper use of media queries (or indeed not
    using them at all) can make for display and
    performance issues.

6
Why Use Adaptive?
  • Adaptive 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.
  • The number of viewports that you choose to design
    for is entirely up to you, your company and
    overall budget.
  • It does, however, afford you a certain amount of
    control (for example over content and layout)
    that you wont necessarily have using responsive
    design.
  • Generally, you would begin by designing for a low
    resolution viewport and work your way up to
    ensure that the design doesnt become constrained
    by the content.
  • As mentioned previously, its standard to design
    for six resolutions. 
  • However, you can make a more informed decision by
    looking at your web analytics for the most
    commonly used devices and then designing for
    those viewports.

7
Why Use Responsive?
  • The majority of new sites now use responsive,
    which has been made easier for less experienced
    designers and developers,  thanks to the
    availability  of themes accessible through CMS
    systems such as WordPress, Joomla and Drupal.
  • Responsive doesnt 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.

8
Why Use Responsive?
9
Considerations to Take into Account
  • As discussed earlier, responsive sites can suffer
    when it comes to site speed (if they arent
    properly implemented).
  • Responsive also requires more in the way of
    coding in order to ensure that the site fits each
    and every screen that access it. 
  • However, the extra work is debatable (compared to
    adaptive design) since adaptive design requires
    that you develop and maintain separate HTML and
    CSS code for each layout. 
  • Modifying adaptive sites is also more complex
    since its likely youll have to ensure that
    everything is still working sitewide (such as
    SEO, content and links) when its time for
    implementation.
  • You should, of course, also consider the user
    experience.
  • Because responsive essentially shuffles the
    content around in order to fluidly fit the device
    window, you will need to pay particular attention
    to the visual hierarchy of the design as it
    shifts around.

10
The Decision
  • When it comes down to it, the key is to consider
    your audience first and foremost no matter what
    design technique you adopt.
  • Once you know exactly who they are and what
    devices they tend to access the site on, then
    its easier to design with them in mind when it
    comes to layout, content and so on. 

11
The Decision
  • It will also depend largely on whether you have
    an existing site to work with or youre starting
    from scratch. 
  • Responsive design has become the go-to design
    technique and its thought that around 1/8
    websites now use responsive (while theres little
    to no data on how many use adaptive).
  • Adoption rates for responsive are growing quickly
    too and have almost reached the same level as
    standalone mobile sites.
  • With all of that in mind, its safe to say that
    responsive is usually the preferred technique if
    only because of the ongoing work that adaptive
    design demands.
  • However, if a client or company has the budget,
    then adaptive might be a better choice, according
    to a test carried out by Catchpoint.
  • They built two sites in WordPress, one using the
    standard WP TwentyFourteen responsive theme and
    the other using a plugin called Wiziapp.

12
Conclusion
  • Responsive design will remain popular, but that
    might be because we have not yet found a decent
    solution to the heavy maintenance that adaptive
    demands.   
  • Adaptive design hasnt died out though, despite
    the webs apparent love of responsive, so its
    possible in theory at least that well see
    some improvements emerge yet that will blow
    responsive web design out of the water.

13
Contact Us
  • Vintage Coders
  • Address SCO 35F City Center, near Bus Stand
  • Hoshiarpur, Punjab, India.
  • Website http//vintagecoders.com/
  • Phone 07837982287
  • Office Email vintagecoders89_at_gmail.com
  • Email vintagecoders786_at_gmail.com
  • Resources https//goo.gl/VMubBX

14
(No Transcript)
About PowerShow.com