I know HTML and CSS really well but responsive and continually messing around with css media queries is just a pain in the butt. What do you recommend to make my workflow of making my sites responsive less cumbersome? What can I learn to make my job easier?
I see some sites out there where the responsiveness is so dynamic and perfect. CSS media queries don't seem to create this fluidity.
http://getbootstrap.com/getting-started/
Bootstrap is compatible with the latest versions of all major browsers. It gracefully degrades when used on older browsers such as Internet Explorer 8.
Since version 2.0 it also supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).
Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasizing responsive design by default.
Bootstrap is open source and available on GitHub. Developers are encouraged to participate in the project and make their own contributions to the platform.
Recently, community members have translated Bootstrap's documentation into various languages, including Chinese, Spanish and Russian.[6]
Related
I am not new with ExtJS, building apps since ExtJS3, but I am definitely new with ExtJS universal apps.
What I undertand is that, in an universal app, we have to define both classic and modern views separately, in classic and modern subfolders. Doing so, both views can share the same Models, Stores, ...
Does it mean that classic and modern views are completely separated? Is there a way to use a classic view in "modern" mode, I mean when loading application on a phone?
Or should I have to completely duplicate my views, if I want to have the exact same functionnality using the application on a desktop and on a phone?
I already read the Sencha docs, but that part is not really clear for me...
Thanks in advance !
LuD_GRi
When starting a new project, which toolkit should I use?
Question details: We’re currently starting development of a completely new app – initially for desktop, but later we’ll add support for phones. What’s the recommended way of building this type of app that is the most future proof? Should we go for a universal app and create our initial desktop app with the Classic toolkit, or is a Modern toolkit only app the best approach from now on?
We recommend the Modern toolkit for most new projects, but there are several features in the Classic toolkit that would also make it the right choice. The following features are only available in Classic: locking grids, support for IE8 / 9 / 10, and accessibility and support for RTL (Right-to-left) languages. If your application needs these capabilities, then Classic is the way to go.
link
I think you can mix both of these approaches in one case - if supporting older browser versions such as IE8\7\6 is not important to you. Honestly, I have not tried to mix them. and not sure if this will work. I think this is unjustified
Modern toolkit is created not only for mobile devices. This is generally a toolkit aimed at fresh versions of browsers, and free from unnecessary tricks to support things specific to each version.
EDIT:
link2
By design, the classic and modern toolkits target different generations of browsers. If you write an application with both classic and modern user interfaces, the user sees one or the other, depending on the runtime environment. You cannot mix and match view components. But both toolkits do share core features, such as the class system, the data package, the view-controller-viewmodel architecture, etc.
I want to start developing a mobile hybrid app using angularjs, css3 and html5. Was searching for a framework and found these two. Both are looking very nice however I was not able to get a good comparison between both of them. Can anyone please list down pros and cons for both.
A comparison between them in terms of scalable, out of the box components, speed and compatibility with Angular and devices targeted will be very helpful
One year has passed since both frameworks were released. Onsen UI is currently in stable 1.2 version while Ionic is in the last release candidate state.
I have worked with both of them so let me give you a short overview, I also wrote a much larger blog article, you'll find it at the end of this answer.
I won't go into much details about the core framework; if you have a previous AngularJS knowledge you will easily transition to Ionic or Onsen UI.
Both frameworks are built around AngularJS and they heavily depend on directives, you can also easily build your custom directives. Onsen UI also features a jQuery support (unnecessary if you ask me).
Both frameworks support Android 4+, iOS 6+ (some features are available on Android 2.3), Onsen UI also officially supports Firefox OS and desktop browsers. Ionic don't have an official desktop support, but it will still work (it will not be pretty, imagine ).
Ionic currently don't support Windows Mobile platform (it will have it in the future); Onsen UI support is currently in development (since November 2014).
Both frameworks support some kind of splitview feature so they can be used for table development.
Both frameworks have a distinctive beautiful looking flat UI. I prefer Ionic over Onsen UI look and feel, but this is a matter of personal taste. Both default themes look iOS 7 like.
Onsen UI supports native looking themes for Android and iOS. Ionic framework uses the same theme for all platforms, but some features will depend on the platform (for example tab look and feel)
Both frameworks have a working theme builder.
Ionic supports SASS while Onsen UI is built around Topcoat CSS library.
Both frameworks have a large widget support (directives)
Onsen UI has a better documentation. It is separated at two different locations. First one is “Components” where you can see different directives and each one has a working example you can use and replicate. Second part is a “Guide” where you are guided through the application creation process.
Ionic has a disorganized documentation (heavily fragmented). It lacks a real “getting started” tutorial, even if you have previous AngularJS experience. It shows you pieces, but not how to connect them correctly.
On the other hand Ionic has much larger community so you will easily find problem solutions.
Ionic framework has a great official forum + large StackOverflow community. At the same time, Onsen UI uses only StackOverflow as a help center (I would call this a fail).
Onsen UI has an HTML5 IDE called MONACA IDE (great tool), Ionic IDE is currently in production; you can participate in beta test.
Ionic has a growing 3rd party plugin community (for example date picker); I couldn't find any 3rd party Onsen UI plugin
I wrote a much larger article covering Ionic / Onsen UI changes, find it here.
Since both frameworks are pretty new and not very popular (yet!), I don't think anybody has taken the time to do an extensive comparison between the two. I don't even think the final set of out of the box components is determined by the developers themselves yet, active development is still going on.
As for compatibility, hybrid apps run in the native browsers of the devices where they are installed on. Both frameworks need CSS3, so old phones will never be supported by either of the frameworks.
The OnsenUI-tag here on StackOverflow is the only support OnsenUI offers (currently), and at the moment of writing there are 0 questions/answers. Ionic has a very active forum on their website + some questions/answers here on SO.
I think having an active community backing up a framework will eventually lead to a better framework. Therefore I'd go for Ionic. Personally, I find Ionic's standard-design more appealing as well, but you should judge that for yourself.
Ionic
more lean to Angular style like routes,controllers and template and it's structure is kind of complicated in first hand.
command like "ionic start myApp tabs" still don't available in onsenUI
Material Design like "Cardboard" are available
OnsenUI
simpler structure, easy to start
couple with Monaca IDE, some of features are only available only if you use Monaca. otherwise you have to create things by yourself.
supported ios8 design recently
Ionic has a more mature feature and CSS component set and out of the box. Injectable delegate services, representing the UI elements (directives) gives you more control over UI/UX interactions. The development community is (currently) very active and it's gaining traction.
I cannot properly speak to speed/performance between the two but know both are optimized for mobile.
As I develop more, I will report back with comparisons. Good luck.
Just started using ionic after some time native development. Must seriously say it has some great cli features! For example you can start your project from a gist in my opinion this is nice to have for poc's
Havent been able to test everything but what i've seen really impresses me!
It's well documented in there own way, active community and it keeps getting better.
Just wanted to share my thoughts for what it's worth
Im working in Ionic Framework during 1 year with a real project, i have created a game with Ionic, its very special because hybrid app is not best choice if you want create game. When you develop a game you need performance !
However if you develop simple game with few animation, its good.
Here is my game in playstore, its a memory game "Memory Party" :
https://play.google.com/store/apps/details?id=fr.jhaccoun
Why Ionic is a good choice :
very very very good documentation (tutorial, forum, article,...)
stable (ionic 1), you can find many apps in store
Easy to develop (ionic come with many tools to help the developer, you can develop and test in live in your phone without deploy thanks live reload
Many cordova modules are available
you don't need mobile skills, just angularjs, html, css...
Ionic provide beautiful components and you can custom the components if you like
I found Ionic the best for some reasons, like their community support and the documentation. I am still evaluating the onsen from a long time but still havent found the one unique thing that will drift me towards it compared to Ionic
I am using CI, but seriously considering a move to ATK4. The SaaS code I build always has to be desktop & mobile accessible, so recent projects have relied on Twitter's Bootstrap layouts to allow a good browser experience, regardless of screen size.
How does ATK4 handle mobile browsers, especially small screen like on phones? Is it really just a matter of the theme you choose with Theme Roller, and if so, are the any themes that are known for a both a good mobile & desktop experience with ATK4?
Agile Toolkit is targeted at the UI development, and primarily the desktop browser UI. The site is still usable on mobile devices, just like any jQuery UI site.
However, if you would like to use a different CSS engine, you are free to do so, simply change your shared.html file to have the necessary includes and you would need to write more templates. Well, you are writing templates right now anyway with CI, so it's pretty similar experience.
I'm currently investigating the alternatives for crossplatform development for Android and iPhone (Windows 8 could be a nice addition). The app is basically a "map with an asociated app", and certainly not a game.
Searching here I see many outdated advice and tools from 2010/2011, but since then Apple has changed their policies and surely new things have appeared.
My current list and light research (might have facts wrong) is:
Monotouch/Monodroid: .NET (Mono) framework. Create "native" apps on both platforms. Requires rebuilding UI code (or similar things).
Appcelerator: Javascript framework to compile native apps.
Corona: Similar to Appcelerator.
Phonegap: Similar idea, but looks like it uses a wrapper to appify HTML5 content
SenchaTouch: Another HTML5 based platform.
Wink: Yet another HTML5 toolkit.
XVLM: Android to ObjC compiler, probably creating ugly iOS apps.
Unity3D: For games only.
Moai: For games only.
So, there are three main ideas, with some frameworks implementing each, it seems to me:
Have an abstraction layer over native iOS/Android code and build for each platform using the provided layer. (Monotouch, Unity3D)
Use HTML5 (coding in Javascript) and some kind of wrapper to "appify" the web content. (PhoneGap,Sencha,Wink)
Code using a framework that will output as a compilation pass (or similar) a native app for each supported platform (Moai, XVLM,Appcelerator,Corona)
The questions:
Is there a fourth idea I haven't yet found?
Is there any blatant mistake in my research for any of the specified frameworks?
Is there any known problem for map integration with any of these ideas or specific frameworks?
Only a partial answer:
Ad 2. Appcelerator / Titanium is more than just HTML5. I read this pretty extensive comparison between PhoneGap and Titanium the other day on Hackers News. I found it very informative. The link points to the HN comments, the link to the actual article is at the top.
My main experience is with Mono for Android and MonoTouch, so I can't personally speak much to the other options. I personally find it to be the best option there is, as it allows you to share a large amount of your code across the platforms (even extending to non-mobile platforms if you stick with .NET), while still allowing for a 100% native UI, which is extremely important. If you're looking for resources on getting started, I have this video which discusses approaches and libraries for sharing a lot of code across platforms, and also this book which covers the same thing, but also expands to talk about how to do things like store data, use maps, access the network, etc.
I also want to mention MonoGame, which is absent from your list. MonoGame is an open source XNA implementation that sits on top of Mono to allow you to target iOS/Android/Max OS X.
From what I have experienced, if you want to have a native app go Mono, if you don't need native go PhoneGap. Native is best of the UI is very important, ie games or fairly graphical apps. But from business type app, CRUD, Phone gap works well.
Got a problem, and I am pretty sure there is a solution for this.
Currently we have a Website that sells goods & integrates with a thirty party for shopping cart. The shopping cart integration is through standard web re-direct.
Product works well on desktop browser. Its not that bad on browsers on tablets. Not so great on phone browsers. The problem on mobile device is for obvious reasons, as the pages are optimized.
The standard approach we can do is go about optimizing for mobile browsers, and be happy. My team is flying with optimizing for mobile web, because they think apps will be very difficult to do.
If we choose to go the native app model, is developing a library or package for each platform the only way? I am thinking, no in current world with so much technology advancement. I am not a fan of browser view on device, not the smooth experience.
Are there other options available? I was looking at HTML5 hybrid applications, but can't put a finger to be sure that will work for what I am looking for.
Frameworks aside, often times you can use a stylesheet meant for mobile devices and hide everything that is not absolutely vital. You could also consider WML, but I think you could live without it IMAO.
Writing apps for the iOS will require an investment in Apple developer tools and training in Objective-C. Android will call for Java and Eclipse, to name a few things.
When it comes to "native apps", you will need to code for whatever platform you are depending on. The number of platforms you work with is entirely up to you, but yes, each new platform may require a different implementation.
Personally, I would add some specialized markup/styles to make as many browsers as possible happy. If you want to expand, try to see where your target audience really lies and reach out to them on any medium you can afford to build on. I would zone in on specialized applications if there are benefits really worth chasing down that road.
Hybrid applications is a good option, but probably the devil in a box.
The hybrid approach with HTML5 fits your developer, because they will still use HTML, CSS and JS (e.g. with PhoneGap), but on the other hand you will get an medium satisfying UI (what you said you are not a fan of).
Pure native applications is probably a bit too much of all good, if your web app runs fine in a browser.
A way could be to go with compiled hybrid and cross-platform compatible solutions like xamarin or appcelerator, especially appcelerator uses JS, which is an advantage for you. This could result in a native UI (implemented in JS) and shared business logic code. So there are two benefits for you; first, just use JS, second, shared business logic code -> less work.
Other alternative would be to go with responsive or adaptive websites, realized with the help of CSS.
If you are looking for developing a hybrid app (phonegap + angularJS + backend), I would like to recommend Monaca. I've just recently discover it. It is very cool since it has phonegap inside its framework and its own backend. Moreover, it also has a fast and lightweight UI framework called OnsenUI which is based on Topcoat and AngularJS.
Even it is a hybrid app but it will give users the native application feel since it also provides native components to use in your hybrid apps. What is impressive about it, you don't even need to build and install your app to your device every time during development. That's what I love the most about this.
I hope it helps since I think it is just like what you are asking for. I'm just a novice developer and I find it is very easy to use.