I was wondering if anybody knows of any css resources that are geared strictly towards mobile web apps?
I am building a mobile app using backbone and zepto, but am missing a framework for handling the main user interface components.
I know there is jQuery mobile and ST2 (and yes I know you can just grab their css), but I was wondering if there are any resources that are standalone mobile css libraries and focus on using css transitions to mimic device behaviors?
topcoat.io is still in an early stage, but is developing quite fast.
For simple example application have a look at: Sample Mobile / PhoneGap Application with Backbone.js and Topcoat
Question is a bit older, but I just stumbled across it. Maybe this is useful for someone :)
I don't know of any css frameworks that are strictly mobile but these ones are very good and have media queries that help make their stuff look good on mobile devices. Bootstrap is highly modular so it is a great starting point:
bootstrap - http://twitter.github.com/bootstrap/
foundation - http://foundation.zurb.com/
There's now Kendo Mobile available that does this, but it's not free or that cheap though.
http://www.kendoui.com/mobile.aspx
Related
I have an angularJS/Jquery based web-application. In shortage of time many pages have inline styles. There is a common CSS file which is included on every page. The problem is that : on resize of browser or on projector my application looks distorted. All the pages of application not having unform layout, few are list pages, few are form pages and few others are widget with graphs. Could anybody help me to make this web-application responsive without making much changes.
I need a quick-start tip/third party tool or a guidance document to optimize CSS and make the weUI responsive.
What you need is a framework that implements responsive layouts.
Popular frameworks are Bootstrap and Materialize. Those are a good place to start. Learn about their grid layout, which will help you set how each container element will be viewed on different displays.
http://getbootstrap.com/
http://materializecss.com/ (for Google's material design approach).
There is a lot to talk about when designing web apps for mobile and desktops, but these frameworks are a good start.
Making web apps responsive is not a quick-and-dirty job, and maintenance is a constant work. It sounds like you have a lot of work ahead of you. Definitely with making many changes...
Can you just use CSS?
See this, if you haven't:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I´m planing to use Cordova v3 to develop a generic application to target mobile devices using HTML/CSS. Which is the best solution in order to reuse most of the html but having the visual style for each mobile platform? Which will be the best css/framework to use in this case (preferably free)?
Thanks in advance.
As you said "but having the visual style for each mobile platform?" I understand you are searching for a native look in the apps. the other answers are good frameworks however unless you want to spend time tweaking css they will not look similar to a native UI (visually).
I have worked with Twitter bootstrap and jQM. So far so good but for a native UI look I will go for the following options which I think are the best.
These are my top choices after spending a considerable time looking for a jQM alternative as I am not really happy with it in specific aspects.
EDIT: I am adding two new options based on my experience and what I have found so far (ionic and onsen ui).
Ionic Framework
http://ionicframework.com/
Intended to develop hybrid app using Angular JS is a really gem.
I have been working with it and it has really helped me to develop faster than when using jQuery.
It also was UI elements that you can use out of the box and they are styled properly for iOS and Android although I think its style is more iOS-lish.
Pros
Angular JS based framework
Speed up the development process because of angular JS powers
Very well documented and a lot of examples and tutorials and recipes.
You could use the CSS without using angular if it is required
Free and open source
theming is done via CSS or SASS
Enough components out of the box to start building and app.
Cons
Maybe reading the ionic documentation and the Angular ties if you want to enjoy all of its powers, but it worth it.
Onsen UI
http://s.onsen.io/
I have not work yet with it but it looks like a really complete UI option for hybrid apps.
Pros
Work with Angular and jQuery was well
Free and Open SourceFree and Open Source
It has a theming tool which make easier to customize the look in case you are afraid of CSS or SASS.
Kendo UI mobile
http://www.kendoui.com/mobile.aspx
Pros
It help you create a native look with already native UI looking elements for Android, iOS, Windows Phone, BB.
Incorporates an MVC framework
Theming machine like jQM theme roller
Looks solid (I am looking forward to use it soon)
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Cons
It is not free for commercial use.
PhoneJS
http://phonejs.devexpress.com
Pros
jQuery based so you can leverage the power of all jquery and JS libraries out there to solve specific problems very easily.
Optionally support Knockout.js for MVVM user interface development
Cons
Seems like its community is far less reduced in comparison with kendo, so I am not sure how much people are out there using it and that could help later.
It is not free for commercial use.
Chocolate chip UI
http://chocolatechip-ui.com
Pros
iOS 7, Android Jelly Bean and Windows Phone 8 UI looking
Open Source and the project looks active
jQuery compatible
ChocolateChip-UI uses its own JavaScript library, ChocolateChip, for DOM manipulation, Ajax requests, etc. It is very similar to jQuery. (they claim have better performance than jQuery and Zepto)
Cons
Doesn´t seems that have a wide community out there
Steroids
http://www.appgyver.com/steroids
If you feel like a adventure explorer take a took at steroids, which is cordova compatible and they claim you UI will perform as well as native.
It is quite new, I haven´t give it a try but I seems promising, however as still is not widely used I did not decided to use it as having a lot of people using it is helpful when you face problems.
NOTE: If other have interesting alternatives to experiences with this or other UI frameworks for cordova/phonegap please share!
My suggestion would be jQuery Mobile which supports almost all mobile devices in the market.
For the list of supported devices: http://jquerymobile.com/gbs/
1) It provides a native feel for each device platform.
2) Supports all platform
3) Easy support and 3rd party plugins
It's been said by some that jQuery mobile might be slow.. but you can tweak its settings to make it good.
You could use Onsen UI. It claims to be faster than jQuery and has its own theme roller and is built to be compatible with PhoneGap/Cordova.
try you using twitter bootstrap, http://getbootstrap.com..
might be a solution for you, because twitter bootstrap is framework for html and responsive code for all device,, check resolution web in http://quirktools.com/screenfly.. and you can convert web with phonegap..
I am creating a mobile app with an iOS 7 theme, meaning lots of transparencies, blurs, and animations.
Does anyone know if the current JS frameworks out there (blur.js, fabric.js) will suffice in terms of performance for blurs and transparencies? Or am I stuck with going the native route.
This isn't the best question in the world, but in short, yes. I've been working on a similar project and have almost completed it. I can assure you the vast array of available CSS and jQuery markup will be sufficient for your needs.
iOS 7 Bootstrap:
https://github.com/brandonjordan1/iOS7-bootstrap
It's only in it's first version but it's the only one.
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
Before i start must explain that I'm relatively a noob with less experience in web development. A certain site that I'm developing requires and swipeleft and swiperight functionalities for touch based devices namely iphone, ipad, android phones and tablets. To implement this i was suggested to use jQuery mobile and it sounded good as I'm a fan of jQuery.
However despite all google could give me, I'd request clarification on the following
Does the doctype compulsorily need to be html 5 as it uses
attributes like data-role
My site uses jQuery and jQueryUI heavily and will jQuery mobile
distort the actual design layout implemented.
I can't seperate view layer for mobile and regular traffic.
If jQuery mobile is good for mobile based usage without
affecting normal design and functionality what will be the best
ways
of testing the site for multiple touch based devices (simulators
maybe).
Some details in simple english from this great place would be wonderful...
Thanks in advance!
EDIT
To further dig into my problem will a jQuery plugin for swipe functionality like touchSwipe or wipeTouch help me here.
Also what would best methods to test the functionality from an iPad or an android phone provided I've implemented the plugin with my code. Say some plugin just like IE simulator for firefox that could recognize swipe gesture through mouse drags (Just greedy and desperate)
Thanks again...
If you really want to separate views for desktop/mobile, I've seen recommendations here for http://detectmobilebrowser.com/ but I haven't used it. That provides code for doing it server-side in various languages or in JavaScript.
One of the main purposes of jQuery Mobile is to provide mobile-specific UI; so the styles will definitely conflict in all sorts of ways with your current templates if you try to just throw both stylesheets in there. If you just want to add swipe support on top of your current site then there are probably lots of jQuery plugins that could help with that.
Re: HTML5, From the jQM docs,
A jQuery Mobile site must start with an HTML5 'doctype' to take full
advantage of all of the framework's features. (Older devices with
browsers that don't understand HTML5 will safely ignore the 'doctype'
and various custom attributes.)
JQuery mobile is OK for web apps, but after doing more then on application in JQuery Mobile I would recommend against it for now. There are a lot of phones that do not fully support JQuery Mobile and you will run into issues with many of the methods, and the page layout in general. Most Blackberries, and many HTC phones do not support JQuery Mobile, as well as many other phones.
Detecting if you are on a desktop/mobile is pretty easy. Just look for a user agent on page load, and redirect accordingly. If you want I can give you a few ways to redirect based on user agents.
JQuery Mobile may distort the design that you currently have, if you do not format your page correctly. JQuery Mobile will add a lot of extra css, and working around this may prove to be challenging, especially with other JQuery elements. Dialogs are one example of something that JQuery Mobile will do differently from JQuery
The best way would be to test through emulators. Google Chorme has a Ripple add on that I tend to use, though it is not the most reliable. Because there are so many different phones, sometimes it is just easier to try to test on as many live ones as you can (different versions, platforms, ect may behave drastically different from each other with JQuery Mobile)