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
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.
At this point our Main Help Center Page is now responsive.