I am considering using Twitter Bootstrap (TB) for a mobile web app. The next version of TB, version 3, claims to be "mobile-first". However, looking at the included Javascript files, I see almost exclusively "click" events, hardly any "touch" events used. TB relies on Jquery to handle the events. Also, there are lots of "hover" definitions in the CSS, which don't work on touch screens. Even so, I find lots of recommendations and tutorials about using TB in mobile web apps when Googling.
My question is: How well does Twitter Bootstrap work on touch screens in terms of performance (primarily with regards to speed and response time)?
I've been developing with Twitter Bootstrap (v2) for a range of web applications that are also used on mobile platforms. You must keep in mind that Twitter Bootstrap is not a full on solution for all design needs. It "bootstraps" your project into not having to worry about certain things.
Bootstrap v3 has promised to do more "bootstrapping" for mobile platforms, but this doesn't mean you will not have to do certain pieces of development for any platform you wish to deploy for.
In case of working with Bootstrap v2, you can easily move around certain elements with the given CSS and a custom style. It's speed is marvelous and pretty much all modern mobile devices have excellent support for #media queries that allow you to easily target specific mobile sizes. For example; I use media queries in a specific file to make all buttons take up full width for more easy access on a touch device.
As far a Bootstrap v3 goes, I'm very curious as the Release Candidate hasn't really shown me anything that really changed the way I developed for mobile, yet.
Hope this helps you out.
I am trying to develop a mobile app(iPad) for a client who has an e-learning website. The website consists of quite a few simple flash based interactive animations. I would like to know which would be the best way to proceed??A native app or a html5 based app. If so how do I covert the flash based interactive animation for the ipad.
You can use Adobe Edge for developing HTML5, CSS3 based animation which works very well in ipads.
If you want the exakt animations and have flash cs you van download the createJS plugin which allows
conversion of timeline animation to Javascript code. Doesnt work if its AS3 coded though I think.
I've been working on a SharePoint 2010 site that utilizes jQuery. jQuery is used almost everywhere on the site. On an iPad or iPhone the jQuery animations work as they should but I'm not pleased with the performance. Overall jQuery animations are laggy. I've been searching for solutions to this problem and have come up with nothing. Has anyone come across a solution to this problem?
You should use CSS transitions if you want them to be smooth. Javascript animations don't use the device's graphics hardware, while CSS transitions do. This plugin makes it much easier to use the appropriate type of animation for each user's device.
Did you try to play with jQuery animation settings like http://api.jquery.com/jQuery.fx.interval/
I am making a single-page, full-screen web application which will have a similar interface to an IDE (with menus at the top, output pane on the bottom, and input panes tiled horizontally across the middle). I am targeting only modern browsers, so a solution that uses HTML5 would be fine. Is there a good JavaScript framework and/or CSS framework to make creation of the layout easier?
Update: To clarify, I am looking for tools to make the single-page, full-screen layout practical, not the controls.
Tons. ExtJS, jquery UI, YUI can do it, dojo can do it, many, many others.
You can try http://dhtmlx.com/
For a living exemple of what you want to do, try this apps : http://c9.io/ It uses ACE : http://ace.ajax.org/
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 2 years ago.
Improve this question
Ha all,
So I've been taksed with developing a smartphone website for our property portal and first thing I did was see what lessons others had to tell online but I've found very little.
I'm not building an app, I'm building a website and I'm looking for do's and don't with regards to html, css, widths/heights approaches, javascript (is jquery going to play nice on all platforms?) and anything else that relvant to this kind of platform.
Looking around at others I like http://mobile.whistlerblackcomb.com/ very much.
Regards,
Denis
UPDATE:
While most of the text below still applies, I would now say that jQuery Mobile does a great job of providing a well-designed and usable set of UI components, while also alleviating a lot of the device testing and detection issues that I've used WURFL for in the past. It's still in beta, but seems to be working pretty well. I recommend checking it out.
The two most important issues to consider when getting started are:
1) Device detection
2) Mobile UI design
For issue number 1, I strongly recommend looking at the WURFL device dataset:
http://wurfl.sourceforge.net/
Using this, you can retrieve (some) capabilities of devices that are accessing your site, using their User Agent string. Testing mobile web apps is kind of like browser testing from hell--there are so many different combinations of devices and browsers, that it's a difficult task. If you can focus on developing one or two versions for fairly capable phones, say:
1) minimum 300px width with claimed "web" support and a touch screen
2) The same as above, but without a touch screen
you can create a very usable site that will work for most "smartphones," or "app phones" as David Pogue has more accurately named them. For the actual testing, you can try:
1) Making a list of all of your friends and what kind of phones they have
2) Going to a phone store and using those phones to test your site
and, regardless of what you do, you'll have to be agile when you receive the inevitable user feedback about broken/slow content on their device.
Regarding UI design, there are a couple of issues. The simplest one is nice looking CSS. Here, just look at some mobile sites you like and steal their CSS. Once you've done this, you're basically doing regular old web development, just on a small screen. ul's will become nice iPhone-y tables, etc.
The bigger problem is mobile web usability. In a lot of ways, we're in a 90s-web situation with mobile web development. What I mean is that we working without well-established design patterns. This makes doing mobile web development really fun, but it also means that you have to be ready to adjust your ugly/broken UI as better ideas evolve. One current example are the global nav/breadcrumbs you see on a lot of mobile sites. A surprising number of folks out there are trying to mimic the behavior of native iPhone apps by providing a persistent navigation tool (back button) within the mobile app. While this is kind of pretty, it has a few problems:
1) It is redundant, given that the browser comes with a back button that users are very familiar with. The reason these global navs exist in native apps is that they don't come with a free navigation tool.
2) The web is great. You can enter, leave and re-enter "apps" at any point in their structure. By assuming that a user takes a linear path through your app, you are decreasing its webiness, making it a lot more crude relative to the rest of the web.
3) It breaks. Either you can get in a situation where the app nav and the browser nav point in opposite directions (hitting the back button in your app steps forward through the app history), or you fake a back button with javascript, which breaks if they don't start at the beginning of an app (emailed link, bookmark), or you set up sessions, which can be a big pain just to replicate what you get from the browser for free. Sessions are also vulnerable to brokenness (emailed links, bookmarks), and you're really not gaining much.
I guess my main points here are:
1) Don't forget you're on the web. The web is cool, browsers are cool, make use of that.
2) Don't be afraid to play around. There aren't many well-established patterns here, so you may have to try out some of your own.
A List Apart can get you started:
"Put Your Content in My Pocket" by CRAIG HOCKENBERRY
With modern smartphones there's actually no difference between developing a conventional webpage and a dedicated website.
But you could try the emulators that the major players like Apple, RIM, Motorola and Nokia provides to see how they look.
I'd suggest taking a look at some other mobile sites. I posted a few below.
m.reddit.com
diggriver.com
mobile.washingtonpost.com
Since modern mobile browsers work quite much like desktop browsers, the old adage of "minify JS and CSS, optimize images" should be your primary concern, as bandwidth is more valuable on mobile devices.
In addition, consider following:
Think if you need all your images, and if they are too large for small screens. Consider removing or reducing the size of large images.
Check your JavaScript - Will your site work without it? It may be beneficial to disable parts of it, as it may easily reduce speed on mobile browsers
You can often get by simply by including specialized CSS styles tailored for small screen devices in your main site
You might also find this helpful: Why your mobile site probably sucks
Mobile sites are often used on regular phones, and often go to m.example.com instead of www.example.com. These sites have little/no javascript or css compatibility. When you ask about mobile sites, keep in mind that there are two types of mobile sites.
Modern smartphone are supposed to handle browsers the same as a full fledged browser, but they are not. In fact, the iPhone lives in a fantasy world and will report a window width of over 900 pixels!
There are tricks that you can do for a smartphone. A touchscreen has no use for the :hover pseudo-class. This can be a problem for menus that require hovering. You can design around this. How? you ask...
Apple looks at a new meta tag (do a google search on it) and other smartphone browsers look at this as well. With this, you can force the smartphone to report it actual screen size in pixels, and not it's pre-programmed fantasy size.
Now that you have done this, you can use css conditional statements,
#media only all and (max-width:600px){
CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS
}
I've used this to block <div>s that cluttered up a mobile device screen: lightbox, for example. I also used this to modify image widths, so they fit on the device better. Why did I choose 600 px? I felt that many of the newer "netbooks" should be lumped in here as well.
I hope this helps.
--Dave
If you are looking to do development specifically for an iPhone or iTouch use thise conditional statement.
[if SafMob] #import url(iphone.css);
Here is an article about building sites for mobile.
http://www.alistapart.com/articles/pocket/
Meagan Fisher's talk on Designing Effective Mobile Interfaces provides a good overview. She recommends the book "Mobile Web Design" by Cameron Moll. Technology wise, I'd start by getting familiar with XHTML Mobile Profile if you're not already.
As far as design goes, think thin. Snag a book with nice typography and see if you can duplicate the page layout with CSS. "Elements of Typographic Style Applied to the Web" is a good starting point for that. Phone websites are about scrolling, not complex navigation. Rhythm and spacing are important. Keep images small and your text high contrast, and you'll end up with something that loads fast and looks good.
There is also this threeparter, "Mobile Web Design" by Cameron Moll:
State of the Mobile Web
Methods to the Madness
Tips & Techniques
The series is from 2005, but many of the info is still relevant. The last part "Tips & Techniques" also lists a lot of other resources on mobile web development.