Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Testing Mobile websites

  1. #1
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default Testing Mobile websites

    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.
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Last edited by djr33; 07-30-2013 at 10:40 PM.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    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.
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    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?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    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,
    Code:
    <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.
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  7. #7
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    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.
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  8. #8
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  9. #9
    Join Date
    Jul 2012
    Posts
    197
    Thanks
    54
    Thanked 3 Times in 3 Posts

    Default

    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
    You will know the truth, and the truth will set you free (John 8:32)(The truth is about the only begotten son of GOD.....When you feel you are alone for facing your problems, God will never leave you by your own You are important for God

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    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
    Not 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.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Sync websites.. possible?
    By BLiZZaRD in forum Other
    Replies: 16
    Last Post: 05-21-2010, 10:25 PM
  2. web conference for websites
    By cancer10 in forum Other
    Replies: 4
    Last Post: 02-28-2010, 07:07 PM
  3. ASP RSS Ticker for websites
    By xx.he1ix.xx in forum Looking for such a script or service
    Replies: 2
    Last Post: 12-30-2008, 12:15 AM
  4. Is Flash for particular websites??
    By jennesmith6 in forum Flash
    Replies: 3
    Last Post: 07-03-2008, 02:45 PM
  5. using in Homestead websites
    By hydeinc in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-06-2006, 07:21 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •