Category: Bootstrap

Website Security Basics

Posted on by Bob Wilson

Where there’s a will, there’s a way. If somebody really wants to hack into your website, if they put enough time and effort into it, then they can probably make it happen. But most hackers aren’t looking for hard targets. They’re looking for easy targets. So here are some simple and highly effective ways that you can improve the security of your website.

Website Security Basics: Only Use Well Managed Input Boxes

An input box is one of the most direct paths to your website’s host server. The best way to keep your input boxes secure is to not create any in the first place. However, if you absolutely need one, you should make sure that you use extra caution.

A lot of people like to use contact forms. Many people consider contact forms to be standard operating procedure. If you have a business that you are sure would benefit from a contact form, then my recommendation is that you set it up through a well managed plugin that gets regular updates. Or have it built into to your page by a developer that will run regular updates. But the safest bet is to not use one.

Website Security Basics: Hide Your Passwords in a Private Directory

When you first set up your WordPress site it is not as secure as it could be out of the box. There are a bunch of passwords within your main WordPress directory. Put those passwords into a private directory. If you don’t know how to do this, then you should hire a developer to do it. If you do it wrong, then you’ll mess up your site. But if you don’t do it at all, then you’ll increase your chances of people being able to discover your passwords. Anytime you use passwords, make sure that you move them out of public directory paths.

Website Security Basics: Use a CDN like Cloudflare

CDNs don’t just make your website faster, they also create a checkpoint that your visitors have to pass through. Even free CDN versions will usually provide some kind of bot management. Setting up Cloudflare is free. So there really isn’t a good reason not to use it.

Website Security Basics: Download Your Software from Reputable Sources

Open source software often has little to no restriction on republication. Make sure that you download all of your open source software from legitimate download sources. It is common for people to take other people’s software, then repurpose it under their own brand and add malware to it. For example, if you want to download the Big Themes, then you should download them from wordpress.org or through the WordPress admin center.

Minimize the use of Third Party Inline JavaScript Services

Doing things like embedding interactive maps and third party videos can be a great way to improve the functionality of your site as long as you perform regular maintenance. However, hackers love to exploit these well known security vulnerabilities. A good rule of thumb is if you don’t regularly update these features, the you shouldn’t use them. Not using them will make your website more secure, and it will make your pages load faster, especially on mobile devices.

Frequently Update Your Support Software

People become timid about updating their support software because they worry that it will cause breaking changes. But not updating it can open up security vulnerabilities. If you use services like WordPress, you don’t have to necessarily update to the latest version as soon as it becomes available, but after the new version of WordPress receives a security update or two, you should probably update to the latest version.

Website Security Basics: Avoid Obscure Poorly Maintained Plugins

Some plugins don’t get updated for years and work great. So it can be difficult to determine the difference between a plugin that you can depend on and one that you can’t. You should do your research on any plugin that you use. And check on it on a regular basis to make sure that it doesn’t have any problems. If you’re not sure about the quality of a plugin, then you should contact a pro to review your site.

Website Security Basics: Avoid Hot New Underdeveloped Software

Open source software is often pushed out to the public with many bugs and problems undetected, including security vulnerabilities. And it can be difficult to tell when to adopt something new. New versions of existing software tend to be more reliable than totally new kinds of software, but that isn’t always true. Do your research or consult with a professional. Don’t be afraid to wait. But don’t be so timid that you fall behind.

Website Security Basics: Be Wary of Outdated Software

Some software works great long after it has reached its end of life and no new features are being added. Other old software becomes a place where hackers can find vulnerabilities that they know won’t be repaired. Using older software can be a great way to maintain site stability. But you have to make sure that it is still safe to use.

Have a Professional Review Your Website on a Regular Basis

Having a professional perform a routine checkup on your website is like seeing your physician once a year. Sometimes it seems like a waste of time because there is nothing wrong. And sometimes you find out things that you don’t want to learn. But you should do it anyway if you want avoid more serious problems.

