8 Replies Latest reply on Jun 3, 2011 4:07 PM by pziecina

    Is it a good idea to specify div widths using em?

    Digital Sky Design Level 1

      Question...

       

      Normally when I design a site layout I use divs with a set pixel width (i.e. 1000px) and then I'll define the fonts, paddings, etc. using em (i.e. 1.25em).

       

      I'm wondering if in this day and age it's better practice to set div widths to me in em units. So for instance, instead of setting the div width to 1000px I could set it to 50em.

       

      I'm not sure how good of an idea this is since I don't want things to stretch too big because at that point things just won't look right. Either way, I figured I'd ask.

        • 1. Re: Is it a good idea to specify div widths using em?
          Ben M Adobe Community Professional

          Personally speaking I've never defined dimensions of containers in em's.  I have done more with percentages.  However, I don't think you should do away with pixels completely because of the CSS attribute of min/max width/height.  I think that there is a point when you know you don't want to stretch or condense your design any more and I think that a combination produces the best result.  So let's say that you know the design will be distorted under 800px width you use:

           

          min-width: 800px;

           

          In your CSS declaration along with the em width and the browser will use the em width down to 800px at which point the scroll bars will just grow on the page. 

          1 person found this helpful
          • 2. Re: Is it a good idea to specify div widths using em?
            Digital Sky Design Level 1

            That's a good point, I had forgotten about the min width/height attribute.

             

            Personally I myself am not too much of a fan of 'elastic' designs. I like the fixed layout because not only is it more consistent but it also seems less problematic.

             

            I'll have to play around with it a bit. I have never really made an 'elastic' site that I liked. Most of my sites I make fixed widths (and heights in some cases) and then I just make the fonts and margins using em.

            • 3. Re: Is it a good idea to specify div widths using em?
              cdeatherage Level 3

              I was at a seminar once given by a reliable graphics training company where the presenter basically said you can never go wrong using pixels when designing for the web because all monitors are pixel based. By specifying pixels, the output you see is what you designed.

               

              Chris

              www.cdeatherage.net

              • 4. Re: Is it a good idea to specify div widths using em?
                JoeDaSilva Level 4

                Given graphic elements that make of the bulk of most layouts these days are of a fixed pixel width and height I'm not sure how you could reliably make em's work in that scenerio.

                • 5. Re: Is it a good idea to specify div widths using em?
                  pziecina Adobe Community Professional

                  Hi

                   

                  The following statement is both true and false -

                  where the presenter basically said you can never go wrong using pixels when designing for the web because all monitors are pixel based.

                  Yes, monitors are pixel based, but the pixels actual size is relative to what your resolution is set at. As an example I can set my monitor, (23 inch) to display at 800px x 600px, but I can also set it to display at 1920px x 1080px, so even though the measurement is pixel based, the resolution is not, and it is this that one must take into account, (1 display pixel in not = to 1 resolution pixel).

                   

                  Even the old ppi, (pixels per inch) is no longer a good measure of how something will be displayed, as PC's use 96ppi, (windows vista & 7 can use 130ppi) and Mac's use 72ppi as the base resolutions, which is based on the old vga card resolution which was used in the early 90's.

                   

                  The only good thing about the resolution and settings is that the majority of users never use anything except for the defaults that are set by the manufacturer when they purchase the computer. So all anyone can do is design for the 'average' user, and base what they do from that, see - http://browsersize.googlelabs.com/, (don't forget to read the info on browser size, link at top of page).

                   

                  As for using ems and not pixels this would depend on the type of content the site has, if it is short product descriptions then the choice is up to the designer, but if it is more an information based site, (or long product descriptions) then typographically speaking ems are the better choice as one can then control the line length of the text more accurately, 65-75ems being the optimal. If a line is too short or too long it becomes difficult for the user too read. But using pixels this is not possible with sufficient accuracy, especially when the user can enlarge the text. This becomes even more important when designing fluid or semi-fluid layouts.

                   

                  PZ

                  www.pziecina.com

                   

                  Added: Just to confuse matters the normal image resolution of a web graphic element is the mac default of 72ppi.

                   

                  Message was edited by: pziecina

                  • 6. Re: Is it a good idea to specify div widths using em?
                    Nancy OShea Adobe Community Professional & MVP

                    I've experimented with elastic (em) layouts. Proof of concept below:

                    http://alt-web.com/TEST/Resizable-ems-test.html

                     

                    Bring out your calculator.  Everything, including images, must be converted to ems based on a font-size standard (usually 16px = 1em = 100%).

                     

                    The only things that don't re-scale to proportion are non-repeating (static) background images and Flash.  Other than that, this layout approach does what it's supposed to do in all the major browsers -- even IE6!

                     

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists 
                    http://alt-web.com/
                    http://twitter.com/altweb

                    • 7. Re: Is it a good idea to specify div widths using em?
                      Digital Sky Design Level 1

                      No need for a calculator Nancy, try this site out... http://pxtoem.com/

                       

                      That site is by far the most helpful site ever when converting things to em. Mess around with it and you'll see what I mean!

                       

                      Good to know that a full on em layout works for you. Perhaps I'll toy around with making a site that uses entirely ems for myself and see how it works!

                      • 8. Re: Is it a good idea to specify div widths using em?
                        pziecina Adobe Community Professional

                        Hi

                        Nancy wrote -

                        The only things that don't re-scale to proportion are non-repeating (static) background images and Flash

                        Don't forget that all modern browsers except IE8 and below, can now have the ICC profile embedded, which even though it does not contain the images ppi, it does contain the pixel color data which is used to calculate the number of pixels to display, the icc data is simply discarded on IE7/8.

                         

                        One other thing that I forgot to point out is that 89% of web users have a pc, so anyone designing a web site on a mac is literally designing for only 11% of users as the remaining 89% will always see a design that does not match the original if pixels are used as the base measurement. This is well documented though and all mac users should be aware of this.

                         

                        For anyone who still maintains that 1px is 1px, do the calculation if I design on an 800px wide screen and then it is displayed at 1920px, what is actually displayed as the monitor must display 2.4px for every 'designed' pixel. But (especially for text) 1em at 800px is still 1em at 1920px, so for sites that have a lot of text as content, one should at least consider basing the design on ems.

                         

                        Just as a side note: centimetres and inches were originally included as measurements in css, but to date I know of no browser that has implemented these, (some assistive devices did though) but if they did so for images it would solve that part of the problem.

                         

                        PZ