Using MDL to create our new website

Last month in This week in Google it was mentioned that Google had just released MDL - - Material Design Lite:

Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible

Basically MDL resembles Twitter Bootstrap. It is a JS library that allows users to easily create responsive websites with a consistent layout and design. As the name suggests MDL has a strong focus on the Google Material Design visual language and so you can build great looking material design websites in no time.

Dumping wordpress

Our previous website was created in Wordpress and built on top of a free Wordpress theme. It was functional but the design lacked consistency. Worst of all it felt like the wrong tool for the task - heavy weight and bulky like if you are using a screwdriver to open beer. It needs to be maintained and updated to avoid security issues and even the plugins get regular updates. Page load time is not great as wordpress have to load all the content from a database which we need to update and maintain as well. That is why we began to look for a more lean and simple solution and so we found the gem, Jekyll. Jekyll is a static page generator and it is great! It allows us to write content in clear text with markdown. Jekyll then automatically parses the content and inflate it into a simple website templates in HTML. These you can define on your own or find on the internet on pages like Jekyll Themes. In the end you will get a set of static files that you can serve on the hosting of your liking may it be Google Drive, Dropbox, Git or your own server. Pages are simple HTML. It is simple to understand, easy to serve, comes without security risks and are easy for clients and CDNs to cache. Another attribute of using Jekyll and markdown is that you can use the same development tools as you are already used to. This post is written in atom and as all of our work put under version control by Git. There is no need for a Wordpress account nor internet access while writing.

How we created this site

Over the last six months we have been using Jekyll for our blog and it have worked so well that we felt quite comfortable in using it for our whole website.

The guys at gdg-managua were super fast to release a theme for Jekyll built on MDL. So we started out with their base and built this site on top. Our current theme supports two different types of posts. App posts and blog posts. App posts are shown with an icon and a link to play store and our G+ community. Where as blog posts are more simple. We have an overview page for each type so that it is as easy as possible to browse the two types. The screenshot below shows the overview of our app posts. We have implemented Disqus so that users can write comments to our posts and we use Formspree to make our contact formula work.

Screenshot of appdictive website

We used three days to change the theme to our liking, convert the content to markdown and create new graphics. Time well spent!

We hope that you will enjoy our new website as much as we do and if you have any comments, feel free to write below or send us an email

By: Tobias Alrøe