Every new application created with the Oracle WebCenter Portal framework and ADF comes with default styling that you extend from an out-of-the-box skin, like Skyros. But if every time we created an application with the default style, it would be a very boring and monotonous digital world. That’s where skinning comes in to brand your application to your company guidelines!
Why branding?
First of all, it promotes recognition of your brand and sets you apart from the competition. A brand is something you build over the years; customers know what to expect from your company when they recognise your brand. Strong brands build trust and customer satisfaction. Brands give potential clients a firm idea of what they are buying before they buy it, making the purchasing decision easier. Font-family, animations, colours, layouts and so many more factors contribute to building a brand. So branding has so many benefits for your company and your application. Now, let’s have a look how to do it.
Workflow to brand your application?
Use a build tool like gulp to automate part of your workflow. This helps you to stay focused on your code without needing to pay attention to the important, but repetitive, details. These tools allow you to write your code (hopefully) once, and reuse it throughout the development process. Build tools take care of minification, different versions for different environments, and while you are writing code you can get notifications that you have an error, etc. This is just scratching the surface. There is so many more things you can do with it. Have a look at gulpjs for more information.
You can also use SVG as icons. Personally, I like to use font-icons also known as glyphicons. Essentially, you combine SVGs into a font file and you can refer them in the CSS. The nice thing about this method is that you always have a JSON backup and the images are vector based. So you can make it bigger or smaller without losing quality! The annoying thing with a sprite is that you need to recalculate the background positions sometimes. Well, that’s history with your font-icons.
Dos and don’ts in development
- Do try dropping old versions of IE
- ADF comes with a lot of interactive components, so do try to stay away from JS and do try to use best practices to get the solution you need
- Don’t use inline styles
I hope this helps other developers to brand your applications to your company’s style!
