Web & Graphic Design


Are you frustrated and overwhelmed trying to self-manage your website or build your own graphics? 

We've all been there. 

You want to add a new page to your website or create a graphic for Facebook. Everyone says it's easy, but the simple task has taken you five hours and it's still not working the way you want. 

And why is graphic design software so expensive and complicated?

Canva is easy enough if you stick to the stock templates, but forget it if you need something a little more complex.

Don't get us started with SEO, Google and their magic algorithms.


Every time you turn around you hear conflicting information about what your website is supposed to do, but it's all Greek to you. 

  • Why do you need to worry about page load speed? 
  • Do you need to think about long-form content, links, site titles, page descriptions?
  • What about SEO?

Computers and the internet have made it easy for anyone with the time and willingness to learn to manage their own website, but some days all those easy website fixes are enough to send you over the edge. 

We've put together a collection of tips and links to free and budget-friendly services to help you navigate the so-called simple web and graphic design tasks on your to-do list. And if you are feeling completely overwhelmed, Pat has office hours for guild members every other Thursday from 3:00 PM - 4:00 PM (EST).

With 17 years experience as a web and graphic designer, Pat can answer most of your questions, help you clean up quick tasks, and in some cases, provide one-on-one tutoring so you can DIY with confidence. 

Web Design & Development

This section contains a selection of basic tools and resources to help you manage your own website. Note: Unless otherwise noted, these tools were tested by The Business Guild and chosen for the average business owner who has little to no coding skills. 

GYGO_diy_website_2021_combined_compressed.jpgCheck out our new workshop!

DIY Your Website Like a Pro! is a 3-hour, hands-on workshop where you will learn how to use a free or paid Bootstrap template to create a modern, professional, budget-friendly website with absolutely no coding skills. 

read more>>

Looking for a Content Management System (CMS)? Here Are Our Top Picks

Concrete5 - Our favorite!

There is no doubt about it, Concrete5 is our absolute, number one favorite CMS.

There are hundreds of free and paid CMS and we've probably tried half of them. The thing we love about Concrete5 is that it ticks all the boxes for web developers and front-end users.

Concrete5 is an extremely user-friendly CMS that supports a wide variety of uses. 

  • Company Website
  • Storefront
  • Blog
  • Membership Forum

It was developed to make it easy for site owners to add pages, change the layout, and edit content by themselves right on the page.

There is no guesswork or coding skills required.

Need to edit content? Put the page into edit mode, click on the content and make your changes right on the page so you can see how they will look on the live website. 

Want to add a video, graphics, or Google map? Drag the block from the sidebar and drop it where you want it on the page. 

Concrete5 may not have as many plugins as WordPress, but it doesn't need to. 

Almost every task the average user needs to do is either built-in or part of the existing add-on library. 

More importantly, Concrete5 oversights all plugins in the repository so you never run into broken or incompatible apps. And if a third-party plugin isn't maintained it is removed from the add-on library. 


WordPress revolutionized the way we build websites. It was created to give people an easy way for people with no coding skills to have a blog without having to call their web developer every time they wanted to add a new post. 

Almost twenty years later, WordPress still enjoys 60% of the market share and is holding strong as the most popular CMS in the world. 

WordPress can be hacked and adapted for almost any use, but it's best use will always be for blogging. 

If you need a turnkey website WordPress is the number one global favorite. 


Tools, tips, & resources to help you build your website

What to look for in a Website or CMS

Build your website like the pros with Bootstrap CSS

Listed below are two online tools for using Bootstrap to build custom web pages. 

1. Bootsnipp.com is a free online tool for developing custom website themes in the popular Bootstrap CSS framework. 

With over 700 free themes that can be easily customized to work with almost every Content Management System (CMS), Bootsnipp.com provides a user-friendly drag and drop page builder for novices to quickly build their own custom web pages.

In addition to the basic page elements, Bootsnipp also offers tools to build forms, choose colors, and web fonts. Even more impressive, they have .htacess and favicon generators. 

2. Bootstrap.build is an online platform for customizing Bootstrap's common elements and classes.

Unlike Bootsnipp.com, which features an easy to use drag and drop editor for creating page layouts, Bootstrap.build assumes you already have a layout and just want to customize the page elements.

  • Colors for header tags and other fonts
  • Background colors and images
  • Navigation
  • Tables
  • Forms

Boostrap.build offers both free and paid levels that include a variety of free themes that can be used or edited.

Online Text Editors

Sometimes the most daunting part of trying to DIY code is finding and setting up the right text editor. 

Here are our top three picks for free user-friendly online text editors. They're a little lightweight for coding an entire project from scratch, but they are perfect for a novice user looking to add a single page or make minor changes.

  • Editpad is our favorite no-frills online text editor when we just need a place to quickly edit a piece of code. 
  • WriteURL requires a basic knowledge of HTML and CSS, but provides a clean visual interface where people can easily add code and customize elements with the use of user-friendly drop-down menus. 


Diffchecker is a lifesaver when you make a mistake editing a page and need to compare edited code with the original code to figure out what went wrong. 

