I have an SVG image which I'd like to display on screen at exactly 15×15cm, regardless of screen resolution, pixel density, etc.
<img src="foo.svg" class="foo">
.foo {
width: 15cm;
height: 15cm;
}
This causes the image to render at approximately 15×15cm, but there is quite a bit of deviation, particularly on tablet devices (my iPad rendered it at 8.3×8.3cm).
I get that cm measurements are intended mainly for print, but is there a way to reliably replicate them on screen?
There really isn't any good way to do this. While devices do sometimes know how large their physical screen is, they won't communicate this information to a Web page.
If you think about it, most of the time you wouldn't want exact physical sizes anyway. Some devices, like phones, are held closer to your face, so their text is smaller. On the other hand, if your page is showing up on a TV screen you'd want the text to be larger so you could read it from farther away.
You might be able to get close by checking user agents on mobile devices, but this approach will not work for desktop browsers, where user agents tell you very little about the hardware.
That is (as good as) impossible.
My monitor is full HD. So is my phone, it has the same amount of pixels so we can not use that. After that, there isn't really anything left.
The nearest solution I can come up with is to find some database with actual sizes of screen, and scale from there. But I doubt you can find such a database for the thousands of types of screens.
Related
I am currently trying to build a personal profile page. It's a work in progress, and I know little HTML, but I'm getting there.
I'm having an issue with my webpage with regards to how it scales with changes of the browser window size. On my (quite wide) screen at university, it looks fine. However, reducing the browser window size manually - or simply viewing it in a full size browser window on a smaller screen - appears to mess everything up - it doesn't look very nice. Text goes close to my pictures, and it all looks a bit tatty.
I think this is probably because my design is quite poor.
1. Is it because my design is bad or is there something else I'm doing blatantly wrong?
My current idea for a solution is to resize things so that they would look more reasonable on a smaller screen (i.e. on a normal sized laptop). I'm worried that this might end up making things look a bit odd on a bigger screen, though.
2. Is it possible/within reason for a beginner to have two different designs, one for smaller screens and one for big screens, which could be detected and then utilised depending on what screen size viewer is using? Should my page be designed to simply work with whatever screen size?
3. If I do reorganize the page such that it works better with smaller
screens, is there a way to "lock" this design in place, so that it
doesn't get messed up if someone views my page in a wider window?
Perhaps a way to ensure that only the boundaries of the page increase
in width?
What I'm essentially asking is how I should go about designing my page in order to resolve the evident issue - where the issue is that it looks rubbish when the browser window is any smaller than the max size of my screen at university.
You've created your page using tables. It is not a good practise nowadays exactly due to the problems your are facing. In practise, tables should not be used for layout purposes.
To make your layout fluid it'd be better to develop using div with float and relative positioning.
You can see another discussion related to this topic here
https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design/6037
You could use css property #media, to handle different styles for different screen width: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
When building mobile application for Android or iOS we must provide images for several resolutions (mdpi, hdpi, xhdpi..2x, 3x..etc), beacuse mobile devices do have different resolutions...
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
A solution to do this has been proposed some time ago now, as it is a totally relevant use-case.
The answer to your question about "why we don't have to do this" would be, "we do have to do this", as pixel density differs on bigger screens too and especially for responsive pages, there is need to provide different pictures (not just different resolutions) that fit the content better (commonly referred to as art direction based selection).
This is why the <picture> - element (link to w3c HTML spec) exists and has added support for various attributes like media-queries, multiple sources and srcsets for different screen densities, as we use them on mobile pages.
Additionally, srcset and sizes - attributes exist for the <img>-tag as well.
This page (usecases.responsiveimages.org) describes the different use-cases for this.
The "right" approach will always depend on what you want to achieve, but at least offering different resolutions for varying pixel-ratios should be a standard in my opinion.
So these elements and attributes give you tools to select your image based on
device-pixel - ratio
viewport
context (completely different pictures, not just resolution)
image-format
and you should make use of these tools, no matter what device you're targeting.
Note that the browser support for the picture-element is getting better and better, but is not complete now (at the time of this writing, only Chrome and Opera have it fully implemented when it comes to Desktop - Browsers, Firefox has it implemented but still locked behind a flag, this should change with FF 38). There is a fairly well working polyfill though (https://github.com/scottjehl/picturefill)
tl;dr We really should do this, no matter what device and modern browsers give us very competent tools for doing so.
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
Actually we do, its called retina ready design.
Here three things are to be understood.
1. Pixel density
Pixel density is the number of pixels a display can fit into a fixed distance. This is most of the time measured is PPI (Pixel Per Inch)
2. Resolution
Resolution is a simple count of the number of pixels across the entire width and height of a device.
Now, to further explain this concept, lets take an example of two tablets of same dimensions, say 7 inch tablets, both are physically identical in width and height.
Now at a glance these both tablets may seem quite identical, but first one (Tab-A) has a resolution of 320 x 480 while other one (Tab-B) has a resolution of 640 x 960. So These directly affect the PPI.
What this means is that the Tab-B is cramming (displaying) more (double) no of pixels in the same physical dimensions, effectively increasing the PPI.
So if we choose an icon of say 150 x 150px and display it on both the devices, the same icon on Tab-B shall(should) be half the size of the same icon displayed on Tab-A. With this, the user of the Tab-B shall have double the content of what the user of Tab-A has.
This may sound good, but we must remember that the user of Tab-B has everything half the size of what the logo was originally intended to be, so now he has to exert his eyes more, in order to figure out what that logo is about. But thats not the case.
Here enters the Third concept.
3. Viewport
In my own view/understanding (for lack of official def), A viewport is the virtual resolution that your browser renders, irrespective of the native device resolution. This is supposed to solve the problem of "too high resolution making objects too small".
What this does is that, it renders the logo(and every other thing) on Tab-B the same physical size as Tab-A, effectively stretching the graphics.
Now if the graphics were vector then they would scale seamlessly, but if they are images, then they create a shabby/jagged edges making the images look bad.
This is where you need images 2x the resolution.
So, Coming back to your problem, The difference between the viewport of a normal desktop and its native resolution isn't much.
You should not post the question with a (false) answer included:
We don't have to, but we should create and use images with higher resolutions for all devices that may have pixel ratio>1 because it is not rare that those devices display images using much more pixels than it supposed to. Even if the pixel ratio is 1, all browsers have a zoom feature, which also requires high(er) resolution images.
This means that simple image that we define as:
<img src="myimage.jpg" style="width: 200px; height: 100px;" />
may be displayed at 400x200 px or more. Check some common device pixel ratios.
Therefor all the images used should be at least 2x width, 2x display height (which means 4x larger). If possible, for vector images we should use SVG or icon fonts.
We can also target devices by pixel density using CSS media-queries (short article here. Personally, I do not care that much, serving few Kb or Mb more is nothing to current internet speeds (and will mean nothing in years to come).
I have been reading a couple of topics about making responsive web sites and then the problems it comes with when using images, as apparently it can take up a lot of bandwidth (as you would have one image which would fit on a desktop which could be 1080px, and then scale it down to be on a mobile which might only be 300px but it would still be the same file size as the larger one)
My question is, within the interchangeable CSS for the different layouts, can't you define an image within that? So that say, you have 2 #media enquiries, you would then have 2 images of different sizes to cater to the layouts which would then take up less bandwidth (example, you have a 1080px for the desktop site and an image which is 300px for the mobile site which would then take up a lot less bandwidth)
Is this practice wrong? Or is this a viable fix? Could someone explain how this wouldn't solve the issue, as I believe it would? I would like to make some responsive sites, but that are kind to bandwidth
Well you can use media queries and set the image as background-image on a div element maybe.
Ex here: http://jsfiddle.net/qsByJ/
#media all and (min-width: 520px) {
#demo{
background-image:url(http://unreasonableatsea.com/wp-content/uploads/2012/03/demo-logo-large.png);
height:439px;
width:660px;
}
}
#media all and (max-width: 520px) {
#demo{
background-image:url(http://i1.sndcdn.com/artworks-000043575260-xlr304-original.jpg?164b459);
background-repeat:no-repeat;
height:282px;
width:425px;
}
}
This way you can serve a different image for a different device.
Some points why you should consider using different images:
on older devices a big image can crash the website or make it move really slow since the memory is small.
if you have more images on the page, performance will be affected since on some devices, on every draw, the images must be scaled down.
if you have a lot of images (social websites for example) the bandwidth consumption will be a lot larger.
This I think is a great question!
I have been having this exact problem myself. After a number of days of searching around I have managed to find a perfect solution.
Take a look at sprite sheets for images. This is where all your images are contained within a single image and then that only requires one image request to be sent. Therefor saving a lot of bandwidth.
What is even better is that if you make the sprite sheet at a high resolution and make it so it scales down dependant on screen size no pixelation will occur, giving you the desired results.
I hope this helps!
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!
I am sure you have all come across this before but I just wondered if there were any new techniques out there.
I have been making a design for a client and they want everything 'above the fold' basically so that the pages fill the screen without scroll bars. I have explained that people look at web pages in browsers at different sizes and resolutions of different sizes etc etc, but this is what they want.
So I made a design that fit the viewport of Firefox at 1280 by 1024 which is the most common size.
Inevitable the client is now moaning that when they view this on their laptop screen 'the bottom gets cut off' so I change the design to fit 16x9, but then 'theres too much space at the bottom on the desktop now'...
I then stupidly showed them the ctrl+ zoom on Firefox, and they said, 'Thats exactly what I want, I dont want the layout or proportions on the site or text to change, I just want the whole thing to scale as it is to fill up the space'
I told them that I didn't think that was gonna happen, but I just thought I'd ask the community if they had any new answers to this unfortunately common request?
I think you're looking for a liquid layout