Work Archives - Page 2 of 5

How to Add a Header Video to Your Website’s Homepage

Posted on January 4, 2023June 14, 2023 by Bob Wilson

A video can be a great way to make your homepage pop, but adding a video is a lot easier said than done. A lot of problems can come up when loading a video that can have a significant negative impact on your site’s performance. This tutorial will give you a step by step explanation of your different options for adding a header video to your site’s homepage, and it will explain a video’s potential and its limitations.

Assumptions

This tutorial gives instructions on how to properly load a video to a WordPress site, and it gives instructions on how to load a video to a basic custom HTML page. So you don’t need to use WordPress to follow this tutorial. If you choose the HTML route, then the expectation is that you are proficient in HTML and CSS. No explicit design instructions are given for a custom page, so if you need further help with an HTML page, then you should consider contacting a pro. If you are setting your video to a standard HTML page, then you can ignore any of this post’s references to page caching, however a CDN is still recommended. These concepts are explained in greater detail below.

If you need to learn fundamentals about building a website, then you can read this.

Cost-Benefit Analysis of the Difference Between a Custom Site and a WordPress Theme

You don’t need to hire someone to set a video into your website. If you use a WordPress theme, then you will have a better chance of building the site yourself, instead of having to hire a pro. However, you need to take the time to set your video up right. If you don’t, then you will have a high probability of having a frustrating experience that won’t produce the results that you are looking for.

Demos for this Tutorial

This tutorial will refer to three different demos. It will refer to the video at the top of this post which you can jump to by clicking the “back to top” button in the lower right hand corner, and it will will refer to a custom site and a WordPress site that will be explained in the next two sections.

A Demo of a Custom Page with a Header Video

The biggest advantage of a custom HTML page is that you can minimize how much you rely on resources. This makes it easier to load a video file that has a larger byte size and runs for a longer period of time. You can also be more deliberate about how you set the video to different window sizes. You can see samples of how a custom page looks by clicking on either of the images below.

Screenshot of a large screen video on a custom page

Screenshot of a mobile screen video on a custom page

At the time of the publication of this post, the video being shown in the custom site was 3.4 MB. This is pretty high. This wouldn’t perform well on a 3G phone loading in Mumbai, India. But it still should perform reasonably well on most well connected mobile devices.

A Demo of a WordPress Site with a Header Video

A WordPress site is a great way to add a video if you don’t know how to code. In particular, you can utilize any of the free Big Themes to serve your videos. They each have a number of options which will be discussed below. You can click on either of the images below to see a demonstration.

Screenshot of a large screen video using the free Big Bob theme.

Screenshot of a mobile screen video using the free Big Bob theme.

At the time of the publication of this post, the video being shown in the links just above this paragraph was 519 KB. You can use each demo to compare the difference in page speed for different video byte sizes. At the time of the original publication of this post, the video being shown at the top of this post was about 1.1 MB. I eventually reduced the size to 231 KB. A good trick that you can use for compressing your video is to upload your video to YouTube, then download it back onto your computer. YouTube will probably have compressed your video quite a bit.

Note that all three video demos also utilized background images in addition to the video when this post was originally published. This shows that even though each page is loading a video, the page can load reasonably fast on mobile even when other features using a significant byte size are utilized.

Update (5/29/23): The background image of the WordPress Test was removed and the theme was updated. The background image may be added back in the future.

Update (6/14/23): The background image for this blog was removed.

Page Load Performance when Adding a Header Video

The best way to get the fastest page load possible is to not use a video at all. The biggest problem that people have when adding a video is they are unprepared for how much a video has the potential to reduce page load speed. All videos will create at least a little deprecation in page load performance, but if you are careful then this performance depreciation can be trivial in comparison to the improvement in your visitor’s experience.

Finding a Good Video

An ideal video is one that you make yourself, however this may be something that is beyond your means. The following are three websites that you can obtain free open source stock video footage from right now:

Another site worth mentioning is openverse. It doesn’t currently provide videos, but it is new, so it may be possible that this will change in the future.

You can also utilize YouTube videos with the free Big Themes. Make sure that you have made the necessary copyright considerations before you do this. Implementation will be discussed in greater detail later.

Use a Content Delivery Network (CDN)

If you are going to set a video into your site, then you will be dealing with media that has a large file size, so serving it through a CDN is pretty much mandatory. However, if you are unfamiliar with caching and CDN’s, then you should read about setting up the necessary caching software. When reading that tutorial, if you are not using WordPress, then you can skip over the sections about page caching and html caching.

