Why You Can’t Make Bespoke Designs With Bootstrap!

Let's break it down …

You’ve basically got two types of websites!

With and without a side menu and with or without top menus. 

So you can do a combination of about 10 different designs.  After that it comes down to the content, videos, and images. 

So you’ve got about 10 styles to choose from.

The next question that should be asked is what matters most, when it comes to converting traffic into loyal customers and clients?

Well it has to be the website’s code ….

One error can … 

 

  1. Prevent a website from ranking
  2. Prevent a website from working correctly on a device.
  3. Get you sued.
  4. A Government fine.

 

It’s the reason professional web designers that design using BSpoke validate their code and don’t use bloated, slow, made for the masses front-end or back-end frameworks.

The look of a website is subject to public opinions, ideas, preferences, likes, and dislikes but there can only really be one best way of doing things in the code and Bootstrap has shown a total disregard for doing things the best way or for that matter even correctly. 

Made for the masses, front-end frameworks like Bootstrap cost the end user money and the code is NOT Bespoke, because it’s made for the masses. 

Every front-end framework, no matter the name 

• Bootstrap

• Foundation

• Bulma

• Zurb

• Bulma

• Skeleton

• Pure

• Groundwork 

All suffer from code bloat because they were all made for the masses! 

The very meaning of being made for the masses is being mundane, ordinary, plain Jane vanilla. And if you're ordinary, if you're just like everyone else, the only place left to compete is price. 

No matter the framework, they all make bad assumptions and prevent you from adapting the newest and best coding practices. 

Bootstrap has an option for just about anything you could imagine. 

Bootstrap was originally created for internal use and never meant to be used in production!

You’ve got 3.5 million websites using a bloated, poorly coded platform because the most important part of their business was saving time in the creation of their website. 

Today, more than 19% of websites use Bootstrap. 

And that one decision … that many companies don’t even know they made, cost them money everyday. 

Bootstrap is for people who don’t understand the internet and how things work.  People with low budgets, high ambitions, and little understanding. 

It allows someone with very little knowledge to build a good looking website — at least in the eyes of the clients and probably most website users.

A framework that was never intended to be used in production or to be maintainable.

Every year you need to rebuild your website as the next version is released and this is not how your website should work in 2023.  The internet has become a living, breathing, thing, and to survive your website has to do the same. 

With split testing, analytics, and a slew of online tools you're able to bring your website to life.  Having it evolve and change by measuring how the end user responds to it. 

But you can't do this on a framework that forces a total rebuild every so often. 

Using a frontend framework hinders your ability to load quickly because of all the code bloat. 

And they make bad decisions ...

When designing a website for different screen sizes and devices you have breakpoints.  Bootstrap does this by dividing the design into columns, and then they assign column classes, in their divs. 

And they use pixel-based values.

The problem with pixel-based breakpoints is that they don’t work for accessibility. 

Breakpoints Units should be based on your font size and that font size should be a relative unit either EM or REM.  It is common for users with visual impairments to change the default browser font size. And with pixel-based breakpoints this breaks the design. 

And because of the way its setup it adds a lot of code bloat to the site as the site is forced to grow due to all the extra code you're forced to add in, as you design the site. 

And Bootstrap is full of coding errors and a total abuse and misuse of the !important statement.

In-total, there are 146 occurrences of !important in Bootstrap 4.

This is not how the !important statements in CSS are supposed to be used and it's considered bad practice and makes it difficult to maintain or adjust the code-base later.

Thankfully, with Bootstrap 5, usages are reduced to 19.

But when Amazon is saying a 1 second lag in its page load time would cost them $1.6 Billion dollars a year, do you really want to add 500KB of useless code to your site?

How much of Bootstrap do you actually use?

To create a simple landing page you would have to use jQuery, Bootstrap CSS, and Bootstrap JS.  And every line of code slows the site down.  Look at all the code you're linking out to and look at how much of that code you're actually using. 

It's like internet pollution.

Bootstrap has so many components, utilities, and options that you will most likely never use half of them. 

And again, you lose money by the millisecond. 

The data shows that nothing hurts conversions more than a slow website. 

Consumers are more demanding than ever before. 

They don't like friction and if everything is equal they'll go with the one with less friction. 

Speed is outselling everything.

 

  1. Uber’s faster than a taxi.
  2. You can have the answer to any question in .3 seconds because at .5 Google lost 20% of their traffic.
  3. Netflix and Spotify deliver content on demand.
  4. You can have a car pick you up in five minutes.
  5. A pizza delivered in 20 minutes.
  6. Groceries in 60 minutes.

 

