I have a reoccurring problem with Safari and Chrome on iOS freezing when a Select is focused. I've seen some older posts about this but with no resolutions.
I have a page with a fairly high number of HTML inputs and selects. I tried to design the page in a way to use DIVs that look like inputs to lower the overall count, but some of them are still needed.
Here is the page in question:
http://www.pokedit.com/pokemon-maker/index.php
The page doesn't always freeze when focusing, but when it does, it's for a long time and the browser usually crashes.
Info:
There are some selects on the page that are display:none or inside hidden DIVS. Some of those can be revealed by changing different toggles.
There are no input type="hidden" inputs on the page.
The freezing problem does not happen in Android, Windows, Mac, or Ubuntu in any browsers that I've tested.
Since Apple is an amazing company and designs their software well, you're going to have to compensate by heavily altering your design even though it works fine in every other modern browser. Think of iOS as the EI 6 of our time. It's sure to leave a legacy.
Now it's back to the drawing board for you and anyone else with this delightful technicality. You're going to enjoy wasting lots of time writing code to do things with basic functionality that selects and inputs are already supposed to do. That will ensure your pages can load just a smidgen slower whilst wasting a bunch of time and effort writing extra code for no reason at all.
Special thanks to Steve Jorbs.
I know that we do not have a table\datagrid component for flex mobile apps. Currently I am developing an iPad app, in which I am using datagrid(though it says it's not optimized), which works quite well on iPad. There were no scrolling issues(which I felt would be present). But only problem is while switching the tabs below, it takes very long time to move from one tab to another(it just hangs for few seconds before moving). When i removed datagrid, it was working fine again. Switching was fast as expected.
Hence i do not want to really use datagrid. I came across an alternative which says to use List\DataGroup with itemrenderer. But not sure how we can display around 10 columns. We can use a list with a label item renderer and we can adjust the space between each column value, something like this:
data.firstColValue data.secondColValue .....
But with this, I will not get the datagrid's column width increasing\decreasing functionality, which is very much needed in this project.
Is there a way in which we can remove heavy functionality and retain only core functionality(which is needed here) from datagrid? If not, are there any other alternatives with which I can achieve desired result?
Apache Flex has accepted donation of Mobile Datagrid component, so you may expect to see the component baked into future release of Flex Framework.
Designing a web application with ASP.NET MVC I asked myself how can I also please those people using a smart phone, ipad, etc.. (everything thats touchable...) and not only a desktop/notebook with a browser.
How can I develop a better user experience.
I would be pleased to hear about technical advises concerning the asp.net mvc framework so I can later implement your suggestions concretely.
There are a few levels of friendlyness. You can start with the basic "does this site render well enough to be usable in a mobile browser?" This really should not be a problem for anything new that is using modern web standards but older sites could have problems. Corallary to this is "is my site a bandwidth hog that takes forever to render over 3g because each page is 14mb of animated GIFs and spaghetti HTML?" Or "does my site make mobile devices melt due to aggresive scripts?" Luckily this set is pretty easy to deal with -- modern websites tend to handle this pretty well by default.
The second level is "does this site do anything maddening from a touch perspective." The big thing that can clip you here is hover based menus -- there is no hover on a touch UI. The other common issue is using small links or buttons that one can't hit at least without zooming in to crazy levels. The solution here is testing -- some issues are obvious to all but you won't see some things until you are interacting without a mouse.
The final level is using a touch UI for fun and profit. If you make it this far, you are doing better than many web publishers in this day and age. What is involved here is using touch-friendly UI tools, such as jquery mobile, to handle swipe events and other touch features to make things work more like one expects with a touch UI. An easy example would be making an image carousel swipe-able rather than having to wait for the buttons.
Make the interface chunky - big icons are easy to click, text is very difficult to touch accurately. Set a minimum size for every element, at the very least as big as the individual keys on an iPhone/android's virtual keyboard and preferably much larger.
Ensure that the most relevant options are near the top, and after that the aim is simply to make it intuitive. Fewer menus are generally better.
Go through my tutorial ASP.NET MVC 4 Mobile Features
create mobile-specific views.
-use the HTML5 viewport attribute and adaptive rendering to improve display on mobile devices.
Our company develops big corporate solution for business (web-site). After approving to support Apple iPad we saw, that our site is very slow on it. So, I was tasked to optimize performance for iPad by optimizing GUI (Html, JS...), because server part of application is pretty fast.
I've found some solutions tricks with customer's approve:
* Reduce grids columns count and leave only the most useful.
* Turn off all the animation.
* Decrease resizing as much as possible.
And of course, I minified all the scripts and stylesheets.
Can you make me some additional advises how to improve performance?
There's several things, many of which apply to desktop web as well as they are just part of good practice.
In no particular order:
Remove extra whitespace and HTML/CSS/JS comments
GZip all text based content (HTML,CSS,JS)
Optimize all your images (e.g. use a service like http://Smush.it )
Move your images/static content to a separate server (increased HTTP pipelining), and don't serve cookies on that server
Don't serve up anything to "mobile" that they don't need (where possible)
Don't scale down images on the client, served scaled down versions from the server
Since most mobile browsers handle CSS well, convert "lists" of data that render in tables, to use unordered lists etc.
Serve common scripts like jQuery from a CDN like Google
most mobile browsers support some kind of offline caching, or local lightweight database - if there is anything that you can cache to reduce future loads consider doing so
If you want to get really fancy, you can do things like not directly loading images... and then checking on the page which images are currently in view (or delay slightly), and loading them as needed... the helpfulness of this will depend highly on the content
Consider delaying the load of search results if applicable (e.g. like a Twitter stream that might only load the first 20 items, then only load additional items on demand.
Some of the practical things which i would like to tell are;
Avoid use of iframes on your pages. They do not work well on iPad.
Use a library like Sencha touch which is highly optimized for the iPad.
Make links or buttons to have large touvh areas, as users can get frustrated with incorrect link clicks..
Avoid use of CSS absolute positioned elements.
Also to add a few more points;
It is best to use the meta viewport setting as width=device-width...This ensures that your viewport is set based on your device and not hard-coded.
Avoid use of CSS :hover properties in your iPad CSS...They can cause unnecessary issues (false hover's)
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Stackoverflow User Luke wrote in this answer:
The boundaries between desktop and web
applications have really blurred.
Whilst once upon a time the nature of
developing for the web was totally
different to developing for the
desktop, nowadays you find the same
concepts [...] cropping up in both.
Since I am continually looking to improve my existing web applications, I'd like to know which common features of "classic" desktop applications do most web application miss?
For example, most desktop apps prompt the user to save unsaved data leaving a page or closing a window - a feature that many web applications miss. It could be that some feature aren't even necessary or are compensated in some other way. Maybe there are features which can't be implemented in (a classic) web application?
The thing you'll never be able to imitate in a web application is the low latency and instant feedback of a well written desktop app.
Even with the ajax techniques to load only parts of the pages, there usually is a noticeable delay in the response (or maybe it's just me and my narrowband). You're (for at least a few more years) just bound to the orders of magnitude of speed difference between network access and no network access.
The Undo button.
Right-click application-specific pop-up menus is the thing I've noticed most.
Usually right-clicking on a browser application will bring up the browser pop-up menu rather than an application-specific menu.
Keyboard support on most web applications is weak to non-existent. This is getting better than it used to be but you will still find plenty of mainstream sites that can't even get the tab order to work correctly. Most sites don't handle focus correctly and force users to use the mouse to activate even the simplest of data entry forms. You can usually forget about accelerator key support.
You can't pull the plug when the application hangs. (Yes, I'm serious)
For fairness is to mention, that desktop-applications miss a common feature of webapps: XSS (Cross-Site-Scripting). ;-)
Support for Big Files.
Integration with the client OS.
Support for special Input/Ouput Devices.
3D or anything else computationally intensive (specific to each users).
Advanced graphics: I've written a C program that draws a surface joining Bézier patches in a simple window and I had to tweak it in unimaginable ways to get it to draw in a decent time. I can't imagine that being ported to the web.
I mean, doing advanced graphics is not what every application needs, but if displaying nontrivial pictures is slow, then we shouldn't even talk about animations.
One Proper Macintosh menu bar support.
If you're a long-term Mac user, even with two large monitors, you have muscles that swoop to the top of the screen for actions, comfortable in the knowledge that the infinite depth effect will kick in and you can slide along that edge, picking from the menus.
No in-browser app can deliver that experience.
Two Command-keys, which is a side-effect of the menu bar not belonging to the app but goes a bit beyond that - good desktop apps have command-key shortcuts (accelerators to you Windows guys, I'm not just talking the Mnemonics which work with alt-key support). Great desktop apps show little reminders next to the buttons that have accelerators, when you hold down the appropriate modifier keys and wait a fraction of a second.
Three Smarter tables. There are a lot of apps where some kind of spreadsheet view works as a paradigm, including editing, sorting, resizing columns. I think I've seen some odd examples of partial support but a good table in a web app is still a bit of a dancing bear.
Four Used to be right-clicking but I'm finding more and more apps that do this properly, like Kerio's excellent webmail engine. It is still missing in enough web apps to be worth emphasizing.
Displaying application request/process status or messages on Taskbar or Status bar.
For the web, Javascript can be used to update text on status bar, but its not a common usage.
The usability benefits of standard GUI elements that look and behave uniformly across applications.
(Although this will surely change as web app developers adopt certain GUI elements and patterns that are considered best-practice, notably by eventually using the same libraries, e.g. for drag-and-drop.)
A common feature of "classic" desktop applications is the ability to work without an internet connection. I miss that in Web applications.
For example, MS word works without an internet connection, but you need to be connected if you want to use Google docs.
Of course, it does not matter if the application requires an internet connection anyway. For example, if its a feed reader, I have to connect to the internet, whether I use a desktop reader or an online reader.
Drag and drop from Finder/Explorer into the web app. And vice-versa.
The ComboBox is the most notable widget omission.
On the web, lack of desktop features such as popup dialogues is actually a boon, making for a simpler interaction experience. Think also of the autosave draft feature of Gmail vs. the desktop convention of prompting the user to save.
So consider carefully before trying to reconstruct that desktop feature in your web app.
Decent help. Seems to always be an afterthought, if it's even implemented...
Desktop integration (may change if we get online desktops)
Offline use (does exist but it is early days)
(Reliable) Responsiveness
Reliability generally (somewhat debatable as there are pros and cons - e.g. your data is probably better backed up online, however security generally is less in your control with an online app, and if the network connection fails an online app tends to freeze or fail horribly.)
Blue Screen of Death
A task-specific UI with no extra controls. A web app, in addition to all the controls of the web app, also has back, next, bookmarks, etc buttons. You end up with an extra inch-high set of buttons that don't directly support the task at hand.
This isn't necessarily a programming feature, but the audience of an application will be different. For a web application you are cutting out a complete segment of your audience (those with slow or no internet access). While this is a relatively low number, it is a difference between a desktop application and a web application.