Keep Your File Sizes Modest when Adding a Header Video

Even after you have set your website onto a CDN, you still need to keep your video’s file size reasonable. You want your video to load well across all devices, including mobile.

You should try to get your video’s file size as low as possible. How low should you go? You should try to get it low enough that it performs well on mobile. Ideally, you want the combined total byte size of your media (images, video, etc.) to be under 1 MB. If you have a good CDN, then you will probably be able to push your total file size a bit higher than 1 MB, but I wouldn’t push it any more than necessary. Later, I will also show you how you can set an alternative image for mobile which will allow you to use a larger video file size.

In addition to learning how to reduce your video’s file size, you should also learn how to reduce the file size of any other images that you may be using.

Editing Your Video to Make the File Size Smaller

Editing videos can be frustrating. Video editing will sometimes yield an unusable video. A video will just break after it loads for no obvious reason. But editing is necessary if you want your video to load well.

There are a number of different tools that are available for video editing, and it is impossible to write an exhaustive list. Today, I will show you how to use two different video editors:

Window’s Video Editor: If you have a Windows operating system, then you probably have it already loaded on your computer.
VLC: This is free open source software. It has fewer options than the Windows editor, but you can get your file sizes smaller. However, it seems to deliver more updated videos that break after being loaded onto websites.

Windows Video Editor

The Windows Video Editor is pretty intuitive, so I will spare you specific instructions. The most important things that you need to know are the two ways that you can reduce your file size:

You can cut the total length of the video.
You can reduce the dimensions of the video when you export it. However, you should keep in mind that a smaller export size can affect the performance of the video on larger screen sizes.

If you need more explicit instructions about using the Windows Video Editor, then please post your questions in the comments.

VLC

You can download VLC for free.

You can use VLC to cut the length of your video through a combination of recording and pausing. But I don’t recommend trying to figure this out because it is difficult to be precise.

Once you start playing around with VLC, you will probably set the features so that they are not to your liking, then you will forget the original settings. You can reset VLC to its default settings by going to Tools > Preferences > Reset Preferences (make sure simple is selected).

If you want to minimize page load speed, then your video’s image quality may need to be closer to standard definition than high definition. You can’t reduce byte size without compromising video quality.

Go to Media > Convert/Save > Add > Convert/Save > then go to Profile and continue scrolling down until find “Video for MPEG4 720p TV/device”.

If this does not adequately lower your video’s byte size, then you should try to lower the bit rate. You can lower the bit rate by going to Media > Convert/Save > Add > Convert/Save > then go to Profile and click on the wrench. This will open up a new window. You can click on the Video codec tab, then lower the bit rate until it produces a video with an adequate byte size.

Keep in mind that either of these actions can result in the video having performance problems after you load it onto your site, so you may need to use some trial and error. If you find that the mobile byte size requirements requires that you set a video that isn’t long enough, then you also have the option of hosting your video through YouTube or substituting your video for an image or a GIF on mobile. Both of these options will be discussed in greater detail below.

Mobile Compatibility when Adding a Header Video

You have to consider more than page load time when you consider mobile compatibility. You have to consider how the video will fit to the page.

Choosing the Right WordPress Theme for the Job

You can’t just pick any WordPress theme if you want your video to look good and load to your specifications. If you don’t already know of a theme that has adequate video options, then I recommend the Big Themes.

However, even the Big Themes have their limitations. Each theme has gone through a number of theme changes. This has resulted in a lot of new features being added, but it has also resulted in a couple of features being dropped. The earlier themes had the ability to add featured videos (window sized video headers for any page), and it had the ability to add background images for any page. In the latest themes, featured videos are no longer available because they had too many conflicts when WordPress added query loop blocks. And background images are removed in later themes whenever there is a homepage header image or a window fitted featured image to improve page loading speed.

If you are looking for an older style theme, like the one featured in the WordPress demo, then I would recommend using the Big Scene theme and reading its instructions.

What Kind of Video Are You Using?

Before taking the time to assess how to set your video, you should assess the nature of your video. Is your video something that is meant to sit in the background, or is the whole video screen meant to be watched and focused on. Is it valuable if you only see fragments of it? With the Big Themes, you can set your video using three primary methods:

Set your video to fit the window like in the WordPress demo.
Set the video to the top of the body like in this post. You can click the “back to top” in the lower right hand corner to review this video.
Set the video into the background. This requires a video that is more abstract and looks good even if you only see small portions of it.

Setting Your Video to Fill the Screen

By default the Big Themes set your homepage header videos to fit the screen. If you’re setting your video based on the window size, then you have three options for dealing with the negative space:

