Tag - WebsiteDesign

Bulk Resize Photos - My Favorite Resizing Tool

Bulk Resize Photos – My Favorite Resizing Tool

Often times I have to resize a TON of images for image galleries and they have to have some consistency. Ideally, I try to keep the image width consistent. Bulk Resize Photos makes the process so much easier than it used to be. They claim to be able to process 150 photos in under 60 seconds and I can attest... it's fast! Their website makes it extremely easy to set the parameters for resizing your photos with a sufficient amount of options (Scale, Longest Side, Width, Height, Exact Size or even add a watermark). Before you know it all your photos are the same size and downloaded to your computer. Too easy...

I have clients with hundreds of photos in their gallery and Bulk Resize Photos has saved me a tremendous amount of time. If you're interested in creating a beautiful image gallery with consistently sized photos, contact me today.

Noun Project

Noun Project – My Favorite Source for Icons

For me, Website Design and Graphic Design go hand in hand. I'm always searching for design elements to use on websites, logos, print materials etc. These design elements can come in many forms, but the most basic is the ICON. My favorite place to get icons is a website called Noun Project. I have had a premium subscription with them for years (The cost is currently $39.99/year).

Noun Project provides access to OVER 1 MILLION icons. The best part is their icons come in PNG (transparent background) and SVG (A vector format). This allows users to bring the file into Photoshop or Illustrator and easily manipulate it. I've used their icons on websites, logos, flyers, brochures and the list goes on. A simple search for the word "rain" in Noun Project produces over 9,000 search results.

If you're looking for stock icons for a project be sure to consider Noun Project.

Google reCAPTCHA v3

Google reCAPTCHA v3 – Keeping Forms Safe From Bots

Today I upgraded all forms on my clients websites with Google reCAPTCHA v3. If you aren't familiar with reCAPTCHA it's a tool to help prevent form spam by either having users type displayed text into a box (reCAPTCHA v1), check a box (reCAPTCHA v2), or now with reCAPTCHA v3... NOTHING! reCAPTCHA v3 can detect abusive traffic on your website without user interaction by analyzing multiple factors to prevent malicious bots from spamming you with contact form emails. 

All of my clients know how big of a fan I am of Google. This is just another example of how Google remains on the forefront of technology and constantly strives to make the web easier to use while maintaining security. If you want to learn more about reCAPTCHA v3 check out the links below.

Google Analytics

Google Analytics Basics

Google Analytics is a free tool offered by Google to help you analyze your website traffic. Google Analytics gives you a short piece of code to place on your website that records various activities of your users when they visit your website. Things such as age, gender, interests, which pages they visit, how long they stay on those pages and which website they were referred from are all provided by Google Analytics.

All of my clients have Google Analytics installed on their website. Below are a few resources you can use if you're interested in learning more about Google Analytics and how to use it.

Wordpress 5.0 Gutenberg Editor

WordPress 5.0 Update – The Gutenberg Editor – What You Need to Know

I don't usually post about Wordpress updates since they're released a few times a year and are typically minor updates. However, Wordpress 5.0 is the biggest update/change Wordpress has released in a long time. Good news if you're my client - I upgraded every website I manage within the first hour Wordpress 5.0 was released! 

Most of my clients don't touch the Wordpress backend much. However, if you have a blog and make the posts yourself you will definitely notice some changes. The Gutenberg editor is quite a bit different than the previous text editor that came with Wordpress. Each paragraph is defined as a "block". In web design, we use blocks for everything. Responsive web design, specifically Bootstrap, relies on blocks to create responsive websites that respond (stack/resize) depending upon the device you're using.

When writing using the Gutenberg editor things are a little different, but I feel most people who have used prior versions of Wordpress should be able to figure it out fairly easily (or any text editor for that matter). One big change that I noticed was when you want to add an image, heading, gallery, list etc to the post you may be lost at first. In the top left-hand side of the page, you will find a + symbol. When you click on that symbol you will be given options for what type of block you want to add. There are many different elements you can add, very easily. 

There were many other technical changes with Wordpress 5.0. If you would like to learn more about this update contact me today and I would be happy to walk you through all the new changes.

Website Backups Using Amazon S3 Cloud Storage

Website Backups Using Amazon S3 Cloud Storage

Recently I have implemented another layer of protection for my clients websites, backing up everything with Amazon S3 Cloud storage. My hosting provider Namecheap has a 99.9% guaranteed uptime. The longest any of my websites has been down was roughly one hour over the past 5 years. In addition to this Namecheap has automated backups for all their customers data in nearly real-time. Although this is excellent I have to be prepared for the worst and can't assume someone else will backup my customers data. In 2012 GoDaddy was attacked by hackers causing 52 million domains and 5 million websites to go down for over 12 hours. Fortunately GoDaddy was able to stop the attack and preserve their customers data, but it could have been much worse. To prevent loss of data I've implemented multiple layers of protection for all my clients websites.

