You might come across articles online that talk about a whole bunch of different website design styles (fixed, static, fluid, etc.). However, in today’s mobile-centric world, there are only two website styles to use to properly design a website: adaptive and responsive. 

Adaptive websites

Adaptive web design uses two or more versions of a website that are customized for specific screen sizes. Adaptive websites can be split into two main categories based upon how the site detects what size needs to be displayed:

1. Adapts based on device type 

When your browser connects to a website, the HTTP request will include a field called “user-agent” that will inform the server about the type of device attempting to view the page. The adaptive website will know what version of the site to display based on what device is trying to reach it (i.e. desktop, mobile, tablet). Issues will arise if you shrink the browser window on a desktop because the page will continue to display the “desktop version” rather than shrinking to the new size. 

2. Adapts based on browser width 

Instead of using the “user-agent”, the website uses media queries (a CSS feature that enables a webpage to adapt to different screen sizes) and breakpoints (certain width sizes) to switch between versions. So instead of having a desktop, tablet, and mobile version, you will have 1080px, 768px, and 480px width versions. This offers more flexibility when designing, and a better viewing experience as your website will adapt based on screen width.

Pros 

• WYSIWYG editing (what you see is what you get) 
• Custom designs are faster and easier to build without code 
• Cross-browser and cross-device compatibility 
• Fast-loading pages

Cons 

• Websites that use “device-type” can look broken when viewed in a smaller browser window on a desktop
• Limitations on certain effects that only responsive sites can accomplish

Responsive Websites

Responsive websites can use flexible grid layouts that are based on the percentage each element takes up in its container: if one element (e.g. a header) is 25% of its container, that element will stay at 25% no matter the change in screen size. Responsive websites can also use breakpoints to create a custom look at every screen size, but unlike adaptive sites that adapt only when they hit a breakpoint, responsive websites are constantly changing according to the screen size.

Pros 

• Great experience at every screen size, regardless of the device type
• Responsive website builders are typically rigid which makes the design hard to “break”
• Tons of available templates to start from

Cons

• Requires extensive design and testing to ensure quality (when starting from scratch)
• Without accessing the code, custom designs can be challenging

It’s important to note that website builders can include both adaptive and responsive features. For example, Pagecloud recently introduced a series of features that allow your content to act responsive even though the website itself is still adaptive. 

The post Types of Website Design: Adaptive vs. Responsive appeared first on Web and Scratch.