Web Layouts through HTML and CSS - Basic to Fluid
Structure and layouts can make or break a website. Structure and layouts influence how the website will appear and behave to the end user. A properly structured website with a good layout enhances the appearance as well as usability. Navigation needs to be in an easy-to-access area, always visible. The data or content should be organized and readable and the backgrounds and images should be fluid. This tutorial should tell you what you need to know about the basics of layout and structure using basic HTML elements plus information and use of Cascading Style Sheets.
There are plenty of HTML elements that give structure to web pages. Foremost of these are:
<table> - the table element is as the name suggests, creates a table container within an HTML page. The table can contain any number of rows and columns. A field in a table can also contain a table with any number of rows and columns as long as the target screen can handle the page. A field in a table can contain any type of HTML object. The main advantage of the table is that it’s the easiest way to give structure to a basic website though it’s not designed for that purpose. Tables are also the best way to present list data as organized rows and columns like how users would view them in spreadsheets.
Figure 1 - Web page made up of tables
<frame> - frames became a rage when the element was introduced. A page can be organized and divided into several sections, often three (header, sidebar, body) each with their own HTML document. The header or sidebar usually contained navigational elements like buttons or menus with links to various parts of the websites and the body displays the content. The navigation section is its own HTML page. With frames, early web developers no longer had to refresh the whole page in case a user clicks on a link to another part of the website. They also no longer had to include the navigation elements to every webpage. The body is usually the only one that updates and the website is given a uniform look and feel and becomes easier to navigate. This example is just one of the advantages of frames. Expanding further, one can split the body into several parts and display multiple documents at the same time. The top part for example can display a list of chameleon species while the bottom frame shows the details per species.
Figure 2 - Simple frame example
<div> - the table element can either be used to divide an entire webpage or create a tabular section for to display rows of data. The frame and frameset elements divide the browser window into several sections. The div element can create formatted sections within a web page without having to declare a table element. Div, along with CSS can be used to create an attractive and structured page layout instead of using a table as described above. You can create sections on a web page as if drawing them on a sheet of paper though the paper design draft should come first.
Figure 3 - Single HTML document subdivided using div
Using <table>
The table element is quite easy to use. Although it wasn’t designed for layout purposes, many developers made use of it in such fashion. It was the most basic way to create structure for a website without using frames. The table element is made up of two sub-elements designed to work in pairs:
<TR> - stands for Table Row. Defines a single row within a table element. There are no limits as to how many rows can be made in a single table. These tags work in pairs <TR></TR>
<TD> - stands for Table Data. For every table row, there must be at least one Table Data. So the smallest table element can be made up of just one row and one column or cell which represents one unit of data. These tags work in pairs <TD></TD>
The following examples will make use of some element properties:
- Border – gives the table borders of different thickness. The value of border is numeric enclosed in ‘’. Ex: border=’1’
- Width – assigns the width of the table relative to the browser screen size. For the example. Values are in percentage but can be set to static number of pixels. Ex: width=50%
- Align – aligns the table horizontally relative to the browser screen or table data relative to the cell. Values are left, right and center. Ex: align=’left’
- Valign - aligns the table vertically relative to the browser screen or table data relative to the cell. Values are top, down and center. Ex: valign=’top’
Table Example:
Figure 4 – Basic table layout code
Simple Site with a table-based layout:
Figure 5.1- Nested table layout
Figure 5.2 Nested tables figure
Copy and paste the above example (Figure 5.1) on notepad and save as an .html file and you can see how you can build a simple website layout. As mentioned, tables can be cascaded. Individual table cells can contain tables. You can enhance this example by inserting images or backgrounds within individual cells and hyperlinks per menu item.
Using <frame>
The problem with the above basic table example is that in order for it to work, the entire screen has to be reloaded per click of a menu item. The whole website is composed of one webpage per menu item and each of those webpages must contain the same code except with different content. With frames, web developers need only load a separate content document in the body section pointed to by the hyperlinks in the menu items. They don’t need to reload any graphics or objects that could slow the website down especially for users in low-bandwidth areas. The frame element divides the browser screen into separate areas. To use <frame>, you need to be familiar with the <frameset> element as well. The frameset element is basically used to contain and manage all the frames within a webpage.
The tags Frame and frameset work together to split the browser screen into independent components so developers can avoid updating the entire webpage when users navigate to just one particular are of the site. This also gives the website some degree of layout standardization.
Example website using frames:
<html>
<frameset cols="25%,*,20%">
<frame src="frame_1.htm">
<frame src="frame_2.htm">
<frame src="frame_3.htm">
</frameset>
</html>
Fig 6 - Example using frames
The example below divides the page vertically in three sections. The first frame occupies 25% of the screen while the middle is not specified while the third gets 20%. In a live situation, the first frame will be for navigation, the middle for content while the third can be for a form of advertisement. Changing the ‘cols’ attribute to ‘rows’ will divide the screen horizontally. Frames however are no longer supported by the HTML5 standard but browsers still support them as long as they support HTML4.
Mixed frameset. Below is an example of framing similar to the previous example using tables.
<html>
<frameset rows="20%,50%">
<frame src="frame_1.htm">
<frameset cols="25%,75%">
<frame src="frame_2.htm">
<frame src="frame_3.htm">
</frameset>
</frameset>
</html>
Fig 7.1 - Sample code mixed frameset
Fig 7.2 - Output mixed frameset
Using <div>
The div tag is a more modern method of defining specific sections of a webpage similar to frames. This is now the most widely used method of creating flexible web layouts. Below is a good example along the lines of our previous ones.
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>My Website</h1>
</div>
<div id="nav">
Home <br>
Menu Item 1 <br>
Menu Item 2 <br>
Menu Item 3<br>
</div>
<div id="section">
<h2>Item 1 </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="footer">
Lorem Ipsum
</div>
</body>
</html>
Figure8.1 - <div> Example Script
Figure 8.2 – Div based layout
You may notice the script between the <style> tags. That is an example of CSS. Using DIV and CSS, it becomes easy for web developers to produce professional looking websites. In the above example, each DIV statement section is followed by the attribute ‘id’. The id attribute gives specific names which function as pointers for the CSS formatting statements above. Copy and paste the text to notepad and save as an .html file. Play with the numeric values by slightly changing them and you will see the differences. Now we can move on to layouts using CSS.
CSS Web Layouts
The Internet has come a long way since the days of simple HTML. Today, the site’s layout and presentation is as important as the content itself. These days, it’s all about user experience as well as user accessibility be it on the desktop, mobile or print. The sites have to look good and be usable on computers, tablets and smartphones too. There are plenty of technologies that enabled the progress of websites past simple static HTML, such as Flash, Java, scripting languages and Cascading Style Sheets (CSS).
However, Java has come into question because of security concerns. Flash is also on its way out because it’s slow and too resource intensive for mobile devices. Scripting languages such as PHP and JavaScript and CSS are what developers look into in making fast, dynamic and visually appealing websites. Scripting is used for control and dynamic content while CSS is more for layout. Again, presentation is key and to keep the website from being too resource intensive on the client devices, so is CSS.
CSS as we all know is a markup language derived from HTML. It was designed to separate presentation rules from the website content, dramatically speed up website development and standardize the look and feel throughout an entire web project. It’s either a section (inline CSS) or a separate file (external CSS) that HTML pages refer to for rules in styling or presenting almost all HTML objects. CSS has been around since 1996 and it too has gone a long way from simply dictating the size and color of headers and paragraphs.
Most elements in HTML has a <style> tag and other tags that deal with font, size, color, border and position. CSS encapsulates all those properties leaving the HTML syntax clean and readable. CSS is very versatile and users can easily set the style of a certain object type(<p>,<body>,<ul> etc…) a class of a certain object type (<p class=’bluefont’>) or a particular element (<p id=‘redfont’>). For instance, all paragraphs of a page must be uniformly set at Courier New size 20. The developer doesn’t have to set all individual paragraphs of the page to that font and size but instead can declare it at the beginning of the webpage as shown below.
<html>
<head>
</head>
<body>
<p font-family: ‘Courier New’; font-size: 20pt > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p font-family: ‘Courier New’; font-size: 20pt > Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
Figure 9.2 - Before CSS
<html>
<head>
<style type=’text/css’>
p {font-family: ‘Courier New’; font-size: 20pt}
</style>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
Figure 9.2 - After CSS
Figure 9.3 – CSS based layout
In this example above,
- the CSS script begins at the <style> tag defined as <style type=’text/css’>
- It’s followed by the object type, in this case p (paragraph). The style definitions are enclosed by curly braces { and }.
- The paragraph style is then defined. The font is set to Courier New and the font size is set to 20 points. Developers can set as many properties as they like as long as every property setting is ended with a semicolon font-family: ‘Courier New’; except for the last property before the closing brace. In the previous example, all text enclose in the <p> tags will be set to Courier New and sized as 20 points.
A better example is shown below which will format not only the paragraphs but the contents within the body:
<html>
<head>
<style type=’text/css’>
body {
font-family: ‘Courier New’;
font-size: 20pt;
font-style: normal;
font-weight: bold;
color: cyan
}
</style>
</head>
<body>
<h1> Sample Text </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
Figure 9.4 – CSS formatting
Positioning and Layouts
The previous layout example (FIG 8) identified certain <DIV> sections using id tags (header, nav, section and footer). Those ids were given their separate styles in the CSS section. There are hundreds of tags and properties which will be too intensive to discuss. So try playing around with other HTML objects and styles by copying the example in Figure 10 and pasting onto notepad. Name the file whatever you wish with an .html extension.
With CSS currently at version 4, it has evolved into separate modules that deal with separate webpage elements including positioning. In CSS terms, positioning can be:
- Static – default placing for page elements. There’s no need to include except when forcefully removing any later modifications to the positioning.
- Relative – means the element is moved relative to where the element would normally be. Even if the element is moved. The space reserved for the element remains.
- Fixed – fixed items are positioned relative to the browser window and won’t move even if the browser is scrolled. They can overlap other elements and will not be affected by changes to its parent page.
- Absolute – are positioned relative to its parent element or section. If it doesn’t have a parent element, its parent is the page itself. Like fixed items, it will not be affected by changes of surrounding sections. It will overlap other screen elements.
Using the DIV tag to create sections and divide the webpage, and CSS with relative positioning to format sections and the content; web designers or developers can create web pages not bound by the size and shape of the browser window or viewport. These designs will then be able to fit or adapt to various screen sizes of desktop computers with high or low monitor resolutions, netbooks, tablets and smartphones. These designs will also be able to arrange themselves when the browser is resized and still look attractive. In CSS terms, these layouts can be referred to as Flexible, Elastic or Liquid.
- Flexible Layout – is simply any layout that can resize or move based on relative measurements like the size of the browser screen and/or the size of a web page element such as fonts. This is opposed to fixed layouts where in the page is wrapped around a standard container designed for maximized browsers on a standard resolution monitor. Reducing the browser results in other elements going out of sight viewable only through scrolling.
- Liquid layouts – are designed to have sections that will resize their selves accordingly relative to the size of the browser screen or viewport. Good liquid layouts have each section resize up to a certain limit when the browser screen becomes too small but can be limitless as long as the browser continues to stretch. Properly made liquid layouts will adapt to various screen sizes yet the content will still appear to be organized and readable.
- Elastic Layout – While liquid layouts are designed to be resized relative to the viewport, it can still suffer due to static font sizes. Some sections may not adapt well and can end up being too small or too large to contain elements or text with large fonts. Another scalable layout that solves the problem is called Elastic layout. Elastic layouts solve the problem adapting to user-preferred font sizes instead while adapting to the size of the browser viewport.
There is much debate in the web as to which layout form is best. In the end, it will all depend on what the site’s actual target audience will be. Many companies create separate web sites and apps for mobile devices limited in function while keeping a desktop copy meant for specific screen sizes for full functionality. Still for general purposes like blogs or information sites, efficiently disseminating their content is a priority and a proper, flexible layout is key especially in the mobile age. Now is the time to get kick-started on the basics of flexible layouts.
The Liquid Layout
Below is an example of a liquid layout.
Fig 10.1 - Liquid Layout
Figure 10.3 - Liquid Layout resized horizontally
Code for Figure 10:
Let’s dissect the preceding example (Figure 10.x). Between the <head> tags lie the CSS statements that define their corresponding page sections. The names starting with # point to the page sections between the <div> tags identified by the id identifiers. The #header for example is confined to a height of 50 pixels but has no width which defaults as the width of the browser viewport. The #nav section is also confined to a height of 300 pixels but a width of 25% relative to the viewport. The same goes with the #content section except it has a width of 65% relative to the viewport. The footer is the same as the header and stays at the bottom. Now every section moves relatively to the viewport size. The text moves along with the resized sections. The other CSS statements are self-explanatory except for float. Float left means that when the page is resized, the elements float to the left relative of the objects beside it. With all the objects moving relative to the viewport, the page qualifies as a liquid layout.
One disadvantage of a completely liquid layout is that it doesn’t consider the content within the sections. Looking at the #nav section, if the screen is shrunk to a certain point, the navigation links inside gets distorted so some websites are a mix of fixed elements with some liquid sections.
Regarding fixed sections, the requirement to have footer in this example, limits the liquidity of the #nav and #content sections. By removing the footer, the content in the #content section will be free to adapt downwards without distortion. Play with the example by removing the footer section and the height requirements of the #nav and #content to see full liquidity.
Citing the problems above, a proper mix of fixed and liquid would be the way to go. The changes below should fix the issue of the #nav section. The #content section is also adjusted accordingly.
#nav
{
float: left;
width: 300px;
background-color: #999;
margin-bottom: 10px;
}
#content
{
float: left;
margin-left: 5%;
background-color: #999;
margin-bottom: 10px;
}
Elastic Layout
Elastic layouts are also referred to as em-driven layouts. An em is a unit of measure equivalent to a square of a browser’s default font. So if users mess with font sizes (Largest, Larger, Medium, Smaller and Smallest as per Internet Explorer) through their browsers, the page’s layout could be adversely affected. For example, if the width of the #nav section of the previous examples was fixed, and the user sets the browser font to largest, the ‘navigation links’ might overlap the section’s boundaries. If the sections’ widths are specified as ems, then the sections will adjust to font sizes set by the user. However, an em-driven layout will become independent of the browser viewport. Below is an example of an em-driven or elastic layout.
Figure 11a - Text size in IE is set as smallest
Figure 11b - Text size set at largest
Figure 11c - Text size set at larger
Code for Figure 13:
In the example we decided to limit the section sizes using em units and mold them into a proper layout. You’ll notice in the screens that the layout’s sections change size and move depending on the size of the text. That is if the user decides to change the font size and the developer didn’t set any font sizes and let the users decide on text size. This is handy for people with visual impairments and handy for mobile devices as well. There are also times when developers influence text size through scripting.
In the end, it’s all up to the web designer on how best to approach his web design. If the site is commercial, some fixed elements combined with liquid is necessary. For desktop and mobile sites that present news and other information, a good approach would be liquid and elastic or a combination of both.
Hopefully this article has helped kick-start your understanding of the basics of website layout through HTML and CSS.
Comments
No comments have been made yet.
Please login to leave a comment. Login now