Check out my new project, Practical Service Design!
User Experience at Hello Erik

The Birth of the Shoelace Bootstrap Grid Builder

Posted September 24, 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.

shoelace-animation2

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.

Challenges

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.

Real Usability

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

 

shoelace-4

Main interface featuring copiable HTML and Less mixins

shoelace-3

Fully interactive live preview beta view

 

I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.
  • Seb

    This is awesome. Thank you very much. Helps me a lot to learn how bootstrap works.

  • Michele

    Hi Erik, I’m going to realize a similar open source project. Before starting from zero, is your project on github or similar?

  • The project is not publicly available right now. I don’t know what the plans are with it yet. And, the source for Shoelace is written in Clojure (http://clojure.org/) which is a very powerful, but not widely used language yet. So it would be very difficult for someone who isn’t familiar with Clojure or Lisp to even do anything with it.

    All of what ends up as the javascript front end is compiled from Clojure. If you look at the javascript file, you’ll see it’s almost completely unreadable.

    There are plans to keep adding the features I want to add, and to maybe make it a packaged app, but it is on hold, probably at least until the beginning of 2015.

    Feel free to copy any of the behaviors though, none of what we created in Shoelace is meant to be proprietary. In fact, we want to build an API that can help people use it in their tools without having to re-build it. But that’s a ways off as this is a simple night-time project, and myself and partner have no time to work on it.

  • Joshua Stewart

    Hi Erik, Great work on Shoelace. Do you have any plans on adding the ability to specify the number of columns?

  • What do you mean by specify? The number of columns should just work with the drag and move features.

  • I get it. That would be a good add, but Shoelace is in hibernation since the developer is busy and it’s written in the Clojure language, which there aren’t a lot of developers using, it’s sorta new and super super powerful.

    You can read my whole explanation here: http://www.helloerik.com/the-birth-of-the-shoelace-bootstrap-grid-builder#comment-1653803110

  • Joshua Stewart

    I’m sorry, I should have said “specify the number of grid columns”. We use 24 columns with bootstrap rather than 12, so it would be nice if Shoelace supported a 24 column grid. Thank you for creating such and easy to use tool.