livebooks blog

Your website is the online extension of your brand, and as such, it should follow the same visual guidelines as your entire business. While your logo is your own trademark that distinguishes your brand from your competitors, it alone does not tell your business’ story, its values nor does it depict the entire picture.

The tone of your business voice is an important aspect of how your market relates to you. Your marketing campaigns and how you choose to run them are indicative of your business’ core values. The fonts you use when addressing these messages can become trademarks of your brand. And the colors – think about the Coca-Cola red – not only is it unique, it’s also recognized by millions of people all around the world.

Colors matter when you create your brand, just as much as they do when they accompany your services and products. It is the fastest way to create a connection between your brand and your audience. This precise reason is why the liveBooks website templates can be customized beyond their initial state.

Let’s focus on adding borders to the images you upload on your website. These borders are a great tool to use that give each image its own presence on your website. They can be white and thin, which goes well with any website that has a color background, they can be colorful and bold, or anywhere in between.

There are two ways you can go about to adding borders to your images.

1. Sitewide borders – In your design editor go to Sitewide – Images. Enable Show borders and define their color, opacity and width. This will add borders to all images on your website. 
2. Gallery borders – In the design editor go to the page with the gallery or image you want to customize. Scroll down to the image settings and enable borders.

If you added site-wide borders and want to disable them on specific pages, you can do so by following the second set of commands. When you’re happy with the result, publish your page and the changes will instantly become visible.

When changing your colors you have to make sure you’re picking the right one. Going solely on visual similarity does not guarantee you’ve made the right choice and you need consistency in your brand. One reason you might not pick the right color is your monitor’s colors: sometimes it’s calibrated and it shows the precise colors you need, but most often it’s not.

That’s why you need to check the HEX code of your brand colors and add it when using the design editor. If you know the name of your color, you can find its HEX code here. In our design editor you can either use the HEX code, or the RGB (red-green-blue) inputs for your colors.

So what are you waiting for? Give this feature a try! Remember, you can always save your design before making drastic changes to your website, so your work is always safe.

Don’t have a website yet? We offer a two week free trial for all our websites, so you can play around our editors and create the perfect website for your business.

You might have noticed the images on your website display different colors depending on the browser you’re viewing them from, or whether you’re using a mobile device. The differences are subtle and they are more in the lines of saturation, but they’re there. And while you don’t know what device your clients are using or whether their screens are calibrated, you need to do your best when saving your images for the web to reach a satisfying compromise. The source of these slip-ups can be tracked down to how your images are converted and whether or not they contain an ICC profile.

sRGB and ICC Profile

In the pre-mobile times, all monitors and browsers were presented with pretty much the same color scheme – Standard Red Green Blue. If you saved your images in sRGB, it was likely your images looked the same on all browser desktop versions and on all monitors.

Now, with the introduction of tablets and smartphones, another layer of identifying and displaying color has become available, but only on desktop – the ICC Profile. You must enable the Color Profile in your image editor software when you save the image for web. This will enable all browsers to read your image settings as they truly are, and thus, display them correctly.

Alas, the mobile devices still use mainly sRGB, with the exception of Safari for iOS, which also reads ICC Profiles. So before you save the image, make sure to convert it to sRBG.

The Firefox singularity

While Firefox is designed to interpret ICC profiles, its default display values are as of this time inaccurate. Perhaps a future update will fix this value, but for now, here’s what you ca do to force the browser to read the proper ICC profiles.

Write about:config in the address bar and gfx in the search bar that appears below. Look for gfx.color_management.mode and click on it to change the value from 2 to 1.

This will activate a complete color management in Firefox and if your images contain ICC profiles they should be displayed correctly on your monitor.

Unfortunately, until there will be a unification of display settings for all monitors and all browsers and platforms, small differences are bound to appear. And since you cannot control what device your clients are using when viewing your images, you have to do your best to set them up in the most common format: saving them in sRGB and adding an ICC Profile to each of them.