3 Website Layout Types You Need To Know

  • by Lois Nur Fathiarini
  • October 25, 2022
  • 3 minutes read


For you who are learning to make a website or website designer, website layout is a basic element that is important for the purpose of the website itself. The use of a good and convenient website visually will optimize your website potential so your visitors stay longer in your website.

There are some key factor for a website to be a successful one, and layout design or website layout is one of it. Even if you have a website with audio and visual content, it will look unbalanced if you fail to make a well-placed layout composition. A professional website layout with some mindblowing visual elements will enlighten every visitors in your website.

A design layout will decide the whole visual attractiveness for your website, that’s why you need to compile some basic ideas about various web design layouts. Every layout design has their own uniqueness and purpose. Web designers need to understand the purpose of different kind of layouts because it will help to reach a fantastic web design. The important aspect is not only visual elements, but also its composition which is SEO-friendly and user-friendly. Here are three major layout types that generally used to make a website.

Fixed Layout

source: UX Alpaca

This is a basic, primitive design layout that many people likes, it also easy to make and adjust. Just like its name, the website component is packed in fixed width. It is clear that anyone who browse the website from any browser or gadgets with various width will see the website and its components on fixed width and cannot be moved.

See also  Beneficial Relation Between Graphic Design and Social Media

If you are using fixed layout, the website layout width will stay the same eventhough it is browsed from different browsers. When it’s opened through a larger screen, user will be given more spaces; but when it’s opened from a smaller screen, users will need to scroll the web horizontally (which is loathed by most users) to see the website elements.

Fluid Layout

source: HubSpot Blog

This is the most favorable layout for web designers. A fluid layout will make a website looks very good in different kind of browsers and gadgets. The width percentage designed for website elements will adapt so well with various screen size and match with users’ screen resolutions.

Some interesting things about this layout are: There are no difference in too much white space when it’s seen through different browsers; fluid layout that is designed well can handle horizontal scrolling to increase user’s visibility, to adjust various size for visual and video contents so that it match different screen resolutions.

Responsive Layout

source: WebFX

This is a combination of fixed and fluid layout, and so far it’s the best layout that adopted by most websites until today, especially after the massive use of smartphones into market. On this layout type, font size can self-adjust whenever the screen resolution changes. So if a web designer is using this type of layout, it’s composition will match with various screen size with different resolutions so it gives a satisfying visibility for web users.


Hello! My name is Lois, I live in Jogjakarta, Indonesia. I am a tattoo artist and I also love sewing and making needleworks. I also do watercolor painting and illustrations.

Leave a Reply

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