Prototyping with Twitter Bootstrap

Prototyping with Twitter Bootstrap

technology

I ​joined the iomer team midway through the process of a website redesign. The wireframes had already been created by other team members, and I was tasked with developing the site and the visual interface for my first project. As with many projects, there was a limited budget and a short timeframe. The process would have been too costly and inefficient to develop a separate prototype without any code to develop it further. We wanted to incorporate a more agile design process, and because we knew we’d be doing user testing, we needed a solution that would allow us to test the prototype and make changes quickly. For these reasons, using a front end framework was the right solution.

Why A Front End Framework?

Front end frameworks can be powerful tools in a designer’s development process. It can save a ton of time in the project process, and with most frameworks employing a fluid grid system, scaling to different devices becomes less of a headache. A framework also supports a more agile process, allowing a designer to design and develop a site in a streamlined approach. Twitter Bootstrap recently came out with an updated version of their framework, Twitter Bootstrap 3. There are numerous frameworks available, and after researching a few, Twitter Bootstrap was chosen for its breadth of components and community support. Since this was the first time using a framework, I wanted to ensure that it was well documented and would support all my needs.

A New Process with Bootstrap

Developing In Browser Makes Life Easier

Gone are the days of pixel perfection in Photoshop with static mock ups. By utilizing a framework, I was able to begin developing a prototype of the site in browser straight from the wireframes, without getting caught up in the visual details. We wanted a prototype built in browser to have the ability to engage end users in usability tests. While this can be done using different prototyping tools, developing in browser assures cross browser compliance and testing on multiple platforms and devices. Using Bootstrap helped assure browser support, especially for IE8+. By getting the site up and running in a matter of days, we could quickly jump into user testing. We travelled to the client’s business and set up a usability test station for any patrons that came through. The changes that were needed based on this testing were implemented quickly with a new feature added in a matter of a few hours. Since the prototype was developed in HTML and hosted on a local server all the necessary changes made could be easily viewed by the client.

Responsive Design Feels Like A Breeze

Unless the project scope calls for a separate mobile site, a responsive layout is paramount. However, building a responsive site adds time and cost to a project, easily doubling the amount of design and development required. The update of Twitter Bootstrap 3 moved the framework to a mobile-first, fluid grid layout. This cuts down on the development side of creating a responsive layout and allows more focus to be put towards content strategy and information architecture on mobile platforms.

The main function of the site focused on a complex form field to request an appointment. Form design can become a complicated mess if not positioned properly at small screen sizes. With the responsive layout provided by Bootstrap, the form floated into an efficient and usable layout for mobile devices. The mobile view of the prototype only required a minimal amount of tweaks to make it just right. By utilizing the responsive utilities, it’s easy to change navigation styles for mobile views without needing media queries or JavaScript.

Twitter Bootstrap Goodies

A great aspect to Twitter Bootstrap 3 is the amount of built in components a designer can use. The form I had to design was lengthy with lots of content. To break up the amount of content a user engages with at one time, we used collapsible elements to section off form content. All the components supplied are well documented and easy to implement. If Bootstrap doesn’t provide a certain component there is a vast amount of third party plugins designed specifically for Bootstrap. The form also required a date picker, and while Bootstrap doesn’t natively provide that, multiple other developers have already created it and made it available for others to use. Because these components are designed specifically for Bootstrap, they work seamlessly with little to no adjustments necessary.

Bringing It All Together

The visual design of the site was developed concurrently with the workable prototype. Rather than sending the client a detailed mock-up of what the site would look like (pre-user testing), mood boards were created to present what the look and feel of the site should be. The mood board strategy fits well with the streamlined and agile approach of designing in browser with Bootstrap, and prevented the client from picking apart small details of the visual design without looking at the overall picture. Three mood boards were developed for the client outlining the suggested colours, fonts, image quality, and showcasing other sample sites. Similar to style tiles, a mood board is a bit broader and less concerned with site element details like button styles. After the client selected the mood board they felt was appropriate for their vision, we were given a clear direction of what the visual design should look.

