Jump to content

Testing Sites on Mobile Devices

Pete

By Pete,
in Dev Talk

 Share

Recommended Posts

teppo Hero Member

teppo

Posted
Posted

Thanks for sharing this @Pete, that seems really interesting! I think I've tried some earlier version of this, though it could've been web based application.. can't remember for sure anymore. Will have to try this one out anyway.

Regarding mobile testing in general, I usually try to avoid emulators. First of all they're just emulating something they're not and thus there's no guarantee that they're doing it properly in all cases. There's also this (much bigger) problem that you won't get real "feel" of the device, which can sometimes be rather important.

I'm sure you guys already knew that, I'm just stating the obvious here in case someone with less experience happened to read this :)

@Martijn, responsivepx.com seems nice too and I believe that you're absolutely right about defining breakpoints based on content and not the device(s), though common mobile devices / settings should definitely still get some extra attention (so that everything works nicely at least in those situations.)

I've used responsive.is and screenqueri.es for testing breakpoints. Out of these two screenqueri.es is more technical, while responsive.is is clean, simple and looks good -- thus it's fun to use even during meetings to demonstrate for clients how proper responsive design works :)

Link to comment
Share on other sites
teppo Hero Member

teppo

Posted
Posted

@geniestreiche, responsinator.com has quite an interesting idea. Obviously still doesn't match the feel of a real device (and is a bit lacking when it comes to Android devices) but definitely nice addition. Adobe Shadow is something I'll definitely have to give a try, seems helpful -- especially liked the ability to "live-edit" markup. Thanks for sharing these! :)

Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
  • Author
Posted

I quite liked the idea of an emulator actually as I didn't even realise until recently the problem with retina displays (even though I own an iPhone). I think some other manufacturers are using high density display as well nowadays but if using the emulator I'd only ever bother checking on the latest devices it supports - anything more than that will drive me crazy as I have a hard enough time getting things working in older versions of IE sometimes ;)

Interesting to see the other options though - very useful so if anyone has any more let us know!

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
Posted

I'm sure someone may already have posted this somewhere but I've only just come across it myself: http://www.opera.com...r/tools/mobile/

Very handy as I only have an iPhone to test mobile sites on, plus this will test some tablet sizes too :)

"The emulator is super simple to install and lets you do serious mobile development from your desktop."

So far none of the emulated devices shows/works the same as with the real device. Some more or less. I wouldn't rely on emulators at all for serious developement.

  • Like 1
Link to comment
Share on other sites
Pete Hero Member

Pete

Posted
  • Author
Posted

Well obviously if you've got the luxury of having a stack of real devices this doesn't make sense, but not many of us do.

I'm curious as to what way they differ from the real devices? Aside from the obvious ones of on a large screen resolution they sometimes look far bigger than the real device screen (some imagination has to be used there).

Link to comment
Share on other sites
  • 5 weeks later...
  • 1 year later...
SteveB Sr. Member

SteveB

Posted
Posted

Anybody happen to know how I can use an iPad to browse a site hosted on my laptop (a Win7 PC with LAMP stack and wifi)? I'd like to be able to go to a meeting and show people a site on the iPad and on the laptop without depending on availability of an internet connection. All self contained.

I have a iPhone here to test with but couldn't get anything working. Tried adding (on laptop) an ad-hoc network with no security. The iPhone sees it and apparently connects (check mark is shown) but then what? Putting laptop's ipaddress into safari (that's what a 2nd PC on the LAN would do) doesn't work.

Thanks.

Link to comment
Share on other sites
Joe Sr. Member

Joe

Posted
Posted

Here are two more online testing tools I´ve been using:

http://ready.mobi/ ("Mobile Compliance Checker" - It doesn´t emulate the site but gives you an analysis of your code´s mobile-readiness.) (See Ryan´s post below, where he points out that this tool seems to be out of date. A shame, because I think the concept is good!)

http://transmog.net/iphone-simulator/ - Can´t say how realistic it is, but it certainly looks convincing.

Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
Posted
Anybody happen to know how I can use an iPad to browse a site hosted on my laptop (a Win7 PC with LAMP stack and wifi)? I'd like to be able to go to a meeting and show people a site on the iPad and on the laptop without depending on availability of an internet connection. All self contained.

For android there is this simple app https://play.google.com/store/apps/details?id=ru.gelin.android.browser.open&hl=en

This works with simple html files. You just put the static html/css/js files on the sd card and open them in the browser :)