You can fill the background with an appropriate background color. Your background color can be updated in the Colors section of the customizer if you are using the Big Themes.
You can fill the background with a background image if you are using one of the earlier Big Themes.
You can add custom CSS to fill the video across the entire screen.

Adding Custom CSS to Fill the Video Across the Screen

I have already written about how to set your video to fill the screen if you are using the Big Themes in another post. The only thing that I’ll add to the discussion is that that tutorial is not comprehensive. There are a number of different scenarios and personal preferences that you may want to use to suit your circumstances. If you have trouble modifying the code to suit your needs, then please post a question in the comments section.

There’s also an argument to made for trying to write a video sizing algorithm using JavaScript. Using a generalized algorithm would make updating easier, but you should keep in mind that if you were to use this method, the script would have to be loaded at runtime which would increase the page load time after your website first appears on the screen. It would also make it more difficult to specify certain conditions. For example, you may want it to fit on wide screens and fill on mobile sized screens.

If you want your video always set to fit, then you don’t have to do anything. This is the default setting.

Using a YouTube Video

It is also possible to load a video through YouTube, which is a great way to load large videos fast, however YouTube has several drawbacks:

You have to set the video size to fit the screen. The above CSS tutorial will not work. And any remaining negative space will always appear black.
Some browsers will stop YouTube from auto playing. This makes setting the video into the background problematic.
It always announces that it is a YouTube video. However, you can use the navbar to cover some of this up on certain window sizes.

To add a YouTube video with the Big Themes, all you have to do is add the video’s address into the homepage header media section.

Setting Your Navbar’s Opacity

Most of the Big Themes allow you to change your navbar’s opacity. Navbar opacity is a measure of how easy it is to see through your navbar. You will probably want to do this to make your video more visible. You can find the opacity controls in the Colors section of the customizer.

A Note on Mobile Browsers when Adding a Header Video

If you set your video size based on the window size, then you should expect it to load lower on the page on some mobile browsers because they will move the bottom of the video below the viewport to make room for the address bar. The address bar will then recede into the top of the screen when the visitor scrolls down the page.

Setting Your Video to the Top of Your Homepage Body

If you are building your page from scratch, then you can you be more liberal about how you set your video. See the custom page demo. But if you are using a WordPress theme, then you will have to choose between layout options.

Adding your video to the top of the page body has the advantage and disadvantage of keeping the dimensions of your video smaller. This is an advantage because videos with smaller dimensions have lower byte sizes, but it is a disadvantage because you can’t make the video as big without distortion.

If are using WordPress, then you can use a video block. You can see a demo of this by viewing the video at the top of this post by clicking the “back to top” button in the lower right hand corner. Using this option will also let you set your video in front of a background image on the most recent Big Themes. Once you have set your video, you can use the block options to set your video to autoplay like in the screenshot below:

This is how you set a video block to autoplay at the top of the page body.

Setting Your Navbar’s Position Relative to the Body

The latest Big Themes allow you to set the page’s body relative to the navbar. This is a subjective process that will be affected by your background image, and the content of your navbar, and the content at the top of your page body. These options are great for distinguishing your layout on different window sizes.

Substitute an Image on Mobile

If you are trying to load a total media byte count that is larger than 1 MB, then you may want to consider substituting an image on mobile. You can cut a video frame into an image by using Windows Video Editor. You can then use the cropping feature to update your video frame so that it better fits a mobile device.

This will actually increase the page load on large screens because the image will be loaded first, then the video will be loaded. But on mobile environments only the image will be loaded, so the total byte size will be smaller on mobile. This allows you to use a video with a byte size small enough to run well on a desktop or laptop, but too large to run well on a mobile device.

If you are using one of the Big Themes, then make sure that the “Show Header Video on Mobile” control is switched off. This control can be found in the Homepage Header Media section of the customizer.

Consider a GIF when Adding a Header Video

Videos tend to have smaller byte sizes than .gif files, and videos tend to look better. But if you use a GIF then you can manipulate it like an image.

You can add a .gif file the same way that you add an image, and you can substitute it for a video the same way that you substitute an image.

There are an epic number of free ways to make a GIF, and I actually don’t make them very often. So I doubt that I can provide you with a better tutorial then something you can locate with a minimal amount of research using a search engine.

Setting Your Image or GIF to Fill the Phone’s Viewport

The Big Themes all have scripts to size your images to your visitor’s phone’s viewport. If you want your image or GIF to fill the screen, then all you have to do is turn on the “Big Header Image” control in the Homepage Header Media section of the customizer.

