TJ Kelly

Salesforce Knowledge Base Design & Responsive UX is the enterprise cloud computing leader. Their social and mobile cloud technologies—including their Knowledge application—help companies connect with customers, partners, and employees in new ways.

If you’re not using Salesforce for your CRM, you’re missing out.

If you’d like help with Salesforce Knowledge Base design, I can be of service. I can design, develop, implement, and even retrofit your knowledge base like I did with a client’s Knowledge Base.

With this tutorial, you can give your users a smooth, on-brand, responsive Salesforce Knowledge user experience.


1. Salesforce Knowledge Base design is like any other website

Start with sketches, Photoshop, wireframes, or any other website design tool. There’s no reason your Salesforce Knowledge Base design can’t look exactly how you want it to look.

So get your design team rolling and mock up the user experience of your knowledge base however you’d like. This custom design will be applied to your KB in the next steps.

The designers I work with took PSDs and comps from earlier steps in the design process and added Knowledge Base elements to them—things like a large search field, category filters, etc.

They delivered a new set of PSDs with all the knowledge base elements worked into the branding and design.

[/blog_stripe] [blog_stripe]

2. Use an existing Knowledge Base package to save time

This step is optional, but it’s a big time saver. I chose to start with an unmanaged package called Public Knowledge for Mobile, Web and Facebook.

Starting with that package allowed me to skip functionality and focus on the interface and experience. If custom functionality is a priority for you, this method may need to be adjusted accordingly.

At this point, I had a choice: write my own HTML or jump straight to the package template’s markup. I was still experimenting with this process, so I chose to write my own HTML.

I think that was the right choice but next time I’ll incorporate some of the package template’s code sooner. Your mileage may vary.

Choose to work with their markup or write your own, whichever serves your needs better.

Your CSS will have to be custom, obviously. That’s where the markup matters—your CSS selectors need to match the rendered HTML output.

The template code will probably contain tags and functions which render other code. I suggest working backward from the rendered output.

Doing so will allow you to use more streamlined, specific CSS selectors and achieve faster load times for your Salesforce knowledge base design.

[/blog_stripe] [blog_stripe]

3. Merge your code with the package

If you use an existing Salesforce package and you write any custom HTML, you’ll need to merge your markup with the template’s default code.

This step is straightforward, but it requires attention to detail. The Salesforce package template will probably contain <apex:outputText> and other similar tags.

Those tags and their nesting/hierarchy must be maintained or closely emulated. If you break the nesting or eliminate necessary tags, your code will fail—either in saving, validating, or deploying.

I found it helpful to save a copy of the package template locally as a plain HTML file. I made changes and saved out revisions as necessary. I rolled back when I needed to and handled version control manually.

This allowed me to experiment with adding, changing, and removing Salesforce’s <apex> tags and any other knowledge base template elements or functionality.

[/blog_stripe] [blog_stripe]

4. ????

Just need to figure out this one last step.

5. Profit

The value of Salesforce Knowledge is obvious. Lots of businesses use Salesforce and I enjoy helping them utilize its services and functions to enhance their business.

To me, Knowledge is a big part of that. Salesforce is legendary for their support suite and the value it delivers to clients’ clients is undeniable.

I’m thrilled to be able to help implement an excellent Salesforce Knowledge user experience consistent with brand and valuable to users.

[/blog_stripe] [blog_stripe]

Interested in Salesforce Knowledge Base design?

Get in touch. I can help. I can design, develop, implement, and even retrofit your knowledge base. Working for my employer, I successfully implemented a custom design on Newforma, Inc.’s knowledge base in about a week.

Let me do the same for you!


Leave a Reply

Your email address will not be published. Required fields are marked *