I am in the process of designing web-app, and would like to know what the following statement means/claims to be "Best viewed at 1024 x 768" ?
Does it mean if my monitor is set to 1024 * 768 and I browse that site which claims to support this resolution , I will not get horizontal/vertical scroll bars or does it mean something else.What care should one take during the design to make sure it adheres to this resolution ?
Thanks
It means that the site is best viewed with a 1024x768 screen resolution.
Don't use it though. Different people have different screen sizes and it is best to try let your design flow to match it.
Besides, 1024x768 is the minimum screen size you should be designing for today.
I think for the most part it means "minimum resolution the monitor should be set to". At least thats what i've always meant when i would put that in :).
I means the minimum monitor resolution setup. But i can give you a good sugestion try to build your app as free as you can I usualy use a lot of zoom in web and some apps don't like it.
Related
My Ms Access(2010) database uses forms to display and manipulate data. Recently, when presenting these, I found out that the use of these forms on a video projector leads to a severe problem, the forms appear to be 'zoomed' in.
Therefore I have 2 questions, thanks for the answer!
1) How are twips on a video projector calculated? Theoretically this should depend on the distance between projector and screen, which woulnd't make too much sense. (I'd need this information to be able to explain the problem, thank you very very much)
2) How can this be configurated? Is it possible to use VBA or Win32 API to achieve this?
I don’t think this problem has anything to do with TWIPS or with the video projector. Any monitor (analogue, digital, projector, etc.) shows the same picture if it has the same resolution. If you set the output of your computer to i.e. 1024 * 768 pixels and the output device (analogue or digital monitor, projector, etc.) uses the same native resolution then the picture will look the same on each device.
Access works in pixels. If you have a form optimized for a specific amount of pixels then this is what Access uses. If you have a higher resolution then form will not fill the screen and if you have a smaller resolution the form will not be completely shown on the screen.
I guess what happens is that you use on your PC an output of i.e. 1600 * 1200 pixels but your projector can’t show this correctly. So the projector tries to convert i.e. 1600*1200 to 1024*768 and this will never look good.
I think you have two options: Check the resolution which your projector expects and set your PC to the same resolution. Or change your application – or the projector.
In line with what Edgar has suggested, regardless of the display type (projector, monitor etc...) the issue will remain the same. In this scenario, the problem is the form is designed for a given screen size, say 1600x900 (16:9) or 1920x1200 (16:10) or whatever you have chosen to design the form as.
The projector is likely not the same resolution as this. Many smaller projectors are either 1024x768 or 1280x720, both of which are likely smaller than your computer monitor in regards to resolution. While it is true that you could design the forms to the proper pixel dimension of the projector an easier way, that wouldn't require editing any content, would be to send the projector the same resolution that you have designed the forms to be.
For example, if your forms fit nicely on a 1920x1080 pixel space but your projector is 1024x768 then you could open display preferences on your computer and set the output to the projector to be 1920x1080. The projector will then scale the image to fit onto its 1024x768 panel.
There are many variables in here and you may run into equipment limitation with this approach, such as the projector not being capable of ingesting and scaling a given resolution which you are forcing into it. In that instance you could utilize a hardware video scaler inline between the computer and projector to perform the scaling operation for you. An example of a device capable of this would be a Barco ImagePro, though there are many other more cost-effective solutions on the market as well.
In the case of responsive css design, let's assume you have a couple of different-sized versions of an image and you reach a point where you have a screen width of 900 pixels.
What's the best thing to do in this case?
Case a) downscale an 950 pixels image or case b) upscale an 850 pixels image
(these values are of course fictive, I'm not talking about a particular case)
From where I standing, each one has its own advantages and disadvantages:
Using downscaling, as a PRO the image should have a better quality (at least I think so, I don't know that much about the different browser's downscaling algorithm). As a CON, the image would take longer to download, something important if you're also targeting mobile.
Using upscaling, you gain download speed, but you lose quality.
Of course, you won't upscale a 500 pixels image to fill 1000 pixels width, just as much as you wont downscale a 2000 pixels image for obvious reasons, assuming you have a choice.
But in cases where you have similar values is there a sort of rule of thumb that might help you make a decision or it doesn't really make a difference and it's up to the developer?
Or, at least, is there a factor that would weight more? For example, by using upscaling you could get a much larger benefit from the download time decrease then from the decrease in quality and viceversa.
I think you could look at it in different ways. Also, you should ask yourself some questions:
What audience are you trying to reach (Mobile (say up to max-width of 640px) or desktop (anything wider than 640px) orientated)
What is the largest image you will use (in width and height)
Are your images needed on your mobile website (i.e. can you make a simplified mobile version of your website, without losing too much of its contents?)
When your focus lies on a desktop environment as defined as above I would not bother too much about your problem. Of course larger images will take some time to load, but don't forget that most mobile browsers have two very neat features: 1. data that is retrieved by the device has first been compressed by servers (think Blackberry, Opera ...) and 2. most of the time browsers allow options for the quality of images (low, normal, high). So users can still choose what kind of quality they want, without you needing to decide for them!
I think that when you focus on a mobile audience, it is best to upscale. I don't think that your website is mobile-only though, and you want to keep your website to look good on wide-screen devices as well so I would go for downscaling! Also, don't forget to optimize your images (JPG compression with 80% should reduce the size a lot, but shouldn't hurt the quality too much).
EDIT:
So I've been thinking about this and there is something else you can do: work with two different images. I can hear you thinking: but that doesn't sound logical, how can the browser detect the image that needs to be changed when it is not loaded yet (would be stupid to load two images). Well, here you go. (Credits go to jAndy in this question)
jQuery code (note that I linked to my own webspace. This fiddle will thus not keep working for eternity!)
$(document).ready(function() {
$("#jsDisabledMessage").hide(); // HIDES MESSAGE THAT TELLS USER TO ENABLE JS
if ($(window).width() < 480) {
$("img").attr('src', function(index, src) {
return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-mobile.jpg"; // FOR MOBILE DEVICES
});
}
else {
$("img").attr('src', function(index, src) {
return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-not-mobile.jpg"; // FOR DESKTOP
});
}
$("img").show();
});
So, what happens:
Browser reads HTML
Browser is not tempted to find image (and images are hidden by CSS anyway)
jQuery finds the appropriate URL (depending on screen size) and adjusts HTML accordingly
jQuery shows the images
When JS is disabled, a message will be displayed telling the user, the requested images cannot be displayed.
I hope that this is something in the right direction.
I have started learning some web development lately and have noticed lot's of sites just use Pixel dimension to specify sizes of thins as well as the overall size of the body.
This seems counter intuitive to me (maybe because I am used to programing for Android)
But this could make the website a pain to view on lower res screens and less useful on higher end screens.
Is this really the way things are done? Does this not cause to much problems?
Thanks.
EDIT: how would one go about implementing a less fixed size site?
There are pros and cons to doing things like this.
Pros: It allows you to have full control over where everything is placed as sometimes with relative sizing things will move in unexpected ways.
Cons: Well you mentioned them! Different size screens will give the site a different look.
But overall to some people it is more important that everything remains in the right place than that everything looks great on all screen sizes. Ultimately it depends on the preference of the designer. Also remember that uses on higher resolution screens can zoom in and those on lower resolutions can zoom out!
Peaces and pears.
Each to their own, so long as they are consistant and know what they are doing that is all that matters.
I have recently starting using grid templating which uses pixel dimensions for containers and I really enjoy it. Considering that 960.gs (960px) is an accepted size width for a website, if you know that you do not want to develop a fluid template, then why not use fixed width pixels.
If I am going to have a mobile version of my phone, then I serve the mobile version not my 960px website, and in any case, most phones intuitively display websites anyway. (At least the latest phones, obviously not the old Nokia 8210's ;).
What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?
How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?
An answer with an explanation rather than just the size would be greatly appreciated.
the most grids use a width of 960px. (When the design has a fixed width).
When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106
Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)
I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/
Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/
Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.
960px width is a good standard, as others have already elaborated on.
However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.
One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)
At the end of the day, I think 960px is a good standard, but really, "it depends". :)
960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.
In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).
You should really aim for an extensible design (generally harder to do though).
Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto.
and best to align the website in the center, via the css property margin: 0 auto;
The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)
I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.
This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.
An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).
Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.
I know that it is possible for a website to detect a user's screen dimensions in pixels, but is there a way to detect the physical size of a user's monitor (in inches)?
This is not always possible. Even the operating system might not know this information. In order to display properly on the screen the necessary information is the resolution that the monitor can display.
Think about using a projector. Depending on how far you place the projector away from the wall, the screen will become bigger or smaller. However, the computer will send the same picture to the projector. How would the software know about the distance to the wall and hence the size of the screen?
Not reliably.
Even monitors that believe to know their DPI - which isn't many - are often incorrect.
You could use EDID from the registry.
Please vote for this suggestion:
https://connect.microsoft.com/VisualStudio/feedback/details/526951/screen-object-physicalwidthincentimeters-physicalheightincentimeters-displaymode