Trying New Things

Blue Shutters

Last week was quite busy and I am very happy about that. I was working with some of my existing clients for updates to their sites and working with a newly signed client as well. Some of the work I was doing was standard updates but I also did a few new things.

  • Working with an SVG image
  • Technical editing, formatting, and style sheets
  • Playing with a YouTube channel

What is an SVG Image?

SVG stands for Scalable Vector Graphics and is created with mathematically declared shapes (think circles, rectangles, etc.) and curves, not pixels.

Having the image information in the form of these shapes allows you to scale the image however you like without losing quality.

This can be good for a website especially if your site is responsive and will change the display based on the screen size of the viewer. However, SVG is not always the best option for the image or images you use on your website. For example, you would not want to have a photograph converted to an SVG image it doesn’t make sense. For my project, the SVG was a graphic image rather than a photograph.

I was very excited about the scalability because it looked great no matter what size my screen was. The downside was sizing appropriately in the HTML/CSS. The problem is my usual solutions did not work.

Part of the reason that scaling SVG is so difficult is that we have a certain idea about how images should scale, and SVG doesn’t behave in the same way.

Needless to say, I had to do some work to learn how to best work with an SVG image specifically so that it would size the way I wanted it to. The original version had the SVG image scaled to fit the container but it could obscure the menu item. In the image below I added a red line to highlight the menu item, depending on your screen settings you may not be able to easily see the menu item.

Blue Shutters Web Design.

After I had learned a bit more about how SVG behaves, I was able to adjust it so that image does not obscure the menu heading.

Blue Shutters Web Design.

Technical Editing, Formatting and Style Guide

If you have read my blog you know that marketing is a necessary thing for business and that marketing is not my strong suit. I do continue to learn more about it and how I can do it for my own business. I am not sure I will ever see myself expanding my offerings to be a marketing guru. What I do know is that CONSISTENCY is very important.

For the technical editing and formatting what I did was take the original document provided by the client and created a style guide to use for not only that document but subsequent documents. The style guide had: a border style and width, font style, and image placement, and standardized text where appropriate. Now each document has the same style to create a consistent look, however, it can still be customized to reflect the product that the document is discussing. To achieve that slight customization each border color will reflect the color used to represent the product, and of course, the product image will be included.

After the style guide was completed then the documents for the various products were created, they were saved as original documents and as a PDF which the users will be able to download. The whole process is relatively easy, however, it can get very time consuming as you make adjustments to make it just right. You may not have the time or interest to all the adjustments, which is where I enter the picture, buy offering formatting services.

For my newest client, I have created a Master Style Guide and that may seem extremely overwhelming since we are starting right now it is fairly simple. The benefit of this style sheet is that she knows what font styles are being used as well as the colors (both a small thumbnail of the color as well as the hex color code). The reason that I created this document for her, was to help her when she goes to order new business cards or other promotional material she will be asked what font to use and what colors, by using the same fonts and colors from the website to her marketing materials it creates consistency.


During the process of updating my client's site, I needed a good way to show her the proposal before I started in on the actual work. I could do that on a video call but sometimes schedules just cannot be coordinated. My solution was to video the walkthrough, and since I didn’t want to email it I decided to create a business channel and I could use the infrastructure of YouTube to my advantage, it is a great example of not re-inventing the wheel.

Blue Shutters Web Design.

I still have work to do to master the subject but it has been a good place to start with sharing and it also opens the possibility of a different level of marketing in the future. Indeed, at this time I am not taking full advantage of what is available with the business channel but my motto is: walk before you run.

Are you trying something new with your business? Share what you are up to on my Facebook page.

NOTE: I am not being paid for my mentions of people, articles, products, or books I used above nor do I receive referral compensation. The links I provide are for your convenience only.

Unless otherwise indicated I sourced the links provided while researching a post. Links that I provide at the request of another person/business will be noted, and if I am paid to provide a link I will disclose that information on the post in which it is applicable. All opinions are mine, regardless of whether or not I am compensated, and are not in any way influenced by the requesting party.

DISCLAIMER: This advice is general in nature and not to be taken as personal professional advice. This blog does not provide legal advice if you need legal advice, please contact an attorney directly.

Share via:

Categories: Blue Shutters