All you need to do is drop the original source code on one side and the broken code on the other and Diffchecker finds and highlights any differences.

What are Scalable Vector Graphics and should you be using them on your website?

Scalable Vector Graphics (SVG)  differ fro traditional raster graphics, which are built similar to the old-style dot-matrix printers with squares of color, because they are built on a series of mathematical figures. 

Unlike PNG or JPG files that pixelate and become jagged when stretched, SVG files scale with the size of the screen without becoming blurry. 

When used correctly SVG files can be very helpful for increasing website speed and improving the overall appearance of your site, but their use comes with a warning.

While the file size of simple graphics like icons and logos can be smaller and faster than their PNG or JPG counterparts, complex graphics with a large canvas and a lot of paths can be enormous and drag down your website's performance.

Since there is no one size fits all answer to the question of when or how you should be using SVGs instead of PNGs or JPGs, we've curated a few articles from around the web about the pros and cons of using SVG graphics on your website. 

In case you're wondering, The Business Guild uses a combination of raster and vector graphics on our webpages. 

Improve Your Page Speed

Image Compressors

Website speed has always been a key issue for users. If they have to wait too long for images to load they're going to abandon your page and find another site that provides the information they need. 

Now that Google has decided that site speed will play a much larger role in site rank, your page load speed has gone from important to critical. 

It might not seem like a big deal, especially if you're in a specialty market with limited competition, but Google is also considering adding a pop-up warning when visitors navigate to slow-loading websites. 

In most cases, the primary cause of slow site speed can be attributed to large graphic files. 

If your website doesn't have an image compression plugin, or if it doesn't compress your images enough to appease Google, you can try running photos and graphic files through a third party compressor before uploading them to your website. 

We're including two free image compressors that do a nice job of reducing file size without reducing image quality. 

  • compressor.io can compress a variety of file types including jpg/jpeg, png, gif, and svg
  • tinypng.com is limited to png and jpg files but has the ability to compress up to 20 files at one time. This is especially useful if you are updating a batch of files. (Example: Updating multiple files already in use on your website.)

Both of these programs are super simple to use. Just drag and drop your file to the compressor and download it when it's done. 

SVG Tips

  • By definition SVG files are scalable, so you can easily reduce file size and increase speed by creating your SVG with the smallest canvas possible
  • Keep your SVG drawings clean by limiting the number of paths in a design
  • Use a graphic compressor like Compressor.io to reduce file size

Google Page Speed Insights

Most Google Developer Tools are designed for advanced users, but the increased emphasis on page speed makes it worth dipping your toe into Google's Page Speed Insights tools. 

In addition to providing an analysis of your website's page speed, this section of the Google developer tools provides links to related posts on Google's Webmaster Central and Stack Overflow, and other Google performance tools. 

Page & Website Cache

Website caching is one of those overlooked things that can make a substantial difference in how quickly a webpage is rendered. 

If you are on a CMS like Concrete5 all you need to do is navigate to the cache setting screen and check the boxes to enable site caching. 

Conversely, if you are editing a webpage or a piece of code and you're not seeing the changes take effect in your web browser turn off your page or site cache. 

Note: WordPress does not have a native ability to turn off cache settings, but there are many free and paid plugins that will help you manage your website's cache settings. Our favorite is WP Fastest Cache.

Security & Maintenance

Visit your website every day

It's easy to forget about your website, especially if you don't add daily or weekly content, but one of the simplest things you can do to ensure your website is fully functional is to visit your website every day. 

You don't need to check every page, but a quick peek at the homepage and any other popular entry pages should be on your to-do list.

It doesn't take much to break a website. Adding or updating plugins are the usual culprits, and can cause unexpected headaches in the most surprising places. 

A new plugin on your contact page could conflict with an existing plugin installation resulting in a broken page if not the entire website.

Then there is the issue of hacking.

Websites that get hacked can be flagged and blacklisted by Google which can seriously damage your company's ranking and online reputation.

Instead of your website, visitors will see a red splash page with dire warnings about malicious content, viruses, or whatever situation triggered the warning.

To get the warning removed you will need to prove to Google that you fixed the problem quickly before they will consider reinstating full access to your website with Google's Chrome browser. It will be difficult to prove that your website is safe and well maintained if it takes you several weeks or months to realize it's been hacked. 

Backup your website regularly - We're serious

Good maintenance begins with regular backups of your website and database.


We cannot stress this enough. Good maintenance begins with regular backups of your website and database.

Many hosts do not provide a daily backup of individual websites and the ones that do typically charge a fee.

Do not rely on your web host. 

It doesn't matter if you don't have a blog or don't make any changes to your website, if you want to ensure your website stays up and running you must do regular backups.

Website hacking is much more common than you think and even well-written sites using the latest design standards are vulnerable to being hacked and hijacked.

Another scenario that comes up with surprising regularity is web hosts that disappear without warning.

We have had multiple clients come to us after a host has suddenly gone out of business.  

