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
Related
I'm learning HTML and CSS. I made this site at [No longer exists, sorry. Lesson learned: post the code].
When I view the site on an iPhone or iPad, the three images on the bottom are vertically stacked. When I view the website on Chrome using the Developer Tools, or "User-Agent Switcher for Chrome" (plugin), or mobiletest.me (website), and emulate an iPhone or iPad, the images appear horizontal and perhaps squashed.
The vertical stacking is more usable anyhow, but (1) I would like to know how to reliably test my website on iPhone, iPad, etc. without a physical device, and (2) I would also like to know why these tools and services aren't consistent with the device they're emulating?
UPDATE: Actually, this answer accurately mimicked the actual device, but can you answer my second question? I would like to be able to rely on Chrome Developer Tools.
These tools are not intended to "emulate", but to merely pass the correlating user-agent string for any site that may be sniffing the user agent for any reason (conditional CSS etc.) Browserstack.com or the physical device itself is a sure way to test sites consistently, but for a cost.
Is there a simple way to trigger a mobile OS's native pop-up/alert/etc. from some form of web code? I'm writing an ASP.NET mobile web page and I'd like to, for example, have the iPhone's UIAlertView appear.
EDIT: What I'm looking for is not the method with which to detect which mobile browser is accessing the site (I already know how to do that). If the code to trigger a pop-up that will look nice in an Android browser is different than the code to trigger a pop-up that will look nice in an iPhone browser, I can simply throw in a switch statement that redirects the user to the pop-up that corresponds with their browser. I'm trying to find the html/javascript/asp.net code which will create a mobile-friendly pop-up, either in general or for the various popular mobile web browsers specifically.
Don't know whether there is any pre-built functionality in .NET that can achieve this, but you can surely write one yourself.
You can write a method, that returns the code for your popup, based on the user OS (simple switch statement should do).
EDIT after taking a short nap:
I believe you should reconsider using popups. They are quite annoying even on desktop browsers and many people block them automatically. Probably every blog about accessibility will tell you, that you should keep mobile version of your website as simple as possible because of various compatibility issues that you can run into.
Instead, try to think about some interesting way to incorporate messages for users in a different and appealing way, that won't disturb anybody.
What I do is use a div popup (that floats ontop of the page) and eighter make a big close button or set at timeout to remove it.
jquery mobile is a good place to start.
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/
Back in the past,
i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...
So is there any webpage or application where i can see how my webpage looks like in different resolution?
And here are the resolutions i would like to check for..
1. 1024x768 24.56%
2. 1280x800 22.06%
3. 1280x1024 13.42%
4. 1366x768 7.10%
5. 1440x900 6.68%
Perhaps you're thinking of http://browsershots.org/ ?
Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.
It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.
If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.
For viewing which percentage of people sees how much of your web page:
http://browsersize.googlelabs.com/
Also: Web Developer plugin for Firefox (Resize menu).
Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...
There is one more online tool called ScreenFly which is very good and you can even check for tablets, TVs, mobiles.. screenfly
There are many utils available for watching your website in different resolutions.
Some are installed on PC, some are online services like these:
Adobes "render browser" - you'll need to create a free Adobe account:
http://browserlab.adobe.com
Nice, but not free if you want it fast as I recall it:
http://browsershots.org/
Google - shows what part of your website is visible based on statistics from Google:
http://browsersize.googlelabs.com/
But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.
If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.
You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.
Regarding your question, the % you list, seems like you would have most use of the "Google" link above.
Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:
Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)
Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)
Google Chrome (awesome debugging tools too, and a very stable browser)
Safari (so you make sure that you support MacOSX)
Thats my opinion.
The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.
I'm working on something that needs a webpage to go full screen. The screen must become completely white.
Is there anyway that I can do this without flash or silverlight?
Thanks in advance
edit: Im not trying to force anybody into fullscreen, this will be mainly used by a couple of people. Even so I'll give proper feedback on how to get in and out of fullscreen .
You cant do full screen, because of security reasons the title bar is still there and so on in different browsers.
But a way could be to make the window larger than the screen, lets say 100 pixels wider and 100 pixels higher and position the window at -50, -50. I havent tried that but if there is no restrains against window size being bigger than screen size it could be a solution.
With JavaScript:
window.open ("http://stackoverflow.com", "","fullscreen=yes");
The size of the window varies between browsers, but actually in IE, you will have the desired behavior...
Please dont resize the user's web browser. I use the rest of my screen for other things, and I think many users do too. A respectful website stays where the browser puts it.
"Something like ajax for example?"...
Ajax != Javascript.
Your responsibility as a web site operator is to have some manners and allow the user to control the size.
You could read the screen.width and screen.height and if they are far off the document.body.clientHeight or document.body.clientWidth, alert the user that the page should be viewed in fullscreen mode and how to make it fullscreen (F12 for IE - i think, F11 for FF).
No, you can't control the browser in that way with javascript.
You can instruct your users to use firefox 3, and press F11 to enter full screen mode. the title bar will go away if the mouse isn't near the top of the screen.
Yes, it requires user interaction, but if they want to go into full screen then it's easy for them to do so under their own power, and to leave again when they want to.
-Adam
Well, I see that you are trying to simply have a button that will make the page full-screen; similar to the youtube full screen mode.
As well, I do NOT suggest using the "just hit F11" method, as people on Safari, or Mac in general, will be excluded.
You can use C#, which can be done by downloading Visual Studio or MS Visulal C#, or even CosmosBoot. There is plenty of code for full screen applications in C#. Another good thing about full screen in C# is that it can be easily embedded into a webpage, through some simplye ASP code.
You can use java, which can be painfully slow, and require a lot of coding, but it is attainable. You can use one of several hundred IDEs or JDKs, but I don't really use java, so I can't give you much in the way of advice on programming it, but it is EVEN EASIER to embed than C#, all you need is the tag.