On another note, you can also access your localhost server inside a wi-fi network by finding your computer's ip and accessing it from the browser. In linux and mac you can find it with "ifconfig" in the terminal, and in windows with "ipconfig".

  • Like 1
Link to comment
Share on other sites
SteveB Sr. Member

SteveB

Posted
Posted

On another note, you can also access your localhost server inside a wi-fi network by finding your computer's ip and accessing it from the browser. In linux and mac you can find it with "ifconfig" in the terminal, and in windows with "ipconfig".

True but not the same thing. Static files are not the answer either. I want to bring a laptop (web server) and an ipad (browser) to a meeting and make it work. No "network" other than those two devices. It's supposed to be possible by setting up an "adhoc" network but seems very hit or miss. Hard to search for advice as 99% people writing about connecting an ipad via wifi are trying to share an internet connection (WAN).

The iPhone I'm testing with sort of connects. It puts a checkmark next to the connection and on the laptop I see words like "identifying" but in the end the iPhone complains that "(network name) is not connected to the internet." Connecting to the internet is not my goal. I only need it to browse pages hosted on the laptop. So I suspect the problem is not about the establishing the communications link but more about what what the devices think the connection is for. Perhaps somebody has proper terminology for this?

Sorry for this tedious digression. May have to trot down to the Apple store and see if they know.

EDIT: Apparently the old spare router I was using for this test was the problem. If I use my normal LAN it works fine just using the default connection settings, nothing tricky. There's no hosts file to edit on these iOS devices and I'm not running a local DNS so I have to use the IP as the web address and setup Apache config accordingly. Should be fine.

Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
Posted

Its possible to use the mac a hotspot to share internet with other devices, so I'm assuming it might be possible to use it for this purpose. Here are the instructions http://www.tuaw.com/2009/09/25/mac-101-create-a-wireless-network-between-mac-and-iphone/

Edit: I tested this with ubuntu/android and it works. The ip address you will have to use from the phone browser will probably be something similar to 10.42.0.1

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
Posted
http://ready.mobi/ ("Mobile Compliance Checker" - It doesn´t emulate the site but gives you an analysis of your code´s mobile-readiness.)

Tested this one out, but seems like it might be very out of date? It apparently doesn't recognize HTML5, and is suggesting use of XHTML MP while quoting mobile compatibility from a year range of 1999-2007. There seemed to be a lot more false positive stuff, but I stopped looking after that. :) 2007 is pre-iPhone and Android and things have changed a lot. 

  • Like 1
Link to comment
Share on other sites
Joe Sr. Member

Joe

Posted
Posted

Tested this one out, but seems like it might be very out of date? It apparently doesn't recognize HTML5, and is suggesting use of XHTML MP while quoting mobile compatibility from a year range of 1999-2007. There seemed to be a lot more false positive stuff, but I stopped looking after that. :) 2007 is pre-iPhone and Android and things have changed a lot. 

oopsembarrassed.gif , I hadn´t realized that... Thanks Ryan for pointing it out! A shame, because as far as the concept goes this would be great, I think! Maybe I will find something to replace it. (oh well, I guess the one remaining good thing about it is then that if something validates well there it will be usable on older mobile devices as well as new ones...)

Link to comment
Share on other sites
teppo Hero Member

teppo

Posted
Posted

@Joe: I gave ready.mobi a try too, and was actually about to write that it really proves why certain tasks cannot be automated :)

Our company site was built from scratch with a mobile first approach. I'm not saying that it's "perfect", but I am saying that it works on mobile devices pretty damn well. According to that service "t will probably display very poorly on a mobile phone."

 

Taking a closer look at the issues found, this service is actually testing things quite thoroughly and some of it's conclusions are similar to what a human might still reach.. just by looking at the source, that is.

 

Yes, there's one table used for layout. Yes, CSS file contains pixel widths. What it can't see is where, how and in what role those elements are used and how they are handled in various situations -- something any robot, at the moment, would have trouble understanding.

  • Like 1
Link to comment
Share on other sites
Joe Sr. Member

Joe

Posted
Posted

@ teppo

I like the straightforward design of that site! It must display well on mobile devices, also because it uses graphics very sparingly.

Remains the question about testing. Obviously the best approach would be to use a large stack of all the latest smart phones and tablets of all varieties. Lacking those I guess some of the services mentioned here will be valuable (to evaluate the visual result, not the code as you are pointing out).

I suppose the simplest thing is to just adjust your browser window to a very small size, it already shows a lot. But it won´t show you how your website reacts to touch commands for example.

