Jekyll for Mockups
In a recent project with Code for Philly, I used Jekyll to help design the information architecture and organize content for a web site. It allowed me to quickly create a site mockup instead of having a tree diagram or document outlining the structure. This mockup facilitated communication with the team.
What Is Jekyll
Jekyll is a static site generator. It builds a set of HTML files based on a set of markdown files. It has functionality to define content (such as a header or footer) once and include it in multiple locations in the site. It also allows you to convert easy to write mark down into more complex HTML code.
How It Helped
The big advantage was having something that felt like a site for evaluating the structure and content organization. It was something you could click around instead of having to scroll through a long document and rely on headings to separate pages.
Since Jekyll uses markdown, I was able to copy and paste the existing site content and have it look uniform. Adding headings and lists was very easy to do in markdown. Because of markdown’s limited formatting ability, it also stopped me from thinking too much about layout. I had to focus on the content instead.
Using Jekyll’s include functionality to add a header and footer with links allowed me to quickly evaluate how the navigation worked. I could quickly tweak the navigation in the header file, then click through the site and see what impact it had. Jekyll took care of keeping it all up to date for me.
Conclusion
Using Jekyll helped me produce an interactive deliverable for facilitating content discussion. It required only a little more effort than presenting a document or sitemap.