How you can launch websites faster using Twitter Bootstrap and how using Squiz Matrix CMS can save you time
- Read time: 3 mins
- Tech level: medium
- Key resource: Go to the Squiz Marketplace
- Key take-away message: Twitter Bootstrap can save you time and money. These efficiencies can be extended even further by setting the templates up in an enterprise CMS such as the open source CMS named Squiz Matrix.
Summary: Should you use Bootstrap for an enterprise website?
The short answer is yes, if it will improve an outdated website that leaves a negative impression on your visitors.
No, if you’re in a competitive market and you need to highlight your unique offering to your audience and show why you’re not only different but better than your competitors. In these situations, a bespoke design is more appropriate, combined with custom HTML/CSS or front-end development.
Should you use Bootstrap for an enterprise website?
The real question
The real question is how important is it to your business that your website visitors experience a unique look and feel that truly represents your brand values and sets you apart from your competition? While you’re thinking about that, here are some pros and cons of using Bootstrap for an enterprise website.
Pro: cost is a major benefit of Bootstrap
Using a Bootstrap template is no doubt faster and cheaper than implementing a bespoke design and that comparison is fairly easy to make. It is no easy task to calculate the cost of lost sales, contacts and subscriptions, and so on, when website visitors choose your competition over you. In highly competitive markets, it’s critical that your organisation ‘stands out from the crowd’. Highlighting your unique business proposition is made more difficult when your website has common look and feel.
Pro: time to launch
Time between starting the project and launching a website is relatively short
Bootstrap is quick to deploy, which is critical for large organisations where ‘paralysis through analysis’ is common. In other words, when a job becomes quite large and the list of requirements grows to become cumbersome, the project will drag on for months and sometimes years.
Bootstrap means fast deployment of new websites
Instead of starting from scratch:
- An organisation could quickly deploy ‘the skeleton’ of a website that already has many standard design elements. This would only take about 30 minutes, and less if your company is using an enterprise class CMS.
- They would then remove any elements that are not needed and replace placeholder photos and text with actual website content. This would take approximately one day.
- Branding would then need to be applied.
- If these templates were set up in a CMS, then the process would be more streamlined and scalable.
Pro: Bootstrap is scalable, especially when combined with an enterprise CMS
The other major benefit of Bootstrap is it's very scalable. If you combine Bootstrap with an enterprise CMS, such as Squiz Matrix, you can deploy Bootstrap websites quickly and with ease.
You could quickly deploy a number of campaign websites or mini sites using Bootstrap. And if the design suite has already been pre-approved by your marketing team, this speeds up production and the launch process. Combining Bootstrap with an enterprise CMS, such as Squiz Matrix, means that editors can quickly deploy websites themselves. Editors can deploy a new mini website with the use of mouse clicks, thus avoiding meetings, bureaucracy and lengthy development cycles.
Squiz has created and delivered a Bootstrap template, which you can download from the Squiz Marketplace. Published Pixels has tried and tested this template, and have determined it’s of an excellent standard. We extended it by building demo pages just to demonstrate how Squiz Matrix can be used with Bootstrap and to demonstrate the power of Squiz Matrix.
Pro: You can extend the efficiency of Bootstrap with an enterprise CMS
Once Bootstrap is combined with an enterprise CMS, such as Squiz Matrix, you will have all the ‘bells and whistles’ that come with an enterprise CMS, such as personalisation, content reuse, the ability to apply mass changes across a large number of assets, multi-language, a very user friendly editing tool called Edit + (which is probably the best WYSIWYG editing tool in the world) and many more features and benefits. Squiz Matrix CMS can also be configured to draw in content from other websites. So, whether it’s other websites’ built-in Squiz CMS, RSS feeds, APIs or other data services, you can reuse existing content. For example, Data Gov has a whole stack of data feeds that can be easily drawn into Squiz Matrix, and then used to republish content.
Pro: replacing an outdated design that would otherwise remain as is
There are a number of situations and scenarios where Bootstrap for enterprise can be very useful. For example, a Bootstrap-based website is still better than one with an outdated and unprofessional design. Within large organisations, some websites that have a low priority are using a design from years prior. These outdated designs are sometimes not mobile-friendly. So in this situation, a Bootstrap design can remedy the problem, because out of the box, Bootstrap looks professional and is of course mobile-friendly.
Con: branding a Bootstrap-based website design
This is where the major con of Bootstrap becomes apparent – that is, when you want to apply your own brand and styling to your Bootstrap-based website.
You can quickly update the:
- font styles
- font colours
- colouring, and (of course)
- logo.
However, this will only take you so far in your journey to a unique design.
You have many old websites that need to be rebuilt quickly
Another scenario where this design system is useful relates to scalability. A company may have, say, 10 sub-websites that are all out of date. Rebuilding all the websites using a unique design for each could take years. An alternative is to take an iterative approach.
An iterative approach would mean that improvements to the websites are made much sooner and more often. There will be a trade-off though: websites built using a common template framework often look like they have been built using a common template framework. While these new websites won’t have an overly unique look and feel, it will be a vast improvement on an outdated website.
Furthermore, a template-based website could be the first step in a practical, long-term timeline which includes the application of a unique design at a later date.
Release early and release often
You could spend a year working on a grand design with a unique look and feel that will perfectly represent your organisation. The problem is that in the mean-time, the most important stakeholder, the visitor, will have a poor experience with an outdated website.
Another option is to release a new website quickly using a template such as the Bootstrap, and then as a second phase, release a second version using a unique design.
Replacing an underperforming website with a Minimal Viable Product is better than your visitors having a poor website experience for months – while the gold-plated masterpiece is being carefully fine-tuned. Your masterpiece would still be launched – but in a later phase.
The Bootstrap framework aligns with the concept of ‘Minimal Viable Product’
Enterprise-sized website projects frequently go over time and over budget. Why? A common reason is ‘paralysis through analysis’. As the ‘shopping list’ of website requirements grows, so does the development timeline. To avoid this, the concept of a Minimal Viable Product (MVP) helps focus attention on the critical components of your website.
An MVP approach involves launching the critical components of a website within a relatively short timeframe, then periodically releasing improvements in subsequent phases.
A faster return on your investment
Replacing an outdated website with an improved website will mean a better experience for visitors and a faster return on your investment. It also means a faster time to market.
Brand damage from an outdated website
In a way, the Bootstrap framework can be seen as a solution to the brand damage that results from an outdated website. The longer an outdated website is published, the greater the damage it’s doing.
Look and feel of a website built using this design system
Using the Bootstrap framework will no doubt shorten the project timeline and reduce costs. When using any design template, limitations in customisation is the main trade-off of shortening the design and development phases of a website project.
This is not to say that a company cannot have unique-looking websites. Once the template system has been set up, the colours of your brand / style guide can easily be applied to these templates. The problem is that a Bootstrap template can only be branded so far before the task becomes very time consuming there will be a point where the time meets or exceeds the time of a bespoke design and front-end development.
Standardisation vs unique branding
Using a design template enables you to enjoy time and cost savings – while still applying your own brand to your website.
Applying your own branding has been accounted for in the framework. Developers can start with these components then change branding elements such as:
- Colour scheme
- Font size and spacing
- and more.
The framework is also well documented, including instructions on creating new components.
Demonstration of a Bootstrap template in Squiz CMS
As a tangible demonstration, Polish Pixels has built a demo website using the Bootstrap template.
This is just a demonstration website and contains stock photos and placeholder text. The point of this website is to demonstrate that these templates are compatible with an enterprise CMS and to allow you to click through the website yourself.
Building a website using these templates in an enterprise CMS adds a new level of efficiency, because enterprise CMS platforms are excellent at enabling efficiencies within large organisations that have many websites.
Squiz Matrix can be configured to efficiently manage multiple websites that share a common design system or set of templates and elements. Once set up correctly, applying a customised branding in Squiz CMS is a matter of a small number of mouse clicks. Furthermore, once set up, deploying a new website that uses a design system is very quick and straightforward.
This demonstration website also shows that we have tried and tested this functionality for you and can confirm that it all works.
Ongoing maintenance of template-based websites
Using Squiz CMS, ongoing maintenance is streamlined because improvements and fixes can be efficiently rolled out across many websites. Over time, as it is further developed and extended, applying changes efficiently will be very important.
Website upkeep by non-technical website editors
Squiz CMS is excellent for enabling non-technical editors to place or embed elements within a page.
Squiz Pty Ltd offers a product named Edit +. It’s a very powerful and user-friendly WYSIWYG editor that makes keeping websites up to date extremely intuitive. Editors can focus on the quality of their content without getting entangled in the technical side of maintaining a website.
This is very important for large companies because Edit + would enable a team member (with the appropriate training and permissions) to easily insert pre-approved components into a webpage – without the time lag of seeking technical support.
Pages can be assembled from these building blocks according to the content.
More on Bootstrap and enterprise websites
There are two really good Quora articles about the pros and cons of Bootstrap
This post does an excellent job of succinctly summing up the pros and cons. A key pro from this article is that Bootstrap means faster front-end development. A key downside of Bootstrap for enterprise is the difficulty in producing a genuine design.
Another Quora article goes into more detail and ‘fleshes out’ some of those points about the pros and cons of using Bootstrap for an enterprise website.
