how can I replace screen resolution when accessing some site from script? Is it possible to acces such data when own script connects to the server?
To give a very definitive answer:
You cannot change a user's screen resolution via the browser.
You cannot retrieve a user's resolution as part of any ordinary HTTP request. (i.e.: in PHP's $_POST superglobal)
You can retrieve a user's screen resolution using JavaScript, which can then be passed back to the server via AJAX.
As a best practice, your website should be resolution independent by means of a fixed, fluid, or elastic layout. Changing a user's resolution is a frustrating experience for users and makes a project operate badly.
Keep in mind, also, that many platforms cannot have their resolutions altered. Most mobile devices, embedded platforms, and video game consoles have fixed resolutions. Also, projectors and televisions usually have very specific resolutions at which they function properly, so adjusting the resolution on these devices would likely wreak havoc.
As an alternative to adjusting screen resolution, check out em-driven layout. An em is a unit of measure in CSS that is relative to the current font. This allows you to dynamically adjust the sizing of your layout and its contents by adjusting the font size of the document (a larger font size will increase the pixel-for-pixel sizes of everything else on the page).
It should be noted that adjusting resolution can be accomplished via ActiveX on Windows, but only after multiple security warnings (and it only works on Windows in IE). This should not be attempted under any circumstances.
Here is my answer if I understood your question correctly. It is not possible to change screen resolution for a user when he/she accesses your site.
Are you saying that the site is changing its behavior based on what it thinks the user's screen resolution is? That's a) bad behavior, and b) client-side, so done with JavaScript or an ActiveX control or the like.
If you want your script to mimic that, it'll have to interpret the JavaScript, run the ActiveX, or whatever.
Sites don't have their own "screen resolution". They're rendered to whatever size the browser is at. That's part of the beauty of HTML.
Related
I searched every where on the net, but i couldn't find the answer.
Because I wonder, is it possible to load an website page with the css-media-queries?
So, when he detects screen size, it load up different website page.
Example:
He detects a 480px wide screen (mobile screen) and loads up a the website from the css-media-query code that is only made for that screen size with all the php and other functions in it only for that page.
Is this possible? And what is the best approach to get this done in coding?
No. Media queries are used for styling content, not loading whole pages. And the backend (i.e. your PHP) script usually has no idea about the client screen size.
basically you have two options:
Load the content via AJAX after determining viewport size using some JS script
Set a cookie with the viewport size (again, by a JS script which measures viewport size) and evaluate that in your backend script
But option 2 will only work after the second request, though.
I need to create a page which will look differently on an ipad. I have never done this before so I have a few questions:
1) How can I make a page know its being viewed on an ipad for css purposes?
2) If some content on the page is different for an ipad, how can I use php to know what device is loading the page (because this can't be done with css)?
I'll start by answering your second question. The only way to detect a particular device type in server-side code is through user-agent parsing. In PHP, you could do this with the strpos() function, which returns FALSE if the second string parameter is not contained in the first. For example:
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'iPad') !== FALSE) {
// load iPad-specific content
} else {
// load content for other devices
}
To answer your first question, there is no way to detect only an iPad using CSS. You could use media queries to target 1024x768 displays, but these would apply to any screen with that resolution (not just the iPad). If you want to apply iPad-specific CSS styles, load a unique stylesheet with the aforementioned PHP code.
However, it should be pointed out that device detection is generally a bad practice, since it will not account for changing browser capabilities, market trends, or user-agent spoofing. In most-cases, CSS media queries provide a more robust, forward-leaning approach to supporting various devices. Why? Because they target device types, rather than specific models. This means that your site can work well today on iPad, Android, and Windows tablets, and next year on whatever hot new xyz device hits the market (without requiring code changes).
http://css-tricks.com/snippets/css/ipad-specific-css/
http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/
http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
this might help you it is well written article...
Use media queries to hide/display/change content for different devices.
I would like to know if there is the possibility to set screen resolution when debugging web application.
For instance, I usually work with a 1600x900 screen size, but the customer requirement is fixed on 1024x768 resolution.
My desire is to start debugging in the browser setted to this resoluton, for the time of the debug.
Is it possibile ? Or there is some tool that allow this kind of behaviour ?
Thanks
You can try a browser plugin like https://addons.mozilla.org/en-US/firefox/addon/web-developer/ that will allow you to quickly change the resolution of the the browser your are debugging in. There's one for Chrome too (https://chrome.google.com/webstore/detail/idhfcdbheobinplaamokffboaccidbal) and I'm sure other browsers allow you to do this too.
This may not work automatically, but you can quickly switch back an forth between resolutions.
You can leverage the Windows API to try to set screen resolution from your program, if the DEBUG constant has been defined: http://dotnet.mvps.org/dotnet/faqs/?id=setscreenresolution&lang=en. However, if you have to terminate the debugger, your screen will remain set to the debug resolution. You also shouldn't release the "debug" configuration of your app without first commenting out the resolution change.
Usually, changing the screen res is something a desktop app should never do. However, it makes a certain amount of sense here, so just make sure the released builds don't do this.
Firefox offers a plug-in to test a website in different resolutions, but this is just testing it with one particular browser. http://www.makeuseof.com/tag/3-firefox-plugins-test-website-resolutions/
I'm looking for good articles around image resolutions, size and quality for web pages, especially around how this affects web sites currently.
I'm working on a web site for a client, and as an honour graduate in arts and design, the client is persistent that her 7mb - 10mb images are sufficient for her web site, totalling in at almost 400mb. I've tried arguing bandwidth limitations and performance but these are not holding ground.
The standard for images are at 72dpi, no larger than your standard screen resolution (1024x768) and above 1mb in size (which is already too large in my opinion). my argument is that loading 7mb+ files into a gallery on page load will seriously hinder the users experience if they have to wait a long period of time for 7 - 10 images to first get streamed into cache before the page is loaded, and even testing this with lazy loading plug-ins (we don't want to go flash) and late-loading has performance penalties.
Does anyone on here have any recommendation around image size, resolution and quality? We don't want to loose the HD quality of the images when users navigate the gallery (obviously we'll have to thumbnail them first)?
i have read guidelines before (when we still used 1Mbps connections or less) and have been following these until now:
high resolution images should not be bigger than 1.5 - 2MB. making it this big is like bigger than the webpage contents itself. try checking http://deviantart.com on how they place big photos in their site and check the image properties using the EXIF if any
dimensions should be enough to be viewable in the browser (and avoid scrolling)
compression is to be tested. it's a case to case basis, no setting is the same for everyone. high quality, high compression without visible quality loss is a practice in web design.
JPEG is best for images, PNG for the layout and GIF for icons.
try loading images in the background when the browser is idle using javascript. that way, they are in the cache before the user knows it.
more on the webpage design, avoid using heavy graphics on the site itself, making the site fast so we only wait for the image.
If you really boil it down you don't have a choice.
You are talking about HUGE file sizes which are not realistic.
You need to download a smaller version. After that you can subsequently download versions with increased quality or offer the full image with an onmouseover or click.
Some general guidelines:
Thumbnails (of course)
Offer multiple image sizes (small, medium, large). While I understand the UX implications of giant images, some people do have fast connections and large displays and/or will be willing to wait for a high-resolution version. But it shouldn't be the only option.
Try different compression levels to see what works best for different sizes. Using one compression level across the board doesn't always work. Again (depending on the source material), there may be a need for near-lossless compression at the high end. For example, images for print, CAD drawings with fine detail, etc.
Use sequential loading techniques if applicable. For example, if you have ten images to load (optimized or not), make sure that the first visible one is the first one actually requested from the server.
When it comes down to it, your client is under the impression that asking to shrink her image represents a 'compromise' that only results in damaging the quality of the image the user receives.
The truth is, of course, that an 8-10MB image is so large that it would take most users many seconds to download, creating a horrible user experience that will increase bounce rates.
Show your client a side-by-side demo of her website loading a handful of web-optimized images, and show her a site loading 8-10MB images, then let her decide. Ultimately, your job as professional is to assist her in making good choices, but she's free to make bad ones if she insists upon it (it's her brand, money, and right).
Something else you can potentially do is detect the size of the window and load larger images if the user is on an ultra-high-resolution monitor or if the window appears to be especially large.
Best of luck!
I am developing website and it has to be viewed in tablet pc. Please suggest me what are things to be considered ? technology wise ?
also i need to know what are the tools i need to have to view in my intranet as well as.
A major issue: in many tablets there is no moving pointer - at least not in a fully usable form. That means that tooltips may not really work, and image maps must be really clear, since there is no highlighting until the user actually "clicks" on the link.
Well, actually that's not fully accurate - if the user drags the pointer, it should work like a regular mouse pointer. The problem is that most users avoid dragging and just tap where they want to click directly.
Best piece of advice I can offer: get an actual tablet PC and try browsing your site. Most major issues will be evident almost immediately. If you are able, get a regular tablet/pad user to beta-test your site without trying it out on a desktop PC - they would be able to see issues that you would miss due to your prior knowledge of the site.
The Tablet PC is a standard Windows machine, therefore it has the same browser support as any other Windows box. So there isn't any special technology required.
There are however some design considerations:
First, make sure your layout has plenty of empty space surrounding iterative elements. Crammed pages are tough to navigate with a stylus, and if it is one of the newer models that also support touch it is even more of an issue.
Second, most Tablet PCs are configured with the default font size set for 125%. You want to make sure that your web pages scale correctly and don't end up requiring horizontal scrolling to see the full width of the page.
A second point regarding scaling, Tablet PC supports both Landscape and Portrait modes. In other words, it can be 1024x768 OR 768x1024. You'll want to make sure that your user experience is acceptable in both modes.
One thing i can think of : there is no 'hover' on most tablets, and if it's there at all, likely nobody will see it.
Not all tablets support flash, but they do all support javascript, and Prototype.JS or jQuery will run on them in most cases