I was reading Web Content Accessibility Guidelines 1.0 (sec 3.4, page 13) where it says to use em rather than pt.
My question is that the images that you develop for a web site are done in terms of pixels. So if you are using relative sizing for them, the browser will have to scale them. Is there any good techniques to ensure that the pictures do not get too distorted (i.e. bits become too blurred etc)? Alternatively if you chose not to scale the images, is there any techniques to ensure that the layout does not get corrupted?
I recommend you have a read of Responsive Web Design by Ethan Marcotte. He talks about a technique of not specifying any height/width on your img tags, and instead set the max-width to 100%:
img {
max-width: 100%;
}
In fact, this will work for any fixed-width elements like videos/flash etc
IE6 and below don't support max-width properly, so you can set width: 100%; instead, which is a basic workaround.
The book also explains how to use AlphaImageLoader to improve image scaling in IE7 and below.
Check out the bottom of this sizing study done to compare px to em sizing techniques as images grow larger/render at lower percentages.
Under the section titled "Information", there is even more to look at.
It appears you just have to keep playing with the number after the decimal point, and get those F5 muscles stretched and limber. ;)
It generally does not make sense to specify image dimensions in em. It would not improve anything and would just make images blurred. Use em for text only, and let images be kept in their original size. Additionally, you can use IMG {max-width: 100%} if don't want images to overflow their container on narrow browser-window sizes.
Related
I've been having a play around using em's/rem's today on a new site and have several things i'd like to discuss/ask on here.
For many years I have been totally a pixel based person with a few percentages thrown in when required.
I keep reading that em's and rem's are "the way" the web should be. Fair Enough which is why I gave it a go today.
So, first things first. Are the point of using em's/rem's for dimensions literally just for changing the dimensions of things relative to the main font size?
If so, then for what situation would you change the main font size? I have always set mine to be 16px and worked with it.
I located a Sass mixin that allows me to specify in pixels my dimensions for any property and it outputs it with rem and a pixel based fallback. I tweaked it to my liking first though.
So I then started building the site using the rem mixin for all my dimensions (margin, padding and a few heights). Yes everything scales when I alter the main font size but again, same question as number 2 here.
I used Compass Susy to set my grid up and used em's to specify it's settings, (I normally would have chosen pixels). I set the grid style within Susy to be the magic-grid which makes the grid static when the browser is wider than the grid but entirely flexible on the inside.
Surely everything that I have read about the benefits of using em's can be done using media queries? What do you guys do and most importantly what do the mainstream sites use?
Right, the next two questions are to do with images. I came across two situations today where using em's/rem's with an image somewhere in the equation resulted in a problem.
5a. I had an h2 set to inline block and added padding around and then the rem equivalent of 45px padding on the right. I set the line-height to a unitless value of 1.3. I then set an image to be the background of the h2 to appear over to the right to appear in the padding-right. At the standard base font size of 16px all is fine. However I increase or decrease that font size and the top and bottom of the image crop off. So question 2 again. I see why the image is getting cropped but it's how to deal with the relationship between em's/rem's and images that is bugging me.
5b. I had a div with a height set at the rem equivalent of 200px in height. I then added an image into there which had a height of 200px. The width of the image was set using the susy mixin span-columns to a specific column width and the height was set to auto. When the font size was altered I either ended up with an image too tall or too short. What is the best thing to do in this situation?
I was looking through some of the compass mixins available and for example this one:
#mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
margin-left: 0;
li {
padding-left: $padding;
background: image-url($bullet-icon) no-repeat ($padding - $width) / 2 ($line-height - $height) / 2;
list-style-type: none;
}
}
I can't add in all my em/rem stuff in there?
I think the over arching questions are:
Why are em's/rem's required in the first place?
How do you work with them in relation to images?
Any thoughts guys?
There is a lot to say about your post and it would probably be best to start with a few basics:
Why use em or rem units?
Em & rem units are used to size things relatively.
Em units: An em unit in a browser changes relative to it's parent's font-size, whether that is a span, p, div, body or html element. So when using em units for font sizes and for width or height, those dimensions will depend on the current parent's font-size.
Rem units: An rem unit in a browser is relative to the base font-size of the document. If you set that to 16px then 1rem is 16px, 2rem is 32px and so on. This means that you can change the scale of the entire document at a single point and anything that is using that relative measurement is going to increase/decrease accordingly.
The Point: These measurements are 'relative' so the answer to the question, "Why use em or rem units?", is for the em unit, simply use them when you want to size an element in a web page relative to it's parent and for the rem, use them when you want to size an element relative to the document.
That's a simple approach but it puts web design in the right context for the next question...
How should em & rem units be used in design and layout?
The answer to this question is also multifaceted but to put it in simple terms using em, rem or any 'relative' measurement to describe elements in your design is a move away from static pixel based design.
For the most part em, rem & percentages are used for creating flexible layouts and flexible layouts have a whole different approach to the web and using elements within them than pixel based design. For instance, if you have a container that needs to expand relative to the document width and it has an image in it, you'll probably want that image to resize along with the container or situate itself differently depending on the available space.
Here's where we get into 'Responsive' designs and layouts in an attempt to make 'Adaptive' sites & applications and also where Media Queries and other techniques come in.
Personally I use em's almost exclusively for type and margins & padding of elements. Dimensions I describe in percentages and then it's almost always only the widths. There's only so much you can control in a world where the devices, device dimensions and pixel ratios keep doubling every year.
So to sum up, sort of...
1) If you need static dimensions just stick with pixels. There is generally no real benefit to using relative measurements if you need specific fixed dimensions.
2) Em's & rem's are one of many tools and serve their purpose as other tools (pixels) serve theirs. They are a great tool and worth mastering so use them when you need to but only when the problem requires relative sizing.
3) You may want to split those Compass Susy questions into a more specific post and provide some example if you want help with that.
I hope that helps even if it doesn't answer all of the questions you have here.
Cheers
Ems/rems are used to make the site adaptive to different settings on the client end. My browser settings can increase or decrease the font size on your site, and using em/rem allows you to adapt to my settings. It's a trade off - as with everything else in web design - between your pixel-exact control and your willingness to design around change and user control. There is no right answer - but I like to remind myself that the entire technology of the web is weighted towards user control, and any attempt for me to be pixel-anal is fighting against the core technologies.
Ems/rems can be used in media-queries to set breakpoint widths, but they solve a different part of the adaptability formula - font size, rather than screen size. Your Susy grid can now adapt to both at once!
Images are a pain for any kind of responsive/adaptive design work. The same solutions you might use for a fluid layout will help with an em-based layout. Common solutions involve the background-size property (Compass has a mixin for it) and setting html images to a max-width of 100%. See CSS-Tricks Rundown of Handling Flexible Media. I have use this fluid-media mixin to handle the "intrinsic ratios" approach for background images and the like.
But, more often than not, I find a way to design with fewer images. I like that the technology pushes me towards simplicity in that area - so it doesn't bother me.
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've made a simple website that is entirely scale-able...except the images. the body and all, the divs are set to percentages, in fact my purpose for designing this way was to practice making sites that would scale to any screen resolution. Everything went smoothly except the images, while the rest of the page grows or shrinks with the browser, the images either overflow or become tiny(when zooming in and out on browser). setting the image width and height to a percentage doesn't work because stretching the browser too far horizontally or vertically would cause the image to distort.
note:
I'd rather not have to hide the overflow, if I'm correct that would just cut the image off when it becomes to large(correct me if I'm wrong here)
and setting the height/ width to a max/min didn't seem like an ideal solution either.
but this problem seems to be one that I can't believe others have not encountered, so I hope someone can help me figure out a solution. please help, please...this is stressing me out :(
Style the img tag:
img {
height: auto;
max-width: 100%;
}
Now adjusting the size of the element containing the image will cause the image to scale itself accordingly.
Try setting just either height or width, whichever is more important to you. If you set both, the browser will follow your rules. If you just set width, the browser will scale the height down accordingly.
I'm working on a project like this as well, and I used
img { width: 100%; }
as well and then made sure to size the divs around each image accordingly.
I understand your concern about the images distorting at a certain size, but for me the ability to scale was most important here. I created the images so that they looked best at the size for my target audience.
If you create the images at the largest size you want them to look clear, they should also scale down, just be careful about file size if bandwidth is an issue.
If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable?
I want to make one layout for all sizes and devices
Joel Spolsky managed to find a very easy solution (a small proprietary CSS definition for IE). He found the solution here.
There's no simple solution for this. You can use flexible units for the images just like you can your other page elements. But this will result in inefficiencies and aesthetic issues including excess file size for a tiny image (if you're sizing it down), pixellation of sized-up images, etc. So what you likely want is to start with a large image and scale down to the appropriate size versions, and use Javascript to write out a tag referring to the correct size image depending on context.
Well you can size images relative to the viewport width (eg. img.thing { width: 50%; }, but you don't generally want to. Scaled images will at best (when the browser does bicubic resizing) look a bit blurry, and at worst totally blocky/jaggy (nearest neighbour resizing). You can include some CSS (SVG's image-rendering will be supported for HTML in Firefox 3.6; -ms-interpolation-mode in IE) to try to coax the browsers to use the better scaling mode, but it's far from reliable and still the best rendering isn't that great.
In addition, CSS background-images cannot be resized at all (yet; it is proposed for CSS3 but you'll have a long wait).
Liquid layout generally aims to adjust the distances between fixed-size images to respond to changes in viewport width, rather than scale the whole page including images. The user can, at least in modern browsers, zoom the whole page including images themselves, taking the image quality hit if they need to.
I reckon you will have to make use of the canvas element from HTML5. Or you could have some JavaScript that sets the size of the image tag but you would have to do some math to figure out the correct proportions.
Google Labs Browser Size
I've always preferred fixed-width layouts over fluid-width layouts, one of the main reasons is that I'm able to better understand how the whole picture will be without having to worry about the screen resolution.
But now the "picture" has changed, there is a high discrepancy between the lowest and highest resolutions used by most users nowadays and they seem to be here to stay.
I've a netbook that only supports 800 pixels or 1024 pixels wide; I also have a 22" monitor that supports 1650 pixels and, 24" monitors that support 1920 pixels and more are becoming pretty common.
I've pretty much "ignored" the 800 pixels users for some time and I've been developing with fixed 950/960 pixels wide, I also notice that popular sites (SO for one) either use this approach or the fluid one.
For text (almost) only websites (like Wikipedia) I don't see a problem using the fluid system but what about all the other websites that depend on images / video to create interesting content? Social Networks, Classifieds, and so on... What is (will be) their approach to address this issue?
Seam Carving seems like a good option for the near future but it hasn't matured enough (neither browsers nor jQuery nativelly support it at this point in time), I also feel like users wouldn't understand it, get confused with it and as a consequence abandon the website.
The de facto standard on the web is still 1024 pixels wide, and leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong. So what are our options?
I would love to hear what you think about this and your experiences with both fluid and fixed systems.
PS: Popular websites using either one of these systems are also welcome, I'm specially interested in seeing non-text websites that use the fluid system.
EDIT: I just saw this answer and I got kinda confused about the difference between fluid and liquid layouts, aren't they supposed to be exactly the same?
I generally think that fluid layouts are a good idea. The problem starts when your fluid layout starts to get really wide with high resolution screens - there is a limit to how far the human eye can track horizontally without losing the vertical positioning. That is why newspaper columns, for example, are always rather narrow.
Try to look at wikipedia in a high resolution screen, and you'll see that they limit the maximum width to something around 800-900px - more then that (assuming a rather standard 12pt font) and people stop being able to read until the end of the line and then effortlessly find the start of the next line, and the whole thing breaks into a mess of eye and neck strain.
On web sites I build, I use max-width to limit the maximum width of the text content (and in that I also include images and other stuff) to about 720-800px, which with sidebars and such can possibly get to around 1000px. If the screen is wider then that, then either center the content of left align it (right align on RTL web sites) - both work well.
But you have to design your layout so that it flows when the available width is narrower - this is very useful for people with netbooks (which are rather popular now and I expect will become more popular in the future), smart phones and even small screen mobile devices. Such mobile devices more and more feature standard browsers and you should address this in your designs - even if a mobile browsers can reduce your website somehow, the "mobile mode" usually does this by messing up the page and killing your intended user-experience.
leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong
I’d disagree here. If you’ve got a monitor with that high a resolution, you’re probably not running with a maximised browser window. And even if you are, are you really fussed that the content’s all in a fixed area in the middle? Really?
As long your site has a decent, useable layout, I don’t see the problem with space either side on high-res monitors.
There are ways to create different #media rules inside of a stylesheet—W3C has something on this—and although it's a big Schroedinger's Cat whether the handhelds' browsers will obey the rules, it's fairly safe to assume that, even if they don't, they have big enough and well-ratioed screens to just use a scale model of the site as it appears on desktops.
Seems to me that it was in the devices' manufacturers' best interests to make them compatible with web sites that predate the advent of such devices by 5-10 years.
And if not, it's their problem.
I approach the problem from a different angle. Have a fluid layout but give it a minimum width (rather than a maximum width). You can achieve this with CSS.
The problem with the images is not such big. What you do is the following:
Upload your image at the maximum size you expect to have.
Make the image fluid as follows:
<img src="http://example.png" style="width:32.5%">
As you resize the page the image will re-size itself at the percentage width. Just make sure that you don't have any width or height attributes in the image. I call it superlastic :)
Fluid layouts were the answer before Responsive Design support in browsers came out. No need to use fluid or elastic layouts anymore.
http://lessframework.com/
https://github.com/thatcoolguy/gridless-boilerplate
There is no right answer to this question as no two design goals are ever alike. Fluid layouts make any semblance of typographic control virtually impossible, but not all designs need or want it.
No collection of "best practices" will ever equate to an actual design education, and not all users feel compelled to blow their browser windows up to fill the entire screen, either.
Most informative discussion on layouts I have read so far is in Andy Budd's CSS Mastery book. If you get a chance, do read it. I think it's a must have book on CSS (intermediate level). It looks like the layouts chapter is available in article form here.
http://www.webreference.com/authoring/style/sheets/css_mastery2/
Another link :
http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Liquid and Fluid are two different names for the same technique.
HTH.
I think it's better to have a maximum width of the layout, you can change that with Javascript.
A good example of that is this layout, look what happens (in Firebug or something) with the layout if you change the width: http://tweakers.net/
They have chosen a width of 1208px and make it smaller with Javascript when the width of the browser changes. With Javascript disabled, the website is still 1208px wide, which seems not to be a problem anyway.
EDIT:
The first width of the website will be like 900px. With Javascript you will check the width of the browser and you give the a class with the closest resolution to your browser width. For example: the browser width seems to be 1100px, so you give a class 'res1024', or the browser width is 1080px, then you give a class 'res1100'.
This will be your CSS:
#wrapper {
width: 900px;
}
.res1024 #wrapper {
width: 1000px;
}
.res1100 #wrapper {
width: 1080px;
}
I hope it helps you :], you can ofcourse change a lot more with this body class, like:
.res900 #menu {
width: 100px;
}
EDIT 2:
You can handle images the same way:
.res900 img.fluid {
width: 200px;
}
.res1100 img.fluid {
width: 300px;
}