What is Web Design

1. Introduction

Web design refers to the design of websites that are displayed on the internet. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.

2. Types of Website Design: Adaptive vs. 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.

What do web designers do?

Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages, integrating applications and other interactive elements.

The professionals who perform this process are called web designers, and their job includes the following duties:

Selecting easy-to-read fonts
Choosing attractive color schemes that also enable easy-to-read fonts
Implementing a brand’s identity into the colors, fonts and layout
Creating a map of the website’s structure to ensure intuitive navigation
Placing images, logos, text, videos, applications and other elements
Using coding languages, such as HTML and CSS, to create layouts and to style pages
Making optimized versions of websites and pages both for desktop and mobile viewing