They say the small things will make or break relationships. That is true, especially for web development, where a simple line of code may make a difference and improve the user experience and the visitors’ connection with your website.
In this article, we will review five small things that require a line or two of code and that will improve how users perceive your website. Some of them may not make a substantial positive impact, but their absence may have a negative one. Don’t underestimate them.
These are the small details explained in this article:
- Theme colors
- Accent colors
- Input types
- OpenGraph
- Text-Wrapping
1. Theme Colors
The theme-color value suggests a color browsers should use to customize their display while navigating the site. This means adapting the browser colors to match the specified theme color. For example, change the address bar color in a mobile browser or the default background color in a desktop browser.
This is more of a mobile feature, although it’s coming to desktops, too. Currently, it is supported by Safari and Chromium browsers on mobile and Safari on desktop (with Chrome behind a flag). And it is super easy to implement using a <meta> tag:
<meta name="theme-color" content="#f00" />I already demoed this trick when creating a clone of a McDonald’s app. Then, I needed the top bar to be dark because the game was supposed to be used in a dimly lit room.
How does it improve the experience?
We can create a sense of continuity and uniqueness by associating one color with our websites (and getting away from the norm and default toolbar colors) or associating colors with sections, providing a more fluid experience.