Related
I'm redesigning my site because looks awful on different resolutions (apart devices), most guides and tutorials rely on % and em than fixed values. I'm still learning this so I'm reading everything around.
Thought this would solve the question with different display sizes but again: we have to craft some more CSS for fix some specific issues.
If I need to add media-queries for extra display sizes, why use % then? Do use % really reduce coding? Is ok need to add some extra css for some sizes or am I doing something wrong?
Thanks for any advice!
The purpose of using em sizes is to allow the base your design off of the user's choice of font size. I may use a larger font size because I have a huge monitor and poor eye sight, while someone else might prefer a smaller font. By using em units, your design will accommodate both of our font preferences and resize accordingly instead of forcing the font size to a given standard (eg. "12 point font").
In a similar manner, percent (%) units allow your design to respond to different browser sizes. Used in conjunction with em units, this will allow text-based elements to respond to arbitrary font size choices, and layout elements to respond to arbitrary browser sizes.
It is perfectly acceptable to design a single responsive design for all media types. Media queries are intended when you want different display styles on different devices, not to "support" different display sizes. An example would be to use serif fonts on print media and sans-serif fonts on display media, since usabilities studies have shown that these font faces are preferred for these sorts of media.
Furthermore, it allows you to do custom styling for some situations like mobile devices, where you may want to consider that the user has a limited amount of bandwidth and maybe cut down on extra images. Or if you want to display your content in a completely different layout for the microscopic screen afforded by certain phones.
% allows your site to be responsive to the user's method of viewing. Let's say you have a div that's at 100%. It'll fill the entire section, regardless if it's on a phone or desktop.
It should be okay to add extra CSS for sizes as well. As far as I know, you can have some elements display in % and some with a fixed px value, although they might conflict depending on how the page is setup or what it is being viewed with.
For example.
Your website header have the width of 950px; But in a mobile device, it may fit at 450px;
So, you use media-query to reposition some elements and handle some size issues and set the header width to 450px;
But, if you use % values, you can set your header div to have 100% of width base in its parent. So you can only change the body or some container div width, the all childs going to adapt.
Diana,
I am glad I came across this question. I literally just uploaded my first responsive design which is 90% based off of percentages when it comes to font-size and widths.
Check out the below:
http://www.noxinnovations.com/portfolio/responsive/
Obviously, it doesn't look amazing, and the image looks way out of place... But do me a favor and resize your browser window, by slowly making it smaller and smaller. I did that by setting a percentage width!
Trust me, I tried doing this responsive design test with pixels, and it didn't turn out too well. The percentage width ensures that regardless of the resolution and or pixel dimensions (per se) the design will always cater to the size of the screen. Also, I did not have to use one CSS3 Media Query, but I would highly suggest using CSS3 Media Queries only when you need them.
In my opinion, I should probably have a Media Query for a larger screen.
I hope this helps you as much as it has helped me!
Thank you,
Aaron
I was wondering what are you opinions about when coding css, when/why coding fixed or liquid style sheets?
I agree that fixed size style sheets are easier/faster to code because liquid requires more time in order to have all elements well adapting to their parents.
So, when do you chose liquid over fixed (or vice versa)? Why?
Update 2 I think the best practice now is design a site with responsive and adaptive capabilities for any screen size. Liquid CSS may not have the pitfalls that you would think such as long lines of text (instead the block of text position adjusts on-the-fly) - examples of Responsive Design - browser-side code where pages adapt to any screensize:
http://surrey.ac.uk/
http://bostonglobe.com/
http://thoughtfulweb.co.uk/
Adaptive design: server hosting the site detects browser type that requested the page and serves up appropriate page layouts e.g. mobile. This has pitfalls in that the user agent identifiers aren't always precise - e.g. many browsers include the mozilla string in their id, for example, so it might not always be best to rely on this data.
Previous answer
Liquid layouts (layouts that horizontally shrink or stretch to fit the horizontal width of a window)
Advantages: the content reformats on the fly to fully utilise the
Window width. Which means that the dilemma of choosing the most
popular fixed width e.g. 940px, 960px or 978px is not required. This
is particularly useful for small screen handheld devices which vary
slightly. You have to do less work in considering all possible screen
sizes.
Disadvantages: For the reason that the site will shrink or stretch to
fit horizontally, you cannot control the layout as much as fixed
width. Aesthetics and how nice the site looks will be less under your
control. You may find that my point about having to do less work to support all screen widths is not true after all - as here you are considering scenarios where the screen is really small and your menu navigation is all bunched up and ugly or too far apart on a large screen
Fixed layouts (layouts that are fixed and don't change to fit the available horizontal width).
Advantages: Once you have settled on the most popular width e.g. 940px, 960px etc. you would not need to test the site at different screen widths. The layout is neat and things don't move around, aesthetics, how nice things look remains constant
Disadvantages: Some users with small screens, handhelds may need to scroll horizontally to view your site if your fixed width is larger. Unless you also support a mobile edition too that those users can use
Have a look around at major sites - what are they using. To me it seems fixed widths are more popular, including stackoverflow.com
That said, look at this fluid site: http://derekallard.com/
Here, the developer uses fluid layouts to advantage by using layers of graphics that slide over each other as the site width adjusted in your window.
update: There is no wrong or right answer. Both Have merits. Media folk who have come from television, film and newspaper into web may tend to favour fix widths owing to their familiarity with those media having that.
It's not a matter of technique, it's a matter of decision making.
You choose liquid if you (or the client) WANT liquid.
I myself do NOT WANT liquid. Why? With a very wide window you get very long copy text lines, which are hard to read.
OK there are some other parts you must consider. Is your page intended to be accessible? Then you have to make a sort of liquid layout for the ones which zoom the page.
You could also look for responsive web design. The one that works in mobile browsers, too.
http://www.alistapart.com/articles/responsive-web-design/
When left with a choice, I rarely use liquid layout in anything except business style web apps.
I.e. for apps where the customer insists on lots of horizontal information in e.g. tables, I'll go with a liquid layout for obvious reasons. For more standard websites, I'll stick with fixed if at all possible.
When I do go liquid for the latter, I'll mostly still enforce a max-width on copy text, because I'm not particularly politically correct, and making the site a joy to read for 99% of visitors is more important to me than making it a (relative) breeze to use for a few - as long as I keep it accessible to those few. Like yunzen says, line length of copy text is very important to both design and readability. Don't let those lines stretch to infinity...
Mostly, my fixed layout sites will have different ways of accomodating the smaller screen size rather than just simple liquid stretching - moving side bars and such beneath the text, and possibly adjusting the copy text width to fit the device viewport. Sometimes, but not always, that requires css media queries.
(see e.g. http://www.quirksmode.org/mobile/viewports2.html)
Usually fixed layouts are easier to design and develop, also visitors are used to this kind of layout.
Fluid layouts need more planning and also do not fit in all kinds of web application. I do not use the fluid approach very often.
I am not a CSS expert and I want to make a design that will look good in all browsers and resolutions. I noticed that some websites make their design (width, height, margin, padding) with percentage, not pixels, and I am doing all my design with percentage too. Does this approach have any problems?
Please advise me.
You won't have any problems using this approach, both percentage and pixels work fine depending on your needs. If you need a fluid site, then percentage might be your best option. And ems for the fonts, so the user can modify its display if necessary.
Couple of expert's opinions on this:
https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
And here's an interesting twist: Percentage + pixels:
http://www.cssplay.co.uk/boxes/outside.html
I guess you should have a look at this:
http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
It depends on your needs, I tend to use em instead of pixels or percentages. Also I've noticed that IE does not "eat" percentages too well but ems are working great.
To have the site scale depending on the resolution or the size of the browser window, percents will be your best bet. The only problem you may run into is difficulty reading content if the resolution is very low or the size browser window is small, in which case the content may jumble up and make it difficult to read. using percentages rather than pixels will make the site liquid and will adjust according to resolution and scale of the window.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Is it bad in terms of compatibility to use pixel numbers in CSS instead of percentages? How about lower resolutions? Is it okay to work with them in ranges of 1-100?
All of the measurements have their own purposes:
Use pixels for pixel-based things, like borders. You probably don't want a border that ends up being 1.3422 pixels wide.
Use text-centric measures (em, ex) for text-based things, like content areas, labels, and input boxes. It's an easy way to make sure you have room for text of a certain length and width.
Use percents for window-based things, like columns.
There are exceptions, of course. For example, you might want to specify a minimum column width in pixels. But follow the above and your pages will scale well. ALWAYS zoom in and out on your pages to see how they work with different font sizes and browser shapes -- don't get surprised later.
This is a difficult question, because the answer mostly depends on your situation.
Pixels are not that bad, I mostly use them too. (Sometimes even for font sizes.)
I usually fix the outer block element of the layout by a given size (pixels with fixed-width layouts, and percentages with fluid layouts), and on the inside elements I usually set percentages whenever possible.
There are some elements which simply can't be styled with percentages or ems, especially the more fancy stuff coming from graphical designers who don't understand such principles.
For example: if you have a column on your site with a simple style, you can set its width to a percentage easily, but if it has a background image with a specific width that is not designed with scaling in mind, it only looks good with a fixed-width. In such cases, you'll have to ensure that the rest of the page occupies the remaining width correctly.
Note that you can use pixels with percentages together.
For example, this is a snippet from one of my latest web apps:
min-width: 800px;
width: 80%;
max-width: 1500px;
The choice also depends on what design or layout you would like to achieve.
For a fixed-width layout, pixel values are fine. If a designer gives you a Photoshop image that contains really fancy stuff which would be extremely complicated to even think about how it would resize, you should definitely go for this.
If your layout needs to be dynamic, you should use percentages to make sure that it expands as the resolution changes, and you can use the above code snippet to make it look better in scenarios where it would otherwise look insane.
Some layouts (eg. imagine if StackOverflow would take up all the space) would look pretty ugly on a width of eg. 1920 pixels - the line widths would be so insanely high that it would be extremely unconvenient to read.
This is what max-width is for. Even in some dynamic layouts, you'll have to limit the maximal width of your site to maximize usability and readability.
And also take into consideration the smaller screens.
It is true that noone uses a 800×600 desktop anymore, but many people browse the web with mobile devices which have even smaller resolution.
This is what min-width is for: to make your dynamically expanded layout look less crowded on smaller resoultions.
I hope this helps.
EDIT:
The Smashing Book has some very nice thoughts about the subject.
EDIT 2:
I don't want my post to sound like I want you to force pixel-based sizing on your visitors.
(Apparently, some people in the comments misunderstood me in such a way.)
To clear it up:
I believe that the ideal layout is one that adjusts well to any possible resolution or setting.
However, we can't always do everything perfectly. Time/resources and the target audience are the key to determine if your site requires that advanced functionality or not.
I'm suggesting that you use the right thing for the given job.
If you are developing a site which will have a significant percentage of visitors who require more advanced adjustments to the site, it may be well worth it.
(Of course, sometimes we just do it for ourselves to have the feeling of doing things the right way, but is is not always a financially sound decision.)
Still, you should do the proper research about what sort of site will be it, who will be the visitors, and such stuff, before deciding about layouts, and whether it is worth the time to make them fluid or more dynamic.
Font sizes
I think you must first understand the issues that exist with working with pixels in CSS:
Zoom in older browsers is broken. For example, IE6 and IE7 do not resize text when zooming. Line-height can be quirky too. These problems do not exist in modern browsers, but they are a reason why many shy away from using pixels for font sizes.
Everybody will see text the same size if you specify the font size in pixels. Browsers have a default size of 16px for paragraphs, so if you only use em and other relative sizes, you will respect the decision of users who change this. This is especially important on text heavy sites, especially if there are more older users. On the other hand, if the design of a site is important I think it is possible and justifiable to use px to specify font sizes without breaking usability.
In the end, you need to make the decision yourself, and it does depend on the exact circumstances, but I think that specifying font sizes in pixels is okay.
By the way, when working with em to specify font size it is a good idea to set the body to font-size: 62.5%. This means the base font size is 10px, so 1em is 10px, 1.6em is 16px and so on, making it easier to think in pixels while designing using ems. I still find it frustrating to work like this, especially when the values of ems cascade. There are some very handy sites like PXtoEM.com that help with this.
Layout issues
The screen is a pixel based layout, so pixels are an intuitive choice for many things. The main issue here is that different users have different screen sizes. As others have pointed out, using min-width and max-width in pixels along with width in percent is a helpful way to respect the size of the screen, while preventing your site to be unreasonably squished or stretched on very small and very large windows.
However, I would generally avoid this approach in favour of CSS media queries. You can then use fixed width chunks and make the layout wider (amongst other things) as the screen size increases. However, CSS media queries, like all cool web technologies, suffers from lack of browser support. Most notably, IE8 and earlier do not support them, although there are JavaScript fixes. On the other hand, the iPhone and other handheld devices do support them, and I would strongly recommend them if you want your site to look nice on these devices.
I think fixed width grids are fine. Fixed width grid systems like 960 Grid System
are popular enough in their own right, and there are so many other sites that have a fixed width, that I doubt you would hear many complaints if you did this. Handheld devices that do not have large screens are an issue, but this is where CSS media queries should be used, so it is possible to specify everything in pixels and have your site looking beautiful on the desktop and on the iPhone.
Conclusion
Ultimately, everything depends on who your users are, what you need to support, and what you want your site to look like, but there is nothing inherently wrong with using pixels in CSS.
That depends on what you are styling. For columns for example, the width should probably depend on the text size to ensure that it will look optimal on multiple resolutions/screens. If you want to divide your page in two parts, you should use percentages. But if you want a 1px border between these two parts, independent of the resolution, use pixels.
Basically it depends on who's hiring you and consequently the audience of your work.
For institutional purposes (where content should prevail over the shape, like a goverment project), you better work with .em or %, they are harder to control, but they will be really user friendly in terms of accessibility.
If we talk about corporative Websites (Where shape is the deal) pixel will be a more accurate tool to fulfill your customer expectation regarding his brand.
A liquid interface (%, .em) is always a good stuff when it is smartly done, but don't forget to check your design under extreme conditions and be sure that it will be stable.
If you work with pixels, you will have absolute control over the final look of your site, but you will have to assume the impossibility for some user's to operate with it efficiently.
Best option: rather than designing a Website compatible for all platforms (what will result in a multi-deficiency design) suggest your customers special versions of the site adapted for every demand, what is a better practice and a better business for a designer too...
I would say avoid it if possible except for in certain cases.
For instance for a thin border it's ok to just specify 1px.
Also for max- and min- style attributes it is ok. But then make the non-max/min attribute be a percentage if possible.
This really is a good question which I have asked many times before. Not being a hardcore web designer (I'm more on the development side) I've usually asked the designers I work with about their opinions, and here is what I have distilled:
Using percentages vs pixels for sizing elements and so on is really a matter of personal taste or the requirements in each specific case. If you need it to scale, or it will scale well, use percentages. If not, use pixels. People here have used the examples of major columns in a page maybe needing to be fluid but borders may well need the precision of a pixel measurement.
Obviously sizing images is pretty much tied to their resolution and pixel units, so I always use them in this case.
However, using em sizing versus pixel or even point sizing for text is a whole different kettle of fish. Most of the guys I work with have a base reset style for font sizes which brings the size of 1em down to about 12px. They then use ems everywhere else (or as near to everywhere else as is possible) to size text elements, form controls and the like. This is how I operate now too as it seems to work well across a variety of browsers, OSes and DPIs on desktops and laptops. I can't vouch for mobile devices though.
Accessibility is the key though - if you need to make something usable for people with disabilities or work on a variety of devices out the box, even things you may consider old, then scaling will be a requirement. Build it into your model for designing the site from the get-go and you may realise that absolute pixel sizing is not even needed in that case.
For example, an art-heavy design is probably going to be designed at a single scale, but the new educational website for disabled users is going to have to work in a variety of situations.
Just remember, the W3C put a variety of methods for sizing and scaling into their specifications for a reason - flexibility. Do whatever fits best and works well for your audience (as Moustard said earlier).
I'm not a css/html expert but convention I use is to use pixels for the outer containers and percentages for the inner objects.
Another rule of thumb I have with anyone reviewing my layout is a Three Pixel Rule. It is rare that everything will line up exactly within every browser out there. We've agreed the effort outweighs the benefits to move anything three pixels or less.
Do the right thing by default. If a user visits your site with javascript disabled and no preference cookies, you should serve them a web page that is as functional and accessible as possible.
Your default stylesheet should assume nothing about the browser window, and still render a functional page, however hideous, down to 320x320 resolution, and up to unbounded sizes. If photographic fidelity is so important that you can't trust browser scaling, and sometimes it is, then you should use pixel measurements (at least minimums) for elements encapsulating images of fixed size, to make sure that you don't end up with important things being covered up. Specifying minimum widths along with percentages should give you the control you need while giving your users the accessibility they need. Even if accessibility isn't an issue now, it will be later if the site is successful.
When you do know more about the browser window, then it's okay to use fixed widths in alternate stylesheets, if the importance of preserving the design justifies the added work.
If you're targeting a fixed size then pixels are fine. But if you want your layout to look good on various resolutions/screen sizes, then you should stick to more relative measures like percentages. Most folks are targeting the latter.
It is ok if that is what it takes to please your client. Most of the time, you can't balance the amount of space in diverse screen sizes with only percentages. CSS3 media queries helps here but adoption is still problematic.
I prefer pixel in most cases.
For example - default width of content ares: 960px.
In "1024" it will be ok, with small free spaces on the both side of the screen. Put some gradient or background there. In "1280" or "1440" or "1680", or whatever - there will be bigger and bigger gap, but it will look nice.
Yep, for 800 - this site will be ugly. But who cares? Every major players dropped support for 800. There are too few people with this resolution..
There are many various sites, where %% will be much better solution, though.
The building blocks of a screen are pixels. You can't go wrong with fixed pixel sizes. As other posters have mentioned, you can also use percentages or "em"s for a scalable substitute.
My designer keeps throwing out the term "liquid" layout. What does this mean?
Thanks for the clarification, I have always just called this a percentage layout, and thought he was saying that the pieces could be moved around, and that was liquid
A "liquid" layout is a site layout that expands to fill the entire available area as the browser window is resized. Typically this is done using CSS. Liquid layouts can be quite helpful for certain types of sites, but they also tend to be significantly more effort than fixed width layouts, and their usefulness depends on the site content and how well implemented they are.
From http://www.maxdesign.com.au/presentation/liquid/ :
All containers on the page have their
widths defined in percents - meaning
that they are completely based on the
viewport rather than the initial
containing block. A liquid layout will
move in and out when you resize your
browser window.
Basically, it's a layout of a web page that doesn't rely on a specific width specifications for elements in the page.
See the discussion over at Wikipedia.
It means a layout which adjusts dynamically to the browser (or whatever client) width and height, to make efficient use of all available screen space, as opposed to (mostly) fixed width layouts which are made to fit a common denominator resolution at that particular time (e.g. 800x600 used to be the norm for websites for many years).
See this:
http://www.time-tripper.com/uipatterns/Liquid_Layout
Liquid Layouts refer to the design concept of a website. A liquid layout will move in and out when you resize your browser window, due to is having percentages and relative widths in the CSS.
It just means that it will contract/expand to fill the browser's window size (usually the width), up to a certain point if things are done well. Otherwise text can get quite hard to read on big (24"+) monitors.
One of two:
The design will scale to the width of the browser (as in, if the browser was 1024px wide, the design will be as well)... although this does get quite fun when designing for 100px wide browsers (sometime designers will actually set a min-width though).
The design has a fixed width, but is set in a measurement using a relative size... for example "em"... so as the font size is increased, the width of the page increases.
A liquid layout is a method of CSS layout that defines all widths in percentages, so the areas of the page will grow/shrink when the viewport (browser window) is resized.
They're very useful if trying to create a site that will fit both large and small screens. They're a little more difficult to work it than fixed layouts, because you're relinquishing some level control over how everything fits in the page, and you have to pay very close attention to your content, to make sure it doesn't fall apart aesthetically on resize.
I would say liquid layouts are most useful for text heavy sites with a fairly basic column layout. You might also find a happy medium with an 'elastic' layout -- one that has both liquid and fixed areas.
In a true Liquid layout, your content expands and contracts to fit your user's browser window in a meaningful, calculated and intelligent way. So it's more than just setting your column and container widths to percentages.
Done well, this can result in a increase of perceived quality. Done poorly, it's a usability nightmare.
Going Liquid is a huge pain the rump. The pain is worth it though if the topic/client/product(s) you are building the site for have a strong visual quality to them (think summer blockbuster film site), require a certain fit and finish, or if it needs to display large chunks of data.
Note: I'll update this a bit later with links to good examples and citations for my claims