I've been developing a travel planning site - tripgrep.com - which is built on appengine, GWT and smartgwt, among other technologies. It is still early days, and the site is now working well on my development environment, which is either a windows or mac computer.
However, I am frequently talking up the website to my friends when we are at a bar or other venue, so I am standing there while they try to access the site via an iPhone, Android or Blackberry - I've witnessed all three. It has been painfully obvious that the browser based frontend takes a long time to download on a mobile device. I am pretty sure this is because of the javascript download for SmartGWT.
So, I would like to look at alternatives to SmartGWT.
What I like about SmartGWT is that it has a reasonable look and feel out of the box - I don't need to learn any design or css and it has an office application look. This is considerably better than the GWT built-in widgets, which just get a blue border. The better look-and-feel is why I went with SmartGWT early on. However, the slow load times are killing me on these mobile demos. So now I want a fast loading widget alternative that has good look-and-feel out of the box.
The features I care about are: tabs, good form layout, Google maps API integration, grid data viewing. If those are all available in a library that loads quickly on a mobile device, then that's the library I want.
Your best bet is probably just to use the standard GWT widgets and learn how to style them to your liking. SmartGWT's automatic styling is nice, but as you've noticed, it comes with a price.
Even GWT's standard widgets, which are lighter, could still be trimmed down for maximum speed, so if you're really adventurous you could roll your own light-weight widgets that do only what you need them to do.
You can try mgwt-also called mobile gwt...(available at http://code.google.com/p/mgwt/ )
You could write a wrapper for jqTouch... that would be cool.
Write a seperate View for your model, specifically for either a) mobile devices or b) iPhone speicfically (see "iui" f.ex.). That is the very best way to do it.
Related
I'm a big fan of Zurb Foundation. They just released Zurb Foundation 4 which was redesigned to be mobile first. I'm fairly new to responsive design taking into account both mobile, tablet, and traditional desktop experiences. I'm trying to wrap my head around how best to manage my site's content for these different devices. With Zurb Foundation 4, you can hide or show content based on small, medium, or large device sizes. So, it seems with Zurb's approach you drop all of the content down to the device and let the CSS decide what content to show depending on device (this is responsive design).
My question is why do we have to drop all of the content to the device? That seems like a waste of processing on the server, a waste of bandwidth, a slower experience as the browser handles the content some of which may never be shown to the user because of the device they are using. Am I missing something? Wouldn't it be better to go back to the server and let it send content to the client that's appropriate for the device type? Shouldn't we be concerned about mobile user's data plans and not send down content that's not appropriate for their device type? All the examples that I've seen on responsive design has content for desktop and mobile/tablet downloaded to the client which seems to be a waste.
I'm developing a time entry application that has a different user experience based on the device type. Desktops (when in full screen) have a more detailed data entry experience whereas mobile/tablets have a different experience because of device real estate is smaller. I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate? I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
Am I on the right track with my jQuery approach? Am I missing something regarding responsive design and needing to tailor the content to the device? Any ideas, suggestions, and guidance is appreciated. Thanks.
Mobile First with Zurb Foundation is basically a philosophy change by the Zurb team and if you want do develop a responsive site and not take a Mobile First approach then I suggest using Foundation 3 which is still available and fantastic. There is a book that I am reading that gives a great pitch for Mobile First, called Mobile First by Luke Wroblewski who is also listed as an adviser to Zurb.
here is an article by the same author that might be interesting:
http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first
Basically: the premise is that you start your development and design for a mobile, meaning basically an iOS or Android style browser and then add features.
So instead of starting with a desktop / tablet experience and removing things as was commonly done with .hide classes in foundation 3 and could still be implemented in this way with foundation 4, they suggest using .show classes to add additional content.
This can be taken way further by using Compass and Sass Mixins. There isn't a lot of great documentation on how to do this, but you can basically keep your markup semantic, apply an id rather than a class and use the mixins to apply it to that id. There are advantages here in speed traversing the dom for an id vs. a class so it can be a good way to go.
Note: foundation 4 is using the drop in replacement (there are some limitations) for jQuery called Zepto. You can replace Zepto with jQuery if you really need it in foundation 4 or use foundation 3 instead. Zepto is much more lightweight and thus suited well for mobile.
As for it being faster by using jQuery to async load the data (I am assuming) based on the size of the browser, that is one way to do it. I am not sure if you are going to have a huge speed increase here. There are many strategies, pagination, async loading more data on the fly, and it depends on how you arrange the UX / UI around that data.
There are also many other issues such as caching resources, CDN, etc. that are typical in front end engineering that might give a faster load time. One resource you can check out related to this is ySlow.
There are also many design patterns such as off canvas slides, the 3 line (hamburger menu), loading more data on scroll, stateless apps, that can allow you to have the same functionality in a mobile app. If you go stateless, after the initial page load other pages should appear to be almost instantaneous.
I think the question here is more philosophical, in do you need all of the features, which is one thing that I believe taking a Mobile First approach is trying to approach.
Another thing to think about is the perceived loading time. I think I read about this is Seductive UX (another great read) but the faster you can get the page up with a loader or spinner, the faster it is perceived to be loading, even when in actuality it can be loading slower.
As a final note, if you plan on using foundation, you might look into using jQuery/Zepto with Modernizr to pull from the same media queries foundation is using. That way you don't duplicate or create something that is inconsistent with the rest of the responsiveness.
I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate?
It doesn't sound like a good approach do you take orientationChange in to account?
I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
If you are on most tablets visiting the website in portrait and change to landscape you'll have to download the >768px UI after already downloading the <768px UI.
The mobile first approach in zb4 (with media queries) allow you to prevent stuff that belongs to big devices to be downloaded in to small devices. Basically you start with mobile styles and if the device meets the conditions you set on your mediaqueries (you can have much more breakpoints than the zf4 framework gives you by default) then the next rule jumps in.
I have worked in several 'responsive' projects even back in the pre-mediaqueries days were I use javascript to measure windowsize
Regarding javascript and like #powjames3 said zepto is much lighter / faster than jquery and if you could write your own javacript functions will be much better than using a over-bloated library.
Nowadays I do mobileFirst responsive webapps and websites use a mix of user agent sniffing ( sometimes to decide what image src or script / style src to deliver), despite the decision of the user agent tests i always serve mobile first mediaqueries, and conditionally loaded content.
"As Ethan Marcote (and John Allsopp before him), were right to point out, the inherent flexibility of the web is a feature, not a bug."
Here are some resources that might put you in the right track:
User agent parse and detection:http://mobiledetect.net/
Tutorial http://www.html5rocks.com/en/mobile/responsivedesign/ that covers:
Why we need to create mobile-first, responsive, adaptive experiences
How to structure HTML for an adaptive site in order to optimize performance and - prioritize flexibility
How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
What we could do to further enhance our adaptive experience
Hope it helps
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.
With all the different mobile phone browsers and the mobile market being so diverse I'm having a hard time deciding on a way to create a text based online game for mobile phones.
I was thinking about using HTML / CSS / Javascript for front-end and Python CGI for server-side (with a DB).
Now this seems like a very obvious choice... BUT I'm having a hard time finding the "limits" to each one... by that I mean at what point will a popular web browser stop 'supporting' a technology. Like when it comes to HTML I assume you cant use HTML5 features in all popular mobile browsers... or maybe some allow JS but not jQuery... or maybe some don't allow some common CGI features or DOM is weird... I do not know.
I have read a few different tutorials on various mobile web browser development but nothing really helps to answer my question.
So what I'm asking is basically:
What languages/technologies do you recommend for a Text based mobile online multiplayer turn based browser game that will need to dynamically load a lot of info?(front front end to back end)
What are some common limitations between popular mobile web browsers I should look out for? I want to be compatible with all popular mobile web browsers.
One of the things to keep in mind is that there is a plethora of mobile browsers out there (Look here for details). So you are probably better off starting with iphone, android and blackberry and maaaybe opera mini browser support. These browsers have sophisticated java script support and you would be able to provide a good user experience. Later on you can work on supporting other mobile browsers.
Regarding your questions, if you look at these browser specs (and they are readily available on Internet) you will see that you will be able to use quite a bit of web technologies (HTML, CSS, Javascript, etc). That wont be a showstopper for you. Designing for a small screen, and a great user experience on small screens, that will make or break your game.
I'm trying to determine what kinds of interactions a mobile website can handle. For example, I obviously can't track page-level dragging operations because this scrolls on mobile browsers. So, I'm looking for demos that can tell me what interactions work, how well, and hopefully for information about how consistently that is across mobile devices. For example, I'd like to know if I had a page that fit on the screen, would my page elements receive mouse move events when I drag my finger? I could test that myself, but I figure there are probably lots of things that could be tested, so I was hoping there was something like the ACID test, but for mobile UI interactions.
I don't think I've ever seen such a thing, but the thing to remember is the browser is just one key factor in the interaction between your application and the user. The capabilities of the device itself is a large part of what you can and cannot do. For one, the iPhone has a full JavaScript stack and CSS rendering ability as well as the ability to "click". However, on a BlackBerry you're going to lose a lot of that CSS and JavaScript functionality. Also, with Nokia handsets you're going to be dealing with a different beast. The best way to develop for something like this would be to either use a framework/device template like the ASP.NET Mobile platform, or to go as close to basic HTML as you can.
There is no silver bullet, and you're just going to have to try to cover as much market share as you can. One thing I can share, is that the more standards compliant and semantic your markup, the better it will render across the devices. Sometimes, you can even get away with just coding the site once provided your site degrades well when CSS and JS are not available.