When our testing was done and the structural changes were made, applying the visual style based on the mood board felt effortless. Since the site had already been developed in the browser as a grayscale prototype, applying the visual styling only required a few CSS modifications.

Some Downsides to Bootstrap

  1. Class based modifiers: Using classes as modifiers can really hurt in the end. Our original wireframe had the secondary navigation floating to the right. After our usability testing, it was determined that it was more effective on the left. Rather than changing one line in the CSS file, I had to go through every site page and change the class name of “pull-right” to “pull-left”.
  2. Bloated CSS file: Unless you customize the CSS from the original download (as you should), your CSS will be HUGE. About 5,000 lines.
  3. Learning to be a better developer: With all the code needed as a simple copy and paste, acquiring the skills to develop cleaner and more efficient code won’t come easily. If this is what you strive for, then staying away from a framework like Bootstrap would be best.

Even though I came into this project midway, using Twitter Bootstrap allowed me to jump right in to the process. Developing the testable prototype with Bootstrap and creating the visual design concurrently, yet separately, created a more agile process and great learning experience. In the end, we were able to deliver a solution to the client that looked great and was developed in an efficient manner.

While Twitter Bootstrap is a popular front end framework, there are many others available. Each framework provides their own class naming system and different native components. Regardless of which framework you choose, they can be used to quickly and efficiently prototype and develop your solution.

 Recent Posts

select to filter posts

Gamification: Coming to a workplace near you!

by Scott Johnston

Video games aren't just a wave of the future; they're the current reality for millions of players who take to their consoles and PCs every day.

read more

Managing Voter Experience

by Jim Ward

I had the chance to run a political campaign for a friend in the last civic election in Edmonton. A terrific experience, and full of surprises. But how could a computer guy possibly be qualified to run a campaign? If you’ve never been involved in one, ...

read more

Red Adair Rings True In IT

by Kerry Wiebe - Director of Business Development

“If you think it's expensive to hire a professional to do the job, wait until you hire an amateur.” - Red Adair This quote resonated with me when I recently took on a do-it-yourself (DIY) renovation project at my home. I decided to do the project ...

read more

My History with Umbraco

by Terence Jee

Umbraco is an open source, free CMS that allows users to download it and use for their own needs.

read more

Prototyping with Twitter Bootstrap

by Davis Levine

Front end frameworks can be powerful tools in a designer's development process. It can save a ton of time in the project process, and with most frameworks employing a fluid grid system, scaling to different devices becomes less of a headache.

read more

Knowledge of Possibilities

by Ammneh Azeim

Recently, I read a great blog post by Daniel Burrus which states “Give your customers the ability to do what they can’t currently do but would want to if they only knew it was possible.” The key here is knowledge of possibilities and knowledge which comes

read more

Safety Codes Council Adopts Microsoft Dynamics CRM

by Andrew Slessor

Recently, the Alberta Safety Codes Council adopted Microsoft Dynamics CRM as their platform for the Master Electrician Management System.

read more

Legal Aid Alberta Implements Microsoft Dynamics® CRM

by Andrew Slessor

Legal Aid Alberta Improves Client, Case and Financial Management with Microsoft Dynamics® CRM Legal Aid Alberta (LAA) provides cost-effective services to 200,000 Albertans in need each year.

read more

World Usability Day

by iomer

​​ This Thursday, November 7 is World Usability Day, a day dedicated to making the world a more user friendly place.

read more

PanEx 2011 Unites Developers and UX Professionals

by iomer

Last night I attended PanEx 2011 organized by UX YEG, Edmonton's User Experience community group.

read more

Committed to Disruption

by Jim Ward

​ One of the things I love about our industry is the counterintuitive truths that make themselves evident on a regular basis.

read more

SharePoint 2010 Data Access with LINQ to SharePoint

by Anthony Haxby

In SharePoint 2007 a popular and (relatively) straight-forward method of querying SharePoint Foundation data from lists was using the SPQuery class and involved writing the query using the Collaborative Application Markup Language (CAML).

read more

Case Study: Human Security Report Project

by iomer

The Human Security Report Project (HSRP) is an independent research centre affiliated with Simon Fraser University’s School for International Studies in Vancouver, Canada.