If you have a complete backup including database and files you can usually get yourself up and running on a new host in about an hour, but if you don't have those backups you will have to rebuild your website from scratch.  

In most cases, rebuilding a site from scratch will take time and money you may not have.

How you do the backup depends on how your website is hosted and if you're on a CMS. 

  • CPanel: If your web hosting account includes CPanel you can easily do manual site backups with the backup manager. Simply choose the partial backup option then download your database.  When that is finished go back to the backup manager, choose partial backup and download the home directory.  Yuor web developer can also set this up as an automated task. NOTE: It is important to make sure you download these files to your desktop or a cloud service like Dropbox rather than your leaving it on the server because many hosts automatically delete backups from your directory after 7 days.. ​​​
  • WordPress: If you have a WordPress website there are many free and low- cost plugins available to automate daily, weekly, or monthly backups of your website. Our favorites include BackWPup, Duplicator, and UpdraftPlus. These plugins are easy to install and use, and all three have free versions. 

There are too many CMS options to cover every possible scenario, but backing up your website and database is considered a routine task and is relatively easy no matter how your website is set up. 

If this is something you don't have time to manage yourself, check with your web developer to see if they offer a maintenance program. Most developers offer maintenance as an add-on service for a nominal fee.


Keep your website code & plugins current

One of the biggest problems for websites built with content management systems (CMS) is that they can leave back doors that create security issues. 

Between the need for user access and the use of third-party plugins, there are a lot of opportunities to cause script conflicts and security breaches.

This is why it's imperative for website owners and managers to stay on top of platform security patches and plugin updates. 

We cannot stress the importance of checking your site for plugin updates and security patches. 

The security experts at Sucuri have provided a very nice guide that explains why WordPress is vulnerable to hacks and best practices for protecting your website: WordPress Security

It doesn't happen as often, but most CMS are vulnerable to the same types of attacks. Most of the tips given for WordPress will also work for other CMS. They don't guarantee you will never have to deal with a site hack or plugin conflict, but adopting these practices will lessen your vulnerability.

Graphic Design Tools & Tips

Graphic Design Programs/Editors

There is no doubt that Adobe is the all-time leader when it comes to graphic design products, but all that graphic magic comes at a steep price. 

Adobe has one of the largest learning curves, requires users to be on Windows or Mac, and pay a subscription even if you only use it a few times a year. 

If you're on Linux or simply don't want to spend hundreds of dollars a year on graphic software, we've got several free or low-cost options that will give you professional graphic results. 

Note: Photoshop started life as a photo editor and evolved to include tools for creating raster graphics. Some of the programs listed below offer photo editing, graphic creation, or both.

Photoshop Alternatives:

  • GIMP - This free program works on all platforms and is able to use many Photoshop plugins
  • PicMonkey  - Very easy online tool for editing photos on the fly. They do offer a limited free version. Paid versions range from $7.99 - $33.99 per month is you want all the bells and whistles. 
  • Canva - A nice online tool for creating graphics for social media, business cards, flyers, and pretty much anything you would need as a small business owner. With free and paid options, Canva's very affordable pricing tops out at $12.99 a month. 

InDesign Alternatives:

  • Inkscape - This free scalable vector graphic program is fairly straightforward and easy to use. Thanks to numerous online tutorials even a novice can produce high-quality vector graphics. Bonus Tip: It's not widely known, but you can also create animated slide decks and Prezi type presentations with Inkscape. 
  • Krita - This free feature-rich program goes far beyond basic vectors. Intended to be a Photoshop alternative Krita supports PSD files, layers, brushes, and many of the advanced features found on Photoshop and more. This program also supports CMYK and lets you create vector images and text which makes it a fantastic option for creating print-ready original artwork. And if that isn't enough, you can now create animations in Krita and export the file to video. 

These are the programs we use at The Business Guild. There are many other options available on the web, but we've used these programs for several years and are happy with the results.  

Get the right files from your graphic designer

Bargain basement online sources like Fiverr might make custom graphics affordable for businesses on a tight budget, but sometimes you get what you pay for. 

When you hire a graphic designer to create custom graphics for you, make sure you know what you're buying. 

Professional designers will typically do an intake interview to determine what you need and what you are going to use the graphic for. They will then produce two or three concepts for you to choose from.

When the project is complete the final product will be presented in multiple file formats.

Depending on the scope of the project and what you need the graphic for, you should expect your graphic designer to present the final product in a few different file formats for print and web use. 

  • PNG
  • JPG
  • Icon
  • EPS
  • PDF
  • PSD
  • SVG or AI

For example, a logo graphic should have an SVG file so the logo can be scaled to any size for branding, a PNG version for the web, an EPS file for print work. Depending on the designer, it may also include extras like a branded icon for use on your website or other small projects. 

You won't necessarily receive all of these, but your graphic designer should provide at least one version as a PNG for the web, an EPS or PDF version with editable layers for your printer, and a third version that is appropriate for the project or expected use.  In an ideal world, you would also get a scalable vector version as well, but it's not universal. 

© The Business Guild