How to Make a Full Screen Image Mobile Compatible

Posted on by Bob Wilson

A full screen image is a great way to make a landing page look great. And there have never been more options to set one up. Unfortunately, full screen images are tricky. And there are a lot of ways that you can add one that causes your web page to screw up.

The Dilemma of Full Screen Images

Full screen images have to satisfy very large screens and very small screens. Further, mobile devices interpret how images are printed to the screen different than laptops and desktops. Mobile devices interpret code differently. This causes changes in performance. Mobile devices tend to load pages slower than laptops and desktops. This slow load can be made even slower depending on how you set your images.

A full screen image
An example of a full screen image

Full Screen Image File Size

Like any image, you need to set your full screen image file size properly. You should convert your image to webp, then use trial and error to reduce your image’s file size to as small as possible without distorting the image’s quality.

Full Screen Image Dimensions

You’ll want your full screen image dimensions to be large enough to support large desktop screens. If you set the width to 2560 px that ought to be a large enough width. You will also want a second smaller file size of 600 px width for mobile devices.

Mobile Compatibility with Static HTML or Bootstrap

Mobile compatibility with custom static HTML written pages require more responsibility than a CMS driven website like WordPress. However, they also offer more flexibility than a CMS driven website. Static HTML pages also don’t require the use of PHP which puts less stress on your server and allows faster output.

Although CMS sites deal with a lot of redundant page load problems using automation, CMS sites will almost always overlook certain conditions that can be more easily handled using a static HTML driven webpage.

Using Fixed Images on Mobile Devices

Fixed images are images that stay in the same place when the screen moves. These kinds of images have special considerations on mobile devices. You should not make the assumption that setting an image to fixed using CSS will have the same result on both desktops and mobile devices. In fact, it is nearly certain that there will be a difference.

What makes matters even worse is that different mobile devices will produce different results. On IOS the image will be switched from fixed to static then stretched to fit the screen, and on Android the image will be fixed, but it will make a choppy adjustment to the screen size as the address bar is added and removed.

One solution is to avoid using fixed images, then set multiple image sizes for multiple screen sizes. However, if you want to use fixed images on mobile, I’ll show you the best methods later in this article.

Running a Full Screen Image on Android

Although Android tends to be more flexible than IOS, it tends to load webpages slower if you push it too hard. Nevertheless, Android is the most used smartphone operating system. The consequence is that whenever you have a smartphone sized screen, it behooves you to assume that it is being run on an Android operating system and you should minimize or avoid using fixed images.

Full Screen Image Sizing for Tablets

IPads tend to load fast, but you have to keep in mind that they run on an IOS operating system which has special considerations when delivering images. Having said that, IPads tend to outperform Androids if you know how to load the image properly. The main thing that you have to consider is fixed images. Fortunately you can use the Big Themes to solve that problem for you. I’ll cover that solution later in this article.

Managing Full Screen Image Sizes with Bootstrap

Bootstrap is a mobile first design, so it behooves you to use your smallest images as your default images. That means when you are writing your CSS, you should load the mobile size image first, then tell the browser that if the screen is sufficiently large, then it should load a larger image. For example, you could use something like:

header.masthead {
  background: url("../img/SmallImage.webp");
}
@media (min-width: 600px ) {
  header.masthead {
    background: url("../img/LargeImage.webp");
  }
}

This above code is a good primer for a full screen image that moves with scrolling.

Using WordPress and the Big Themes to Manage Fixed Images

The Big Themes all come with built in scripts that will adjust your images so that they are compatible with your mobile devices. There’s a lot that goes into trying to write a browser side script that is platform independent. So you can save yourself a lot of time and effort if you run a WordPress theme that does this for you. The Big Themes can help you with this.

How Many Image Sizes Do You Need?

You can always make an argument to make another image size. But if your goal is to simply have a good mobile page speed score than usually two different page sizes are sufficient. Your primary consideration needs to be a large screen phone with an Android operating system.

