MakeOwnWebsite.net » Liquid

On the Resolution of Screens the Liquid Web Design and Static Web Design

Admin — Mon, 09 Aug 2010 08:11:22 +0000

I have met frequently in the position of having to choose between adequately covers all possible resolutions and losing accuracy, or fit a couple or three of them being able to design exactly as you imagine it or drawing on paper. I think many other designers novice like me will have been seen in such circumstances, and although it is not easy to develop a universal rule, at least pretend to explain the advantages and disadvantages here that I see over and over how to design.

At present, the computer is an essential part of our life, enables us to obtain results that hardly get in another way. And to be so important, computing is evolving at a rapid speed in most cases we can not fit. NEVER be able to have the latest system software, the latest software, there will always be some piece of our team that this outdated, even for a few days or few months. It is clear that the main reason is our pocket, but we must also think that not everyone has the time and / or the knowledge needed to keep up.

Why do I say this? It’s simple, I intend to say that based on these circumstances, not everyone has the same monitor, in the same browser or the same programs, and this hinders the form of design. In this article I will focus on some of the biggest problems of the current web design: Unlike the resolutions. As we do not know how many pixels will have wide web, we do not know who put the size of our design. This issue divides how to design in two: the design liquid, which is suited to all possible resolutions, or the static design, which can only bring two or three.

Liquid web design The idea of the design is based on liquid that measures of the components of the web are related, that is, having sizes percentage. If you put a table width as 100%, that table will have a width of 800 pixels resolution if the computer is 800×600, or 1024 pixels of resolution if the computer is 1024×768 pixels, and thus with all resolutions. Similarly, if we put a 50% size, the slab measured half the width of the resolution. It would seem that this form of design is the panacea for all our problems, but obviously not the case. And this is not the case for many reasons: think of an image, the size has to be absolute, therefore we can not make that image occupies the entire width of the screen; what if that image is the “top”, which is logo, which also has static measures, and where there is a Pad of a certain width? There are tricks to solve certain parts of the problem, I will discuss later, but I think the idea of the design liquid and its main problem have been made clear. Static web design The idea of static design is based on the components of the Web have absolute measurements. That is, we’ll give you a width in pixels to anything, whether table, image, form field … In this way, and taking into account that most of the designers distribute the elements of your web pages using tables or CSS divisions, we have a system that allows us to be precise, will always know where each element, because the resolution will not make change its position. But of course, not everything was going to be good, if you stop to think a little, it is clear that with this system we chose the width in pixels on our page, and of course, if you make a webpage of 800 pixels wide and someone has a resolution smaller, you have to use the odious horizontal scroll bar, and if your resolution is bigger, you see a small page. Usually the people who design this way, make their web pages with a size between 740 and 755 pixels wide, to understand, adapt to the resolution of 800×600 and thus the page looks good in resolutions of 800×600 and 1024×768, which are the most used according to the statistics. One possible solution, web design mixed One possible solution to alleviate the problems of earlier forms; the design is mixed, but still is far from a panacea. Is to mix the two forms of design, to achieve an outcome that is compatible with all resolutions and has a minimum of accuracy. Imagine that we want to make a kind web portal, so typical, two menus, one on each side and the content in the middle: Well, we can take action is likely to menus, and on the center, for example, we can put 100 pixels wide Each menu, and the downtown area 100%. That way each menu would be 100 pixels wide and the central area would take the rest of the screen size. For example in a resolution of 800×600 pixels each menu would have 100 and the central area would have 600, and in 1024 the menus would have 100 pixels and the central area would have 824 (measures of the central area are well placed to simplify the way, but we should always Remove the width of the vertical scroll bar, and one more thing that takes the browser). But this system remains a problem, we still do not know the exact size of the central area, because it varies with each resolution, and therefore we still lack precision. The big decision seen from different points of view The first method is almost impossible to do, because unless you have only text, it is practically impossible to provide measures for everything. So compare the system is mixed with static system. Those who defend the mixed system, saying that they do have to respect all users by giving them facilities to view the contents of your site the same way that the whole world, it’s about giving equal opportunity to all. Whoever defends the method is based on the statistics, saying it prefers to give the best of himself to an 80% or more people (anything anyone can view a site, but have to use the horizontal scroll bar), which give a worse result at 100% of people. If we neither look coldly nor are like Web pages with different browsers or with different plug-ins. “It’s essentially seek a balance between accessibility and design. It also has much to do the kind of site you are going to design, because you will not in the same way for a web of technology that for a comedy. And as always the best you can do is to design according to your own experience and seeing many, many websites, to learn different methods, different designs and different ways of reaching the public… by Web design India

