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.
Related
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.
Yesterday i got a requirement from my senior saying that they want to view pages which are in asp that should be properly rendered on BlackBerry device. I know it will work but it will ugly... but after googling i have found about asp.net mobile pages that will work for my requirement..... but are there any more options available which will reduce my development effort.
regards,
Rick Jackson
There shouldn't be any difference in what language the site is programmed in. How the client (in this case a phone) interprets it is entirely based on what it is sent: html, css, and javascript. One popular client-side framework for mobile development is http://jquerymobile.com/. Its goal is to:
unify user interface system across all popular mobile device
platforms, built on the rock-solid jQuery and jQuery UI foundation.
To see a great example of mobile/responsive design: go to http://jquerymobile.com/demos/1.0b3/, and change your browser width in and out. Notice how page elements move around based on your screen size? There are different css rules that apply based on the max-width of the browser window. So the solution is baked right into the site.
Other than a framework, the foundation of mobile development is creating semantically correct (and not too verbose) markup that a mobile browser can parse. This means good classic html, small optimized images, percentage based sizes, etc..
Smashing magazine has a great round-up of intro -> advanced articles on modern mobile development : http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
In case that you havn't found the material, this is asp.net mvc 4 mobile features tutorial.
You can also watch the video tutorial from Phil
As a developer of a traditional ASP.NET web application (non-MVC) who is getting requests for a mobile-friendly version, I'm wondering where I might find some wisdom about the best way to approach the problem. We currently mask most of our database access through web service calls.
It seems like many shops would find themselves in this situation: We have limited resources and don't wish to create a maintenance headache by having versions of an application diverge greatly.
Is there a set of best practices for taking an existing System.Web application and reorganizing code in order to accommodate adding mobile-friendliness. The general approach I'm thinking of is:
Make small stylistic changes on the
client using CSS or even JavaScript.
Make any necessary changes in data,
workflow, or markup in server-side
code.
Keep as much code as possible common
to the two versions by organizing
non-UI logic into separate
assemblies. Conditional compilation
would be used in code-behind where
UIs must diverge.
What are the gotchas that I'll run into with this approach?
Short and sweet:
Read the W3C Mobile Web Application Best Practices
Separate your business/application logic and presentation logic as much as possible
Do server-side detection of mobile devices; serve an extremely simplified UI to mobile devices
Use client-side techniques like CSS media queries and feature detection (such as that done with Modernizr) to do progressive enhancement
The long version:
The most important thing to remember is that as similar as they appear, the mobile web and desktop web ARE different. The analogy I use the difference between a street and a sidewalk. Both of them are made for generally the same purpose - to get people from one location to another. However, they were designed separately and are intended for use by different modes of transport. You can drive a car on the sidewalk, and you can walk in the middle of the street, but neither experience will be optimal.
Long story short, for a good mobile site, you must design specifically for a mobile device. This doesn't mean you can't reuse logic - you definitely should. I'm just saying that using JavaScript/CSS to hide a few elements does not turn a regular site into a mobile site.
For what it's worth, I recently gave a presentation with one of my colleagues on mobile web development strategies. It is mostly targeted towards mobile web in higher education (college campuses) and my campus (UCSB), but many of the strategies and techniques are widely applicable. Interested parties can find the presentation and related resources here: https://it.ucsb.edu/groups/wsg/mobile-web-brown-bag
Resources
Server-Side Device Detection:
DeviceAtlas
WURFL
51Degrees.mobi
Client-Side Feature Support Detection / Progressive Enhancement:
Modernizr
EnhanceJS
Random Resources
Mobile Web Resources (My colleague's reading list)
W3C Mobile Web Application Best Practices
First, these days mobile doesn't necessarily mean doing the things that System.Web.Mobile come, but rather supporting the mobile use case and the limitations of mobile devices. Or, you want to strip down your app to be relevent to mobile users, and you want to do things like limit bandwidth required, browser plugins, heavy scripting and screen size required. But you actually don't need to go back to the bad old days of WAP and such.
From my reading the way forward seems to be to design for mobile first and then customise the layout using #media CSS to introduce more design/functionality concepts in more capable devices.
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://www.slideshare.net/arborwebsolutions/practical-beyond-responsive-web-design
I'm working in a web mobile application to support a mimimal subset of operations for an existing website.
My base tools are, asp.net 4.0 with simple css to try to archive a more extensive range of devices.
My questions are:
- I'm in a good direction? ... or ther's a better way to do it? (other kind of controls, etc..)
- My device (mobile) is a Nokia e71 and i'm starting to see some glitches:
- autopostback properties dont work
- clientvalidationscripts dont work
Please give me some hints and advices. Thank u all.
Are you using the Mobile controls in ASP.NET, or just the regular ones? There is a separate set that are intended to support and adjust to various mobile devices somewhat better.
For a first-effort mobile site, I would look either at a well-established mobile framework (to be honest, I've never extensively used the ASP.NET Mobile Webforms controls), or to do something where I'm building my own HTML much more directly, to be sure to keep things mobile-safe.
That's one of the reasons I use ASP.NET MVC more myself, now... but that is a bit of a leap to make, and especially if it would just be for mobile use.
So anyway, if you are already using the ASP.NET Mobile controls, my answer is irrelevant!
Always, regardless of the type of website, design for "Progressive enhancement".
In other words, get everything working using the minimum (no javascript, very simple CSS). Then progressively enhance it so that additional functionality is available to those with browsers that can support it.
Many ASP.NET controls have javascript behind them. Ensure that you design so that they continue to work without javascript, or use other controls that don't require javascript at all.
WRT your client validation - You should always validate on the server side as well. In that case the fact that on some devices the client validation isn't running makes no real difference.
Do not use any asp.net control on a mobile site, .net rendering by device usually screws things up.
Do not use .net server forms.
If you can use MVC
Simple javascripts should work most of the modern devices.
Ajax works too but don't use jQuery, write simple ajax post/get functons
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.