Using the Big Themes

The Big Themes have multiple options for setting full screen images. To learn about setting up the Big Themes, you can head over to the instructions page.

Once you have set up your theme, you can make your full screen images more mobile compatible using the customizer. Then you can use the Additional CSS section of the customizer to make your image more mobile friendly. For example, you could try adding the following:

@media screen and (min-width: 600px) {
	.home .wp-custom-header img {
           content: url("LargeImage.webp");
        }
}
@media screen and (max-width: 599px) {
	.home .wp-custom-header img {
          display: none;
	}
	.home .wp-custom-header {
	   background-image: url('smallImage.webp') !important; 
           background-position: center center;
           background-size: cover;
        }
}

Need Help Writing the Code?

Some people are better at writing CSS than others. Hiring a professional can be a great way to make sure that you are doing things correctly.

Profile Website: How and Why You Should Build One

Posted on by Bob Wilson

Do you have a job? Do you use the internet? If the answer to both of these questions is yes, then you can benefit from a profile website. This is especially true if you work for yourself.

How People Use the Internet

If you’re a human being that performs almost any kind of service imaginable, then you have a reasonable justification for building a profile website to promote yourself. As of the publication of this post, the number one used website on the internet is the Google search engine. It is number one by a large margin, and number two is it’s sister company YouTube.

After those two websites, you would have to add together several of the next most popular websites to achieve the same number of visits for the visit count of either of the top two websites. That means all of your other social media websites combined may only account for a fraction of the traffic running through Google Search, and that fraction would become a fraction of a fraction if you combined it with the influence of YouTube.

The Results of the Hard Math

Yes, people can still search for your social media accounts through Google. But if they do that, are they really searching for you? If they land on your social media page, how long does it take for the social media site to give a list of your competitors.

If you had your own website, then people could be coming to you directly. You could be taking full control of the narrative. If you don’t do this, then the narrative will always be framed by somebody else and juxtaposed against a sea of competitors ready to replace you. The hard math is that each one of us is just one of eight billion. And the internet is the foundational media mechanism for the entire world. If you don’t even have your own website, how special can you expect to appear to be?

Future Proofing Your Identity

What if one of the social media services that you use changes it’s policies in a way that causes your profile to be irrelevant? Even worse, what if the social media company shuts down your profile, or the social media company collapses? You and all your media could go out of business overnight.

Having your own profile website means you will maintain your online presence even if your other media platforms become unreliable.

What Does a Profile Website Need to Look Like?

You shouldn’t think of a profile website as a mechanism to necessarily replace your social media. You should think of your profile website as a mechanism to serve at the very least as a landing page for your social media. If your social media pages have vehicles for your business that are superior to what your website can easily facilitate, then you should keep using social media.

Owning Your Profile Website

It’s important that you don’t simply use a service that provides a series of links to your social media accounts. These services have a bad reputation among social media companies and have been banned and regarded as spam websites. Even if you can get away with using one, you still risk having your reputation hurt by being affiliated with one.

When you own your website, you have maximum control over the content. Even if your website starts out as nothing more than an about section and a list of your social media links, it still serves as a foundation to becoming something much bigger.

Should You Use a CMS?

I would recommend that the foundation of your website should either be Bootstrap or WordPress. Bootstrap is fast and more flexible than WordPress, but Bootstrap is also more complicated to use and content creation and updates tend to take longer to develop. If you choose Bootstrap and you’re not a developer, then you should probably hire a professional to work with.

First you can take a look at an example of my profile using Bootstrap:

Full Screen Profile Image
Click on the image to see the page.

Next you can take a look at an example of a real estate agent’s profile using WordPress:

Real Estate Agent Profile
Click on the image to open a video demo in YouTube

When you consider which type of profile website you want to build, you should consider that you can extend a Bootstrap site with a WordPress site.

Profile Website Potential

