Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Searching for the perfect layout

Sunday, June 30th, 2013 by Servage

In web design community we most of visual designers have ever increasing challenges to deal with the width and height of the website in accordance to the devices. The more complexities are entering with the introduction of mobility devices. Despite our journey from big to tiny screens, we have ample choices to create design that is befitting our needs. Therefore, in this post I would like to revisit the various types of layout of past present and future.

Layout of the past

Since the history of computer and then web, we had some sorts of layouts used in practice and one of them is absolute layout mainly used and still in use for prints. For prints, we measure layout in inches, centimetres, millimetres, etc. today we use this type of layout in word processing files or other printing related work, printing web page in particular, but not in web designing so far.

Layouts of the present

Today, most of the web designers are using relative type of layout while they carry visual designing of a website. The ultimate benefit of this layout is that it is adjusting according to the viewport of the browsers on the client computer or device. This layout is using 100% width of the screen of the device without imposing the scrolling. Thus, you will see whole page on the small screen of notebook as well as on the big screen of the desktop. Here you need to scroll only vertical height, not horizontal width.

In contrast to relative layout fixed layout, offer some exceptional characteristics like placing non-repeating images, designing and arrangements of content and other UI elements that need particular sequence in display are vogue in fixed pixels. Albeit, scrolling in all direction becomes a rule but presentation would be great with this fixed layout.

As we have seen above that fixed layout is ideal for the placements of content, but if we let content to decide the size of the layout then it becomes the elastic layout. Since from very near past we most of the web programmers and web designers are laying out web page design content applying relative em unit measurements. Fortunately, we are living in era where content is king and everything is revolving around the content.

Hence, if your website is purely textual content driven and less dependent on the image or other content this elastic layout solution is perhaps the best option in the web designing industry. In this layout, flexible content blocks are beautifully adjusted according to the screens of the devices and offer greater user experiences to its visitors in content consumptions. No doubt, today we have some technological advancement that allows us to scale images at some extent and make this sort of layout viable across multi-screens.

Here text is getting smaller in small screen devices in order to reduce the width and height and act absolutely in opposite direction when screen size is bigger, means it is enlarging the text. For small viewports, this will act as a disadvantage because text will scale beyond the viewport and users have to scroll horizontally.

Layout of the future

The latest methods of layout includes the scaled types of layouts which are based on CSS3 that manipulates the available viewport of the device and its orientations and scale layout as well as place content accordingly. Therefore, this type of layout is saviour for smartphone industry and mobile first web designers.

The same degree of acceptance is finding for the liquid or fluid type layout where everything is set on % base so layout is adjusting according to the size of the screens or the various devices and their different modes like portrait and landscape.

References & more reading:

Searching for the perfect layout, 3.7 out of 5 based on 3 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.