Here are six of the most common web design layouts for your business and the pros and cons of each.
Static Page Layout
Liquid Design Layout
Adaptive Website Layout
Dynamic Website Layout
Responsive Design Layout
Single Page Layout
1. Static page layout
One of the most basic types of website design is static page layout. With this layout, you build a website with pre-set page dimensions — it has a permanent width. Static layouts stick to these dimensions, regardless of the browser or device type. Static layouts have phased out with the rise of mobile usage. Since these sites don’t adapt to devices, they don’t provide a positive user experience on smartphones or tablets.
While static layouts are still an option, you typically don’t want to use them unless you’re creating a completely separate mobile version of your site.
2. Liquid design layout
Next on this list of types of website design is liquid design layouts. This layout, also known as fluid design, uses flexible units rather than the fixed units static layouts use. Since the units are flexible, the page will always fill the width with the device’s screen, regardless of what device it is.
Because user experience is critical to your site driving and engaging traffic, liquid layouts have also started to phase out as a viable option for businesses. While you can still use this layout, you risk delivering a poor user experience from your site stretching too far or squishing information together on the page.
3. Adaptive website layout
One web design format you can use for your site is adaptive website layout. As the name implies, this website uses CSS queries to adjust the website’s size to detect the size of the browser. Adaptive websites will automatically alter the website’s layout to provide the best user experience for visitors.
With adaptive website layouts, there are set parameters for how a website will adjust. For example, a set parameter may look like this: “If the browser is 500 pixels wide, set the main content container for 400 pixels wide.” For example, if you have a website with a two-column layout, the adaptive layout would change into a single-column design on a small browser screen.
4. Dynamic website layout
When you’re looking at a list of the types of web design, you’ll see that the dynamic website layout is an option. Dynamic website layouts are great for people who don’t have extensive HTML knowledge. These websites can deliver different content to website visitors, even if two separate people look at the same page.
With a dynamic website vs. static website, you build a database of information and features. Then, when a user requests a page, the web coding automatically works to put the components together from your database to form the webpage.
5. Responsive design layout
Next on our list of types of website layouts is responsive design layout. This layout format is the most popular type, as it allows your site to accommodate all devices and fill the browser size perfectly. Responsive design is built with a mobile-first approach.
You create your mobile layout first, and then you expand your website for bigger browser sizes. So instead of trying to trim down your website and make it smaller, you start small and build it bigger. One example of responsive design from Dropbox.
6. Single page layout
The last item we’ll cover on our list of types of web design is a single-page layout. As the name implies, single-page layouts use only one page that users scroll down to find information about your products or services. With this design layout, you can have a “navigation menu” with links to specific points of your page.