What is Web Design?

Web design is the process of planning, conceptualizing, and arranging content online. Today, designing a website goes beyond aesthetics to include the website’s overall functionality. Web design also includes web apps, mobile apps, and user interface design. 

Did you know that web design can have a huge impact on your performance in search engines like Google? This article will give you some helpful insight into how to create a website that not only looks good, but functions properly and ranks highly in search. 

Types of Website Design: Adaptive vs. Responsive

Understanding the pros and cons of adaptive and responsive websites will help you determine which website builder will work best for your website design needs. 

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.

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.

Leave a Reply

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