Using a Preloader when Adding a Header Video

The latest Big Themes all turn on a preloader whenever an image needs to be sized to the window after the page loads. You can turn this off in the Site Identity section of the customizer, but turning it off is not recommended. However, you should be aware that the preloader may cut into the beginning of your video, but this is usually only a trivial amount of time if you have everything set up right.

Questions about Adding a Header Video?

This tutorial was pretty thorough, but I still might have missed something. If there is something else that you need to know, then please post your question in the comments area.

How to Hire a GOOD Web Developer

Posted on December 27, 2022September 20, 2023 by Bob Wilson

It can be difficult for a website owner to figure out how to find a good web developer.

Owning a website is similar to owning a home or a car. Sometimes you can take care of it yourself, and sometimes you need to hire a professional. If you own your home, then you can go online and look up how to install a thermostat, then head out to the hardware store and install it yourself. But you can also try to install it yourself then install it wrong, then you have to call a HVAC pro to install it for you anyway.

But finding a reputable web developer is a bit more complicated than finding a licensed HVAC technician. There are a lot of people that advertise themselves as web developers that couldn’t code a “hello world” program if their life depended on it. Anybody can set their job title to web developer. There are no legal requirements.

Researching a Good Web Developer

Before you submit an inquiry to a prospective web developer, check their resume. Do they have an IT background? There will be IT problems. What is their academic background? Do they have a computer science degree? Do they have published software that you can try that people have had success with? Can they help you develop your content (writing, images, etc.)? If something unexpected comes up (which often does), how well will your web developer be able to handle it?

But even if you find someone reputable, how do you know if you are hiring the right developer for the site that you want to build? You want to hire a professional that is familiar with the kind of site that you are trying to build, someone with a design philosophy that appeals to you, and someone that knows how to say no to you when you have a request that is likely to be problematic for your site’s visitors.

Benefits of a Good Web Developer

With so many website building tools available, you may wonder why you should bother hiring a developer at all. The primary benefits of hiring a web developer are speed, quality, performance, the ability to build your site creatively, and you will work with someone that can minimize recurring costs like webhosting fees and software licensing fees.

How Much Does a Good Web Developer Cost?

Hiring a good solo developer will probably cost you at least a couple hundred dollars for a full site. You might be able to negotiate a slightly lower price than this if you think that you can build part of the site yourself. Developers pricing will vary based on the services provided. You can check out my pricing page here. A good solo developer will be able to help you quickly set up a site that is mobile friendly, loads fast, and is tailored to your content. If you don’t have at least a couple hundred dollars in your budget, then you should take the time to learn how to build your site yourself because you will probably do a better job than someone who is willing to work for less than this. If you think that building part of the site yourself is something you can do, but you will need help in certain areas, then talk to a solo developer about your needs, and you should be able to find a suitable solution.

What Kind of Modifications Does a Good Web Developer Make?

Modifications are often things that you can hypothetically do yourself, but you just don’t have the time or patience to figure it out. They are things that don’t have good generalized solutions that can be well built into content management user interface controls. Things such as:

Emailing a Prospective Web Developer

When you submit a query to a web developer stating an interest in their services, you should realize that most developers get a lot of queries that aren’t very serious. And you don’t want to give the impression that you are likely wasting the developer’s time. Most good developers don’t have the ability to serve every prospective client. You need to give the impression that you are serious about what you are doing and that you have put a considerable amount of thought into it.

Below is a list of questions that your prospective web developer will want to know the answers to. You don’t need to answer every question in your query, but you should show that you are not an anonymous person searching for estimates on a site that you aren’t even sure that you want to build yet. Estimates are time consuming, and most good developers don’t want to take the time to write them up if you don’t seem serious. Here are the questions:

What is your legal name? You should not expect someone to provide an estimate for you if you are anonymous. Anonymity implies spam.
What is your legal address? How are you expecting to be held accountable for your bill?
What is the business or service or media that you will be promoting with your website? How much content do you have? Is this just an idea, or have you actually started taking action?
Will you need any help gathering and writing content?
How soon do you need the site or project completed?
How much money do you have to spend in your budget? Can you afford this?
Do you have any experience building or managing a website? It’s okay if you’ve tried to do it yourself and it didn’t work out.
Do you want to build your site using the developer’s published software? This can save you money.
Do you want any customizations performed on the developer’s published software? What will they be? Or are you expecting a site and content management system built from scratch?
How familiar are you with WordPress and the concept of content management?
Will you want customizations performed to your content management controls? Will you want custom layouts and templates? What will they be?
How familiar are you with web hosting and servers?
How are you expecting the site to be managed once it’s complete?
What is a phone number that your developer can reach you at so that they can contact you with questions?

