Unraveling Code

Responsive vs Adaptive webpages


I think this is an important first post for me because one of the main things that sparked my interest in web development was actually my encounters with webpages that did not fit right into the screen sizes of devices i was using.

Over the years, we have evolved from simply being able to only access websites using computers to being able to view them various devices including, but not limited to; phones, tablets and even smart watches. I believe that it is paramount that we take this into consideration when building websites and applications.

When i first started developing websites, i learnt about using media queries to make the webpages suitable for different screen sizes. I later discovered that there is more than one way to do this and each method differed in some way and has its advantages and disadvantages. This article evaluates Responsive and Adaptive web design to allow us make the best decision for what ever it is we are building.

Responsive Web Design

Responsive Design was coined by Ethan Marcotte, a web designer and developer, in an article , Responsive Web Design, featured on A list apart. It is a fluid approch to design that takes into consideration the screen sizes and viewports of the devices the webpage is being viewed on to change the look of webpages dynamically to adapt to them.

Responsive web design is a bit tough to achieve as it requires very good conceptualisation of the site and the needs and wants of the users. But is also pretty straightforward because of its fluidity; this means that users can access your websites with the same ease and experience across a range of devices of different sizes. If you open a responsive site on a larger screen and then change the size of the browser window, the content of the page automatically moves to accommodate its content optimally for the new screen size.

Some of the tips for achieving this includes:
  1. Use of relative measurement units.
  2. Make use of flexbox.
  3. Continuously play with the size of the browser to ensure everything is sitting okay.
Advantages include:
  1. Optimal user experience.
  2. SEO optimization

Adaptive Web Design

Adaptive design on the other hand offers tailor-made pages for different viewports. This method of design takes into consideration the different breakpoints that exists and elements are moved around to optimise user experience. This means that the webpage you see on a laptop screen can appear different on a mobile screen.

Adaptive design contd

Exit post