I just downloaded and installed http://www.opera.com...r/tools/mobile/ mentioned at the top of this thread. Seems good. But again it can´t emulate all the latest devices (Samsung Galaxy S4 not on the list). Obviously this is not really possible, as they keep cropping up so quickly.

I´m really no mobile-expert and find this quite challenging. The best approach might be to find out as much as possible on standards for mobile devices and then check your code against those (with http://validator.w3.org/ maybe?) plus some testing? :mellow:

  • Like 1
Link to comment
Share on other sites
teppo Hero Member

teppo

Posted
Posted

Emulators (mobilexweb.com has links to quite a few, by the way) can help, but they can never properly replicate actual mobile device UX, which is why an emulator should never be your only option. That's also why projects such as Helsinki Open Device Lab are being set up by folks all around. If you're serious about mobile testing, older devices are usually cheap and as a general rule of thumb if it works on an older device, it will most likely work on a newer one too.. or someone has failed big time :)

When we're working on sites that need to look and feel great on multiple platforms, testing is done first with desktop browsers (scaling it up and down like you mentioned above) and then with default browsers of at least one Android phone, an iPhone, an iPad.. and often one Lumia. This gives us a good chance to "get it right", at least from UX point of view. To make sure that nothing "big" get's past our radar, we use services like BrowserStack to test with additional devices (and not just devices, browsers too.)

I wouldn't consider myself a mobile expert either, but I've found that KISS principle often goes a long way. Media queries and JavaScript are well supported across mobile devices, but I still prefer mobile first approach: start with the simplest, most usable form and build whatever eye candy you need on top of that. Not only does this make it more likely that your site works on a wide range of platforms, it also tends to increase overall quality as it forces you to focus on the most important things -- content and how it's organized.

Then again, personally I really dislike complex UI's, huge graphics and all kinds of bells and whistles even for large screens. If it doesn't add any real value, why should I even include it in the first place?

Link to comment
Share on other sites
diogo Hero Member

diogo

Posted
Posted
Then again, personally I really dislike complex UI's, huge graphics and all kinds of bells and whistles even for large screens. If it doesn't add any real value, why should I even include it in the first place?

Design is a complex thing, you just can't put everything in the same bag. I agree that in many cases what matters is to put the content out there in the most efficient way possible and son't defend that all websites should have unique designs, but in other cases where uniqueness and aesthetics are important why should why should we prioritize mobile and sacrifice people that are looking at a website on a big screen? Isn't it like lowering the experience of people that go to the movies because the film will also be on DVD soon? 

Link to comment
Share on other sites
teppo Hero Member

teppo

Posted
Posted

@diogo: good call, though I'd argue that's an example of mixing design and style. I couldn't agree more with Zeldman in that those are two very different things  :)

Sacrificing big screens isn't really what mobile first is about. It's about design that works on as many different platforms as possible, prioritizing content and usability above everything else.. and only adding extra bells and whistles if you really think they are what desktop users (or any other specific user group for that matter) want and need. This definitely doesn't mean that you can't create unique or aesthetic designs, just take a look at some of these gorgeous examples of mobile first at mediaqueri.es.

You're right that mobile first isn't a perfect fit for all cases, but I've found that for most cases that interest me personally (i.e. where design, usability and content are more important than looks) it's awesome.. but then again, I'm not aiming for any art galleries, web design showcases etc. with my designs -- my ambitions lie in whole another field :)

Link to comment
Share on other sites
  • 3 weeks later...
Joe Sr. Member

Joe

Posted
Posted

Tested this one out, but seems like it might be very out of date? It apparently doesn't recognize HTML5, and is suggesting use of XHTML MP while quoting mobile compatibility from a year range of 1999-2007. There seemed to be a lot more false positive stuff, but I stopped looking after that. :) 2007 is pre-iPhone and Android and things have changed a lot. 

Regarding http://ready.mobi/ :

I followed up on this and got this reply from them:

Thanks for getting in touch.

We're actually planning an upgrade to this service at the moment. We

haven't yet announced dates for the availability of this but we're

committed to getting this done because we think testing tools like this

are very important.

While I agree that the tool is somewhat out of date right now, bear in

mind that much of its advice is still relevant if you want to reach the

widest audience possible (people with no access to 3G/4G and people

without smartphones).

So keep an eye on our sites at http://mobiforge.com and

http://deviceatlas.com. We'll post updates there as soon as we make our

plans.

Regards,

Ronan

dotMobi

  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...