5 of the best Open Source framework websites, and what makes them so good
Dec 10, 2012
Table of contents:
Open Source is one of the truly great aspects of the Internet. Every day we all take for granted the work of the first pioneers that created the Internet and all of the technology that has made it happen. Virtually every aspect of the Internet has been built on Open Source technology which has fuelled exponential growth and opportunity for millions of people around the world.
Really great Open Source projects not only enhance the current use of technology, they also enable many millions of people to share the opportunity of what is possible. By building on top of the work of others, remixing it or pushing it even further, then sharing it back with the community, the whole Internet benefits from the work of a few.
Many Open Source projects seem to suffer under the strain of their own success. As a community gathers around a project, legacy code and politics creep in and seem to grind the progress to a halt. I also think many Open Source projects are unapproachable for relative newbies as the on-boarding process, or introduction to the project are often neglected.
However, here are 5 of the best Open Source projects, and what I think they are doing right with their website in order to explain their project and how you can get started. If you are working on an Open Source project I hope the following examples will inspire you to create an amazing homepage to explain the benefits of your work.
Bootstrap
Bootstrap is one of the most popular and visible Open Source projects on the Internet right now. Created by @mdo and @fat whilst at Twitter, Bootstrap is a powerful front-end framework that allows you to build beautiful and responsive websites that work across all browsers.
Even if you have not heard of Bootstrap, I can almost guarantee you have already encountered it. Bootstrap has become one of the most popular front-end frameworks for developers creating web applications.
Bootstrap’s homepage is extremely approachable because they have distilled the project down into a simple explanation. Immediately you know the name of the project, a one sentence introduction and clear first step for downloading the project and getting started.
The Bootstrap homepage continues with information about the project and what can be achieved by using it. Finally the homepage is rounded off with some examples of Bootstrap in action.
One of the main problems with Open Source projects is they try to cram too much information on the home page. As a project matures, this homepage creep seems to become more and more apparent. When you are encountering a project for the first time, the last thing you want is to be overwhelmed with too much information. Bootstrap has done a really good job of keeping their homepage incredibly simple.
Take away: Whilst you probably have a lot of information you want to convey to your audience, you need to keep your homepage as simple as possible or you will overwhelm people who are new to your project.
Ratchet
Ratchet is very similar to Bootstrap in that they have kept the homepage incredibly simple, yet have made a powerful introduction to the project. Ratchet is an Open Source project from @dhg, @connors and again @fat all formally of Twitter. Ratchet allows you to prototype iPhone applications with HTML, CSS and Javascript. This means you no longer have to spend weeks building out a prototype to get a fully working app into the hands of your customers.
Ratchet does an amazing job of introducing the project as you scroll down the homepage. Each component of the project is introduced with sample code and an interactive iPhone follows along. This enables you to see the code and the working example straight away, without having to go deep in examples just to see the project in action.
Scrolling down a page is such a frictionless action that it makes exploring the possibilities of the project so easy. Whilst it’s safe the say that this approach would not fit the majority of Open Source projects, Ratchet has found an amazing way of introducing their project, and what you can do with it. I would say this is one of the very best on-boarding experiences ever.
Take away: Make it incredibly easy to see your project example. Provide working examples, code and explain the main components without going into every detail straight away.
960 Grid System
960 Grid System is an open source front-end framework for creating grid based layouts. The 960 Grid System aims to streamline the process of front-end development by providing an easy way to create column based layouts at commonly used dimensions.
Creating front-end layouts from scratch on each new project can be time consuming. With a simple framework like the 960 Grid System, you can be up and running with exactly the right layout much quicker.
I think one of the best things about the 960 Grid System homepage is how quickly they get into the examples of websites using the project. As with Bootstrap, when you land on an Open Source project, you want to very quickly know if this project will meet your requirements before you invest time in getting set up, or reading more information about it. 960 Grid System does an excellent job of showing the breadth of possibilities that can be achieved with their project.
The examples include many of the most popular layouts on the Internet. If you are aspiring to make a website as good as some of these example website, the 960 Grid System clearly shows how this can be achieved. On each example you can also trigger the grid on and off to show how the layout was constructed.
Take away: Provide examples of other people using your project and how they achieved their result. If you can show your project is being used by popular and well known websites, you will convince newbies to invest more time exploring your website.
Laravel
Laravel is an Open Source PHP project for “Web Artisans”. It aims to provide a clean and easy way to make PHP web applications.
Laravel has a beautifully designed homepage, but it is actually the Documentation section of the website that I really like. Often documentation can be hard to read, uninteresting or just in a format that makes it difficult to understand. Laravel have kept their documentation simple, yet in-depth with a good mix of example code and explanations as to what is going on.
One of the things I like most about the documentation section of the Laravel website is the persistent navigation down the right side of the screen. This makes reading the documentation feel like a natural progression through each section, and makes it easy to jump around to the relevant part you need.
Take away: When writing documentation, you need to provide enough sample code and explanations in order to fully explain what is going on to a newbie as well as a seasoned pro. Constructing the navigation of a documentation is also extremely important. A lot of sites seem to make it difficult to see an overview of the documentation, or try to force the structure of the navigation into a weird format. Keep the navigation of your documentation clear, simple and logical and ensure it follows the natural progression of your project and the learning curve of the user.
HTML5 Boilerplate
HTML5 Boilerplate is a front-end framework that comes ready with many of the features of modern front-end development already to go. This includes CSS resetting, browser feature detection, Javascript libraries and server configuration to improve performance. Many of these features you would have to write custom code for each project. HTML5 Boilerplate aims to get rid of this work at the start of a project by providing you with a base to start new projects.
One of the common aspects of the HTML5 Boilerplate website, as well as the previous four featured projects, is that they are hosted on GitHub. GitHub is a hosted Git repository service that aims to encourage social coding. Over the last couples of years, Github has become the home to nearly all major Open Source projects.
HTML5 Boilerplate allows you to quickly download the project with their big prominent download button. However, I really like that they have placed the “Source Code” link as the first item in the navigation. This link takes you to the GitHub project page and allows you to explore the project within the comfort of the Github UI. This allows you to read and view the files and browse the documentation of the project before you even have to download it.
GitHub has become an amazing source of Open Source projects and their User Interface is perfect for exploring complicated directory structures.
Take away: Use GitHub to manage and host your project. GitHub makes it really easy for people to contribute to your project, grab a copy of the code, and explore the file structure in a really simple way. I can’t think of a single reason why you would not use GitHub to make your project even more approachable.
Conclusion
Open Source projects are what really drive innovation on the Internet along. Nearly every aspect of the Internet has been built on Open Source technology, and even the largest for-profit organisations are actively contributing large parts of their propriety code and tools to Open Source projects.
If you are making an Open Source project, or you are looking to breath new life into an existing one, I think the 5 leading examples in this post have really shown how to make a website that is approachable and accessible to all abilities.
