Page Layouts are nothing but an arrangement of the various HTML components, elements in some containers. Every web page has containers; we call the body which is a standard HTML tag.
We can have N number of arrangements for these HTML components and elements. You can create your own layouts. Generally, layouts are created using table and div elements of the HTML.
Before we go ahead, you should have basic knowledge of the following technologies:
Let’s try to understand how these technologies will help us in creating awesome web pages.
HTML is a markup language, which has got html tags and we will use these tags for creating the skeleton of the web page.
CSS is used for styling purposes and the best part is it gives the power of media queries. We will discuss media queries in a future article.
We will focus more on responsive page layouts and how media queries can be used to create this type of layout quickly.
Why should I learn HTML Layouts, I am working on salesforce platform?
Types of Layouts
This section will give you more details about common types of layouts used in web design.
- Static Page Layout
- Liquid Page Layout
- Adaptive Page Layout
- Responsive Page Layout
Static Page Layout
A Static page layout is referred to as fixed or fixed width layout. The width of the page does not change with the browser widow size. While creating a page every block or component of the page has fix width i.e. pre-set width which does not change at all, if you resize your browser window.
Page can have fixed width of say 960px no matter what the browser window size is. If you resize the browser window you can see scrollbars on the window. This is how web pages were traditionally built for many years.
Rendering the page is not predictable; in this case on desktops you can see the page is cut of and scrollbars displayed, but in case of mobile devices you may zoom and go to the content you’re interested in.
Static layout does not change the dimensions hence you can see the scrollbars. For a live example of this type of layout go to: http://store.apple.com/us
Liquid Page Layout
A liquid page layout is also called fluid layout. This layout is created by using the combination of pixels and percentages units for width, you can use ems (Em is a css relative unit of size.). Fluid width layouts will always try to occupy full width of the browser window, no matter what the size of the window.
In many Instances it works as expected, it does not require a lot of effort to make the layout fluid. But this layout has got some serious flaws. If you have a wide screen, then your content may get stretched for example a paragraph will be displayed in a single line. If you have very small screen, then it may look crowded.
Fig. 2.2.2 You can see here the width of the page is adjusted to fit into the window.
Adaptive Page Layouts
This layout uses a splendid feature provided by CSS called media queries. Media queries define rules for various width of the browser and the browser will automatically apply the correct rule. This type of layouts uses pixels, ems or percentage units for width in a rule. This document does not cover media queries in detail. This will be covered in my next document.
Adaptive layouts are used to convert the static layout to support mobile devices. The drawback is media queries cannot be written for all width, there are some ideal width defined by experts, we can only make the layout adaptive for predefined screen sizes.
You can see that the divs are aligned in relative position with each other this means that the page can be displayed on a small screen.
This image shows that the layout can be adjusted up to certain breakpoints, beyond that it becomes static. You can now see the scrollbars on window.
Responsive Page layout
Responsive layout uses relative units like percentage, pixels or ems along with the media queries. The layout will hook itself as the browser size increases or decreases; also it will try to accommodate the space available whenever window size goes beyond the predefined width in the media queries.
Mobile-first approach is used in responsive designs, Layout is designed for mobile devices first then for tablets and desktops.
Tablet Size Mobile Size
Important thing to note here is, divs are aligned in relative position and they occupy full width of the window.
On both the layouts divs are aligned relatively. But divs in the responsive layout take full width of the window and divs in the adaptive layout have their predefined width that cannot be changed.