Web & Graphic Design Resources

webgraphicdesign.svgAre 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 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 Google and their magic algorithms.

Every time you turn around you're hearing 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, we've got a budget-friendly Ask the Expert service to answer 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 NH Business Guild and chosen for the average business owner who has little to no coding skills. 

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

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. 

Seventeen years later, WordPress 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

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. 
  • Collabedit is an online text editor for users who want to collaborate. In addition to basic HTML and CSS, Collabedit supports a wide variety of coding languages including javascript, php, python, and ruby.  

Diffchecker

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 in reducing 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, NH Business Guild uses a combination of raster and vector graphics on our webpages. 

Improve Your Page Speed

Image Compressors

Google recently announced that site speed is going to take on a much larger role in site rank in 2020. It might not seem like a big deal, especially if you're in a specialty market with limited competition, but they're 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. 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 & Site 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

The key to website security is good maintenance.  Specific tasks are dependant on how your website is built, where it's hosted, and which CMS you use, but there are some universal tips that will help you avoid or minimize most major problems. 

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 sales page if not the entire website.

Then there is the issue of hacking.

Websites that get hacked are 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 that you fixed the problem quickly before they will consider reinstating full access to your website with their 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. 

Back up your website regularly

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

Do not rely on your web host. 

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

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 we can usually get you up and running on a new host in about an hour, but if you don't have those backups we have to rebuild your website from scratch.  

And that takes 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.  It is important to make sure you download these files to your desktop or cloud service like Dropbox rather than your leaving it on the server in case your host has a problem and you cannot access the directory. 
  • 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.

NH Business Guild's hosted websites include regular backups and maintenance as part of our hosting package for $35 per month. For more information be sure to check out our web hosting page. 

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 and 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. These are the same steps we take when managing a WordPress website and most of the tips 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

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 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 NH Business Guild and Buzz Media, LLC. 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 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
  • PSS
  • SVG or AI

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 as appropriate for the project.  In an ideal world, you would also get a scalable vector version as well, but it's not universal. 

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.