• Skip to content
  • Skip to primary sidebar

Brianna Cureton

Just another Master of Science – Digital Innovation in Marketing site

Fox School of Business

Responsive and Adaptive Websites for Mobile Users

December 5, 2019 By Brianna Cureton Leave a Comment

The development of responsive and adaptive websites is simply to make them mobile friendly. Mobile Friendly includes smartphones, tablets, smartwatches, and laptops. Designers need to cater to all devices when creating websites to ensure satisfactory usability and accessibility. There are two methods to choose when making your site mobile friendly; let’s dive into the differences and similarities between the two.

Responsive Design

Responsive design means that one size or design fits all screens. The code sets dimensions that determine where the site will scale images, wrap text, adjust the layout.This is achieved using CSS media queries. As the website is loading, the code in the design checks how much space is available on the device’s browser. Although this slows down the page loading time, the design will respond to the browser size and resize many of the elements on the homepage.  The device browser size is dependent on the device screen size on smaller devices and dependent on the browser window size on larger devices. For example, on smaller devices, the browser size is fixed, but on a tablet, desktop, or laptop, the user can change the browser screen size on command. If you resize your browser on a laptop or desktop, you may notice a changes in the design.

You have less control over the elements on your site with responsive design, element can move around inappropriately on devices that the site was not optimized for. This lack of control over element placement can cause advertisements to not be visible to consumers – affecting your bottom line. This makes it so that responsive design requires testing on various devices. The investment is not as pricey as the adaptive design, especially when using templates on sites like Weebly, WordPress or Squarespace.

Adaptive Design

Adaptive design also heavily depends on the device screen size. Typically, a designer would develop six different designs to go along with each standard screen width; 320, 480, 760, 960, 1200, and 1600 pixels. More time consuming and expensive but ensures the best user experience because each design is tailored to the user’s device. It gives you more control over the experience which is why industry leaders like Amazon use adaptive design. Another plus is that adaptive Designs often outperforms responsive design on speed tests. The speed of your site highly correlates with website traffic.

Here is an overview:

 

Take a peep at what Awwwards considers the best responsive designs

 

 

Here is some additional information from sites referred to:

https://www.awwwards.com/websites/responsive-design/

https://www.lifewire.com/responsive-vs-adaptive-web-design-4684926

https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design

Share:

  • Click to email this to a friend (Opens in new window)
  • Click to print (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

Filed Under: Uncategorized

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

My information

  • About
  • Client Results
  • Interests
  • Resume

Recent Posts

  • Ephemeral Content for the Win
  • Customer Service on Social Media
  • Responsive and Adaptive Websites for Mobile Users
  • City Parking Frustrations – ParkMobile and RideSharing Apps pose a Solution
  • GDPR – Are you Compliant?
  • Are Marketers Utilizing the Brand Benefits Ladder?

Copyright © 2021 · Brianna Cureton
Disclaimer: The information included in e-portfolios are posted and maintained by the applicable student. Temple University makes no representation as to the accuracy or currency of this information.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.