The biggest benefit of having a profile website is your visitors don’t need an account to access your information. Also, a profile website can be used to do things that social media doesn’t do as well.

A profile website can be used to blog.

And a blog can be used to list upcoming events.

A profile website can act as a sample of your social media for people that don’t currently have accounts to your social media. You can explain how your different social media accounts integrate with each other, or how they integrate with your business.

Landing Page (Using the WordPress Media and Text Block)

Below you can see an example from my Big Themes subdirectory. It uses the media and text block at the top of the page. This is one of the simplest and most effective ways to build a landing page. It looks good, it responds well to different screens, and it is relatively easy to make it mobile friendly.

Media and Text with a Background Image that can be used as a profile template
Click the image to see the live page.

Using a Background Image on Your Profile Website

If you use a media and text block, then you will be left with a fair amount of negative space on large screens. You can see an example of this in the screenshot above. A background image is a great way to take that negative space and fill it in with something more colorful.

You can manage your page width to make the background image stand out.

Using a Navbar on Your Profile Website

If your profile website contains multiple pages, then you will need to use a navbar. However, if your profile website only has one page, and it only contains a few sections of content all of which are short, then you may decide that you don’t need a navbar at all.

Below is an example of a website for a bar. Although it does not technically constitute a profile website, the layout could easily be repurposed to service one.

website used to promote a bar that could be used as a profile website
Click on the image to open a video demo in YouTube

Repurposing Content Patterns on Your Profile Website

It is best to not try to reinvent the wheel when you are building your profile website. You can use all of the examples in this article to repurpose existing content patterns to facilitate your content. If you are using WordPress, then this can be done with block patterns.

Working With a Professional on Your Profile Website

You may have avoided building your own profile website because you like working by yourself. And that’s a great attitude to have if you want to own your profile website. But if you want your profile website to be profitable, sometimes you have to spend a little money to make a lot of money. If you work with a professional, then you will make sure that your profile website is set up right. You won’t have to worry about making a bunch of rookie mistakes that you might not notice, but your customers do. Once a professional has your profile website set up properly, then you can take over. If you read this blog, then you’ll have the resources you need if you run into a problem. And if you already have a professional as a resource, then you’ll have somebody that you can contact if you’re in a jam that you can’t get out of.

Should You Update Your Website’s Software Version?

Posted on by Bob Wilson

Should you update your website’s software version? It might seem intuitive to always update to the absolute latest version of whatever website software that you may be using as soon as it is available. However, adopting this philosophy dogmatically might lead to more problems than if you applied a less aggressive updating strategy.

Beta Versions and Alpha Versions

When I speak of the latest version of a piece of web software, I want to make it clear that I am not referring to alpha or beta versions. I am only referring to releases that are considered by its developers to be generally usable.

Two Use Cases: WordPress and Bootstrap

It’s impossible to give a completely exhaustive analysis of use cases, so what I will do in this post is review some use cases for some of the most popular web development software: Bootstrap and WordPress.

Should You Update Your Website’s Software Version? Assessing the WordPress Core

WordPress provides core feature updates about three times a year. They like to add new features pretty aggressively. Some new features are great as soon as they are released. Other features take a while to mature. And some are never really worth using.

WordPress Version Numbering Convention

The WordPress numbering convention is a little weird. The two leftmost digits on the WordPress version number essentially act as a single number. Neither number extends past nine. You could sort of think of WordPress version 6.2.2 as version 62.2. A minor version number may extend well past nine. For example, there is a WordPress version 4.1.38.

Minor Versions

Minor version releases are almost always related to enhanced security or critical performance issues. Minor releases often continue even if you do not update to the next major version.

Major Versions

Major version releases are primarily related to new features. One thing to keep in mind about a major version release is that it opens up opportunities for security vulnerabilities. While it is true that older software is also known for security vulnerabilities, some of the most secure software is software that is old without being too old. Software tends to improve in security after it has been around for awhile and has had ample opportunity to be tested in real world environments and patched with security updates. It doesn’t start to become more vulnerable until it becomes unpopular and people stop paying attention to it. Likewise, the period in the beginning when the software has relatively untested and unpatched new features is also a period with the potential for security vulnerabilities.

