Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am creating a website from scratch which would work for both desktop and iPad. There are going to be some UI components like sliding panels like you can see on
http://www.moneycontrol.com/tablet/
Plus some other things like Accordion, Drag drop things, etc
I need to have the same html file to be called for all devices (can only have separation at css or js)
Now we can implement these in multiple ways. In some cases, it is possible to have the same component work in both desktop and iPad without modification (e.g. Through jquery ui)
But guess there are some downsides like performance issue. Not sure if this is the only thing. Please suggest if you know of any other thing, may be from development side as well.
Another approach is to have different ui component to work on desktop vs iPad. E.g. For the site http://www.moneycontrol.com/tablet/, it uses DMZone sliding panels which would only work on iPad and not on common desktop browsers..so in this case, we would use another component which would work for desktop. Is this a good approach?
Thus My question is like which approach should i go for, both from a user perspective, future development efforts for some other mobile device ?
I need some strong points which would really justify the right approach.
Please suggest as much as you can. I am quite open to all ideas..
What you are looking for is a mobile app framework that supports desktop clients. There are tons of those available both free and commercial.
One of those which is quite popular is http://www.appcelerator.com/
Although i haven't used it and i can't tell you if you will hit a dead end on the road (with the sliders for instance), this is the best approach that you can do.
And, you are more than covered for future mobile devices.
You can do your own research of other frameworks, but appcelerator seems fine.
EDIT:
Seems like there is controversy whether its best to create native app vs browser based app on mobile devices. There are some interesting posts:
http://www.readwriteweb.com/archives/mobile_app_or_browser-based_site.php
http://blog.caplin.com/2011/02/11/sdps-native-or-browser-based-mobile-apps/
The only sane way to export your app to multiple devices is to use a framework. The other way is to make hundreds of conditionals depending on the device that is visiting your site...
If you want pure HTML interaction in the mobile device, then you can use jQuery Mobile. But you will have to make some sort of hacking to render the page correctly on desktops.
Sencha touch is the best web based touch UI toolkit out there, in my opinion, it's also free. http://dev.sencha.com/deploy/touch/examples/kitchensink/
Click on the 'User Interface' link to see examples.
Apps written in Sencha touch work on iOS, Android and Blackberry. One code base for all your mobile OSs. You can also run them directly in safari/chrome.
Here's their API http://dev.sencha.com/deploy/touch/docs/
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
This may not be a question related to programming but I am still asking this since I am banging my head a lot on this issue.
I am finding a lot of HTML5 & CSS3 features useful for my website designing. But as usual (like all developers) I am confused whether to use it or not since older browsers dont support it. (Like css transitions, 3D tranforms, and so on)
I know that I can add fallbacks with Modernizr
(or)
Can give alternate stylesheets (If lt IE9.)
(or)
Can avoid using css3 and html5
(or)
Use plain javascript/jquery to do all the effects
(or)
Use html5shiv or similar for adding specific html5 command support.
What my problem is...
I am so fed up of adding so many fallbacks as a developer to every transition/every element which is not supported. So, I thought of few things but not able to choose what to do..
1) Should I totally avoid users still having old browsers and just support latest browsers?
2) Since I am anyway going to make a mobile site with JQuery Mobile separately, should I use the mobile site as a fallback for people with old browsers?
3) Should I continue adding fallbacks and alternate stylesheets?
4) Or, is there any better option?
I am banging my head so badly due to these incompatibility issues. Please give me a suggestion which is developer as well as user friendly. Thank you.
Sùmmary: it depends on your audience. There's no definitive answer to your concerns.
If your target is people who tend to own latest technologies, you can support browsers from 2 years onwards. In the other hand, if your target is people who love staying in old operating systems or you're talking about a large corporation/government, maybe you'll need to provide fallbacks or just skip using edge technologies in order to ensure a proper user experience across all target user devices and browsers.
OP said in some comment:
But I am not sure whether I have to completely scrap support to people
with old browsers and alternatively offer them with a mobile based
website for pc
If your target has latest tech, why you want to provide a mobile site for PC? You need to decide: if you think that you shouldn't support too old browsers and systems, you shouldn't try to maintain 2 sites when a great percentage of visitors will go to the "edge version". Otherwise, make your main site compatible with older browsers.
BTW, as I said before, there's no definitive answer to your concerns, because it's all about taking a decision and the time will tell you if it was right. Use analytics, check what are the most used Web browsers in your site and provide fallbacks when you detect that there's a high percentage of visitors using old browsers...
According to me,you should restrict clients using old browsers and mention in a disclaimer that your webapp will require versions of browsers with uniform support for all HTML5 and css3 features.You can check support for these elements using http://caniuse.com/. This will avoid alot of inconvenience for you as a developer and unnecessary stacking to styles and jsfiles to your webapp making it sluggish.Even i faced the similar problem and i know how irritating it is to handle cross-browser issues.Cheers :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am building an app that includes these design goals:
Fast and modular - lightweight core that can be expended into a feature rich app in a coherent manner
Mobile first - this app first and foremost targets mobile platforms. It uses some device native features. It must look and feel like a mobile app (with page transitions and swipe events). However, a large subset of its features must also be available to web browsers. My goal it to have one unified code base with a common core and mobile specific extensions.
So far, I have selected the following stack.
AngularJS: I have used a few JavaScript frameworks in my other projects. Angular seems to suit me best in terms of modularity and well thought out design. I want to use Angular native constructs (like directives) and minimize "other kinds" of JavaScript-based widgets from external UI toolkits.
Cordova: I am comfortable with its design philosophy and plug-in system. I am aware of performance considerations which emphasize the importance of choosing the right JavaScript framework.
Some responsive framework: Bootstrap 3 would be my preference at the time of writing. I like its looks. It's design seem sound. There are Angular directives available to replace it's jQuery plugins.
I have a well-defined REST API on the server-side which is bound to Angular resources. I am not planning on doing "presentation stuff" on the server.
Here is my question: On point 3, Bootstrap seems to be missing features to build an "advanced" a mobile app. Bootstrap responsive behavior is great for basic controls, but I need a little more. For example, things like page transitions and swipe events come for free with jQuery Mobile. While I do not expect to find this kind mobile features in Bootstrap, it seems like I should be able to include directives that would add things like page transitions and swipe events without overlapping with the Bootstrap CSS. There is angular-mobile-nav, does anyone use it in conjunction with Bootstrap? Or is Bootstrap just the wrong choice?
I've had the same question myself lately. Bootstrap 3 is my preference, but I wish it had mobile events and animations built-in. In addition to http://www.appgyver.com/steroids already mentioned, I've also come across http://ionicframework.com/ and https://github.com/angular-widgets/angular-jqm.
Kind of late to this question but you should check out Ionic. It uses Angularjs and comes a bunch of great components (angular directives) and is pretty easy to get started with while still being powerful. I've been playing around with it for while and love it. Definitely a good direction for mobile apps.
Oh one last thing, they play well with cordova/phonegap
Did you already have a look at http://www.appgyver.com/steroids it will play well with Angular and Cordova and will save you some of the troubles you mentioned in your question. Of course you can still keep bootstrap for more "basic" needs.
All these answers are good. Both Steriods and Ionic look like great frameworks and acceptable solutions to the problem as described. For my particular problem, I created a very lightweight Angular module which adds iOS7 headers and animations on top of Bootstrap/Bootswatch themes: https://github.com/fredfortier/angular-ios7.
I wanted something very simple that lets me use mostly Bootstrap. For anything more complex, I would definitely consider Steroids or Ionic.
I'm working on an HTML5-based app with an iPad view and wanted to have a list in a sidebar that has navigation nested so that I user could drill down a couple of levels before tapping the desired item in the main view to the right. I don't have a ton of web experience and I'm hoping someone could point me in the direction of a js-based library that would offer such functionality. The closet thing that I could imagine would be something similar to the UINavigationController in iOS that would allow me to easily push and pop lists of items.
I've explored JQuery Mobile and the closest thing that I could find was the 'nested listview' functionality, which as of version 1.3 is deprecated.
jQuery Mobile has this functionality built in. I would suggest reading through all the documentation. It will give you a better understanding of jQuery mobile and what you can and cant do.
Or if you just want information about the Navigation Model you can read about it here.
Finally you can find a demo of it in action here.
If you are not going to built it yourself then jQuery Mobile is probably the way to go.
Description from their website:
A unified, HTML5-based user interface system for all popular mobile
device platforms, built on the rock-solid jQuery and jQuery UI
foundation. Its lightweight code is built with progressive
enhancement, and has a flexible, easily themeable design.
I'm looking for a javascript framework to help me with mobile website front-end programming.
The perfect solution would be a js file that, when included in my project, will give me basic mobile helper functions/event handling such as drag and drop, tap-hold, swipe WITHOUT forcing me to create a mobile specific version of my existing website.
I looked at jQuery Mobile and jQtouch but both forces me to create a mobile specific version of my website.
Is there any framework that could help me?
I think a better way to say it might be: "Is there a lightweight framework for mobile apps that will also leave my existing site mostly alone." Does that state it well, or, did I misunderstand?
You should be able to get pretty far with jQuery and jQuery UI.
I would also recommend something like Knockout.js to handle data binding.
Of course, you could always pull out the functions you want from jQuery/JQM. As I understand it, JQM is fairly separable, the widgets, that is.
Zepto is a jQuery compatible Micro-Framework for mobile devices that should fit your needs
You should check out Sencha to the list of frameworks you're considering. I've been playing around wit
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
Are there any iPad compatible wysiwyg HTML editors?
Edit: What I'm looking for is something that would work on a web app, not a native iPad app.
I think that the GDocs editor might work, but keep in mind that there's almost no editor like that, they are managing everything by themselves.
The rest of editors try to use contentEditable, and Apple itself warns against using it with the iPad: http://developer.apple.com/library/ios/technotes/tn2010/tn2262/#//apple_ref/doc/uid/DTS40009577-CH1-DontLinkElementID_7
I would advise you to use NicEditor which has an option of using content editable divs rather than iframe(has some issues in ipad)
I don't know but think that what you are after is something to edit the code of a web app. If it is then since the web app is essentially a web page you could use any text editor, I personally like Gusto for the iPad- http://itunes.apple.com/us/app/gusto/id364906873?mt=8.
Either that or you are looking for a HTML editor which is a web app itself. In that case, sorry I don't know of any.
I am sure there may be a few that exist. I have not had any experience with either but take a look at the below links:
iPad HTML Editor - http://itunes.apple.com/us/app/kytekhtmleditor/id349354394?mt=8
SquareSpace for iPad - http://mashable.com/2010/12/21/squarespace-ipad/
Check out the following Web (html) Wysiwyg Editors.:
Dreamweaver
Flux (Mac only)
Creative Suite
Expression Web/Studio
There are a quite few available WYSIWYG editors and some are even free. However, 'free' is not always best as the code compilation may not be optimal and important features are lacking.
Hope that helps!
I was also looking for this too and couldn't find it so I coded it myself.
iPad web based Code Editor (with extra symbols keyboard)
It is a web-based code editor that allows you to type in all the symbols and characters used when programming (brackets, equal sign, tab, quotes...). It is currently in a very early stage so you will need to copy/paste the code, edit, copy/paste again somewhere else (Dropbox, FTP client).
You may also want to check out CodeAnywhere, they have a native app AND also a web-app.
I've experienced a similar issue in a web app I've developed that does not allow wysiwyg editing when run on an IPad/IPhone. The wysiwyg component I use is Telerik's RadEditor (a terrific product, btw), and Telerik has posted a KB page regarding this issue at http://www.telerik.com/support/kb/aspnet-ajax/editor/support-for-iphone-ipad-browser.aspx. It seems, at this point, that Apple has chosen to lock down Safari on the IPad/IPhone in such a way that these rich text editors do not work. I haven't yet seen an alternative solution to this (other than allowing IPad/IPhone users to enter their content in a plain ol' textbox) but am keeping my ear to the ground.