PDA

View Full Version : Testing Mobile websites



letom
07-30-2013, 08:59 PM
Hey,

Which is the best method / applications available to test the mobile websites in desktop computers ? I am not looking for online emulators, instead which should be run in a desktop computer possible to check with different screen resolutions.

djr33
07-30-2013, 09:34 PM
Emulators (such as the iOS emulation tools for OSX) will provide a full experience, representing exactly what features are available. This is crucial if you need to know how, for example, Javascript will work on the device.

Even beyond that, though, it's possible that some specific details will actually need to be checked physically on the device. For example, John had an ongoing project a while ago trying to adapt a sound-playing script to work on a variety of mobile devices, and there was no way around that except to test with the physical devices themselves, and often each individual model/system had slight differences that needed to be addressed specifically. (In the end, the script, available in an older thread here and on John's website, works on most of devices with audio capabilities, with slight differences in terms of capabilities like formats and autoplay, etc.)


So that's the situation if you need to know about compatibility of a function.

But for testing resolution and so forth, I don't see why you would need anything special. I would recommend simply using your browser and testing with a small window-- 300px wide, 320x240, or whatever particular configuration a mobile device might have. (Note that there are so many devices out there, from large desktop monitors, to laptops to mini laptops/netbooks to tablets to phones, that it's hard to predict exactly what the size will be. Using a fluid layout is crucial so that it looks good at any size-- about 300px wide is probably the minimum that would be relevant for any relatively modern devices.)

Beyond that, note that most devices now use a mobile version of an existing browser-- Safari on iOS, Firefox less frequently, and Chrome on Google phones; I imagine Windows phones/tablets tend to use IE but I haven't tried them myself. Some devices (eg, such as older book readers and really old phones) will use a custom browser (with few features), but those are the minority and users of those devices will know that in general websites appear broken to them.
The result is that you can use the computer equivalent to get a very closer rendering of the page at that exact resolution. Most devices that use these browsers also allow Javascript, so almost everything should work. The only issue might be Flash, but that's a known issue (and probably a bad idea for mobile sites in general). Other things like audio are obviously problem areas, you I assume you're just testing on the computer for overall layout-- as I said, for anything very specific you should use the physical device.

Finally, remember that devices are becoming less and less limited by small sized resolutions because they can zoom-- on an iPhone for example, I believe it renders websites by default at about 800px wide, even though the phone is not that large (ignoring the high density but still small 'retina' displays). Then you can zoom in to any part of the screen. So it's on a small screen, but it's not actually a small layout. This is both good and bad-- bad if you have lots of text that then requires every user to zoom, but good for the users because they can access any website.



Summary:
1. For layout: just make your window smaller and test it on the computer. It'll be a good approximation. Use the specific browser that your device uses if possible (eg, Safari for iOS).
2. For feature compatibility: use an emulator if you can, or use the device itself. There's no way around that.
3. For final testing/confirmation and for especially tricky features (like sound): use the device itself.

In the end, there is a huge amount of variation, so you need to test widely and put in a lot of work to make a website compatible with (nearly) everything.

letom
07-31-2013, 11:47 AM
Thanks..
QUOTE]1. For layout: just make your window smaller and test it on the computer. It'll be a good approximation. Use the specific browser that your device uses if possible (eg, Safari for iOS).[/QUOTE]

Yes sure i am already checked in such a way by zooming the browser(pressing ALT +CTRL + Left arrow button will bring a close view also, Use up arrow to back to normal view of window.), it is a good idea, but the problem arise in feature compatibility,

Another question is how to write headers for supporting all devices, apple. android, blackberry etc.

Beverleyh
07-31-2013, 04:54 PM
I'm not sure what you mean by "headers" in terms of mobile websites. When I think of headers I tend to think of php headers to display/output specific types of content such as file MIME types or text/html content in emails, or to set cache control, or HTTP redirects (http://php.net/manual/en/function.header.php), but as far as I'm aware, you don't need to make any special header allowances for a mobile device. A mobile device/browser is capable of displaying just about any website, give or take a few special considerations for the media it contains, such as audio/video, or script events that work on-click instead of on-hover.