read more

Exciting new features in Dynamics CRM 2011

by Andrew Slessor

​​​​ We have been implementing Microsoft Dynamics CRM 2011 for a few months now and I am excited with many of the new features that have been added to the system.

read more

Bringing Teams Together: Calendar Overlays in SharePoint 2010

by iomer

Calendar aggregation is a topic that will come up time and time again when discussing desired functionality for a collaborative environment.

read more

An Opportunity to Pause

by Jim Ward

I was at the Microsoft Canadian Leadership Summit in Redmond last week. It's a great event for learning about future trends and technologies, as well as considering and applying the lessons presented by Microsoft experts and futurists.

read more

SQL Server Replication

by Mike Hebert - solution architect

Database replication is all about distributing data. There are many common scenarios where replication may make sense, whether it is to enable a mobile workforce, to allow intensive reporting or data mining without interfering with day-to-day operations,

read more

Stop Chasing Butterflies

by Jim Ward

Had some great learnings last week. Picture this. You've put your strategic plan together, and your team is busy doing the right things.

read more

The Coffee Still Matters

by Jim Ward - Founder

Former Starbucks CEO Howard Behar penned a wonderful book on leadership called “It’s Not about the Coffee”, based on his experiences building the Starbucks brand.

read more

Top Ten Reasons for Collaborative Governance

by Andrew Slessor

Collaborative Governance is the principal of sharing ownership of the intranet with various groups or individuals in an organization. Instead of no owner, or a single one, a collaborative team governs through the application of policies, standards and tem

read more

Website Sustainability

by iomer

​Website sustainability may sound like a complex topic but the concepts are quite straightforward and are fundamental to successful website development and growth.

read more

Diagnostic Logging

by Steven Sirockman - solution manager

As a SharePoint Technology Specialist, I have had many phone calls from clients asking me to come in and troubleshoot their SharePoint Server environment. One of the first questions I ask them is if they have configured diagnostic logging.

read more

Intranet Users Roles and Responsibilities

by Andrew Slessor

In order to manage a sucessful intranet, users must be certain of what tasks they are responsible for on the site. The roles for intranet users can be seperated into seven categories; these are described below.

read more

Snippet Compiler versus LINQPad

by Mike Hebert

Jeff Key’s Snippet Compiler is a popular developer tool that has been around for years – I first learned about it in a 2004 MSDN article titled “Ten Must-Have Tools Every Developer Should Download Now”.

read more

Dashboarding SQL Performance Counters

by Gord Barker - solution architect

In a previous blog I wrote about benchmarking SQL performance. This is important for those rare occasions when someone says the system is not running fast enough.

read more

3 Tools for Clearer, More Effective Writing

by Kael Nicholson

Need to convey a wealth of information in a tiny space? When working in the technical world, writers are constantly torn between the need to accurately describe complex ideas and the desire to make them clear and accessible.

read more

Integrating AJAX and Telerik with SharePoint

by Gord Barker

​To extend your SharePoint site to include Ajax, you will need to perform a few steps

read more

Logging SQL Performance Statistics

by Gord Barker - solution architect

One of the most important tools in analyzing a SQL Server performance problem is a good understanding of the normal behaviour your system exhibits.

read more

Five Things I'm Looking Forward to in SharePoint 2010

by iomer

Microsoft has released some Sneak Peek videos giving a preview of what we can expect to see in SharePoint 2010.

read more

SharePoint Application Performance

by iomer

Recently we were approached by a customer who was having performance issues with a custom application built on top of SharePoint.

read more

A Program to add files to a Zip file

by Gord Barker - solution architect

I recently had to retrieve 45 days worth of Air Quality data from a web site. I used WGET to retrieve 35000 tiny text files to a sub directory.

read more

The Top 10 SQL Scripts You Must Have

by Gord Barker - solution architect

Here is a collection of important SQL Script gathered from around the net (including the Steve and Chris Show on SSWUG). These are scripts you should know about or have in your toolkit.

read more

Edmonton Technology Community

by Christina Gray

As technology continues to advance, keeping up and prioritizing what you ‘need to know’ becomes more of a challenge.

read more