What are your techniques to using mobile with asp.net, I know how to detect mobile but I'm stumped trying to find a good way to show my pages on a mobile device.
I'm thinking of just doing a Multi-View and showing the mobile view when they are mobile, however that would not work with our masterpage unless I do same, I'd rather just have the page redirect to a mobile version.
But I'd like this to happen automatically, don't want to add the code to every page, I've used an HttpModule but it causes every object in the website to use it, only want this on aspx pages so I just used a user control that it put on the top of the master page.
I also added a folder called mobile in the tree that contains folders for each mobile device, so if they go to ~/Account/Login.aspx it redirects to ~/Account/Mobile/IPhone/Login.aspx but i had to exclude the masterpage in the mobile device or it'll be in an endless loop :)
I like the way MVC does it where they have a custom ViewEngine that just redirects, but I can't go MVC due to some ASP.NET controls that my company requires.
Ideas?
It very much depends on the particular site and what has prompted you to consider having a mobile version of the site. How much content do you have that is unsuitable for mobile browsers (e.g. Flash, AJAX) ? How complex are these custom controls that you mentioned?
Personally I think it is best to try to design your main site to be compatible for people browsing on more recent smartphones (e.g. iphone, Android) since they are becoming very popular and increasingly capable. These phones have browsers that are normally based on WebKit so testing in Chrome or Safari would give at least some idea of how well your page would work.
If necessary then you could use slightly different stylesheets for desktop and mobile. You make the page more accessible by hiding unimportant content and simplifying navigation.
ASP .NET actually has a complex device filtering system built in, so you can change parts of the page, even the master page to use, depending on the current browser. See here: http://ryanfarley.com/blog/archive/2008/08/14/more-on-device-filtering-with-asp.net-server-control-properties.aspx. You just need to make sure that your browser definitions are up to date.
Avoid complex ASP .NET controls like GridViews since you have less control over the HTML and CSS. Controls like the ListView are much more flexible.
Some functionality like AJAX might be a bit buggy on certain devices, especially if you are using AJAX UpdatePanels. You could use an emulator to test these scenarios. Alternatively you could disable these features on mobile devices. That's assuming your even using them.
To accommodate low end devices you could have a separate mobile site that runs in parallel. To create mobile pages, you inherit from System.Web.UI.MobileControls.MobilePage instead of the normal Page class. W3Schools has some useful information: http://www.w3schools.com/dotnetmobile/control_mobilepage.asp. Note that mobile web forms is now deprecated though so it is not considered the way forward.
If you are going to run two or more sites in parallel and you have complex logic needed by both then you could create a class library to hold the shared functionality. It would cut out some code duplication.
To avoid an infinite loop when redirecting to the mobile version, just check the current URL to see if it contains the base URL for the mobile site. It might be easiest just to do the redirect on the main page but have a link somewhere on every page that goes to the mobile version when clicked.
Overall it is a very complex subject so perhaps consider getting a suitable book.
Related
Frames/ Framesets has been deprecated.
Iframes are not recomended for various reasons.
Ajax is not always an option since one of the providers may not support it.
So how does one converge & display multiple html content from two different sources in a Asp.Net 4.0 or higher page as per modern HTML standard ?
Should i focus completely on ajax/partial page related development or continue using Iframe as a stop gap measure hoping they dont deprecate it too in the near future ?
well there was a time when even facebook was on iframe, now its all about partial responses. But iframes are not going anywhere soon ,we still get many of our client requirement specific to iframes and if it suits your need to achieve compatibility why are you confusing yourself with alternates.
besides that html5 has added some new spices to iframe so its clear that this thing is not going in bin.
so in the end , i would suggest:
1. Go for ajax/partial/jquery if you want your application to be both interactive & user friendly.
2. If compatibility is a big issue then go straight to iframes.
Regards
I am wondering if there is a framework to develop mobile web applications which does not use javascript or jquery. Our client do not want to use any javascript or jquery in the projects. But when i look around for mobile web solutions, i see lots of jquery.
A "mobile" website does not require any special frameworks. You just have to design the site (HTML+CSS) so that it looks great on the smaller screens. Other than that it is the same old HTML forms as was 10 years ago (with the exception that you can use the new fancy HTML5 input types like calendar out of the box).
But you should dig deeper for the reasoning of "no JavaScript" since without it you will have to resort to whole page refreshes even for very small things (like 'hide field X when you choose USA in the address') and that will very negatively impact performance, especially on mobile devices where the network is slower.
If you use mobile MVC views, why use a framework? Why not create your own minimalist design that doesn't incorporate a lot of those features, but has the basic core HTML to define your user interface, and just allow the application to postback to the server? That would work well, and be efficient in mobile.
I have an existing website for schools and colleges management which is developed in ASP.NET,C# and SQL Server.
Now I am planning to support for the mobile applications (like basic models from Nokia/Samsung and for opera mobiles). I know the normal site we can access through some of the devices without any change, but needs to be optimized.
I am preparing another version which will be only few required fields and easy navigation for mobile. For that which method I need to use.
Normal ASPX files with optimized HTML code.
Or using WAP controls
Should I use HTML 5
Please help me to decide.
I recommend using the HTML5 templates(includes Modernizer) that come with ASP.NET MVC 3 and the jQuery Mobile framework. Let the jQuery Mobile framework do all the multi-device heavy lifting for you.
jQuery Mobile Supported Devices
you can use normal aspx pages without any issue. only thing you need to optimize the file size.
you can develop better solution using HTML5 but only problem is, it is not supporting all the devices.this is used html5
or just use any from List of mobile frameworks
You can use normal ASP.NET Web Forms in conjunction with HTML5. Take a look at HTML5Boilerplate which includes Modernizr.
Use a combination of feature detection and CSS Media Queries to serve up the appropriate files, layout and images for a particular mobile device.
Do not fall for "Responsive Web Design" techniques that cost too much in terms of performance and esthetics (basically re-skinning desktop browser version of site and calling it "mobile-ready"); disclosure: this links to blog post from me.
Use ASP.NET Mobile Controls: ASP.NET Mobile Controls
.. (i.e. How to add mobile pages to your asp.net site)
You will build a few UI controls, in a short amount of time, specifically for all mobile devices and it will be a much faster and much better user experience on mobile devices.
The UI renders minimal HTML and you control what gets rendered, meaning much less bandwidth required. Even though I have a 4G phone, so many times we are in a building that does not give a 4G signal and I much prefer sites that have mobile-specific output.
The UI is mobile-specific, users will not have to zoom around the page left/right up/down and zoom in to be able to click buttons or elements that were made for viewing in 1024x768 or higher.
Users with the latest 4G and dual core phones, and that happen to have 4G connection at the moment can always switch their phones into 'full HTML version' if they want more functionality than what you build using the ASP.NET mobile controls. However, if you go the other route and adopt JQuery-based or HTML5 code, you are excluding all previous generation phones from accessing your web site at all in many cases (besides it being slower and not as good a user experience as mobile-specific rendering). Even if you decide to focus only on the latest phones, you will also have to deal with html rendering issues, cross browser compatibility, besides the slow and UI complexity issues.
Good luck.
Using .NET Mobile Framework is always a good option as well as Web Forms which will appear on all mobile devices regardless of carrier/phone model, plus lots of phones support ajax, and other client side scripting that'll work. HTML5 is a growing standard though, and when more phones start supporting it, you'll reap tons of the new benefits.
Model View Controller is always good to follow. Allows for scalability and for components to be abstracted.
I am about to help a client develop a mobile version of their EPiServer site. The mobile version should have different functionality than the regular but some content might be shared so that it won't have be maintained twice.
I'm thinking about using jQuery Mobile as the user interface system to reach as many users as possible with the same solution and possibly 51degrees.mobi for best detection of mobile devices.
Does anyone have any experience in how to do this with EPiServer? How to structure? I'm thinking of using a sub-node (/mobile) that gets hidden on the regular site but I'm not sure it's the best solution.
If you want content in one place without having your editors work with "Fetch data from" a sub-node won't work.
The best option is probably to have "one content serve all" and have a cookie that says "mobile" OR "full site". The default mode can be determined by detection. If mobile is selected then you serve different CSS/JS or even other page properties or functionality.
Another option is to make use of the globalization mechanism and add "Mobile" as a language. This could be an easy way for editors to create separate mobile content if needed and keep the original content for other pages. I recall you can add different top domains for different languages without violating the license agreement so you could have a .mobi-name for the mobile "language".
Take a look at the following blog post:
IPhone Optimalization Made Easy
It demonstrates how to build mobile-friendly websites using HTML, conditional CSS and jquery - all in EPiServer
Have a look at this: http://www.epinova.no/blog/Anders-Murel/dates/2012/5/flexible-episerver-mobile-content-strategy-with-epinovamobiletemplateprovider/
I'm working on an ASP.NET website which targets desktop browsers. We want to enable an optional mobile view (e.g. http://m.sample.com) which will offer a few simple pages which will be mostly text. There will be not need for AJAX or even Javascript, and there's no user input - it's really just tables of text with a few links to navigate between the pages.
What's the best way to set this up so it will work on Blackberry, Windows Mobile, and iPhone?
Should I be looking at ASP.NET Mobile support, or just rolling my own pages?
UPDATE: This was for m.microsoftpdc.com. We went with the /Mobile subfolder approach, and used Scott Hanselman's iPhone tips for viewport and other stuff.
I have done this in the past and the way I did it is by separating the pages by creating a directory for Desktop and creating a directory for Mobile. This gives you better separation of the views, since in reality they are a lot different. In ASP.NET Forms I used the Model View Presenter pattern a lot since it went with the way ASP.NET Forms functioned the best. That way I could reuse some code between the two views. Then in your index.aspx page for the site, you just parse the user-agent string of the request to figure out the browser and redirect accordingly. So, for example a person with an iphone comes to your site, you parse the user-agent string and figure out it is an iphone. Then you redirect to m.sample.com which is pointing to Mobile/Index.aspx page. Otherwise you redirect to Desktop/Index.aspx.
I did the parsing of the user-agent string at the page level, but of course you could do this kind of logic in the HttpModule or HttpHandler level also.
Edit
I just rolled my own pages since we weren't targeting phones that have WML support. That would be the only reason in my opinion to use the ASP.NET Mobile support, is if you want to support WML enabled phones also.
You have only identified 3 handset 'platforms' as your target. One thing to consider is that there are a LOT more non-Blackberry / Windows Mobile / iPhone handsets out there and perhaps they will be the majority of your audience. (?)
From how you describe your application (JUST text), you should be able to hit pretty much any Internet-enabled cell phone out there, which is pretty much every phone sold in the last eight years.
Rolling your own will likely give you more control over how the content is displayed and navigated, which your users will appreciate, but you will lose much of the automatic formatting and advanced interaction capability that something like ASP.NET Mobile may give you. It is a trade-off that you might want to consider in light of where you anticipate your user community will go with this in the next 2 years.
Is it possible that they may ask for more of the desktop capability on the mobile side? If it is a likely 'yes' (even more so when I think of the 3 platforms you are targeting) then I'd recommend some automated formatting / enablement tool like ASP.NET mobile. If not, just roll your own and leave it simple and easy for your visitors to use.
I know from personal experience there really isn't much you need to do for the iPhone. I usually rather just browse your regular site with my iPhone.
Just my two cents though.
Different style sheets based on user agent will handle the "pretty". Are you using master pages? You could also set up different masters based on the device using device filters.
At Mix this year (2009) mdbf was announced. See this video or this blog post by Scott Hanselman for examples on using it to identify and redirect mobile browsers as needed.