So far I have been creating Web Portal but recently I had a request to convert all the stuff into Mobile Portal.
I have created two webparts, when I place single or multiple webparts of same type it looks fine but when I place two different webparts then its UI gets distracted and it looks bad in Blackberry :(
The UI is fine with IE FireFox and MobileOne(simulator for Iphone), this problem is only with BlackBerry.
Any Idea?? I am using traditional .NET controls and framework to create Mobile Portal.
All three of the browsers you mention have a much fuller set of functionality than the BlackBerry Mobile Browser.
For the best results while targetting the BlackBerry Browser, you need to make sure your WebPart page and the WebParts in it are using very basic HTML Markup. This is one of the situations where you're still better off using tables for layouts rather than CSS.
As long as the rendered HTML is simple, the BlackBerry browsser should be able to handle it fairly well.
You should look that mobile controls are rendering pages in xHTML MP. What are you detecting mobile device? If you are using tradicional browsercaps, then you should up date with mdbf.
Maybe you could use WURFL (Marg.WURFL for .NET) what it replace Mobile Capabilities for WURFL Capabilities.
Related
I am creating a mobile site and was thinking jQuery Mobile would be the right platform. However, in getting through the requirements it seems what's needed is CSS for styling - nothing extreme, HTML forms with some dynamic elements (i.e. select option 1 and some things change), and some AJAX for grabbing data.
Do I need jQuery Mobile to make sure a site with that simple of an architecture is uber-cross browser compatible? I'd like to hit iPhone 3 & 4, Blackberry, and Android. Don't have to worry about tablets or the like, this is strictly mobile phone. We'll show the desktop site to everyone else.
jQuery Mobile is actually more about using mobile (mostly ios) type components, and gesture support. Yes, it helps to create a consistent cross-browser experience, but you don't need it to have your site show up correctly in various browsers. For that, you really just need to make sure all your code is valid, and that you're not using css (or other) hacks.
I have an ASP.NET (not MVC) application.
I would like to create a version that is optimised for browsers on the IPhone and on Android.
Some questions
Is it possible to detect IPhone/Android when the site is accessed
Are there any gotchas/tips for developing ASP.NET for these devices.
We're using a combination of .net webforms and jQuery mobile.
For our viewstate, it's been pretty well neutered already so only minor stuff is going down to the device.
Bear in mind that there are around 3 different mobile api's. Each of which has their own drawbacks. You might want to investigate each.
Also, we took the approach that the mobile site was a completely different website than our standard one. When the user comes in, we do some browser sniffing and push them to mobile if it matches with a link to move back to the full one if they want.
Webforms aren´t good for mobile, it generates big pages because viewstate. And you can´t control rendering (some more in .net4).
You can detect device using a db of capabilities like WURFL (I recommend 51degrees) o maybe using some like http://detectmobilebrowser.com/
I don´t know what kind of webapp but you could make a new app, maybe using MVC. Please look this resource.
I'm beginning the process of learning the ins and outs of developing sites for mobile web browsers. Are there any good resources/communities online that discuss mobile specific site development issues?
My initial understanding is that to cover different phones you need to build one site that is enabled for browsers with the webkit engine (iphone, android, etc.) and another more basic site for other older browsers, is this assumption correct?
Also what does developing for webkit mean exactly? How is it different than just using javascript/css/html? Is it the same except that you limit yourself to webkit specific functions and css? I looked on the webkit site, but it didn't explain it in those terms.
Are there any other snafus I need to watch out for when developing for mobile browsers?
Your assumption is correct, you will need to develop multiple versions of your site targeted at different browser types.
Webkit is the engine used by Safari (mobile Safari), Chrome, and Andriod Browser (mobile Chrome?) you can use standard Javascript, XHTML, and CSS, the main thing, is making your site "fat-finger-friendly" since these devices are all driven by touch screens.
What I mean by "fat-finger-friendly" is that you have large links/buttons that are easy to hit with your finger, most mobile browsers are good at approximating which link you intended to touch, but if you have alot of stuff jammed together, it frequently gusses wrong.
Another consiteration is screen size, and thus the width/height of your site.
The best illustration I have of this is from Ars Technica -- checkout their site in your desktop browser, then check out their site in your mobile browser. Its a very slick version of the site. (http://www.arstechnica.com/)
Webkit is rendering engine designed to allow web browsers to render web pages. It provides the set of classes to display the web content in windows and implement different features which are provided by browser (such as links, fwd/backward etc).
You don't need to build the different sites for different rendering engines such as webkit. Designing of mobile web site should consider the screen size and how different components look/behave in different rendering engines.
Look at this question for more details of how to build the mobile friendly site.
If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.
Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start:
http://www.quirksmode.org/mobile/browsers.html
Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: Optimize website for touch devices
For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:
function() {
if( /Chrome/i.test(navigator.userAgent) ) {
return false;
}
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore!
If web-app sounds interesting you should check out jQTouch, jQuery CSS Transition plugin and of course Building iPhone apps with HTML, CSS and JavaScript by Jonathan Stark.
If your site is pretty simple (just content delivery) I'd suggest a service like mobify: http://mobify.me/
A lot of big publications use it, and I have too. In fact, Ars Technica (which Nate Bross pointed to in an earlier reply) uses this service to display their mobile content.
You have control over style, and that's about it, so if your site is more complex it might not be for you. Otherwise, it's a good service. You can have a mobile site up almost as quickly as it takes for the DNS for your mobile site's address to update.
I disagree that you need to build multiple versions of a Web site.
One simple HTML5 Web site will work across all mobile browsers and desktop browsers too.
The beauty of the latest developments of HTML5 is that you could use new Iphone/Android features like Geolocation, and older browsers will simply ignore the JS code if you carefully put it within try catch statements.
For "fat finger" type problems you can serve a different CSS which makes buttons bigger if you really must. Good browsers should make default buttons easy to press in any case.
Keep it simple and you won't have to see these fragmented & costly device dependent approaches. Write HTML5 by hand and use a validator. Good luck!
We are developing an ASP.Net web application and need that application to work properly on iPhone
Are there any memory constraints for an ASP.Net web application to work properly on iPhone
are there any issues with usage of ASP.net controls like gridview/ tab view etc.
would there be any issues with 3rd party controls like Ajax RADSchduler from Telerik
any other other constraints for a web application to work on iPhone.
Thnx
Amit
If we are talking about a standard asp.net website, memory constraints aren't really the issue. Asp.net just generates (ugly) html with some javascript. Nothing really special about that. Memory in this setup is important server-side. Offcours asp.net tends to generate lots of bloat when viewstate is enabled (without it, too). And this IS an issue when it comes to bandwidth, especially for mobile applications.
When using the Asp.net Ajax Toolkit, it should work crossbrowser. Apple Safari version 2.0 or later versions are supported.
Checkout the docs for the 3rd party controls, which browsers are supported. If Safari is supported, it should work.
But i would suggest using asp.NET MVC instead of standard asp.net controls, because it allows full control over html and javascript. This will ensure minimum use of bandwith and maximum javascript performance. Or any other language/framework with full control like php/codeigniter or python/django. And maybe a javascript library like mootools, jquery or prototype.
I think having a real iPhone to test on would be most optimal.
As for integrating third-party components you should be able to ask the vendor about their support. These Telerisk and Infrastigistic components look great, but you need to ask yourself do you need that amount of power and options, if you follow the mantra of the iPhone and Apple in general you'll want to keep it as simple as possible.
One approach is to develop a different view for the iPhone, keeping the display basic and optimized to the dimensions of the screen and the touch system rather than cursor.
Since Safari is based on Webkit you can get some basic compatibility testing on your local PC.
I want to develop a mobile web application using asp.net 3.5 that can be viewed on an iPhone but there is no longer a template in VS2008 to enable mobile development. Can this be done ?
the iphone uses the "regular" version of your website so developing a "mobile" version would nto accomplish what you're looking for. You should check the browser headers and redirect people to the iPhone version of your site if you detect mobile safari.
http://iphone.facebook.com/
Another option (if you're using MVC) is to have your controller detect the browser and show a different view if it catches mobile safari. This way you wouldn't need a duplicate site, just two sets of views.
A web application (via Asp.Net 3.5) would be accessible over the Internet and would be accessible via the iPhone's Safari browser. There isn't anything truly special you need for it unless you want to make a true web application for mobile devices like the iPhone and Blackberries. In that case, you are looking purely at design aspects since it's still just a website. Due to the diversity of mobile browser capabilities, you'll need to do some research to find out what is recommended for the specific mobile browsers you want to access (the BBC's website comes to mind as a good example of mobile rendering).
Ultimately, the user agent is evaluated by your system and then it renders (or redirects) appropriately. Everything else is design if you want the page to render differently for the iPhone than any other browser on the web.
If you can get your hands on a copy of .Net magazine (a.k.a. Practical Web Design in the U.S.) issue 178, there is a great article on what you need to be aware of when doing mobile development and how the iPhone's browser is a lot different than others.
The iPhone (at least mine which is the 3G version) have full support for "normal" web apps with Ajax and everything. So mostly any Ajax library would be 100% compatible with the iPhone, at least as long as the Ajax library is focusing on Open Standards and such...
[Shameless-Plug I work with Ra-Ajax]
Ra-Ajax have 100% support for iPhone except for "dragging and dropping" which interferes with scrolling on the iPhone. This means that you can use Ra-Ajax (which is an LGPL licensed and Free of Charge library for ASP.NET) to create a "normal" website which will work 100% perfectly (except for dragging and dropping, which is used in e.g. Ra-Windows etc) on the iPhone...
Even the really "advanced" stuff like our Ajax Calendar sample works flawlessly with the iPhone :)