I am trying to create a sleek re-sizable website. After doing a bit of reading I found that the way to achieve this is having a parent node with a rigidly defined size, and children with % sizes. On the w3schools website it says that in 2012 85% of monitors has a resolution greater than 1024.
My question is, in order to implement a re-sizeable website the preserves its layout, what is the best size for the fixed-size parent node in order for it to be compatible and consistent on all monitors?
Why don't you forget about setting a fixed size on the parent and set the parent's width to 100% which would give you what you are looking for.
Related
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
There are many types of display that people use, so it is hard to expect what resolutions will your user use to view your site. To avoid this problem, I am thinking using percentage instead of pixels, em and pt to define the web layout. However, is this a good practice to do this? Including using the percentage, eg 80% for the main wrapper ?
I know it is hard to do it when it come to determine the width of the inner element. I'll have to calculate the percentages based on the each div's parent. How do you guys cope with this problem when it come to different browser's resolution?
Css media query is best solution for this check this http://css-tricks.com/css-media-queries/
There's obviously debate between fluid and fixed layouts, but fluid layouts can work very well as well.
An example is smashing magazine (try resizing your window with the site loaded).
I believe that it would be a lot easier if you use a framework of some sort. If you have used any grids CSS framework before, you can have a look at Liquid Blueprint. This allows you to work in a grid based manner, but have the page fluidly resize according to the browser's size.
I use percentages for every width within the outer container but have min-width: and max-width: for the container itself, so it scales a small amount. Say 960px for min width and 1160px for the max width. This way it works larger screen sizes better and if I want to I can go back and make it responsive because its already all in percentages.
I'm looking for a fluid CSS grid generator that's based a percentage width like 100%. Everything I've found so far requires a specified pixel width or min/max pixel width.
These grid generators are all pixel based: http://www.gridsystemgenerator.com/
If you want to make a grid based on a percentage width, you don't need a generator.
Just count.
If you want a column that is half of the body, make it width:50%;. Quarter? width:25%;
I made a demo for you.
However, making a design entirely depended on percentages to leads to some problems. While a paragraph might look fine with width:50%; on your screen, someone with a huge monitor might see that entire paragraph on one line, which would be obnoxious to read.
I would recommend The 1140 Grid. It's based on pixels, but is also fluid, and may suit your needs. Also, by using max-width everything will remain easy to read for everyone.
Foundation has a percentage-based grid system: http://foundation.zurb.com/
I am new to Div based Page Layouts. My questions is should we design div based page layouts using percentage or fixed pixel?
If percentage, what about cross browser compatibility?
If fixed pixels, what about different screen resolution? What screen resolution should we opt for?
Also, what should be the bases for our decision?
Most div based page layouts use fixed pixel widths, not percentages.
Using percentages has its advantages in very few scenarios - if you have a page that you want to change width based on window/browser, you'd use this. But I honestly can't think of the last time I saw a site that did this.
Fixed pixel widths allows you to actually design what your site will look like regardless of browser, screen resolution...etc.
When creating a layout with fixed widths, usually you create a "container" div that is around 960px wide (see http://960.gs/). This width is used because it fits most browsers/screen resolutions (eg - anything 1024x768 and above)
The "container" is usually centered on the page (though sometimes it's left aligned) - for examples, see msn.com, yahoo.com, stackoverflow.com ...etc. These are all fixed widths, not percentage (you can test this by changing the size of your window and seeing that their content does not change)
I'm displaying some tabular data on my website so I decided to use some tables. Is it a best practice to use fixed width for your table columns (i.e., 100px) or to use percentage based widths?
I would not recomment fixed widths, as the browsers text size may be different.
The correct thing is to do nothing at all! Leave the table to size itself. Forcing the table to be 100% wide is an option, but can leave alot of whitespace.
How big will the table be on my mobile phone, TV set or desktop PC? The more you force a layout the worse it looks on unexpected platforms.
I agree with Quigley, however the "right" approach depends very much on your specific context. If you have to just display plain data on a website, basically just printing out HTML formatted data, I would also leave the table as it is. What you should do is to set it's width to 100% s.t. it expands on the whole width of the page. If it resides inside another container (such as div or other tag), it will expand to the width of that container.
If however you want to have your table just expand to a certain width, I would go for percent values instead of fixed tables, mainly because of the fact that your users will have different display sizes and resolution and therefore the according browser window with may vary. In such a case I would however consider attributes such as min-width that specifies the minimum width that your table will get. The attribute works perfectly on Firefox, Safari etc.. however on IE (as usual) you have to do a trick to achieve min-width by adding something like the following to your CSS class (which you add to the enclosing container of your HTML table or to the table itself):
width: expression( this.scrollWidth < 70 ? "70px" : "auto" );
This is just an example that specifies a minimum width of 70px, otherwise it doesn't set any width. You can customize it to your needs.
Fixed pixel widths are definitely the worst option. Percentages are much better. If you want to define column widths relative to other elements on your page, the best option is to use CSS and a unit like em that is relative to the text size.
For tabular data, I think relative (percentage) should be good.
But if u feel screen size may screw up your tables, go for the fixed approach.
I use(d) proportional widths extensively with HTML that has to work in browsers and CSS2XSLFO.
However Firefox 3.x has removed support for PCW widths in table columns.
See https://bugzilla.mozilla.org/show_bug.cgi?id=333352
So you'll have to use % widths.
I never use fixed widths (such as 50px), however I do use em or ex units in addition to pcw or percentage widths.
In regards to DeadAccount's answer, don't use W3Schools, they have a habit of having half-correct information.
http://w3fools.com/
Also, I'm pretty sure best practice is making a percentage instead of a fixed width, because as others said fixed will mess up in other browsers if they're using different settings than yours. Best practice could just be to leave it alone, however.