It’s important to be able to communicate well with your developer. No mater how good your developer is, if you don’t make it clear what you want, then you won’t get what you want.

Solo Developers Versus Agencies

If you can find a solo developer that shares your design interests, then that will usually be a preferable choice over an agency. Most agencies have a requirement to churn through a certain number of clients in a given period to make their overhead, and because they have so many people working in different specialties, they often struggle with a lot of communication related problems that can result in their clients getting a site that is distinct from the one that they requested.

Agencies usually also tend to cost significantly more than solo developers. You can often get a site from a solo developer for hundreds of dollars that would cost thousands of dollars with an agency.

Hiring an agency is usually only preferable when you can’t find a solo developer that has an appealing web design philosophy. Solo developers tend to provide a smaller range of customization options than agencies, but solo developers also tend to be a lot better at the customization range that they perform, and they can usually do it cheaper and faster because they are more familiar with their specific development processes, and they don’t have the overhead of agencies.

Are You Ready to Hire Someone?

It’s okay if you’re still not ready to pull the trigger today. Take your time. Do your own research. And feel free to post any questions in the comments section.

But if you are ready to hire a pro, then check out my services, and see if they are right for you.

A Long Term Plan for Building and Maintaining a Website

Posted on December 26, 2022December 27, 2022 by Bob Wilson

Websites are dynamic. Building a GOOD website takes time, and maintaining and updating a website lasts indefinitely. So it can be helpful if you have an outline that you can keep coming back to so that you don’t lose track of what you are doing.

How to Read this Post

This is a blog post that you will probably want to come back to again and again. You can read it all at once, but you don’t have to. You should bookmark this post. Then you can come back to it after you have been distracted by non website building related work. This post contains lots of links that may take you through multiple days of work, so be patient and focus on improving your website one session at a time. If you take the time to put the work in, then you can make your website great.

It will probably be simplest if you follow each lesson in the order that it appears, but this isn’t mandatory. Even if you have already started your website, if you feel lost and confused, then this post can be helpful. It can show you how to overcome some fundamental problems that may have been nagging you for years.

Step 1: Organize the Information that You Need for Building and Maintaining a Website

If you have never built a website, and you don’t have any education in software development, then you are pretty much at the mercy of the internet, and the internet is really disorganized. This post will not tell you everything that you need to know, and it will not lead you to everything that you need to know. But it will help give you a great foundation that you can keep coming back to so that you don’t fly off onto a tangent in the wilderness of website development. If you ever feel overwhelmed and don’t know what to do, then reading this post from the beginning can be a great way to troubleshoot and find the solution to your problem.

Step 2: Determine Your Economy for Building and Maintaining a Website

You can’t bring a website into existence simply through the power of your imagination. You need resources. Before you take any action, you need to determine how much time and expense is necessary to build your website your way. Learn how to allocate fundamental resources for your site.

Step 3: Set Up Your Webhost and Foundational Software for Building and Maintaining Your Website

I never assume my customers will be running their website on a high quality managed webhost. I always assume that they are using something cheap and unmanaged, and they will need free support software to make sure that their sites load properly. If you are paying extra for managed hosting, then you may be able to skip some of these steps. However, there are five things that you will need to set up a site with unmanaged webhosting on a shared server. If all you have done is purchase a webhost, then you should give yourself a considerable amount of time to go through each of these steps. They will take awhile.

Content Management Software: Learn about WordPress.
Template Management Software: Learn about WordPress themes.
Caching Software: Learn how to get your pages loading fast without an expensive managed webhosting plan.
SEO Software: Learn to easiest ways to get your website noticed by search engines.
Image Manipulation Software: Learn how to make your images look good without sacrificing page load speed.

Step 4: Set Up Your Website and Add Content

Now that you have all of the software that you need installed, you can get into the business of setting up your layout and adding content. It is usually simpler to work on your layout before you add your content, but building a website isn’t a perfect process, so don’t let yourself get frustrated if you can’t or don’t do things in the ideal order. Below is a list of steps for building or updating your site’s content and layout. You should expect getting though this entire list to take a significant amount of time.