Google Drive - First Layer of Protection

I have a Google Apps for Work account that gives me unlimited storage with Google Drive, which is another cloud backup platform. I use this to backup everything I have related to my clients websites, graphic design files, old website files, personal data and anything else they have ever sent me for their website. The problem is some websites are updated on a daily basis. Take an eCommerce website for example. They have orders, new products, price changes, and software updates constantly. This creates an issue if a website goes down and I don't have a recent backup.

Server Backups - Second Layer of Protection

For quite a few years now I've been using a plugin for Wordpress called UpDraftPlus. The great thing about UpDraftPlus is I can set automatic backups for my websites, as often as daily if needed. I used to store these files on the server I have with Namecheap. This allowed me to have a recent backup without having to lift a finger. For my static websites (not using a CMS platform like Wordpress) I would manually backup the files using Google Drive. A potential issue could arise if Namecheap were to come under an attack, or somehow the files were compromised on the server. I could theoretically lose the website AND the backups. Not good. I needed a better solution.

Amazon S3 Cloud Storage - The Ultimate Layer of Protection

This is where Amazon S3 Cloud storage became essential. UpDraftPlus is able to automatically send backup files to my Amazon S3 Cloud server rather than saving them on my server. In a worst case scenario if all Namecheap servers went down for an extended period of time like GoDaddy did, I have everything ready to be transferred to another server immediately. Using two cloud backup solutions prepares me for that worst case scenario I discussed.

Is Your Website Safe, Secure and Backed Up?

I take pride in every website I develop or manage for my clients. My clients expect that their data is safe, secure and backed up. Some may call me paranoid, but I look at it more as prepared. My experience as a Firefighter and Paramedic has cemented this mentality. You should ask your web developer how often and where your files are backed up. Hopefully they're prepared for the worst. If you need reliable hosting or a new website make sure to contact me today.  
Elan Creations Website

ElanCreationsPainter.com – My Latest Website Project

Michael F. Frain is a painter in Naperville, IL and the owner of Elan Creations. Michael and his wife Patti approached me looking to start a business. I designed their logo, created business cards and designed a great eCommerce website for them. The website is based on the WooCommerce platform. The front page of the website has two full screen images that alternate in a slider with text overlayed. The menu is on the left, leaving plenty of room to view his great paintings and easily navigate the website. The blog page automatically posts to their Facebook and Twitter pages. I was able to teach Patti how to navigate the backend to add products, fulfill orders and create new blog posts. She previously had no experience with running an eCommerce website and is excelling with Elan Creations. It’s a great feeling to help out such wonderful people and I encourage you to view Michael’s paintings – they’re amazing and very affordable.

Visit their website at www.ElanCreationsPainter.com

What is a Favicon

What is a Favicon?

Do you know what a Favicon is? If you Google this search phrase Google will say "an icon associated with a URL that is variously displayed, as in a browser's address bar or next to the site name in a bookmark list." That sounds confusing but it's really simple. Depending on the browser you're using look up at the current tab and you'll see my Favicon, which is a green globe. Every website I make for my clients has a custom Favicon. It really annoys me when a company doesn't have a Favicon, or their web designer uses a default Favicon. Why does this matter you might ask? If your website doesn't have a Favicon it shows a lack of creative talent, or worse basic knowledge by the developer. Creating a favicon isn't the most difficult thing in the world but I have some tips that help make it much easier.

The Noun Project

One of my favorite websites for icons of any type is the Noun Project. The Noun Project has thousands of basic icons in black and white. Their goal is to simplify communication, across borders and around the world using visual communications. You can visit their site and type in literally anything to find numerous icons for your search term. I HAPPILY pay $9.99/mo to use their icons ROYALTY FREE. This means I can use them in logos, Favicons, print design projects, website design or anything else my heart desires!

Favic-O-Matic Favicon Generator

Once I find an icon that I like, a tool that does a great job of creating Favicons of numerous sizes is Favic-O-Matic, The Ultimate Favicon Generator. Back when Favicon's started there was one size. Tiny. Used in the browser bar and that was all. Now Favicons are shown as bookmark icons for various devices in various sizes. Apple devices use 10 different sizes depending on the device.  The beauty of Favic-O-Matic is you can upload one Favicon image (they recommend at least 32 x 32 px - I usually create mine 400 x 400 px) and it will return every darn size you'll ever need. You don't have to use every single one but I love the option.

Company Logo Favicon

Sometimes I'll use a company logo as a Favicon, but I have to warn you if there's a lot going on in the logo it will just look like a blob on the page tab. I like to either use one part of the logo, or use a simple icon from The Noun Project and change the color to match the company's logo colors. If you need a custom icon for your company or simply found this article interesting please share it. Thanks and have a great one!