Direct to India is an Web design India, web design Chennai, Graphics Design, Web development Company offering their excellent Services to their clients since 2007 by visuals India

Web Design Series: Fixed Width Vs Liquid Layouts

Admin — Thu, 01 Jul 2010 08:05:11 +0000

As every experienced web designer should know, there are two types of layout that you can choose from when designing web pages. One is the fixed width layout and the other is the liquid layout. The fixed width layout sets the width of the web page at a specific value, no matter how wide the viewer’s internet browser window is, whereas liquid layouts adjust their width depending on the width of the visitor’s browser window. The choice between these two layouts is not always an easy one and we will explore in depth the factors that will influence your final decision.

Fixed width layouts mean that you have a preset width which you will design the rest of your web page around. The main advantage of this approach is that it gives you greater direction and control over the eventual organization of your web page. Fixed width layouts are best used with print backgrounds, because these help maintain a consistent appearance even across different internet browsers and operating systems. In a liquid layout, however, the overall layout of your page is a percentage function of the size of the browser window being used to view it. They are useful for maximizing the use of space provided by any screen resolution or browser window size. Web designers who are tasked with conveying as much information as possible in a limited amount of space will often choose a liquid layout. It is important to both you and your web design company that you understand which layout would suit the needs of your client better.

Which layout you eventually choose will greatly affect the final look and feel of your web site, not to mention the functionality of the site. The ease with which visitor’s can scan through your site for relevant information and identify the content that they wish to find is largely dependant on your choice of layouts. It is thus absolutely essential that you understand the needs of your client and the kind of website that they want you to build in order to design a web site that reinforces the marketing strategies of your client. Your web design company is also likely to stress the importance of choosing the right layout when you take on any projects.

The Web Design Benefits and the Drawbacks

The pros and cons of each layout type are listed below, so you will be able to make a better-informed decision regarding which type of layout you should use for a particular project.Fixed Width LayoutPros

• Pages that you design look exactly the same when viewed using any internet browser or operating system.

• Images and other non-textual objects will not overwhelm the textual content of the page, regardless of the size of the browser window or viewing monitor.

• The scan length of your pages stays constant no matter how wide the viewer’s browser window is.Cons

• Viewers using smaller browser windows or monitors to view the site will probably have to scroll horizontally to see the entirety of the page. This tends to annoy online visitors.

• A large amount of whitespace is usually generated when viewers use large browser windows to view the site, resulting in wastage of otherwise useful space. Also, more vertical scrolling may be required than should be necessary.

• Font size changes can adversely affect the overall layout of the page. Large increases in font size can cause the layout of your page to become distorted, making it messy and unappealing.

Liquid Width Layouts-Dallas Web Design

Pros

• Layout adjusts its size to fit any browser window size.

• All the available space in the browser window is utilized, enabling larger windows to display more information while not compromising the viewing experience using smaller window sizes.

• You can achieve consistent relative widths, ensuring that your web page can accommodate your client’s varied design requirements such as font size changes.Cons

• Liquid layouts do not allow you to fix the width of the page and other elements on the page, making proper organization difficult in some situations.

• Columns containing text may become either too wide or too narrow for comfortable viewing of the text.

• Fixed width elements on the page may not be correctly displayed. Some browsers may attempt to correct for a lack of space for fixed width elements by increasing the width of the element, thus disrupting the order of the other elements in your layout.

Often, the best approach to use is to use both types of layout within the same web site or even within the same page. The type of layout you use may be dependant on which part of the site you are currently working on. A good example is fixing the width of the central column of the page so that text contained does not become distorted while allowing the layout for the rest of the page to be liquid, making viewing of side-bars and other elements more flexible. With practice and diligence, you will eventually learn the best combination of both layouts to use in any situation that you encounter.

Moe Tamani is a Dallas SEO consultant for a leading Dallas Web Design company.

Web Design Choice Of Fixed Width vs Liquid Layouts

Admin — Thu, 17 Jun 2010 08:05:10 +0000

If you have worked long enough for your web design company, or if you have tried designing a site on your own, you should already know by now that there are two kinds of web page layouts that you can choose from. Fixed width layouts are those wherein the width of the entire web page is set at a specific value, while liquid layouts are those wherein the width is flexible depending on how wide the online visitor’s browser is. Choosing between these two layout methods can be a little difficult for a web designer, as each has its own benefits and deficiencies. Let us look through each and discover everything you need to know for you to make the right choice.
Fixed width layouts allow you to start with a specific size that you set. This allows you better and direct control so that you know how your page will look like, at least most of the time. They work best if you work with print backgrounds, as they allow for minute adjustments in the layout without inconsistencies across browsers and operating systems. On the other hand, with a liquid layout, you base the layout on a percentage of the browser’s current window size. Liquid layouts allows for an efficient use of space given by any browser window or screen resolution. They are often used by web designers who want to get as much information across in a very limited space. Your web design company may ask you to choose one from the other depending on the needs of your client.
What is at stake for you and for your web design company when you choose between these two windows? Well, the method you choose has a large bearing not only on the final site design and aesthetics, but will also affect the ability of your online visitors to scan through the contents of your site. Furthermore, the layout can affect the ease, by which readers will find what they are looking for in the page, and can also reinforce or ruin your marketing efforts in the website. Thus, your web design company may stress the importance of choosing the right one depending on the message that the client wants to communicate across.
The Web Design Benefits and the Drawbacks
To help you and your web design company to decide on which to use, I will present the benefits and the drawbacks for each type of layout.
Fixed Width Layout
1. The web design Benefits
I. Allows you to come up with pages that look entirely identical no matter who is browsing and what type of browser is being used.
II. Elements such as images and graphics will not tend to overpower the text contents especially in smaller monitors.
III. No matter how wide the visitor’s browser is, the scan length will not be affected when there are large segments of text.
2. The web design Drawbacks
I. They will cause horizontal scrolling in small browser windows. Users generally dislike having to scroll horizontally.
II. Fixed width layouts usually result to large coverage of whitespace in large monitors such that there is a waste of unused space, and further vertical scrolling may be needed than necessary.
III. This layout can not deal with font size changes quite well. A small increase in the font may be tolerated, but larger increases can not be handled well that your overall layout may become compromised.
Liquid Width Layouts
1. The Web Design Benefits
I. This layout can contract and expand to fill in all available space on the page.
II. All available space is used up, thereby allowing you to display as much content as you need to in larger monitors, yet still remain viewable on smaller ones.
III. This layout can provide you consistency in relative widths, therefore allowing your page to respond dynamically to restrictions and specifications that may be imposed by your client, such as larger font sizes.
2. The Web Design Drawbacks
I Liquid layouts do not offer precise control over the page width and the elements on the page.
II. This layout may result to columns in the text which are either too wide for comfortable scanning, or too small for the text to show up very clearly.
III. Liquid layouts tend to have problems when dealing with elements in the page which has fixed width (i.e. image and graphics). If the column does not have enough space, some browsers may increase the column width, and all other elements in your page may not be in the proper order.
Many designers usually go for the mixed approach. You web design company may also suggest you to use both layouts depending on the page and the part of the site you are making. You can, for example, set your main columns to fixed width but make your side columns, headers and footers more flexible. With time and experience, you will eventually learn how to make the most out of the features of each layout type to come up with an optimized site.

Semul Johnson is a Marketing expert with a leading SEO services company specializing in SEO web design.

Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Admin — Mon, 08 Mar 2010 15:53:04 +0000

ISBN13: 9780321553843
Condition: NEW
Notes: Brand New from Publisher. No Remainder Mark.

Best Price at Amazon
Product Description
Liquid or fluid layouts change width based on the user’s unique device viewing size. These types of layouts have always been possible with tables but offer new design challenges as well as opportunities when built with CSS. This book, for experienced Web designers with some CSS experience, outlines how to do this successfully.

Designers will learn the benefits of flexible layouts and when to choose a liquid, elastic, or hybrid design. They will learn not only how to build a liquid layout from scratch using standards-compliant and cross-browser compatible (X)HTML and CSS, but will also learn how to design and slice their graphic comps in a way that makes flexible design achievable. This book will show designers that flexible layouts do not have to be visually boring or difficult to build when planned and built correctly. Even those who do not intend to build liquid layouts can use the concepts and techniques taught in this book to improve their fixed-width CSS designs, because they will learn how to design for the inherent flexibility of the web medium, instead of the rigid qualities of print media or table grid-based layouts.