mobile design from a laptop - css

I need to put together a mobile version of my site, but I don't have
an iPhone, all I have is this MacbookPro w/Lion, 17-inch.
All I have is this laptop. How do I go about building a mobile
version of my site? I'm looking for general suggestions; thanks.

There are numerous tools, like https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View that help you emulate mobile browser.

There are some really good mobile emulators to help you developing a mobile website:
http://iphone4simulator.com/
http://developer.android.com/tools/help/emulator.html
Using those emulators should enable you to design and develop a quite good mobile website.

An iPhone wouldn't be enough either. You would have to test many phones. :)
In general, you can do a lot of testing by making your browser window smaller. This will at least trigger the CSS media queries and you can test if they work.
There are also many tools online that either are almust full emulators, or are just sites that check for common errors. Take a look at 10 excellent tools for testing mobile sites.

Related

Drupal Webspeech

We are using webspeech(https://www.drupal.org/project/webspeech) module for text-to-speech in one of our project. Basic functionality is working fine. But when we open this site in mobile devices (samsung, apple, sony) TTS feature is not working and no error is also being displayed.
We have tried to debug the problem but not able to do so.
Any help will be much appreciate.
If you read the module requirements it says specifically
Flash 9+ is required on client web browser. Modern browsers those
support HTML5 may also work but not guaranteed.
I see you opened an issue with the maintainer, which will probably be your best source of information, but it looks like you might be hit or (mostly) miss on mobile devices for now.

How can I test a mobile version of our website?

I have no up to date mobile phone personally, and we don't have any in our team to allow us to test mobile versions of our ASP.Net websites.
We have now been asked to provide a mobile version of our website (which is a fairly busy site) but I have no means to check the mobile pages.
Any suggestions? Are there emulators or would it better to have the real thing?
It's always better to have the real thing, but if that's not an option, I have used a plugin for FireFox called "User Agent Switcher"
Another route you could go is to get the Android SDK and load up an emulator. It runs a full version of android, so you could open the browser from there (You could also change screen size/device type) - a little more heavy than the first solution, but potentially another route worth exploring.
You can use simulators/emulators - Android, iPhone etc.
Well Apple provide an iOS emulator, which you can download in the developers section of Apple's own website.
Outside of that, the only other testing environment I'm aware of is Ripple, which is a plugin for Chrome, designed to emulate a range of mobile devices. You can find that at: http://ripple.tinyhippos.com/.
As others have answered there is a lot of different tools to do the testing and that is all fine to a certain extent, for daily testing by developers and testers.
But with 15 years of testing behind me I would never let the site go untested with a few different real devices if the site is an important service - usually this can be done with "staff" phones at no cost if the cost is the problem. I would more or less say; can your company live with publishing a site out there and there might be a risk it won't work on some mobile platforms?
DeviceAnywhere is the tool that we have used a lot. It provides you access to numerous mobile devices using which you can test both apps and websites. They have placed several physical devices which you can see and operate remotely.
It is always better to test on real devices instead of emulators. During development phase, emulators are helpful but for final delivery it is best to test on real phones. Mobile web browsers may or may not support HTML,CSS,JS completely and their individual implementation could be different.

Designing issue in JQuery mobile with asp.net

I am creating mobile application in asp.net webform targeting IPhone, Android and blackberry. I am using JQuery-Mobile for the same.
Below is my first page I have developed with jquery-mobile.
I don't have iphone, android and blackberry. So my questions are:
Best Simulator I can use on windows XP/ Windows Server 2008 for Iphone, Andriod and Blackberry
Also, when I am running the application on the browser it is looking wierd. I mean textbox size, buttons. Is this the way it looks on normal webpage or it's my faulty design?
As I am developing application in asp.net, do I need to install latest browser which support HTML5 and CSS3 because below browser is IE7.
An old IE is not the best choice to test the capabilities of a HTML5+javascript framework...
For daily basis it's quite ok to use Firefox or any WebKit based browser (chrome, safari ...)
Emulators are very helpful, but to be sure your product works well you will probably need to give it a try on an actual device. I have already seen some reports of problems that show up only when working with the real device.
A team that I do some JQM stuff for has bought a cheap old ipod touch for testing. It's the most demanding apple product you can get. It has the oldest browser, causes most problems and is the slowest. Best choice! :)
Emulator for Android
Simulators for Blackberry
I'm sure Apple has one too - but I think you need to register as a iOS developer before you can get your hands on it. I believe using third-party iOS emulators is against Apple's policy.

Porting web-app for a tablet

My web app is written in Java with front-end in JS. I want to port to tablet and other touch mobile devices. Developing a native API is ofcourse an option but I would prefer making the old app work on tablet.
I know I would need to make some changes in UI for the touch interface and I am willing to do it.
So My question is: A*re there tablet Simulators available on which I can try my app and see where it breaks on such device.*
What would be the best approach to proceed on this?
thanks in advance!
Tablets use various OS's and, thus, different API's, supported features, etc... For iPad, for imstance, XCode provides a simulator. I read somewhere that the BB tablet coming out will have a simulator for dev as well.

Is there a list of mobile browsers which I must support and test for?

Is there a list of mobile browsers which I must support and test for?
There are so many mobile devices and browser, it may not be possible to test for all and support all.
Yahoo made a list for Desktop browsers http://developer.yahoo.com/yui/articles/gbs/
Does anyone knows any suggested browsers list like this for Mobile browsers.
No.
It's up to you what devices you want to support. But probably, depending on what you do, you should look into some sort of 3rd party lib to help you. Maybe you'll be interested in DeviceAtlas or WURFL.
ASP.Net has browser capability detection built in via the System.Web.HttpBrowserCapabilities class. MSDN did a decent write up a while back on how to use it.
The Mobile Device Browser File is an updated data file on Codeplex for the browser capabilities subsystem with profiles for tons of new mobile devices.
While the MDBF is a giant XML file, it will tell you not only what mobile devices .net is aware of, but their capabilities too.

Resources