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.
Related
I have a site made by dnn6.i need to add the mobile version of the site.how can i solve this problem.or is it possible to convert mobile compatible site.
There are several ways to accomplish this. You need to evaluate each and determine the best route the most closely matches your goals and amount of administration that you are comfortable with. Another thing to keep in mind is the user experience you end up delivering to your visitors.
Probably the most flexible solution is to use responsive web design to adjust and change the content and layout according to the dimensions of the device that is currently viewing the site - regardless of the kind of device we're speaking about. American Athlete Magazine is a great showcase for this approach.
You can also have a mobile section on your main site, or another site altogether that displays content optimized for mobile viewing. In this scenario, you would create a mobile friendly design that offers the best user experience for mobile visitors, as well as maintain content in a way that is equally friendly. Then, redirect visitors to the mobile site or mobile section of your site using the built-in redirect tools. They are in all editions of DNN as of v06.01.05. An example of this method can be seen with Day of DotNetNuke and its mobile variant.
There are of course other ways to proceed, but these are the most common. In either scenario you can use content sharing to make maintaining content easier, but you really should balance ease of administration with the expected user experience of your visitors.
There is a lot more information about the mobile capabilities in the DotNetNuke Wiki.
There are different approaches like Will stated above.
You can create a child portal (yourdomain.com/mobi or mobi.yourdomain.com) and modify an already existing skin (check out codeplex for MIT license mobile skins: http://dotnetnuke.codeplex.com/site/search?query=mobile%20skin) You'll need to put in a redirect in so when a small display pulls up the site it takes the user to the mobile version. The problem with a child portal is that you will have to maintain two separate versions... so if you plan to make many changes, consider option 2.
You could also upload the mobile version of the skin to the root portal, but you'll need to make a skin adjustments as you'll want the mobile skin to pull up a dynamic menu. If you choose this path, you can use the same instances of modules on separate pages (so you only have to make changes once and it will replicate on the desktop skin and the mobile skin).
You can wait a little while... DNN 6.2 is going to be released with mobile redirect capabilities (currently only found in DNN Pro and Enterprise). I'm not sure if DNN is releasing a mobile skin with the new version.
If you need help, I'm happy to bill you for the right solution :) ack !!
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/
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.
I am evaluating open-source CMS systems to see which one(s) would be the best option to deliver rich mobile web based applications for mobile handhelds.
So far I am leaning towards Drupal because it seems to be the most extensible, flexible, best performance (cache & compression, etc) and has a good user management system.
The CMS must be able to deliver HTML content that is ideally rendered for most smart handheld phones. I have to assume most if not all would do so as you would just control the front-end (headers, CSS, HTML and javascript) to ensure it renders correctly...correct?
So, it Drupal a good option? And, is there anything else I am missing when choosing a CMS to deliver mobile web pages?
I think it depends on what kind of "rich mobile web based application" you are talking about. As far as rendering the front end for mobile devices go (such as screen size based UI etc.), so long the CMS allows you to control the stylesheets and JS flexibly that's all that matters.
The choice of the CMS itself depends on your own level of comfort also. Do take a look at Joomla! too
I think Drupal is Ok for your application but it has no built in support for mobile. I have worked with drupal but not with mobile web apps with Drupal. But Check this. It seems we can control the things as you expect.
Update: Check this as well
One thing to watch out for with Drupal is that the theme engine tends to be quite verbose. If you take a look at pretty much any Drupal site in something like Firebug, you'll quickly notice that it's full of nested-nested-nested-nested divs.
This makes it great for theming, since there's almost always an element, with a unique ID, to apply your CSS styles to. The downside is that it presents heavy, complex pages that could potentially cause problems for mobile browsers.