Posts

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.

Assess Your Website’s Page Speed: How to Do It Accurately

Posted on by Bob Wilson

If you have built your website and you have only seen how fast it loads on a new MacBook with a high speed internet connection than your testing has been inadequate. It’s easy to convince yourself that all of your webpages are loading well even when some of them are severely problematic. Your visitors will try to load your website on other than ideal conditions, and you need to see how your page loads under those conditions. You need to assess all of your pages, using speed assessment software in an emulated environment. And you need to assess your pages using real world information. This blog post will teach you the right way to assess you website’s page speed.

Assess Your Website’s Page Speed: Using Page Speed Insights

Google’s page speed insights is the simplest and most effective way to measure page speed. There are a number of different assessors on the market. But this assessor is free, thorough, and it doesn’t have any use limits. In particular, you want to pay attention to the difference between the mobile score and the desktop score. If your score is good on both (90 or better), and it is consistently good, then you shouldn’t try to beat yourself up trying to make it better.

screenshot of a perfect page speed score
screenshot of a perfect page speed score

If your score isn’t good on mobile or desktop, then you may want to ask yourself if it is worth the time and effort to improve it. Even perfect scores will recommend improvements.

Assess Your Website’s Page Speed: How Good Should Your Page Speed Insights Score Be?

Getting a score of ninety or better on mobile on every page isn’t necessary. However, it is feasible, and it is ideal, if you are willing to make the necessary sacrifices. There are a number of examples where getting a higher score is feasible if you put in the work, but the work is non-trivial. An example of this is loading your fonts through the Cloudflare CDN instead of the Google fonts CDN. Another example of something that will slow down page speed is the use of video. How you use the video and where the video is loading can create distinct performance results.

Using Page Speed Insights to Improve Your Performance

Google page speed insights will give you a number of recommendations for how to improve your page speed. But you shouldn’t expect to need to make every improvement. A lot of things that make a webpage cool can also slow down its load time. So you should use page speed insights to get your page speed to a load time that is consistently reasonable.

screenshot of opportunities and diagnostics
screenshot of opportunities and diagnostics

Focus on the page speed opportunities and diagnostics that have the highest performance impact. You don’t have to fulfill every requirement. Just keep going until you get a satisfactory score. If you can’t figure out how to improve each score, then you should consider hiring a professional.

Assess Your Website’s Page Speed: Using Cloudflare Web Analytics

Using Cloudflare Web Analytics is a great way to see how well your pages are running in real browsing environments right now. It will require you to sign up for Cloudflare, but this is highly recommended anyway to improve your page speed. Once you have signed up, setting up the evaluation is easy.

When you are looking at your core web vitals make sure that you have a significant number of visits and page views. You want to make sure that you have enough use cases that you can see a wide variety of results. Set the previous time span to somewhere between a week and a month. Usually the longer the time span, the more accurate the results.

You need to make sure that the results are coming back with a score of good (green) most of the time. You can hover over each core web vital color to see what the percentage value is for each score.

How Good Should Your Cloudflare Web Analytics Score Be?

You shouldn’t expect all of your pages to load well all of the time. If you have speed scores that are considered good at least seventy five percent of the time, you are performing adequately. If you are getting scores of good ninety percent of the time or greater, than you are performing excellent.

Assess Your Website’s Page Speed: Have a Professional Look at Your Site

Is your page speed score worse than it ought to be? Then maybe you should have a pro take a look at it. Sometimes when people build a website they just get lucky and they create it in a way that it loads well without any creative thought. But if you keep making improvements and your score speed isn’t improving, then you need to think about bringing in someone with more experience to your site.

Assess Your Website’s Page Speed: Questions?

If you have any questions, then please post them in the comments section.

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.

Feel free to verify whether or not this data is still accurate.

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 sometimes get 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.

WordPress Definitions Update

Posted on by Bob Wilson

WordPress definitions have made a lot of fundamental changes over the last few years, and there is a lot of new terminology. Making matters worse, a lot of new terminology sounds similar to older terminology and terms can be easily confused. Also, there is a lot of older terminology that is used in coordination with new technology even though the old terminology was used to describe old technology, so the old terms are misleading. Confused? I’ll bet you are. Your solution to confusion is to keep reading.