Update your theme. Updating your theme is usually difficult. But if your site isn’t doing what you want it to, then jamming another plugin into it probably isn’t the solution. If you want to make a real change, then you should probably take the time to change your theme. I highly recommend the Big Themes.
Set the right colors and fonts. Your colors and fonts will have more influence over how your site looks than anything else. Keep experimenting with them until they match your site’s message.
Set your main navbar properly. A great navbar will make your user’s experience easy, and it will make them want to continue using your site. But a bad navbar will make them want to leave your site. Your navbar will impact how the rest of your site works, so take the time to set it right.
Learn how to build a footer. Not every site needs a footer, but too many people don’t bother with them because they don’t even know how to set one up. Most sites that have a significant amount of content ought to have a footer, so learn how to set one up.
Learn how to build a sidebar. If you are blogging, then learning about sidebars is a must. But even if you are just building a regular website, sidebars can be very useful, especially for stuff like advertising.
Build a one page site. If you don’t have a site set up yet, then you have probably grown frustrated with how long this process has taken. Building a one page site is a great way to start your website presence. You can grow your website into multiple pages as time and content becomes available.
Add foundational content. If your site is still looking basic, then you can use simple features to add a lot of style. You can add images and video.
Create more sophisticated content. There are lots of free tools available for styling and organizing content. You should learn how to use them if you want your website to be taken seriously.
Get into the weeds. If you’re not a developer, then you should try to avoid coding as much as possible, but sometimes using a little coding is the only way to get something exactly the way you want it.
Ask for help. Developing websites is a collaborative process. Nobody builds a website in pure isolation. People that are afraid to ask questions usually make avoidable mistakes.

Questions?

I would like this post to be a living document that I can update periodically. If you think that there is something that ought to be added, or there is something about it that you don’t understand, then please post it to the comments area.

How to Add an Advertisement to a Sticky Sidebar

Posted on December 13, 2022January 12, 2023 by Bob Wilson

People don’t use websites to view advertisements. If you advertise too aggressively, then you will annoy your readers, and encourage them to leave your site. However, if your advertisement is too subtle, then nobody will notice that it is there. A sticky sidebar is a great way to get your advertisement noticed without disrupting your reader’s reading experience. This post will explain how to add an advertisement to a sticky sidebar.

Assumptions

This post assumes that you are familiar with WordPress and WordPress themes and that you know how to set up a website. It also assumes that you are familiar with widgets.

Before You Get Started Learning How to Add an Advertisement to a Sticky Sidebar

If you want to learn how to add an advertisement to a sticky sidebar, then you need a WordPress theme that supports sticky sidebars. One of the Big Themes would be a great choice, and the Big Chill theme would be an ideal choice because it is the latest Big Theme, and it has updates to maximize sticky sidebar compatibility with browsers. You can download Big Chill by going into to your WordPress admin center, then select Appearance > Themes > Add New, then type “Big Chill” into the search box.

Once you have installed your theme, you will be able to add your advertisement by using the customizer. You can find the customizer by going to the main admin page then selecting Appearance > Customize. Once you are in the customizer, you will want to select the “Sidebar and Footer Blocks” panel.

Screenshot of “Sidebar and Footer Blocks” section of the customizer

There are two areas where you can add sidebars. You can add sidebars to your pages and you can add sidebars to your posts (your posts are used if your site has a blog). Each sidebar area allows for two sidebars. Sidebar 1 is set first. It will be sticky if no other sidebar is displayed in that section. Sidebar 2 will be set underneath sidebar 1 if sidebar 1 is set. If sidebar 2 is set then sidebar 1 will remain static and sidebar 2 will stick.

If a sidebar sticks then it will size itself relative to the screen size and offer a scroll feature if the content exceeds the the viewport’s allowance.

Screenshot of sticky side advertisement adjusted for screen size

This is an important consideration. Many people will set their sticky advertisements without consideration for every conceivable screen size. I have personally witnessed many sticky advertisements that have not fit into the viewport of a 1366 x 625 screen, and it was impossible for me to access the entire advertisement. It also makes the website look unprofessional and sloppy.

Another important consideration is how to deal with the advertisement on mobile. There isn’t enough room for a sidebar on a smart phone screen. The Big Themes resolve this problem for you by setting your advertisement underneath the menu in the slide panel.

Screenshot of advertisements in slide panel.

A concern that you may have with this method is that your advertisement may be overlooked on mobile. However, you need to consider that the premise of this advertising method is that it minimizes the obstruction of the reading experience. There isn’t a good way to make sure your advertisement is seen on a mobile browser without obstructing the reading experience because the mobile viewport is so small.

If you want to make sure that the advertisement has a higher probability of being seen on mobile, then I would suggest that you add a copy of the advertisement into the body of your content or your footer and accept that your reader may have a more obstructed reading experience.