Because the one thing more important than anything else is speed. 

• Mobify said when they decreased page load times by 100 milliseconds they saw a 1.11% increase in sales. 

• AutoAnything said they saw a 12-13% increase by cutting load times in half. 

• Walmart said one second increased conversions by 2% 

• BBC said they lost 10% of their total users for every additional second it took their pages to load.

• COOK reduced page loads by 850 milliseconds and saw a 7% increase in conversions, a 7% decrease in bounce rates, and increased pages per session by 10%.

• AutoAnything reduced page load time by half and saw a boost of 12% to 13% in sales.

• Retailer Furniture Village decreased load times by 20% and got a 10% increase in conversions.

• According to a Google study, if your website takes 3 seconds to load, you lose 53% of your traffic …

• And in 2 seconds you’ve got a Google penalty.

A look at 5 million desktop and mobile pages found that the average time it takes to fully load a webpage is 10.3 seconds on desktop, and 27.3 seconds on mobile.

So you're losing money if your site takes more than .3 milliseconds to load and the average Bootstrap website takes about 15 seconds to load.

It’s like drag racing with the AC on …

• It’ll cost you more.

• You’ll lose speed and power. 

When we talk about coding we talk about the expense associated with development and maintenance but we don’t talk about the expense of bad code …

• Increase load times.

• Kills conversion. 

• Waste resources. 

• Kills rankings.. 

• Hurts credibility. 

High-quality, custom tailored code will always save money and increase sales. 

What’s a Framework?

A “Framework” is nothing more than a way of doing things.

It’s a process, a pattern created by a group of people that believe this the best, quickest, easiest, or whatever reason has motivated them to code this process.

The advantages of using a framework is that you don’t need to build out any of the functionality. 

All you have to do is follow their instructions and tie it into their system.

And a framework doesn’t have to be complicated, you could call a style sheet a framework!  However, using a framework without understanding the goals, reasoning, and motivations of its creators could be costly, harmful, and detrimental to the future of your business.

Why use a Framework?

Frameworks save the developers, coders, and designers time.  Most companies hire according to which frameworks you know.  When you build a website there are a lot of things you will do over and over again, so frameworks came along to save time and prevent you from having to do the same things over and over again.

And depending on the framework you're using will also depend on the cost you'll pay.

But sadly what's not being talked about is how a 1 second increase in load times, caused by bad code could be costing you millions a year. 

Types and Uses of Frameworks

Professional front-end developers do not use made for the masses frameworks. 

A framework is nothing more than a pattern, so having a pattern isn’t a bad thing but when you take that pattern, tweak it, stretch it, and turn it into a one size fits all ... it can’t compete with a mean, lean, coded for the project, coded for speed website.

Made for the masses frameworks are normally made for beginners and require more code in addition to the already trying to be everything to everybody problem. 

I guess it all comes down to the end goals but it just makes sense that if your writing code that you’ll be repeating over and over again and hope to never have to write it again, you would write the code to meet all current coding standards but sadly coding standards never seem to come up when coding front end frameworks.

And something to consider is the differences between an expert and an amateur is the quality of the code and one way of accessing the quality of the code is to see if it validates and 99% of web designers never check their code to even see if it validates.

The internet is Constantly Changing and Evolving

Because the internet is constantly changing and evolving the frameworks are also having to twist, change, and turn to keep up with it. And many times, this means having to chunk your old theme and totally redesign, year after year to try and keep up with the Internet.

By having a website outside of these made for the masses frameworks you're able to evolve with the internet instead of looking like some kind of parasite that has attached itself to it.

And frameworks come and go.

What Makes a Good Framework

If you're a coder and someone asks you what constitutes good code then you have to say the quality of the code.

The way you establish the quality of the framework is that it meets all the standards and doesn’t have any errors. The way you find errors is by validating the code and if you can’t validate the code how can the developer be sure he didn’t forget to close a tag?

A professional writes code that meets all the standards and validates so a good framework does the same.

How can you introduce a framework that doesn’t meet all the standards?

So web designers talking about Bespoke website designs and claiming they are building them while using made for the masses front-end and back-end frameworks are telling lies and screwing their clients.

Previous Next
Frank

About Frank

With over two decades of experience, Janeth is a seasoned programmer, designer, and frontend developer passionate about creating websites that empower individuals, families, and businesses to achieve financial stability and success.

Get Started!

Comments

Log in to add a comment.