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
Related
I have an asp.net website, it contains database calls etc
Whats the best way of taking an existing asp.net website and making it look good in mobile and tablet devices?
I have done some research but there seems to be so many options eg lessframework.com, jquerymobile etc
I havent used mvc before but a few people say to use mvc + jquerymobile
any help would be muchly appreciated
There is no magic bullet that will instantly convert your website to mobile. In fact without knowing the specifics of your website it would be hard to recommend a good fit for your situation since the tools you mention like MVC, JQMobile, etc. would be used in one case or another. With the question as you have posed it you will get personal opinion and there are millions of us with opinions... here's mine:
I would recommend not building a mobile specific website like mobile.website.com but rather look into responsive design where your website and the underlying data structs remain the same but your view changes depending on screen real-estate. Bootstrap or HTML5 Boilerplate or any number of design frameworks will help you get started. You just need to figure out a design that fits your websites functionality.
I use MVC + HTML5 Boilerplate (I love Razor) for most of my new projects but sometimes even it has too much overhead so I just start from scratch (multiple PSD's, convert to HTML in Dreamweaver, apply logic with MVC & client side scripting) but that is something you will have to decide on a project by project basis.
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'm about to embark on my first attempt at Desktop Software Design and I wanted to know any similarities behind the core principles of Web design that i can take with me or differences or books or articles etc?
Any help greatly appreciated.
As mentioned many times here on SO, "Don't Make Me Think" by Steve Krug is an invaluable resource when it comes to usability and UI design.
I'm just going to throw one tip out there for you to keep in mind that I've found different: desktop apps should be responsive. Users on the web are somewhat acclimatized to wait for seconds for their action to take effect (well, not we SO readers, cause we're using the good stuff :-), but you know what I mean). On a desktop application, that wait can seem interminable, and especially unforgiving is if you lock up the main event loop while processing data for several seconds. Even repeated delays on the order of hundreds of milliseconds can make your app feel sluggish. Use threads to keep the UI snappy, and make sure scrolling and loading operations are crisp. Load lazily or incrementally if necessary.
I've been told that one of the most important things to keep in mind in web development is that you cannot rely on the user viewing your application in any particular browser. In particular, different browsers handle different window-sizes and screen resolutions differently.
For example, fixed-width versus variable-width pages are a constant concern in web development because of how different machines and browsers handle them.
Moving on to desktop software design (WinForms?), you will have much more fine-grain power to control the appearance and user-interface of your software.
But remember, young Peter Parker: With great power comes great responsibility!
I've chosen Flex 4 as the most appropriate technology to develop a graphically-rich web application (its not a simple content-driven site), but worried about how the recent negative press (i.e. security issues) may effect end-user's trust and ultimately whether the user-base may drop promptly in response. (I don't care if my app works on iphones or ipads for now)
I think Flash Builder 4 is an great development environment and has minimized development time for me/my team. After some basic testing of graphical animations similar to that used in my app - HTML5 didn't perform as fast, is inconsistent with browsers, and some animations are jagged (I expect browser performance and graphic libraries to improve over time). I also 'personally' dislike programming Javascript as I am very fond of strong-typing to uncover mistakes quickly.
If you develop Rich Internet Apps, how are you responding?
Are you preparing to potentially migrate to HTML5/Javascript? Java? No action?
BTW - I don't want pro/anti-flash arguments - just curious to see how the community is responding.
At the end of the day, Flash/Flex aren't going anywhere. If Flex 4 meets your current needs and you're aware of the limitations (ie can't deploy to iOS devices) then I say go for it. Yes it's true that the topic has become mildly politicized - but if you're offering something your clients need then they'd be silly to refuse to use it on the grounds that they support "HTML 5" - when HTML 5 clearly doesn't offer you the tools you need.
Plenty of awesome stuff is coming down the pipe in Flash, much of which simply can't be done any other way - google UJam for an example. I wouldn't let Steve Jobs scare you away from using the technology that works for your needs.
My company plans to continue with Flash, using FlashBuilder 4 and Java back end. We went with Flex/Flash several years ago to get out of the business of supporting all the different browsers and into the business of being productive and giving our users a rich client-side experience.
HTML5/Javascript have potential, but are nowhere near as robust, powerful, fast, or efficient. The class hierarchy, data typing, and event model alone put ActionScript 3 miles beyond any Javascript. So what if Steve Jobs gives Flash the thumbs down? Time-Warner and other big media companies have said they're going to continue with Flash, so it's only a matter of time before Steve Jobs either relegates Apple to permanent niche status or caves and allows Flash on Apple products. (My guess is for the immediate future he will prefer niche status to admitting he is wrong—look how long he maintained a mouse only needed a single button?—but that's just my opinion.) In any case, Flash will soon be available on a multitude of smart phones, including the Droid, so I am not worried.
Adobe will provide tools to convert to HTML5, but they are already following the HTML5 Path with some introductory tools. Just keep watch on adobe. They know what is going on. They just killed mobile flash so even though they argued with apple over it they finally did the right thing instead of stupidly holding on to it just because... hope that helps
I'm a Flex developer, but I think HTML5 is going to be huge. The full features of HTML5 are years away, and I don't think it's totally going to kill Flash. Flex will hold on to some part of the RIA market because it has a lot more going for than just a de facto standard client plugin -- LCDS/BlazeDS, plays nicely with ColdFusion and Java.
I like Flex for the long run. It'll lose some ground to HTML5, but there are areas where Flex will hold its advantage.
Disclaimer: I am author of Web Atoms JS
Flex/Flash is dead already, as usage of non PC devices is increasing everyday. Except old IE (IE<10) almost all features of Flash are already offered by browsers. File API, AJAX upload with progress bar,Canvas API, Indexed DB, Cross Domain message API & Web Sockets. And CSS3, WebGL with 3D can give flash like graphics.
Regarding Component Library & Binding, HTML5+JS lacks component driven development that flash offers. To bridge this gap, we created framework that gives similar functionality with all components to that of flex. Look at following image & see this blog which outlines similarities between Flex & Web Atoms JS.
http://akashkava.com/blog/439/migrating-from-flex-to-html5-with-web-atoms-js/
Here is link to documentation.
http://webatomsjs.neurospeech.com/docs
Easy question. I used to develop websites back in the days of "classic" ASP, and when I'm asked to do a quick and dirty website for family or friends now, I still resort to direct HTML/ASP and some basic CSS and Javascript - I can get the sites up pretty quickly this way. However, I've had a few requests to design and develop some sites for pay, and thought I should catch up on my web skills. I have been using .NET 3.5, XAML/WPF, etc. for Windows apps, so I'm up on .NET, I'm just behind on the web end.
To the question: If I want to design/code a site that looks identical on all (at least somewhat recent) browsers and platforms, should I be using ASP.NET and AJAX? There might be a little database activity on the site, but not much, so I don't need an enterprise level, multi-tier extendable architecture... just something that looks good and works on multiple platforms without having to code all variations for each browser. After looking at all the ASP.NET books at the bookstore, it seems they all focus mostly on data and postback stuff. Is it still a legit option to use some basic, boring html and javascript with some Flash embedded where needed?
Let me know if I need to clarify the question. Thanks for your advice in advance!
Your question is more loaded than you think, but let me try to address a few points that I think are relevant.
First, how a site looks is almost completely dependent on the HTML/CSS you use and how you code the front end of the site and only slightly dependent on the server technology. So if you want your site to function across browsers and platforms, learn to code following web standards, with semantic markup. (Search on those terms for more info).
Also, ASP.NET comes in two flavors now: ASP.NET MVC and normal ASP.NET. I highly recommend, if you are going to get into ASP.NET, that you follow the MVC platform. It closely follows similar technologies (like Ruby on Rails) and will make the transition to other MVC platforms easier on you. Also, the MVC platform doesn't try to output as much pre-made HTML as straight ASP.NET will when you use their "drag and drop" controls.
Secondly, it really depends on the sites you are building, but straight JS (or JS + jQuery), CSS, and HTML -- and please don't use Flash unless you are embedding a video -- will actually work for a number of basic sites. If you need some things to happen on the server, PHP makes for a great platform. If you are working with advanced database access, and program flow, and since you are already familiar with .NET, then stick with it... MS has some great tools and resources to help you out.
Finally, a lot of developers use a favorite CMS or blogging platform as the backend of simple sites that still need the ability to manage the content easily. Expression Engine (CMS) and WordPress (Blog/Lite-CMS) are often used (both PHP based) but there are tons out there.
Good luck stepping up your game!
I would recommend learning jQuery. This will give you a browser independent abstraction for your JavaScript.
ASP.NET controls will render it's controls in a browser independent way, but that doesn't mean your site will automagically be browser independent. You still need to know how elements are rendered differently in different browsers.
I'd also recommend using a CSS Reset sheet as a starting point for your CSS.
All in all, if you've been developing old school ASP, you'll probably really love ASP.NET as it will save you a lot of time and looping. You may want to jump right in to ASP.NET MVC too.
To the root of your question, I'd learn ASP.NET if you're doing anything more than a simple brochure site. If you have .NET experience, and classic web development experience, then learning ASP.NET is not going to be a big hurdle and will be well worth the effort.
I agree with Aaron Daniels' answer about learning jQuery. jQuery helps a lot with cross-browser compatibility in JavaScript and some CSS-based effects.
However, you should also look into ensuring your site uses well-formed, valid HTML, and doesn't use too many CSS 2+ features. This should ensure that your site is standards compliant, which will mean it will play well with Firefox, Safari, Opera, and even later versions of IE to an extent. You will still need to do manual tweaking for IE - it's been too broken for too long for MS to be able to fix it properly in one go - so look into conditional comments for applying a separate stylesheet for IE users.
AJAX is a handy technology for "desktopifying" your web app. It provides a mechanism for asynchronous callbacks to the web server, so you can pass data to and fro without reloading the page in the browser window. This is how the voting buttons work on StackOverflow, for example.
Lastly, ASP.NET doesn't really have much effect on the end user's experience in terms of the look and feel of the site. It is a server technology that provides for writing complex applications to be delivered over the web to a browser. Having said that, MS have put in some extra goodies to make working with AJAX a little easier.
Hope that helps!