Along with everything Dan previously said, I think the main things to consider when building a mobile website are;
- a simple layout (one column makes best use of space on narrow screens)
- prioritised and simplified content (most important content on top)
- larger 'tappable' buttons (think finger-jabs vs mouse-clicks)
- reduced assets and scripts (only use "valuable" illustrations and keep scripts to a minimum)
- optimised resources (optimise images, scripts, CSS, everything! Be kind to data transfer limits. I believe iphone caches resources that are under 25kb)
- awareness of device limitations (avoid Flash, avoid PDF [Blackberrys have no native PDF viewer and there's no free app])

Basically think simple and small.

Can you explain what you mean when you say "headers for supporting all devices" though?

letom
07-31-2013, 07:44 PM
I'm not sure what you mean by "headers" in terms of mobile websites.

In first time i also think in such a way but need to do some thing additionally for better performance, One simple example is as follows,

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
If it is not added it will display the website , but for better performance as i said,
Some times there may arise a question for some readers, what better performance ? Answer is do a practical test..

But i think modern HTML 5 compact techniques will be solution for the above issues. , i need to make deep research over that subject to give more information.

djr33
07-31-2013, 08:42 PM
I'd suggest keeping things simpler rather than complicated. Use fewer features, not extra features, to make the website display correctly. You could try to add in extra features like that, but in the end it's probably going to cause accessibility problems in at least some cases.

For mobile websites, there is an interaction between the designer and the device manufacturer:
Designer's job: keep the website simple enough that it can be accessed
Manufacturer's job: try to display any website so that it at least is readable, and as possible isn't too ugly

It's the manufacturer's job, not yours, to make the website work on the device in terms of zoom, exact layout, etc. By trying to do that yourself, you're actually making their job harder and might create a conflict that can't be resolved.

letom
07-31-2013, 09:02 PM
Some mobile manufacturers are providing stone age browsers with their devices, it makes designers or developers to concentrate the things more.
Site Users are important for designers/developers not manufacturers, clients will usually bitter towards developer/site owner if the website is not displaying properly not to mobile manufacturers , if site is not displaying properly or not allowing the facilities as same as desktop browsers, what is the use of Internet access via handsets ?
It is an another issue... but we are concerned about web development only . frankly speaking there is no optimistic solutions to deal with these stuffs.

djr33
07-31-2013, 09:06 PM
frankly speaking there is no optimistic solution to deal with these stuffs. Yes and no-- the optimal solution is to create a website that is usable on all devices. That isn't hard. Keep it simple, and focus on usability/readability, not content or design. Even on the oldest mobile browsers, it should be possible to see the webpage and get useful information.

No one uses those old devices because they like how they work or because they expect beautiful websites. They use them because they are functional: they display information from the internet. With that in mind, you should be able to create a website that will work for them.


So again, the best strategy is to allow the manufacturer (even if they use a stone age browser) to worry about HOW to display it, and make your website simple/compatible. Especially in those situations you will create problems by trying to fix those old browsers yourself. They're not meant to be fixed. Let the manufacturer worry about the quality of the browser, and just do your job, which is making your website easy to use.

letom
07-31-2013, 09:20 PM
Hm,
Another concept is
Suppose we have two Laptops which is manufactured by two companies, Laptop1 and Laptop2
If our website is running smoothly on Laptop1 without any issues, but in Laptop-2 some features of our website are not available, which seems to be broken,

The cause of this issue is website developer/designer ? No it is the defect of applications using in the devices.

Likewise we have only numbered tools/languages to develop websites for both desktop and handsets, In my point of view developer is only need to concern about setting width and height of a webpage that fits in all screen resolutions, remaining part is for device manufacturer

Beverleyh
07-31-2013, 09:25 PM
Site Users are important for designers/developers not manufacturers, clients will usually bitter towards developer/site owner if the website is not displaying properly not to mobile manufacturersNot necessarily - bear in mind that if somebody is using an older phone then ALL websites will be displayed poorly (or less than optimally) not just yours - and when that happens, the user tends to accept that as being the fault of their old handset rather than the website.

People are generally more concerned with accessing content, and finding the information they need, than they are with a super-swish, complicated design or special script effects.

Keeping it simple and logical is the best advice that I think anyone is going to give you.

djr33
07-31-2013, 09:29 PM
I agree with Beverley.

There is a very important distinction to make between current 'standard' technology and outdated/substandard technology.

It is your job to make your website compatible with users of all modern browsers and devices. You should, for example, make an effort to make your website compatible with the recent versions of IE, Firefox, Chrome, Safari, etc. And same for modern mobile devices like the iPhone.

It is NOT your job to make your website compatible with outdated or substandard technology. As Beverley said, those devices just do not work for anything-- they display information, but they do not display it well. Your job IS to make your website functional on these devices (by keeping it simple), but you should not try to "fix" these devices.


Current technology: make your website look good.
Backwards compatibility: make your website functional (only).

letom
08-01-2013, 03:41 AM
Thanks..Advices are nice..accepted

make your website compatible with the recent versions of IE, Firefox, Chrome, Safari, etc.
That is already supported.. No issues with that.. I am not talking about old handsets of 5 years back, But there are some handsets available with old browsers, but they express very nice stereo music and excellent color display in their handsets(all facilities are good except their browsers).


It is NOT your job to make your website compatible with outdated or substandard technology

Yes sure, but there we can arise other some questions as follows,

if we purchase a new car and that will not run in old roads, how can we reach to the destiny ?
If the radar is not working is hazardous environment conditions how the ATC(Air traffic controller) will fix the route with the cockpit crews ?
(that why microwave band are discovered, otherwise they can use other weak waves to capture the signals from radar).

That means what ever product we are developing that should work in all severe conditions or environments at least with a minimum service it can provide.
When there a need arise , we discover new things, innovations are not to make profit only but to the smooth existence of human beings..

djr33
08-01-2013, 04:40 AM
if we purchase a new car and that will not run in old roads, how can we reach to the destiny ? That's not your problem. The car doesn't work well. You cannot, in building your one "road" (website) fix their device. It's their choice (or an accident) to have such a bad device. Really, the best thing you can do is make the website accessible.

But it's up to you. If you want to invest hundreds of hours in every bad device, yes, you can probably improve your website. But why? They'll just realize that they have a bad device and buy a new one in a year or two.


When there a need arise , we discover new things, innovations are not to make profit only but to the smooth existence of human beings.. In the real world, all that matters is a balance between time/energy and reward. If you want to spend the time for 1% of the population, go for it. I don't, personally.
And if you don't do it well (if that's even possible for some devices) then you will run the risk of actually making the page harder to access.



Here's a parallel situation:
"My website requires that visitors cannot right click. It's very important! Therefore, all of these browsers are broken, and it's my own personal job in life to fix them by adding a no-right-click script to my website. How can I do this perfectly in Javascript?"

There are a number of problems with that scenario (and they apply to your questions as well):
1. You can't possibly deal with all browsers/devices, and when you try you'll just find more and more being created that are also problematic. You can deal with a lot of them, but not all. Decide on a limit and don't worry about the rest.
2. It's ALWAYS a bad idea to try to control what the visitor can do. It's best to present them with useful information and allow them to view it in the best way. Trying to "fix" their browser/device is also trying to control how they use it-- that's generally a bad idea. The internet is a user-designed system, not a designer-designed system. You're not in control, and you never will be. (This is why, for example, it's impossible to prevent people from stealing images from your website. It just can't be done.)
3. In some situations, the features you're trying to control are very useful for the visitors. Consider special scenarios like a text-only browser (screen reader) for deaf visitors. Or in another case, someone might be colorblind and want to cut and paste your text to view it in a new window-- disabling right click could cause major problems. These things also apply to controlling the view on a mobile device. What about people with bad eyesight? Do you want to make it hard for them?


In the end, you can do whatever you want. And there may be small exceptions to these generalizations. But in general, we've given you reasonable advice about how to deal with a necessarily imperfect situation.

letom
08-01-2013, 06:14 AM
ayyyy .. tks fr your information


In the end, you can do whatever you want.
There is no need inform that thing explicitly, when you say, The internet is a user-designed system, not a designer-designed system.


we've given you reasonable advice about how to deal with a necessarily imperfect situation
Thanks, But all the information stated here, except 1 or 2 things are known to me.

The conversation is not going to the technical level, instead it is repeating what said earlier. Limited knowledge may cause repetitions

Beverleyh
08-01-2013, 06:57 AM
The conversation is not going to the technical level, instead it is repeating what said earlier.Thats because it doesn't need to be technical. Making a mobile compatable website isn't an ultra-technical feat. I assume that you are speaking about the coding rather than the design, but you seem to be willing this to be more complicated than it needs to be. From a 'technical' standing, a mobile compatable website follows all the same coding 'rules' than a desktop compatable website follows but in a lighter, more streamlined way - HTML, CSS, a few images, a few javascripts, all wrapped up in a container that looks good at a small resolution (and a variety of larger ones), is easy to navigate and serves the user useful content/information.

If you want more specific advice, its probably going to help if you refine your questions. Try making a list of your goals or things that you need to research, then read some articles, look at other examples, take notes and make a decision based on what you've learned.

I know that sounds very general (and a lot of it is common sense) but at the end of the day, you are the person who holds all the information about your website project so you need to design around that and decide the best ways to deliver that information to visitors.

letom
08-01-2013, 11:57 AM
Thats because it doesn't need to be technical. Making a mobile compatable website isn't an ultra-technical feat. I assume that you are speaking about the coding rather than the design, but you seem to be willing this to be more complicated than it needs to be.

can u explain how we can speak about design ?

There you miss some thing... Coding brings design ,if we are not coding the website , how the design come into existence ? Design is supported by coding, we are doing coding to get the design, so developers or designers are thinking about coding, it(coding) includes all the facts and solve the issues, design, security, problem solving, functional requirements and more

To speak about design we need to discuss about coding.
,

Beverleyh
08-01-2013, 12:48 PM
There are certainly blurred boundaries between web design and web development, however, for the purpose of this thread I was trying to help you narrow down the options and refine your question - you were focussing on the 'technical' and I (maybe wrongfully) assumed you were referring to the specifics of code, based on the previous thread content (you raised the concern of headers and used a meta tag example after all)

The designer/developer debate is heavily discussed on the web - I too wrote a short article myself, although if you search Google you will find more detailed arguments from people in both fields. If you'd like to read my brief interpretation, you can find it here: http://fofwebdesign.co.uk/faqs/whats_the_difference_between_web_design_and_development.php

As far as I can see, this thread topic has now served its purpose and the original question has been answered sufficiently, to the best of our knowledge, so we will be closing it.

In the future, if you can formulate a specific question that we are able to help you with, without ambiguity, please feel free to start a new topic.