WordPress Version Support

Officially, the latest major version of WordPress is the only version that is supported. But unofficially, it is known that older versions of WordPress get security updates all of the time.

The Classic Editor Versus Gutenberg Argument

It’s hard to reference WordPress versions without at least mentioning the classic editor versus Gutenberg argument. If you are a classic editor user, then this argument may be particularly meaningful.

Classic Editor Plugin Versus Older WordPress Core Version

I don’t use the classic editor, so I’m not really sure that I am in a great position to give advice on whether or not you should use the classic editor plugin or the classic editor block or an older WordPress version. However, from my somewhat distant vantage point, it seems that using the Classic Editor plugin may be the more suitable alternative since it implies that more attention will be given to security and it doesn’t require any concession for the block environment. You can read about my policy on plugin updates down below.

The Site Editor (AKA “Full Site Editor”)

The new site editor‘s performance is still pretty bad. But if you are using Gutenberg and the customizer to build your site, then it is pretty safe to say that you can just ignore the site editor as a consideration. There hasn’t been even the faintest implication that I am aware of that WordPress has any intention of stopping customizer support at any point in the future. I imagine that their behavior has much to do with the backlash against Gutenberg. Even though a lot of us like Gutenberg, I think it did seem a little rough to remove the classic editor from the core.

What I Intend to Do

In the past, I have generally made it my policy to test core beta releases on my development environment then update to the next major version as soon as WordPress makes it available. However, I have begun to question this. Over the past couple of years, I have repeatedly found bugs in various WordPress blocks that beta testing and WordPress documentation did not prepare me for. Its hard to determine exactly what the cause of every problem was, so I don’t want to be too quick to assign blame. But it seems that at least in some cases, block updates have feature changes that do not provide adequate backwards compatibility. Similar problems sometimes extend into the block editor.

Although, I frequently find at least one new feature that I want use in each major WordPress version, I think that I will be less likely to adopt the newest major version as soon as it is released. I will continue to test the latest versions in development environments to make sure that it is compatible with my software. But I might wait for it to go through a minor release or two before updating it into a production environment. This creates improved security and allows for more time for new feature adjustment.

Finally, I can’t think of a good reason why I would stop updating minor versions.

Should You Update Your Website’s Software Version? Assessing WordPress Plugins and Themes

WordPress plugins and themes are designed to support the WordPress core. This means that plugin and theme developers often update with every new version of WordPress core. However, not every developer does this. One of my favorite plugins (which I won’t name because it’s one of my favorite) has a habit of putting off or never bothering to update the version number when WordPress updates its core. But not updating the plugin isn’t all that unreasonable. If the plugin still works and doesn’t require any change to its code, then updating just for the sake of changing a version number might seem like an unnecessary hassle even for the end user that has to take the time to run the update.

Major and Minor Versions for Plugins and Themes

Major and minor versions for plugins and themes are usually released in a single stream. That means that once there is a new major version, you should not expect support for a previous major version. So it usually behooves you to update regardless of what version type it is.

My Policy on Plugin and Theme Version Control

Once I have committed to a plugin or theme, I find that the best policy is to just update to the latest version as soon as it is available. If the software has any problems that become unmanageable and research shows that it does not appear that any corrective measures will be performed by its developer(s), then I stop using the software or replace it.

If a plugin stops updating for a significant period of time (usually at least a year), then I might do research to see whether there are still implications of support, and I might consider contacting the developer. I may also see if there are alternative resources for the plugin’s features.

Should You Update Your Website’s Software Version? Assessing Bootstrap

When Bootstrap 4 reached its end of life at the beginning of 2023, I figured it was a good time to start migrating my Bootstrap pages to Bootstrap 5. However, I have come to conclusion that it behooves me to be more hesitant.