What is the Best Way for YOU to Add an Advertisement to Your Sidebar.

Now that you know the basics of how your advertisement will function, you can begin designing and setting your advertisement into position. The first thing that you should ask is, do you need anything placed in the sidebar area other than an advertisement? If the answer to your question is yes, then I would suggest that you add your content that doesn’t advertise into sidebar 1, and set your advertisement into sidebar 2. Otherwise, you can just set your advertisement into sidebar 1.

The next question that you will need to ask yourself is, how much space do you need for your advertisement? There are a number factors that can influence this decision, and there a number of solutions for dealing with those factors, and it is impossible to consider every use case. However, I do have a solution that is capable of resolving a number of use cases.

How to Add a Heading with Inline Images

A simple solution to displaying one or more advertisements in a sidebar is to add them as inline thumbnails and set them into a scrolling container. The advantage to using a scrolling container instead of a slider is it displays more images at once on large screens. Since you are using one of the Big Themes, you don’t have to do anything to set up the scrolling feature. A scrolling feature will be automatically added if the viewport requires it.

You can add a heading with inline images by proceeding through the following steps

Select the sidebar that you want to use to display your advertisement.
Add a heading block announcing your advertisement, then add space under the text by pushing shift + enter. It is also a good idea to set the alignment to center.
Click the dropdown arrow (see image below) and begin adding inline images. It is recommended that you set the width of your images to 150 and that you convert them to WebP prior to uploading them.

Add a custom class to your heading block. In this example, I will be adding the class name “bb-free-software”, but you can name your class whatever you want. You can open up the side panel in the customizer by clicking on the three dots in the image above, then select “Show more settings”.
Go to the Additional CSS section of the customizer and add the following custom CSS (you’ll need to adjust the class name to the name you added):

.bb-free-software img {
border-radius: 10px;
margin-left: 5px;
margin-right: 5px;
}
Add links to your images. You can do this by selecting each image and clicking on the the link icon displayed in the screenshot above.
Check to make sure that your images look good in different viewports.

This is just one of many ways to set an advertisement into a sticky sidebar. Feel free to experiment with adding different kinds of blocks and patterns to your sidebar.

Questions?

Thanks for reading. If you have any questions then feel free to post them in the comments section.

A Guide for Building a Website in 2023

Posted on December 7, 2022December 27, 2022 by Bob Wilson

It’s outrageous how many different ways there are to build a website. If you need a website, but don’t have the budget to hire a web developer, and you don’t have any experience building a website, then it’s easy to get sucked into bad choices. This guide will give you a broad overview of how to set up a website so that you can sustain it and improve it over time. It will help you set realistic expectations for the kind of sacrifices that you will need to make and the level of talent that you will need to have to build and maintain a website. And it will help you avoid the pitfalls that would likely cause you to give up and hire a developer or abandon your site completely.

Assumptions

This post is for raw beginners. There are no assumptions of knowledge for this post. But that isn’t meant to imply that this post will tell you absolutely everything that you need to know about building a website. I have provided links when it is intuitive, but you will also need to learn things on your own. It’s okay if you don’t understand everything that I reference. If I reference a piece of tech or a concept that you have never heard of, then you don’t need to immediately look it up. You will learn about things later as go through the process of building your site.

Building a GOOD website isn’t easy. If you have it in your head that a website doesn’t have to be much more than a glorified business card, then my advice is that you probably shouldn’t bother building a website at all and stick with promoting yourself or your business through social media, or you should hire a pro to help you build your site. It’s better to have no website than it is to have a bad website. However, if you can accept that reading this post is just the tip of the iceberg for what you need to learn to build your website, then you are ready to begin your training.

How to Read this Post

This post is a pretty fast read, but it contains a fair amount of links, and the links will lead to more links. I would make sure to read this whole post at least once before you click on any of the links or make any decisions. You can bookmark this article, and use it as a primer for when you need to start working again.

Once you’re done reading this post, you will probably realize that you are going to need to set aside time to do even more research before you begin making any purchases or setting anything up. Oftentimes people will put off building a website then panic or get impatient and make a bunch of bad decisions when setting it up. Research and design are huge components of building a website, and you should consider those activities as serious and important work. Remember the carpenter’s expression, “measure twice and cut once.”

Step 1: Set a Budget for Building a Website

There’s no such thing as a good free website. You can build a website without paying much money, but if you do then you’re going to need to put a lot of your time into building it. You can usually set up a decent quality website for a few hundred bucks, and then you can probably get away without paying for anything else for several years. However, you should realize that running a website by yourself usually gets more expensive over time. And the expenses tend to grow in proportion to your original expenditures. So it’s a good idea to start out as cheap as feasible. But the financial cost isn’t the real cost.

