WEBIX BLOG

An app logic well done is only half a job accomplished. The other half is designing such a UI that would enhance the functionality of the app and make it rational and easy to navigate. Besides, it’s important to create a nice-looking interface to make apps recognizable and visually appealing.

Gmail has one of the most recognizable interfaces on the web. It’s neat and clean and can be used to rationally organize the massive app contents. In fact, Gmail UI can be used not only for email management but for other tasks as well. If you would like to know how to recreate such an interface and don’t know where to begin (or in case you are just curious), follow me. I’ll show you how to implement Gmail’s approach to designing interfaces with the Webix UI library.

When the content of your web app gets bigger and bigger, it’s a good idea to split it into multiple screens. This, in its turn, demands convenient navigation, so that users could quickly find what they need. User experience isn’t supposed to turn into the quest for the Holy Grail.

Numerous navigation patterns have been designed to achieve this honorable goal. So if you are looking for ways to make your apps more handy and good-looking, join me on my ship, and together we’ll find our way in the sea of In-App Navigation and visit four remarkable islands of the Webix Archipelago: Sidebar, Tabbar, Top Menu, and Winmenu.

I guess, the master-details pattern needs no special introduction for practised web developers who create business apps that work with users, sales and such. Nearly any real life app has such a relation model and demands clear and easy navigation and inspection of information. Whether you plan to develop an email app, an address book, an RSS reader, a CRM, a social net app or any other app that is based on a list-details layout, the master-details pattern is a relevant solution.

Webix UI Library provides a number of ways to implement this technique: from simple to more complex, from pretty awkward to really handy ones. I’ll demonstrate them all while creating a mock email management app, and at the end of it all, you’ll see the most efficient, reliable and good-looking solution. Well, without further ado, let’s get down to the details of our master plan.

No one is exempt from making mistakes and getting browser crashes. This can be really annoying, if you have worked hard for a long time filling in an extremely complicated form, looking for data in a big spreadsheet with complex filters or have just set a nice and convenient layout scheme to work on a web page — and everything is lost just because the page is reloaded or closed. It is a good idea to save and store temporary data to rescue your users from such a disappointing experience and help them not to lose their time doing everything all over again or readjusting their working space every time they open the same page.

If you create applications with forms, tables and complex layouts and want to help your end-users restore the data that haven’t been saved locally or sent to a server due to some accidents and mistakes (page reloads, browser crashes, laptop shutdowns, etc) or just want to let them preserve the state of an app for any other reason, I will show you how.

Bots are around us. Some of them are good and they help us in everyday tasks, but some are evil and attempt to steal our information. If you are familiar with web development and forms, in particular, you may have faced certain security issues like abusive form input from bots. Measures need to be taken to make your website or web application safer, and using reCaptcha is one of them. Despite Webix does not offer such a widget of its own, there is a solution to it.

Let’s take a closer look at this way of protecting websites and web applications from spam and abuse. I will not discuss the server side of reCaptcha validation in the article, I will only show you the client side logic.

This is a guest post from our friends DevelopIntelligence.com

Pity the poor table. Designed originally for the purpose of displaying row and column data, it has often had to serve double duty as a generalized layout tool, despite the many quirks that tables have for layout purpose and the fact that syntactically, a table is intended to contain data. Other solutions involved absolute positioning of display blocks, but these are often highly problematic in devices that can have windows of varying dimensions.

Being keen on data management and visualization, Webix always stays flexible and open for interaction with other frameworks, so your creativity will never be limited. The UI library can easily welcome your favourite maps, text editors and visual data-driven tools like Sigma, Raphael and D3 charts in addition to JS Chart widget.

When reading Webix documentation you cannot but notice the variety of terms like component, ui control, ui widget and complex widget used alongside with each other. You may easily wonder whether they are interchangeable and how to distinguish between them. In the article below, we’ll put them all to order.

Only good-looking and powerful tools for interacting with users can help developers conquer the modern web. Forms are true visitor cards of your application, as the positive experience during filling them adds a lot to user loyalty. Let’s find out how many carma points you can achieve by choosing Webix Javascript form.

Performance is a key feature of modern web applications. It is a mountain you have to climb to win your customer’s heart, but sometimes its top remains unreachable due to heavy tasks the application has to perform on the client side.

Take, for instance, Webix Pivot table JS widget. It does a hard job of calculating and aggregating data and may leave the UI unresponsive if the data is too big. Fortunately, from version 4.2 the widget comes supplied with an HTML5 Web Worker, which takes all the data processing into a separate thread.