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.
Related
I am using Sprite image for my project. Which one should we have to follow horizontal or vertical? I meant to say adding side by side(occupies more width ) or one bye one(occupies more height).
Is there any width/height limitation for adding images in sprite? Is there any loading concept included?
It doesnt matter if you use horizontal or vertical ones. Just dont make them too big. Mostly 1500x1500 is enought for one sprite - then change to another.
If you think about mobiles then try to not make sprites bigger than around 800x800.
For image type i would suggest png (if have full colors and transparency) if you use some popular graphic editors option to ,,save for web'' it will be even smaller that way.
Sprites are mostly used for lowering httprequests for images - if you use many small images its always good way to store them in one bigger (just dont forget to set cache headers) so all browsers will try to cache them (and mobiles at least for the session).
According to this article it depends.
One aspect to consider is how much memory the decoded sprite map image will use consume. Here's are guidelines for whether horizontal stacking or vertical stacking will be more optimal:
For all images in the sprite, find the width of the widest image and
the height of the tallest image.
If the largest width is greater than the largest height, then a
horizontal stacking will result in a more optimal sprite sheet.
Otherwise, vertical stacking is more optimal.
It then goes on to show examples of the same images in either a vertical or horizontal sprite along with their file sizes which is quite a surprising. It suggests using Google Chrome's Developer Tools "Native Memory Profiler".
Vertical Sprite
Horizontal Sprite
In this case the horizontal sprite is best.
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
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
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.
Shouldn't we use "Pixel" for anything in CSS if we are making a site for mobile devices?
px for layout and font. Should we only use em or % for everything on mobile sites?
and if i'm using <img> then should i defined height and width for <img> in HTML code? or it's good to not to define. or i should define size in css for <img> also in % or em
Edit:
Note: Question is not again about px vs em debate My question is specifically for separate mobile site. when we are making separate mobile site with different domain or sub-domain.
Everything depends on the context. Like with CSS for desktop browsers, there are situations where using pixels is not a good idea (for example mostly for font sizes), and there are situations where pixels are still very useful (for example fixed layout).
In general, avoid using pixels every-time you don't need to. For example, there is no reason to do it for fonts: it's not you, but the user who chooses if the font must be big on a high-res screen or not. Using percentages also helps you somehow to remember that a piece of text can never have an exact width and height, and force you to adapt your design.
Now, sometimes, for cost or other reasons, you have to do fixed layouts, or at least some parts of a page, associating images and text, have to be fixed in size. In this case, there is nothing wrong to use pixels. If I have a <div/> with some text inside and a pretty 200×100px background, the most obvious thing is to set the width and the height of this <div/> to 200 and 100 pixels.
if i'm using <img> then should i defined height and width for <img> in HTML code?
IMHO, you never should do that. The size of an image is purely a layout/design thing, so it has nothing to do with HTML, but with CSS.
Do you have to specify the size of an image in CSS? If you want your image to be displayed 100%, than no, you don't have to: this is by default in every browser. If you want to scale it down and, for some reasons, you can't scale the image itself than save the scaled image on server, than yes, you may want to specify the size of the image.
Remember than sending a big image and scale is down on client side is always a bad idea. The visual quality might be affected, and the client will have to wait more to see the image appear.
Actually, I recommend using different CSS files (and sometimes different templates) for browsers vs. mobile. Mobile isn't just a smaller browser, it is a fundamentally different user experience.
As for the pixel issue, I tend to use pixels in my base CSS rules and then use % or em's everywhere else so that things scale up and down together. It doesn't always work the way I would like, but it normally allows a lot of tweaking during development.