If you want to build a good website without a developer, then you need to be willing to devote a significant amount of time to it. You need to treat it like a part time job. It has to be something that you are willing to work on every week indefinitely. Don’t make the assumption that building a website is something that you can bang out over a few weekends or a vacation and then forget about it. If you take that attitude, then your site probably won’t be very good (or at least nobody but you will be convinced that it’s good). If you’re too busy to devote at least four hours a week to building your site, then you might want to give serious consideration to paying someone to help you.

Consider hiring a pro. Even if you don’t hire a pro, you should consider the dichotomy between doing it yourself, and having someone do it for you. Consider how much a pro will charge you, and consider how much of your own time that you will have to give even though you are working with a pro. You don’t need to contact a pro to do this. You should do your own research on the internet. If you do contact a pro, then you should have a budget, and you should have a list of expectations. Otherwise, you may find yourself being taken advantage of. You can keep reading this post and this blog to begin getting an idea of what those expectations ought to be.

Step 2: Get a Webhost for Building a Website

Before you start building your site, your site is going to need to exist somewhere. You need a physical server so people can actually look up your site and view it. You’ll also want to buy a domain. Most webhosts will do this cheap, but there are other companies that specialize in registering domains that will do it even cheaper. If you are a raw beginner, HostGator isn’t a bad choice. It isn’t perfect, but if you are willing to take the time to set it up properly, you can get your site loading reasonably fast onto browsers at a relatively inexpensive price, and you get unlimited memory.

Do your research. Don’t choose the first webhost that is recommended to you. Take the time to consider other webhosts too. There are a lot of things to consider when picking a webhost, and most of them are pretty intuitive. However, the consideration that most people struggle with is caching. This is a complex subject that is usually hard for raw beginners to understand, and the result is raw beginners tend to choose a webhost with no idea about how their caching services work.

You should take the time to learn how caching works by reading this post before you decide which webhost is best for you. If you don’t then you will probably either end up paying for services that you could set up yourself for free, or you may end up with a slow website because you don’t know how to set up your caching services.

Another important consideration to make that raw beginners often overlook is the geographic location of your server. It is impossible to serve the entire world equally unless you have a substantial budget. You will need to decide which geographic region ought to get the best service. Once you have read about caching, the reason for why you need to make this sacrifice ought to become more clear to you.

Step 3: Select a CMS for Building a Website

If you are not a developer, and you want to build your own website, then a content management service is mandatory. Don’t worry right now if you don’t understand what a CMS is. You can research that later.

I highly recommend that you choose WordPress as your CMS. It will provide you with everything you need (and a whole lot that you don’t need) to build a sophisticated website. You can add WordPress to your webhost even if your webhost doesn’t provide a service for you, but most likely, your webhost will. There are other options for content management, but they tend to be either less accessible, less powerful, and/or produce results that are too generic and not very appealing.

Once you have your foundational WordPress website set up, you will need a WordPress theme. Nothing you do will have a higher impact on how your WordPress site looks and functions than your WordPress theme. If you like this blog, then using one of the Big Themes is the right choice for your first WordPress theme. The Big Themes have tons of documentation (including on this blog) and are updated on a regular basis.

After your theme is loaded, you will have a lot of options at your disposal. It can be overwhelming trying to figure out where to start. You may be tempted to try to add even more WordPress options. But you should be wary of trying too many things. You don’t want to get stuck in the startup stage of building your website because of paralysis by analysis. Stick with learning foundational tools, then consider whether or not you need more features in the future.

You should try experimenting with the controls in the block editor and the controls in the customizer. Don’t let yourself get frustrated if you are a little confused by them at first. The more you use them, the more intuitive they become. Try building a one page site, and experiment with block patterns. You don’t have to be a developer to do this, but you do have to be comfortable with learning tech, and you have to be willing to work.

Step 4: Keep Learning

Don’t expect to get your website to be exactly right the first time you set it up. Websites are dynamic. They are designed with the expectation that they will be updated. Most great DIY websites didn’t start out that way. It’s okay if you think that your website kind of sucks in the beginning. You can make it great as long as you’re patient and you’re willing to try to improve one little piece at a time. If you keep some time set aside in every week, then you can eventually make your website awesome.

Questions?

Learning this stuff can be a bit like drinking from a fire house, so if you have a question, then please post it in the comments section.

Image Credit