I'm designing a website for the high end mobile phones, and I want to know how the different UI elements (e.g. buttons, check boxes, list boxes, textfields, etc) look like on different mobile browsers (eg safari, webkit, IE, etc) on different devices (e.g. Nokia, iPhone, etc). Can you offer some advice how I can get access to these without having to purchase the devices or using some online simulators?
Also I'm not so clear how these basic UI elements that is available from the platform works - do the mobile brwosers use their own UI elements or do they take the UI elements from the device OS and apply some visual style (e.g. checkboxes in safari looks different from that on IE on desktop browsers)?
You can download emulators for most platforms. Here are a couple:
Blackberry: http://na.blackberry.com/eng/developers/resources/simulators.jsp
Windows: http://www.microsoft.com/downloads/details.aspx?FamilyId=C62D54A5-183A-4A1E-A7E2-CC500ED1F19A&displaylang=en
Nokia: http://www.forum.nokia.com/info/sw.nokia.com/id/d57da811-c7cf-48c8-995f-feb3bea36d11/Nokia_Mobile_Internet_Toolkit_4.1.html
Just noticed that this was previously asked/answered here:
https://stackoverflow.com/questions/464089/simulators-emulators-for-mobile-browser-testing
Related
I am trying to build a UI which should work on all mobile platforms. But currently the UI is getting distorted on Windows Phone. (Displays correctly on other devices like Android, IOS..). The text boxes are places one below other but are getting overlapped on each other, truncating the bottom part of each text box.
Need to know the correct way to design the UI, so that it should display properly on all mobile platforms.
The Windows Phone target is a dead end target as Microsoft has effectively abandoned the platform. We are now focusing on the Universal Windows Platform and have a developer guide section for it here.
I have a codeigniter application for desktop can it be converted to a mobile app when accessed from a mobile using the same code?
You have two options, create a responsive design or create one desktop design and a mobile design based on the user agent.
If your design is easy to adapt for both worlds (desktop and mobile) with a little tweaking and a responsive design should be enough to do the trick. But before you choose this way remember that you have plenty of mobile devices with many screen resolutions.
I advise you to read this slideshow about the mobile web:
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
And just for information the types of mobile devices we have on the market.
http://jquerymobile.com/gbs/
To help you out with responsive design you can use some of the frameworks available on the internet:
Twitter bootstrap : http://twitter.github.com/bootstrap/index.html
Foundation 3: http://foundation.zurb.com/
Skeleton: http://www.getskeleton.com/
YAML 4: http://www.yaml.de/
You can see more frameworks here http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
In case your desktop layout doesn't fit as a proper mobile layout you can rely on the user agent, although he is not 100% accurate, and build two different layouts.
On the desktop side you can use some of the responsive frameworks mentioned before, for the mobile side you can use:
jQuery Mobile: http://jquerymobile.com/
iUI: http://www.iui-js.org/
UI ON TARGET: http://www.rikulo.org/
The best is a mix of the two worlds, a responsive design for small and large screens for users on a desktop and a proper design for mobile users.
the different between two is in the template or view part of application .
basically you have to identify visitor device and if it is a mobile show him the mobile view that you have prepared .
you can create great responsive mobile template using jquery mobile .
Yes, I've done exactly this in the past.
What I did is I used the user agent class to detect whether the user agent was a desktop or mobile client, and used that to set a flag in the sessions. Based on that, I served different views depending on the value of that flag. This approach has the advantage that the URLs remain the same regardless of which interface you're using.
I would recommend adding a way to manually override this, though, since detecting the user agent is never going to be 100% accurate.
Joomla automagically recognises the mobile template and displays it on the mobile devices. but sometimes it does not display(very rarely) and also sometimes the behaviour is different(like logo disappearing).
Question:
1) Is there a way we can test the mobile template on the desktop computers (like m.mobilesite.com) so that we can debug the issue?
Yes You can,
The http://www.browserstack.com sites Provide a real machine for testing the device and browser compactability.(It a remote machine so the result is 100%).This required signup.
Also you can check iphone and ipad compactabilty with safari Developer option.
From Settings->Preference ->Advanced ->check the Show Develop menu option.
Now you will get a new menu in the browser Developer there you can choose the user agent.
You can also find several sites that provide mobile testing but those are not 100% sure
like iphone4simulator.com, iphonetester.com
Hope this may help you..
I also found that - If you decrease your browser width and height - it will display mobile format. I am not sure if this is a feature of later versions of joomla. Also on Chrome - developer tools, there is an option to choose the mobile device to test the webpage.
i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.
I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.