Help Center Responsive Design
Zendesk level: Intermediate
Knowledge: HTML,CSS, Bootstrap
Time Required: depends on amount of customization
So what exactly is responsive web design? Responsive web design is a way for you to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices. I’m going to use Bootstrap for my examples however you can use which ever framework you choose. You may need to read up on the Bootstrap documentation from http://getbootstrap.com
For example, the first image is what the site looks like on big monitors and the second image shows the same site on small monitors and phones. We would like to keep the same look and feel of our Help Center across all devices.
Note: You will need to change some of the CSS to make your entire site responsive but at this point I’m only going to focus on the Home Page. I’m by no means a web developer so please feel free to add to this to make things easier.
If you take a look at one of my favorite help center designs Charity Water you will see that the website cuts off at 800 X 600 and you have to use scroll bars. https://docs.google.com/a/cibertec.net/file/d/0B-Hs2EzZpGPLNVcwMVRxMTI2bk0/edit?usp=drivesdk
Lets get started
The main thing we need to do include the Bootstrap Framework in your “Document Head”. You will need to include the CSS and JavaScript sources like the screenshot below.
https://docs.google.com/a/cibertec.net/file/d/0B-Hs2EzZpGPLSFc5WTRfckVRMFk/edit?usp=drivesdk
Next we can start playing with the grid system to see how we will layout our site.
For this example I’m going to have a Big Search Area and then below it some areas for my categories. I will make my categories show three columns across but one across on smaller screens.
Below are some examples that I used on my site. This is just a start and there is plenty more to do.
ZenDesk 3 column category - http://bootply.com/82674
ZenDesk 2 column category - http://bootply.com/82678
Just copy and paste the header code into the "Header" and the rest of the code into "Home" page and you will be on your way creating a responsive Help Center.
Summary
At this point our Main Help Center Page is now responsive.
I hope this will get you started in creating a responsive design. Bootstrap is very powerful and there is a lot you can do with it. I was able to easily create a Bootstrap accordion but never could figure out how to hook up all the javascript to it so when someone figures that out let me know and I will create another template.
-
What theme is this that you show in the screen shots? I absolutely love this one!
-
@Steve - The theme in the screenshots is my own custom theme using the Bootstrap framework. Using the instructions above and the code that was posted you can easily re-create the exact same look. Let me know when you get to that point and I will send you some updated HTML code. First thing is to implement the Bootstrap framework into your Zendesk site from the instructions above. I will be glad to help you along the way. I think I started with the default Humble Squid theme but there's not much left of it with all the customization.
-
@Wes. Great. Thank you. You can email me directly at steve@paylinedata.com if you would like. What is your live support site? I would like to show this to our team to get them started on it. I greatly appreciate your willingness to work with us to help too!
-
@Steve - Our live site is locked down as our Help Center is internal only for us but I will be glad to provide you with some screenshots. I know it has changed since I originally posted this article. The good thing is the look you are wanting is already posted in the article above. Would you like for me to send some screenshots over to you.
-
@Steve - I forgot that I have some of the code posted to my test account. You can see the Home Page here however in my test account I have not moved everything over so only the Main Page is working. This will at least give your team something to look at.
-
I am unable to get this to work. I added the calls to my bootstrap and override css in the head as suggested but the page will not take the styles. I did a view source and checked the links to the boostrap.css and .js that resides on my page and it does indeed find the style sheet and JS so I know its not link related.
I am resigned to copying the entire BS css into the page css which I do not want to do.
-
@Jamie - I'm be glad to help you out as much as I can. Since you know your linking to the css and js file what code are you trying to add. There is no need to copy the entire CSS file as you should have it linked. You may need to override some of the Zendesk CSS but I only had to override a few things. Is there anyway you can post the link to your site so I can take a look at it. Below is my test site where I've playing around with a few things but as you can see its using Bootstrap and is responsive.
-
@Wes, thanks for the quick response. Here is a link: https://jonasfitness.zendesk.com/hc/en-us As you can see in the head the bootstrap is linked along with a flat-ui override. At the bottom of the page I have a simple test with a container, row and col-md-4 but its not working when the page is rendered.
-
*If this double posts my apoloty* Here is a link: https://jonasfitness.zendesk.com/hc/en-us If you view source, you can see the boostrap links in the head and clicking on them to confirm they are working. Towards the bottom of the page I have a simple container > row > col-md-4 test with 3 columns. They are not working.
-
@Jamie- just for testing take your lines on your bootstrap css and javascript out and add the following lines instead.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
It may have an issue getting those from your external site. Add the above line in and let me know how it looks.
-
That did the trick... Strange that it would not take the bootstrap from my domain. Thanks Wes, much appreciated!
-
Getting a strange drop down (double bubble) effect on the zendesk drop down control though. I cant seem to garner any info from chrome dev tools on whats causing it but some kind of interaction between zendesk and bootstrap css. Any ideas?
-
Here is the code I am using:
<div class="navWrap" <nav class="user-nav">
{{user_info}}
{{submit_a_request}}
{{my_activities}}
{{language_selector}}
</nav>
</div> -
@Jamie - You will have to change some of the Zendesk CSS as its interfering with the Bootstrap CSS. I believe I moved all the info from the dropdown into my own bootstrap dropdown. I did that via JQuery but if that is something you want to do just let me know and I will send you my code otherwise you will need to make some changes to the Zendesk CSS. In order for the site to be repsonsive you will need to remove some of the fixed widths in Zendesk's CSS. Hope this helps. In the Zendesk CSS below you will need to comment out the width: 980px line
main {
.make-row();
/*display: block;
margin: 25px auto 0;
padding: 0 20px;
width: 980px;*/
} -
Wes, I am happy to report that the responsiveness is working great. Its just that drop down.. I will take a look into the zendesk drop down css.. im sure that is what it is. Thanks again for all the help!
-
Wes, how do you go about making zendesk components responsive though? For example:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>{{title}}</h1>
<p>{{description}}</p>
</div>
</div>
<div class="row featureOffWhite">
<div class="col-md-12">
{{section_tree}}
</div>
</div>
</div>Section tree seems to have its own code that generates lists next to each other. I can't think of a way to put them in their own span columns.
-
Jamie - There are some Zendesk components that you will not be able to make responsive and if you just have to wrap them like you did. But you can do some via JQuery. Below is an example of how I moved the User info into a Bootstrap dropdown and removed the class from Zendesk's button. This may or may not help but you can give it a try.
// move user info dropdown into ticket actions
$('#user-menu > li').appendTo('.ticket-menu');
$('#user > div').removeClass('dropdown-toggle'); -
Got it.. thanks Wes. If you have a minute I would like the to see that jquery you used for your drop downs. That would help me out a lot. Thanks!
-
The Jquery that I used is in my above post.
// move user info dropdown into ticket actions
$('#user-menu > li').appendTo('.ticket-menu');
$('#user > div').removeClass('dropdown-toggle');Here is the Bootstrap HTML for my entire nav bar in case you need it. It looks exactly like the images above in the main article.
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/hc/en-us"><i class="icon-plus-sign-alt"></i> Help Center</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Ticket Action <b class="caret"></b></a>
<ul class="dropdown-menu ticket-menu"><li class="dropdown-header">Ticket Info</li>
<li><a href="/hc/en-us/requests/new">Submit Ticket</a></li>
<li class="divider"></li>
<li class="dropdown-header">User Info</li>
</ul>
</li>
<form class="navbar-form navbar-left">
<div class="form-group">
{{user_info}}
</div></form>
</ul></div><!--/.navbar-collapse -->
</div>
</div> -
@Wes: it seems Boostrap overrides the default Zendesk dropdown-menu, breaking the display. Would you have a way to force the Zendesk dropdown-menu to be applied in my header?
-
@Vincent - Both bootstrap and Zendesk use the same names for some of their classes. I have to deal with this every time I create a theme. I'll see if I can track down the code for you.
-
@Vincent - Add the following code to the CSS and let me know if this helps.
/*Remove styling issue with Zendesk and Bootstrap*/
#user-menu{
position: inherit !important;
top: 0 !important;
left: 0 !important;
z-index: 1000 !important;
float: left !important;
min-width: 100% !important;
padding:0 !important;
margin: 0 !important;
font-size: 14px !important;
list-style: none !important;
background-color: #FFF !important;
border: 0 !important;
border: 0 !important;
border-radius: 0 !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background-clip: padding-box !important;
} -
@Wes
It works great, thank you for your help (once more)!
-
Not a problem Vincent - Glad I could help.
-
How do image icons work? And can we get access to basic ones like you show in your example and that are on the Zendesk site?
-
Hi JJ - The icons that I'm using are FontAwesome icons which are free to use. If you are on a plan above Starter then you can use them in your Help Center as it requires one line of code. Here is a tutorial that I wrote just to get the icons.
https://support.zendesk.com/entries/26807203
You can also see theme on my current theme that I"m working on.
http://moderatorwes.zendesk.com
And here is a complete theme that I built which you can copy and paste all or bits of my code.
https://support.zendesk.com/entries/41702416
Just let me know if you need any additional help.
-
Has anyone been able to get Bootstrap Tabs to work for them in the new Help Center?
I’d like to be able to add tabs or pills within the articles themselves but haven’t been able to get them to work. Here’s what I did:
1) In the “Document head” section added the necessary JS and CSS Bootstrap files:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
2) In the article added the example tab code from the Bootstrap site ( http://getbootstrap.com/javascript/#tabs):
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages"> messages</div>
<div class="tab-pane" id="settings">...</div>
</div>
The only thing I can think of is that this doesn’t work with JQuery 1.9.1. Or that the JQuery file is loaded after the Bootstrap JS. But then other responsive styling seems to work well. Any ideas?
Thanks in advance for your help!
-
@Anya - I was able to put some tabs in my articles without any issues. Make sure when you paste your code that you paste into the "Source Code" window. I also have implemented accordions within articles without any issues. Here is an example of my tabs: https://moderatorwes.zendesk.com/hc/en-us/articles/202539583
-
@Wes, thanks! Your new theme looks awesome. For the tabs, did you add any javascript additional to the bootstrap file? Any way to take a look at your new theme in Zendesk? I was able to get the tabs to work otherwise, so I'm wondering if it's something Zendesk specific that I'm doing wrong.
-
@Anya - I did not add any additional JavaScript as that was straight Bootstrap Code. I'm glad you liked the theme as I currently have two themes available. Feel free to look through my code and use all of it or just certain sections of it. You can see the themes from my GitHub account here: https://github.com/moderatorwes
Just let me know if you need any additional help as I will be glad to take a look at your Help Center if needed.
Please sign in to leave a comment.
71 Comments