Understanding How Bootstrap Numbers Its Versions

The Bootstrap version update strategy is much more conservative than the WordPress strategy. It adds fewer new features much less frequently. The Bootstrap version numbering convention is different than the WordPress version numbering convention. The leftmost number is the major version number, then the number to the right is the features version for that major version, then the rightmost digit is the patches version for the major version’s features number.

End of Life Software

An end of life version tends to imply that you should stop using that version and update to the newest version. Both Bootstrap 3 and 4 have hit end of life. Bootstrap 5 is considered active as of the date of this post’s publication.

Evaluating Bootstrap’s Older Version Quality

Older versions of Bootstrap (Versions 3 and 4 in particular) are of remarkably high quality and are stable and secure. Compare that to the latest version of Bootstrap (version 5) which has a lot of experiments with a lot problems, but not a lot of new features. This will make you question whether or not 5 is the best choice even though 3 and 4 are end of life.

Bootstrap Older Version Support

The documentation on Bootstrap older version support is a bit more cryptic than the WordPress documentation. According to their official documentation version 4 and version 3 have both hit end of life and no future support is implied. However if you read the release information for version 4, you can see that they explicitly state that you should feel free to continue to use it after end of life which implies potential security support. And if you read W3Schools documentation they state that both 3 and 4 are still supported for critical updates. Although, I’m not aware of official affiliation between Bootstrap and W3Schools. And it’s also possible that W3Schools simply needs to update its documentation. Also, there is unofficial documentation stating explicitly that older versions will not receive support.

My way of interpreting all of this (and this is somewhat speculative) is that if there was a problem with Bootstrap 3 or 4 and it still had a lot of users when the problem occurred and the Bootstrap team could create a patch without exerting an unreasonable effort, then they would probably write the patch. However, this is not something that they want to promise, and they aren’t actively looking for problems to correct.

Security is Relative to Use

The degree that a security vulnerability is meaningful is also related to its use case. If a security vulnerability only exists in a certain feature when it is used in a certain way, then its existence may not make your site any more vulnerable to a security threat than if you were to update to a more secure version. Prudent user management is always one of the most important elements of site security.

Bootstrap 5 Performance

Even if you just assume that support will not be provided for the end of life versions, and you don’t feel comfortable with your own management, whether or not to update to 5 still isn’t obvious. As I mentioned above, I tried to update to Bootstrap 5, however when I started to make updates, I noticed a lot of problems with scrollspy. And it turns out that, I wasn’t the only one with this problem. Also, anytime you have a new version of software with a lot of problems, you should consider that there may be unknown security vulnerabilities as well.

Bootstrap 4 Performance

Bootstrap 4 performs really well. And it has almost every feature that Bootstrap 5 has. The only real fundamental difference between 4 and 5 is Bootstrap 4 is dependent on JQuery which isn’t really a problem if you don’t mind using JQuery. And as of the publication of this post, version 4.6.2 has no known security vulnerabilities. I think that right now, at least for a little while longer, Bootstrap 4 might be the best version choice if I want to have a stable version of Bootstrap and keep all the features that I have been enjoying.

Should You Update Your Website’s Software Version? My Personal Experience With Supporting Older Software

As an open source developer, I appreciate the necessity of supporting older software. Like many open source developers, at the time of the publication of this post, my older software is still my most popular software in spite of everything that I have done to try to promote my newer software.

Even when my newer software is well tested and genuinely better, I know that change can be hard for my customers, especially if they are satisfied with what they have and have worked hard to achieve it.

Well developed older software actually tends to be pretty easy to manage when you make it easy for your users to report problems. So I can tell you from personal experience that it is usually the developer’s desire to provide as much support as possible for as long as possible.

So should you update your website’s software version? The bottom line is that there is no one size fits all answer for when to update. Hopefully, you realize that you should consider updating all of your web software at regular intervals and be prepared to do whatever work is necessary to perform the updates when the time is right.