Blueprints for [an awesome] web-app

What makes web applications fun and easy to use? Following the best practices of a regular website can make Single-Page-Applications shine.

Here are a few little-big details we use at Torii to make our users a bit more happy 😀.

Links everywhere

Just like in a regular website, anything we can drill into should be a link to the page where more information is available. This makes the usage of the applications much more fluent, as you can pretty much get from anywhere to anywhere relevant with a single click.

This is similar to Wikipedia, where every article has many links inside to other relevant articles. This is what keeps readers in Wikipedia for hours.

Examples:

• When the application says “Configure this from the Settings page”, make sure Settings page is a link, instead of sending the user in search of the “Settings” option somewhere in your app.

• When showing a message such as “your email was sent to 20 users”, clicking the 20 users text should lead to a page (or popup) where the list of users is displayed.

Every page is shareable

No matter where you are in our app, if you copy (⌘+C) the link and send it to a friend who has the same permissions as you — you will both see the same screen. That was very important to us, as people can easily share pages without a complex sharing feature. They can just copy the page URL and send away in their favorite channel: email, Slack, etc….

We also get the other benefits of regular links:

• Refresh the current page and stay in the same place (⌘+R)

• Bookmark the current page for later (⌘+D)

• Open each feature in a new tab (⌘+⇧+T)

• Copy the link address (⌘+C)

Every page is completely searchable

Searching (⌘+F) on a single page of a website is a very popular feature of any browser. I also use it in web applications — to find content on the page, find menu items, find where the settings page link is, and other things I expect to be on the page.

Sometimes web applications make optimizations that break the built-in search option. One such optimization is called windowing (or virtualization) — displaying 1,000,000 table rows on a page can slow down your browser, so apps only show a small “window” of the table and move that window as you scroll the page.

This breaks the built-in find option, as some results may not currently be displayed and therefore will not be found.

Our solution was to add a search box to every page that works by using… ⌘+F. This keyboard shortcut will now lead to a dedicated search box. Don’t like our search box? Another ⌘+F will bring up the browser’s search option. Best of both worlds.

Everything is copyable

Any element you have should be selectable and copyable. Lots of interfaces today will fire a click on a button if you try to select its text, but sometimes the interesting data is right there on that button.

There’s nothing more frustrating when a web application prevents us from doing what we’re trying to achieve.

Every page is printable

What’s a better way of taking a snapshot of your website other than simply printing the page (⌘+P) into a PDF? We make sure to include styling specific for printing that gets rid of all the menus and give the content maximum space.

Less loaders, instant content

Web applications require data to show their content. When users visit a page for the first time, a loader is usually unavoidable. However, the next visit can immediately display the cached information and run an update in the background. So switching between pages is instantaneously and avoids showing loaders all the time.

This is quite simple to achieve with state management libraries like Redux, where the data is stored when moving from one page to another.

Conclusion

Build great websites, build great apps.