UI Posts

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional software engineers in the Toptal network.
Nermin Hajdarbegovic
What Does Force Touch Mean For UI And UX?

Force Touch is not a new idea. BlackBerry experimented with the concept back in 2008, and a few Android phone makers also examined the possibility of using Force Touch on their products. In fact, Force Touch support has been a part of Android for years; it was introduced in Android 1.0.

Continue reading →
Matias Hernandez
Sass Style Guide: A Sass Tutorial on How to Write Better CSS Code

When working on big web applications as a team with other developers, code needs to be scalable and readable. This can be a challenging process when it comes to CSS, although preprocessors like Sass are available. But only using preprocessors will only get you so far. In this article, Toptal engineer Matias Hernandez presents a style guide with advice on how to improve the way you write your code.

Continue reading →
Marcelo Mazza
Embracing Sass: Why You Should Stop Using Vanilla CSS

CSS preprocessors have been around for quite a while now. These tools, among many things, promise convenience in writing style sheets for the web. However, not everyone is taking advantage of these utilities, and is still resorting to writing vanilla CSS. In this article, Toptal engineer Marcelo Mazza discusses some of the reasons why he thinks Sass is the way to go and why you should be using it in your projects.

Continue reading →
Nermin Hajdarbegovic
The Industry Could Do Without Pixel Density And PPI Marketing

Like it or not, once you start chasing pixels, you are more likely to end up with a bigger screen. This means more backlighting, more GPU load, more juice, and a bigger battery. Huge phones with insanely high pixel densities are a triumph of cunning marketing over sensible engineering.

The trend is not making hardware better in a noticeable way, yet it’s making it more expensive and less efficient. It is no longer improving the user experience, either, and in some cases it is even degrading it.

Continue reading →
Lucijan Blagonic
Make Website Design Decisions in Your Browser: My Process for Designing Websites

With an ever-growing device landscape, it is becoming increasingly difficult to design consistent user interfaces across all devices. Using paper and pencil, or design tools that do not properly mimic the dynamic nature of web browsers across multiple platforms and screen sizes, can sometimes lead to obvious inefficiencies. However, the web browser can be used as a critical and efficient tool for designing websites and interfaces.

Continue reading →
Tomislav Bacinger
The 10 Most Common Bootstrap Mistakes That Developers Make

Bootstrap is a powerful toolkit. It comes bundled with basic HTML and CSS design templates that include many common UI components. Most of the important pitfalls are mentioned in the Bootstrap documentation, but still some mistakes are pretty subtle, or have ambiguous causes. This article outlines some of the most common mistakes, problems, and misconceptions when using Bootstrap.

Continue reading →
Tomislav Bacinger
What is Bootstrap? A Short Bootstrap Tutorial on the What, Why, and How

If you’re doing anything web related, chances are you’ve heard about Bootstrap. Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created by (and for) Twitter. If by now you still don’t know what Bootstrap is, or you just want to get a better overview of what it is and what it does best, you’ve come to the right place.

Continue reading →
Nermin Hajdarbegovic
Android TV Development – Big Screens Are Coming, Get Ready!

Google wants to bring Android to everything from phones and watches, to cars and smart television sets. Unlike Google TV, Android TV is much closer to standard Android. It runs Android 5.0 (at least in the initial launch version) and can be used on new TVs, as well as on standalone devices.

Android TV is not just about improving the way people consume TV content, it’s more about changing the way they do it.

Continue reading →
Lubos Volkov
A Design Workflow Tutorial for Developers: Deliver Better UI/UX On Time

Working with a great designer can be an invaluable asset to any team. With clear communication channels, and free-flowing co-operation, the designer should give you everything you need to speed up the building process and limit questions and confusion as much as possible.

What can you, the developer, do to ensure that the product you have built is delivered in a timely manner without sacrificing the quality of the user interface and user experience?

Continue reading →
Antonio Bello
iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code

I often hear iOS developers ask some variant of the same key question: “What’s the best way to develop a UI in iOS: through Storyboards, NIBs, or code?”

Answers to this question, explicitly or implicitly, tend to assume that there’s a mutually exclusive choice to be made, one that is often addressed upfront, before development.

I’m of the opinion that there’s no single choice to be made. Rather, each option has its strengths and weaknesses—and there’s no need to use any one of them in isolation.

Continue reading →
Tomislav Krnic
Introduction to Responsive Web Design: Pseudo-Elements, Media Queries, and More

Nowadays, your website will be visited by a wide variety of devices: desktops with large monitors, mid-sized laptops, tablets, smartphones, and more.

To achieve an optimal user experience, your site should be adjusting its layout in response to these varied devices (i.e., to their varied screen resolutions and dimensions). The process of responding to the form of the user’s device is referred to as (you guessed it) responsive web design (RWD).

Continue reading →
Tom Kozacinski
How a Single Front-End Engineer Can Replace a Team of Two

Demand within the web design scene today has changed over the past few years: designers with front-end skills, and front-end developers with design skills, are more and more in demand. Yes, you could argue that the jobs are completely different—and maybe you straight-up don’t like one of them—but truth be told, in my six years as a freelance web developer and twelve years as a designer, I’ve learned that it’s much harder to get by as just a web designer or just a front-end developer.

Wearing both hats has a lot of advantages: from a professional perspective alone, you can find work more easily and charge a higher rate because you’re bringing more to the table.

Continue reading →