— John Maeda (@johnmaeda) November 29, 2014
A while ago, I got this idea to create a Bootstrap grid builder called Shoelace (open it up and follow along!) that is super simple, easy to use, and didn’t try to be a WYSIWYG tool at all. In fact, the opposite. It had 3 purposes – to build the grid HTML, to show you how it will work and change responsively, and teach you how it works by making it impossible to make broken or non-conforming grids. You can’t build your own pages with it, and once you build a grid and use it, you’d have to go back and sort of figure out how your grid relates to the original. It’s not mean to be a build tool – it’s an abstraction and learning tool that can show and create the core of what you’re looking for; a solid, bog-standard Bootstrap responsive grid.
Mobile first and responsive visualization in action
Lacing it all up
Bootstrap is a CSS front end framework, the most popular available. It is estimated that around 1-2% of all websites are built with Bootstrap. It is incredibly powerful and is leading the movement on mobile first design and development, mobile first meaning, you build for the mobile experience first, and then enhance and modify for the desktop experience.
Shoelace.io began as a personal tool to solve a specific problem – building Bootstrap 3 CSS layout grids easily without having to type and re-type HTML over and over, and without having to do the mobile first responsive designs “in your head” before trying to code them.
As the code progressed, it became clear that Shoelace could be a great public tool for designing and learning how the Bootstrap responsive framework functions. And if I was going to push it out publicly, it needed to be foolproof and not contribute to the confusion, but make it crystal clear on what is going on in a responsive grid.
The Grand Challenge
Through promoting and writing about Bootstrap 3 on my blog, something became very clear – despite the ease of use of the framework, a lot of people who need to leverage the capabilities just don’t “see it” with regards as to how the grid is built once, but the responsive classes make it malleable and totally mobile responsive. Through Twitter, IRC, and my own blog, I found out that there was a huge population of people eager to use Bootstrap, but didn’t really know how or why it worked, and how to best utilize its fantastic responsive, mobile first properties.
As of the writing of this page, my blog gets about 1200 visitors a day looking for “bootstrap 3 grid/tutorial/less” or some variant of that phrase. And as I hang out in the IRC channel, I get question after question about how exactly you use the framework in the abstract, application of its purpose. It’s easy to understand how HTML and CSS works, but how did Bootstrap want you to use it? I decided to contribute to the community by creating a resource that simultaneously acts as a design tool and a learning tool.
The main challenge was creating something so intuitive that it didn’t compound the problem by polluting the interaction with more noise. Understanding how to use the Bootstrap grid framework to design for 4 different responsive sizes was confusing enough. I wanted to abstract away from being a literal “page design” tool and be more of a “what you think is what you get” heuristic tool.
The other significant challenge was building something useful and powerful, but not venturing into building a kitchen-sink design tool that tried to do too many things, and end up doing most of them badly. This involved a lot of design sacrifices to stay focused only on the intended purpose. There are existing Bootstrap builders out there where you can build the whole page in their tools, but that goes against what I think Bootstrap is meant for. It’s not supposed to be bolted into a WYSIWYG, it’s just a framework of a way to do your own things, not a built-in Dreamweaver.
Another challenge was getting user feedback on the usability, and general usefulness, of the tool. Being as this was a free, public project, it didn’t necessarily have a focused user base. Anyone who wanted to use Bootstrap’s responsive properties was a potential user, and that could be anyone from a designer to a developer, or someone who has never done either and sees this as a chance to learn something new.
As it turns out, it was not very difficult to get rapid feedback from people who were trying to build projects using bootstrap. The article I wrote on using the grid is stuck in the top 3 google search results for “Bootstrap 3 Grid” (out of around 2.3 million), so finding people to test with was as easy as opening my email and looking at the 1-3 emails I get each day on people looking for help. These people are self-selecting obviously, but in a sense that helped me get specific feedback from people who would benefit most. There was a desire, of an undetermined size, to learn how to do this and really “see it.” Not “get it”, but to really see it in a way that doesn’t involve just trial and error in your own projects.
Building a Base
There was a great deal of user testing that went on in an informal “beta test” of the project. I gathered people through Twitter, IRC, and my own website who wanted to try it out, find flaws, and rate the overall “a-ha” aspects of the tool. It was critical that Shoelace was a fun and educational experience.
A tremendous amount of work went into making the Shoelace interface and interactions “unbreakable”, meaning the UI won’t let you create something that is invalid. It’s not a page builder that just lets you code visually, it’s an abstraction. It serves as a way to see how everything will work, then adjust the design and see it change and adapt in real time at all 4 of the responsive layouts. As people began to use the tool, I quickly took their feedback and rolled it back into the development plans. It was real UX on a realtime project a friend and I were doing every night and weekend.
Only the Beginning
The response to the first version of Shoelace.io has been great. I see it referenced around now as a way to learn and experiment with grid layouts without having to spend a great deal of time “trial and error” coding in HTML beforehand. In that sense, it’s very efficient at what it does. There have been requests about adding more features to make it a more capable builder, but I’ve tried to stay away from there. There are more features coming in the future (once we find more free-time), but it only goes deeper into the abstraction, i.e. nested grids inside grids, better live previews, etc.
More than being an HTML generator though, Shoelace acts as a learning tool, and in doing so the UX must be very well thought out and tested. A learning tool that did things poorly or wrong would be a terrible experience and a huge turn off to both Shoelace and Bootstrap itself. I put a lot of effort into researching and testing the experience and intuitiveness of Shoelace, and I hope as more and more people use it that will pay off.
Learn More about bootstrap and see how it works in Shoelace.
Bootstrap is something I am really passionate about. It’s a strange thing to have such an interest in, but it accomplishes so much I’ve spent my teenage and adult years trying to do, build for the web with HTML/CSS, it’s really an amazing leap forward from having to do the same stuff over and over for each project, never having a standard, and never being able to just design with something that more than myself has had a hand in building and contributing to.
If you want to know more, read my articles on Bootstrap and give Shoelace a try
- Bootstrap 3 Grid Introduction
- The Subtle Magic Behind Why the Bootstrap Grid Works
- Bootstrap 3 Less Workflow Tutorial
Main interface featuring copiable HTML and Less mixins
Fully interactive live preview beta view