Your web app’s user interface (UI) is the first thing that users will see and interact with, so it’s important to make a good impression. A well-designed web app UI design can help you attract and retain users, and even increase conversions. Here are 10 things to consider when designing a high-converting web app UI...
On a recent web app project that we’re building here at kc web design kent we needed to utilise HTML5 localStorage quite a lot. With the complexities of the forms we were building we also had to manipulate the DOM a lot and create whole batches of new form fields based on user input. One of the inherent problems of creating or cloning form fields using Jquery is that those new form fields aren’t accessible in the normal way. You have to use Jquery .live events to reference newly created DOM elements as click functions will not work.
Local storage issues
While building this web app at kc web design kent we wanted to use HTML5 local storage to be able to keep a reference of all data locally so that the web app could be used in off-line situations. Local storage seems like the obvious choice but we ran into problems with form fields that were created by the DOM. Local storage just would not see these new fields and no matter what we tried we couldn’t get the fields to save. There isn’t a lot of detailed information around on local storage problems like this and after a few hours on Google we came up empty. So, we decided to get our heads together at kc web design kent and build some kind of work around.
A kc web design kent fix!
After trying a few failed attempts to force local storage to see the newly created fields we decided to take a different approach and use Jquery to ‘listen’ for any changes on form fields created in the DOM and then force them to save to local storage with the correct name and value. We tried a few complicated methods but found the best way was to keep it simple. If you come across the same problem then maybe this will help. Just set up a global event to listen for all form fields and then when they change manually set the local storage values. Seems too simple to work, but it does.
$("form").on('change', function(e) {
var $this = e.target;
localStorage.setItem(e.target.name, e.target.value);
});
Owner and Director at kc web design ltd
With over 20 years of experience in web design and development I've successfully led teams at both global tech companies, including Fujitsu, and my own ventures, such as kc web design ltd and music startup Go To Hear. As the Founder/Director
of kc web design ltd and Founder and CDO of Go To Hear, I have spearheaded the design and development of top-class website designs all over the world.
of kc web design ltd and Founder and CDO of Go To Hear, I have spearheaded the design and development of top-class website designs all over the world.
Latest posts by Paul Ledbrook (see all)
- Music Streaming UI/UX design version 2 - December 4, 2023
- 10 Things to Consider When Designing a High-Converting web app UI design - September 20, 2023
- How to Use Web Design to Improve User Experience - September 6, 2023