It should be noted that this is not meant to be an exhaustive glossary of WordPress terminology. It is meant to serve as a reference for commonly used new terms and old terms that have new definitions. This post was first published shortly after the release of WordPress 6.4.

WordPress Definitions: Blocks

WordPress blocks are a user interface used to develop content with WordPress. There are a number of different ways to add content with WordPress such as the customizer, the classic editor, and third party page builders. However WordPress blocks are currently the primary content development technology for WordPress.

Blocks can be created using the block editor, widget areas, and the site editor. Those definitions are explained below.

WordPress Definitions: Gutenberg

Gutenberg is a plugin that serves as the cutting edge for WordPress block development. It provides the latest features of the block editor before they are integrated into the WordPress core. You are not required to install Gutenberg to run WordPress.

WordPress Definitions: Block Editor

The block editor is not to be confused with the site editor. I’ll explain about the site editor later. The block editor has become the primary way to add most of your content in WordPress. It automatically opens up whenever you start or edit a new page or post.

Screenshot of the block editor

The block editor is used to manipulate content inside of WordPress pages. It offers controls that refine or override updates performed by the customizer or the site editor. You can read about the customizer and the site editor below.

Most of the block editor’s features are written by the WordPress core team, but parts of it may be extended by the WordPress theme that you have chosen.

The block editor replaced the classic editor as the primary way to add content through the WordPress core. The block editor has a higher learning curve than the classic editor, but the block editor is also more powerful.

WordPress Definitions: Customizer

The customizer is what you use to set up the layout and overall look of your website. It controls primary content containers for your site such as headers, footers, and sidebars. And it controls how your site is divided into different sections. The customizer is driven by a theme such as one of the Big Themes. Different themes have different looks and different customizer controls to manage the theme.

Screenshot of the customizer

You must have a theme that supports the customizer if you wish to access the customizer. You can access the customizer through the admin center by selecting Appearance > Customize.

WordPress Definitions: Widgets Areas

Widget areas are one type of control used by the customizer to add content into your website in areas that are shown in certain reoccurring sections of your website or every page of your website. Widget areas are called widget areas because they used to be controlled by a user interface known as widgets. Today they still can be controlled by classic widgets. But the primary way to add content to widget areas is using blocks. Essentially you can inject the block editor ad hoc into the customizer.

Screenshot of a widget area from the admin center

You can add content to widget areas using the WordPress admin center or the customizer.

WordPress Definitions: Site Editor

The site editor is the newest method for managing the overall look of your WordPress website. The site editor refers to full site editing. I explain the complete definition of full site editing in the next section.

Unlike the customizer, the site editor manipulates content exclusively through blocks. Like the customizer, the site editor is controlled by WordPress themes. That means that unless you have a theme that supports the site editor, you won’t be able to find the site editor in your admin center.

The site editor has struggled to gain popularity. Only 2 percent of theme downloads comes from themes tagged with full site editing. Users don’t like the site editor because of its high learning curve, and developers tend to dislike it because of its underdeveloped API. In other words, it can be more difficult to use the site editor than the customizer, and it offers less power than the customizer.

It is also important to note that the site editor does not replace the need to use the block editor. However, the block editor and the site editor can perform redundant functions, and they have a similar user interface, so it can be easy to confuse what is the most appropriate control choice.

Full Site Editing

Full Site Editing is a bit of a misnomer because it implies that your WordPress website can not be fully edited without the full site editor. This isn’t true. Full site editing also implies that site editing is the most powerful way to edit a WordPress website. This is also not true. The term full site editing is generally regarded as a mistake, however since it proliferated into areas where it is now hard to remove, it is still referenced for legacy purposes.

Block Based Themes

“Block based themes” is a really misleading term because it doesn’t refer to any theme that uses blocks. If a theme is supported by the customizer (which is the majority of themes that use blocks), then it is still not considered a block based theme. Block based themes are only themes that use the site editor.

The Classic Editor and Page Builders

The classic editor and page builders are no longer necessary for building a WordPress site since the introduction of the block editor. However, many people are familiar and comfortable with them, so they are still used. They are all plugins, so you don’t need to learn how to use them if you are unfamiliar with them, however I did write a little bit more about those subjects in an older article.

Questions?

Hopefully if you are either new to WordPress, or if you have been relying on older versions of it, then this article has brought you up to speed. If you have any questions, then please feel to write them into the comments area.