Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Fixed Width Design
Most users at the beginning of the internet's existence were desktop computer users. Nowadays, you can access the internet on your laptop, phone, tablet, automobile, etc. People anticipate that the website will appear nice across all platforms. Before responsive web design, web developers and designers tried with a variety of various methods. One of them, was fixed-width design.
As the names suggests "The width of your content is fixed" implies, the material's width will always be the same regardless of the size of your screen. Let’s dive into the article to learn more about the fixed width design.
Fixed Width Design
Fixed layouts are designs that begin with a particular size specified by the web designer. No matter how big the browser window is that is displaying the page, they stay at that width. In most circumstances, fixed-width layouts give a designer more direct control over how the website will appear. They are frequently favored by designers with a print background because they let the designer to make minor changes to the layout and have them maintain consistency across browsers and computers.
Example
Let’s look at the following example, where we are going to design a webpage with a fixed width.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 800px;
font-family: verdana;
line-height: 1.6;
padding: 0 15px;
color: #DE3163;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<article>
<p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
</article>
</body>
</html>
When we run the above code, it will generate an output consisting of the text applied with CSS along with the fixed width displayed on the webpage.
Advantages of using the fixed width
Let’s look into the some of the advantages of using of fixed-width −
Regardless of canvas size, the page's essential structure stays the same. Companies that want to project a unified corporate identity to all visitors may consider this a top priority.
When the page is viewed on a wide monitor, fixed-width pages and columns provide you better control over line lengths by preventing them from being excessively long.
On smaller displays, text won't be interrupted by fixed width components like images because its width is equal to that of the full page.
Drawbacks of the fixed width
Now, let’s look into some of the drawbacks of the fixed-width −
Fixed-width designs need horizontal scrolling in browser windows that are smaller. The majority of people dislike horizontal scrolling.
In larger monitors, they leave huge stretches of white space, which leaves a lot of empty area and necessitates more vertical scrolling than is necessary.
Fixed-width layouts struggle to adapt to changes in font size made by the user. They may be OK for modest increases in font size, but for significant increases, the layout may be affected.
Example
In the following example, we are going to compare the differences between fixed-width and responsive designs.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
background-color: #D5F5E3;
width: 600px;
height: 20px;
margin: 200px auto;
text-align: center;
font-family: verdana;
color: #DE3163;
}
.tutorial1 {
background-color: #E8DAEF;
width: 50%;
height: 20px;
margin: 20px auto;
text-align: center;
font-family: verdana;
color: #DE3163;
}
</style>
</head>
<body>
<main>
<div>
<div class="tutorial">WELCOME</div>
<div class="tutorial1">TUTORIALSPOINT</div>
</div>
</main>
</body>
</html>
On running the above code, an output window will pop up displaying the text: one is applied with a fixed width and another is with a responsive width displayed on the webpage. When the user tries to change the window size, we will notice a change in his behavior.
11 Views
