Tag: Marketing Tools

  • WordPress SEO for the Busy Entrepreneur: Image Optimization

    Are you trying to DIY your online presence but are struggling to understand all the search engine optimization (SEO) terms? Are you worried about causing more damage or harm than good, or overwhelmed with deciphering what practices are essential and what could be saved for a rainy day?

    Hello and welcome to the first chapter of our WordPress SEO for the Busy Entrepreneur series where we help our clients, fellow entrepreneurs, and aspiring digital marketers better understand the foundational practices of SEO for their website’s organization.

    We know the stress of trying to run a business on top of marketing it. That’s why people come to us and we have a business! (Talk about the circle of life!) But we also have many wonderful clients who aren’t at that stage of their entrepreneurial journey, who need a professional website with reliable hosting and can’t afford a marketing agency quite yet. Yet, many have a drive that knows no bounds and are more than willing to put in the work updating their website with edits and blog posts. They just don’t have the time to learn what’s important, what’s less so, what resources to trust and learn from.

    It’s become clear to us that there needs to be a resource for entrepreneurs who are willing to put in the work, but can’t afford a single moment more. For those who need the pieces broken down and targeted specifically for their WordPress site. For those who aren’t technically savvy and have no desire to be, they just want things to work and for customers to go 📈. If any of these sounds like you, you’re in the right place.

    Today, we’ll be talking about Image Optimization, why it’s important and how it plays into your institutions marketing success, and ranking each piece by what’s most important as well as the process we recommend you take for the most efficient use of your time.

    What is Image Optimization?

    Image optimization is the process of converting high quality photographs, artwork, and graphics from their original state into copies that are optimized for websites and social media platforms. This process involves two main procedures:

    1. Cropping, resizing, and saving images into a compressed format while sacrificing minimal quality
    2. Correctly categorizing and describing the images you’re using through image metadata

    Just like you wouldn’t want to wear a t-shirt that’s 5 sizes too big and claims to be “wrinkle-free” when it’s clearly not, you wouldn’t want an image on your website that takes 2 minutes to load and ends up not being what the user was looking for. The process of image optimization is like tailoring that oversized t-shirt to fit just right.

    Image Compression: Tailor Your Images to the Digital World

    Image Compression is ultimately about carefully cropping, resizing, and compressing the image file so it loads quickly and looks great on screens – without sacrificing the quality or intent of the original image.

    Image Compression can be broken down into 4 steps:

    1. Crop: Crop the image so that the main focus is centered, if needed. Consider the platform(s) you’re uploading to and whether they use a square, rectangular, or circular aspect ratio. This not only reduces the file size, but also improves it’s impact.
    2. Resize: Digital cameras today are capable of taking superb quality photographs in 4K resolution. But images on web pages or social media platforms are rarely displayed at this resolution, since most images are not displayed full screen and the majority of internet users are using devices lacking 4K output. When in doubt, a 1200px width is more than enough for the vast majority of images used on a web page.
    3. Reformat: There are plenty of image formats out there nowadays. Each come with their own benefits and drawbacks, but to keep it simple: Use .jpg for images that have a background, and .png for images that have a transparent or no background. The default quality option should be sufficient.
    4. Compress: Using a free image compressor like compressor.io can further reduce the file size of an image by up to 80% sometimes without making a noticeable impact on quality. Now would be a good time to rename your image for SEO purposes (more on that below.) If you follow nothing else in this guide, using these image compression tools are an extremely easy and straightforward way to reduce page load time.
    Screenshot of compressor.io reducing the file size of an image

    Crop & Resize Images on Windows

    1. Open File Explorer and find the image you want to edit.
    2. Right-click on the image, hover over “Open with,” and select “Photos.”
    3. Click the “Edit & Create” button in the top-right corner.
    4. Select “Edit” from the dropdown menu.
    5. Click the “Crop & rotate” button.
    6. Adjust the cropping frame by clicking and dragging the corners or edges of the frame. Once satisfied, click the “Save a copy” button to save the cropped image.
    7. Open the cropped image in Paint (right-click the image, hover over “Open with,” and select “Paint”).
    8. Click the “Resize” button in the Home tab.
    9. Ensure the “Maintain aspect ratio” checkbox is checked.
    10. In the “Horizontal” box, enter “1200” (the vertical dimension will adjust automatically). Click “OK” to resize the image.
    11. Click “File” in the top menu bar and select “Save as.” Choose the desired location and format, and click “Save.”

    Crop & Resize Images on Mac

    1. Locate your image in Finder
    2. Open the image in Preview (double click on the image)
    3. Press and drag your selection
    4. Hover on Tools in the top menu bar, select Crop
    5. Hover on Tools again, select Resize Image
    6. In the width box, put 1200px & confirm
    7. Save the image by hovering on File in the top menu bar and selecting save (or press S)

    Image Metadata: The Catalogue Card for Your Photos

    Before we delve into Image Metadata, let’s back up and ask the question: “What is Metadata?”

    Metadata defined for the laymen

    To define it simply: Metadata is data about data. It’s information that categorizes and summarizes what something is.

    To use an analogy: In the 80’s you needed to find a book (website) at the library (web). You would use the library catalogue (Google, Bing, Yahoo, etc.) to search for the book either by it’s name or author. When you found the right card (search result), it would tell you the call number or location. You would then go through the shelves or ask a librarian for help (click) and eventually find and check out your book (website).

    In our case, we use metadata describing your website to help the robots that search engines use to rank search results better understand who your organization is, what you do, when you’re open, how to contact you, etc. and ultimately rank as high as possible.

    What do I need to know about image metadata?

    Image metadata is important not only because it helps these robots understand images they can’t actually see (yet) and determine if they’re relevant or not, but also ensures your website remains accessible for those with sight disabilities or a painfully slow internet connection by providing descriptions of what they’re viewing.

    Image metadata can feel complex to understand considering all the various elements that go into it, and even harder to know what to prioritize. But luckily, the elements that have the greatest visibility impact are also some of the simplest to incorporate. Here are the three most important elements concerning image metadata:

    1. Alt Text: Alt text, short for Alternative Text, is the most important part of image metadata. This is really just a brief description of what the image is. It’s used for people who rely on screen readers, when the image fails to load to give context (common for those with slow internet connections), and for showing search engines that this image is relevant in relation to your organization.
    2. File Name: An images name before uploading it plays a huge factor in helping search engines better understand the image content and increase it’s visibility. This is a great place to tie your images with your company and it’s specific services or people. Instead of “mark.jpg”, something like “Mark-Scott-Sales-Manager-Generica-Inc.jpg” helps search engines recognize that Mark Scott is the Sales Manager at Generica Inc, this is his picture, and that this image is relevant to the blurb describing him below it.
    3. Title: The title tag is used as a tooltip description, providing supplemental information when the user hovers over an image. However, the this only applies to users on desktop. This is a good place to add keywords if warranted.

    Let’s get to work: An actionable Image Optimization checklist

    Now that we’ve explained the abstract concepts behind Image Optimization and it’s two major components: Image Compression and Image Metadata, let’s go through a step by step process on how to actually incorporate these pieces efficiently:

    1. Gather your images into a folder called something like [subject]-originals
    2. Decide where you’re uploading these images and crop each one as needed
    3. Resize the width of each image to 1200px
    4. Reformat each image. Are they photographs? Go with .JPG. Are they graphics or use transparent backgrounds? .PNG is the way to go
    5. Create a folder called [subject]-optimized and upload your edited images to compressor.io
    6. Download each image, saving it into the [subject]-optimized folder and rename each image to relate to your organization and the relevent service or person
    7. If you want a break, now’s a good time
    8. Login to your WordPress website, and navigate to the Media tab in the admin panel
    9. Upload your optimized images
    10. Return to the media library, click on the first image thumbnail in the upper left. This will open the image metadata panel. In the alt field, write a brief description of the image in question either manually or use AI to assist you. If you have a premium ChatGPT plan, use our A11y SEO Image Wizard.
    11. Fill out the alt text (and optionally the title) for the remaining images. Congratulations! You’ve now optimized the images on your website. Your images can be now be added to the posts or pages of your choosing.

    If you followed this checklist, you can rest easy that the most important standards concerning image optimization are being met. Your web page will now appear more attractive to search engines, as well as improve the page load times and accessibility for your visitors.

  • 5 Figma Tools to Improve Your Web & Digital Marketing Strategy

    In today’s ever-evolving digital marketing and web design scene, streamlining your workflow is more valuable than ever. Amid a plethora of tools, identifying those that can truly streamline your strategy instead of distract can be a formidable task. Figma’s community shares files and plugins that are helpful for crafting professional web and marketing content. In this article, we focus on five practical user-made Figma tools that can refine your creative process and make your web and marketing strategy faster and more professional.

    1. Complete Favicon Generator by Ernest Ojeh

    Today, responsive website design isn’t a nice to have – it’s a requirement, and favicons are no exception. This handy design file by Ernest Ojeh takes your finalized favicon image and lets you see what it looks like across different browsers and devices. This is perfect for ensuring the chosen brand icon can be easily recognizable across devices and to show clients what it’s going to look like in various browser tabs and search engines. Additionally, each version that’s generated is contained in a frame with a matching name so using the included embed code is a simple copy paste procedure.

    2. Social Media Images Size by Andreslav Kozlov

    Remembering all the different ideal image sizes across all the different platforms can become quite a headache. Failure to do so often results in subpar, low quality, and pixelated posts that look unprofessional and uninspiring to viewers. This plugin by Andreslav Kozlov allows you to import perfectly sized Figma frames tailored for a wide array of social media platforms at the click of a button. Whether it’s the square layout for Instagram, the wide banner for Twitter, or the unique dimensions for LinkedIn, this plugin has all the popular platforms. This useful plugin saves time and elevates the quality of social media posts, ensuring they look crisp and engaging on any platform.

    3. Social Media Templates by Ravn

    Having your social media images in the proper size and body content ready is great for clients, but this Figma file lets you take that to the next level. With Social Media Templates by Ravn, now you can show exactly what a client’s content will look like across Facebook, Instagram, LinkedIn, and X/Twitter. It even includes a prototype section with interactive carousel mockups for posts with multiple images!

    4. Realtime Colors by Juxtopposed

    This isn’t your average color palette generator. realtimecolors.com is a color and font visualizer platform specifically for web designers. Using a website structure template, now you can generate and see colors and fonts provided via Google Fonts in real time. Another notable feature is it’s expansive export options – you can save and send these examples simply by sending a link to clients, providing an easily accessible starting point when making design decisions. You can also export by download, QR code, CSS code, the Figma plugin, and more, making documenting and implementing these colors and fonts on your website and marketing materials a breeze.

    5. ColorLabels by Naren Abbaraju

    If using the Realtime Colors plugin isn’t easy enough, here’s another to make things even easier. ColorLabels by Naren Abbaraju quickly lets you label color swatches on Fimga in a variety of formats, including RBG, HEX, HSL, and HSB. The best part? Color Labels can also automatically detect and apply Coolors.co‘s custom color labels. Calling a color swatch Aquamarine instead of #67EFE1 or “the light greenish one” is much easier for you and your clients to say, understand, and remember. It’s one of those simple changes that make the process a little more approachable.

    Example of the ColorLabels plugin created by Naren Abbaraju

    Closing Thoughts

    Navigating the world of Figma tools designed to enhance your web and digital marketing strategies can feel like entering a gold mine. With the right tools, you can supercharge your creative process, increase your efficiency, and present a polished, consistent brand image that resonates with your audience.

    Every new tool feels like a game-changer. But remember, this is just the tip of the iceberg. The vibrant community of Figma is loaded with new plugins, files, and ideas that are just waiting to be discovered, used, and shared.

    So, what’s the next step? Start including one or more of these tools in your strategy today. Share your triumphs and trials with them. Trade ideas with the community, learn from each other, and keep your toolbox ever-evolving. Most importantly, remember that in the ever-changing world of web and digital marketing, your greatest tool is your adaptability.

    Let’s embrace Figma to not just reach, but to exceed our creative and strategic goals, and propel our narratives into the stratosphere.

  • The Bridge Between Real & Digital: How To Utilize QR Codes

    In the past, people used to jot down the website address if they found it on a poster in a business storefront. While one could look up a business or event, this approach leaves much to be desired; It’s a process to search online. Think about the number of steps involved in an average search:

    1. Navigate to and open your phone’s browser
    2. Tap on the search bar
    3. Type in the business or event
    4. Find their website on Google or Bing
    5. Go to the website
    6. Scan the homepage and navigation
    7. Locate and read the content you want

    For somebody walking by an advertisement, event poster, or storefront, this is inconvenient and awkward at best. At worst, a potential customer or participant who’s too busy at the moment or not yet invested in your business or event could simply keep walking, or intend to look it up later but end up completely forgetting about your business.

    Enter the QR Code

    On the other hand, imagine a potential customer walking by a storefront and noticing an intriguing advertisement with a QR code displayed prominently. With their curiosity piqued, they quickly pull out their smartphone and effortlessly scan the code. The convenience, ease, and excitement of this seamless interaction leave the customer positively impressed, reaffirming their belief in the brand’s commitment to innovation and customer satisfaction. This is the power of QR codes: bridging the gap between the physical and digital realms.

    A Brief History of the QR Code

    The automotive parts manufacturing company Denso Wave created QR (short for Quick Response) codes in 1994 for inventory management. Inspired by black and white Go game pieces, QR codes have many advantages over traditional UPC barcodes. They have a much larger capacity – featuring up to 7000 characters compared to UPCs’ 20. QR codes are readable at any angle, even if they are partially damaged. They are also read 10x faster than traditional barcodes.

    Pixelated QR World Graphic

    The Flexibility of QR Codes

    QR codes have revolutionized the way businesses and event organizers connect with their audience, offering a seamless bridge between the physical and digital realms. With their flexibility and ease of use, QR codes have become invaluable tools for businesses and events to enhance customer experiences and streamline various operations.

    Some ways QR codes are commonly used today include:

    • Digital Menus: Many restaurants, cafes, and event venues are using QR codes to provide digital menus to customers. This reduces the need for physical menus and can be easily updated for different events.
    • Contactless Payments: QR codes can facilitate mobile payment transactions at both retail businesses and event venues. Customers can scan the code to make payments, reducing the need for physical cash or cards.
    • Product Information: Retail businesses and event vendors can use QR codes to provide detailed information about a product or event offerings. This is particularly useful for products or events with limited space to display information.
    • Digital Business Cards: Instead of giving out business cards with a printed email or LinkedIn address, professionals and event organizers can share a QR code that reveals their contact information. This allows for seamless networking during events.
    • Link to Reviews or Testimonials: Encourage customers and event attendees to leave reviews or read previous customer testimonials about your products or services. This can help build trust and credibility.
    • Direct Customers to Your Social Media: Boost your online presence and engage with customers and event attendees by directing them to your social media platforms. This allows for ongoing communication and promotion.
    • Promotions or Discounts: Offer promotions or discounts that are exclusively revealed when the customer or event attendee scans the QR code. This can incentivize purchases or attendance at events.

    Check out these styled QR codes for some local Bloomington websites, created easily thanks to Styled QR Code Generator:

    Things to Consider Before Making QR Codes

    • Certain QR code generators produce short links that redirect to your website, instead of directly linking to it. Be aware that these services may disable your code a few weeks post-creation unless you subscribe, potentially leaving you with non-functional codes in your printed marketing materials.
    • Be sure to make it clear why customers should scan the QR code and what they stand to gain from it. Failing to clearly explain the purpose or benefits of scanning the QR code can lead to confusion and disinterest from customers. A simple call-to-action, such as “Scan here for more information,” can help customers understand the purpose of the QR code.
    • Position QR codes strategically so customers can easily spot and scan them. Avoid overusing QR codes to the point where their novelty wears off.
    • Unless you’re looking to make a stylized QR, most of the time you don’t need any special generator platforms. Google Chrome lets you make direct QR codes on any page simply by right-clicking on the page and selecting “Create QR Code for this Page”:

    Ending Thoughts

    QR codes have emerged as powerful tools that bridge the gap between the physical and digital realms. They offer convenience and ease of use, making it effortless for potential customers to access information and engage with businesses and events. From providing digital menus to facilitating contactless payments, QR codes have revolutionized customer experiences and streamlined operations in various industries.

    If you have any questions or concerns, we at David Martin Design are committed to offering the best possible service. We believe in fostering strong relationships with our clients by ensuring transparency, commitment, and a collaborative approach. Feel free to get in touch with us at any point. Your success is our top priority, and we look forward to hearing from you and helping you achieve your goals.

  • 5 Informative (And Free!) Web Design Tools That Can Teach You More About Your Site

    Above all, websites are vehicles designed to help you achieve larger goals. For example, a restaurant’s site might be created to increase awareness and encourage patrons to visit (or order takeout). An entrepreneur might rely on a website to inform potential clients about his or her services. 

    While a website is an ideal tool for online marketing in the 21st century, there’s no guarantee it’ll work the way you intended. Website design requires constant monitoring, updating, and adjusting in order to ensure a site is optimized for performance.  

    In order to be able to make the right adjustments, you have to first gather accurate information about your site’s functionality. Fortunately, there are a plethora of online web design tools that provide insightful and in-depth data about a site’s performance. Let’s take a look at a few you should know about.

    1. SEMRush 

    Touted by many online marketers as the premier and most comprehensive online marketing tools, SEMRush offers users an in-depth analysis of their site’s advertising information. 

    It offers data regarding paid and organic search traffic, domain referrals, backlinks, and more. This is all available in SEMRush’s free report, although you can unlock an even more extensive review for the paid version. 

    Despite being advertised as an all-in-one platform, SEMRush probably won’t eliminate the need to use other online web tools. Still, it’s a great place to start your advertising research. 

    1. ScanWP

    If you know a site is running WordPress but aren’t sure which theme, that’s where ScanWP comes in handy. Simply plug in the URL of the site, hit “search”, and you’ll be provided with a host of helpful information such as the theme version, price, associated tags, and where the theme can be purchased. 

    ScanWP even comes with Plugin detection so you can get a better idea of what’s been added to the site. Compared to other online web design tools, ScanWP is rather minimal but that’s one of its advantages too! It’s a great option for WordPress fans and can even be downloaded as an extension for Chrome browser for integrated use. 

    1. Nibbler

    Nibbler isn’t as well known as some other online web design tools, but it still earns a spot on the list. With the free version, you can put five different pages through the Nibbler tests which analyzes your site based on more than a dozen factors and offers an overall score.

    The total score (out of 100%) is an aggregate rating of your site’s accessibility, experience, technology, marketing, and more. In addition to this composite score, you’ll get a deeper breakdown of each factor, giving you a better look at your site’s strengths and weaknesses.  

    Nibbler even offers a handy list of top priorities for improving your site. 

    1. GTmetrix 

    GTmetrix is an informative online web design tool that analyzes a site’s page performance. Whether you’re trying to improve search engine optimization (SEO) or implementing a new theme, it’s always important to know how site changes are impacting overall functionality. 

    In its “speed visualization” section – pictured above – GTmetrix provides an insightful breakdown of how quickly (or slowly) your site loads by second. This gives you a better idea of how users interact with your site. 

    This online web design tool’s report page acts as an analytics dashboard where key indicators of site load speed are neatly organized and summarized. Similar to Nibbler, you’ll also get actionable tips for improving your site page speed. 

    1. Pagelocity 

    Customer experience is an integral component of website design. If you’re looking for a web design tool that’s geared towards analyzing your site’s optimization in this area, Pagelocity is an excellent choice. Its analysis focuses on three different categories: on-page SEO, performance, and code insights. 

    On-page SEO offers insights into various factors on your site that are critical to SEO such as headings, keywords, and links (both internal and external). Performance analyzes your site’s composition including scripts, style files, and images to determine its overall functionality. Lastly, Code Insights goes a little more in-depth to look at a site’s markup which refers to tags, classes, and page speed. 

    Your Local Web Design Expert 

    If you’re not sure how your website is performing, David Martin Design can help. With decades of experiencing building, designing, and optimizing sites, David knows what it takes to keep websites up and running efficiently to meet your goals. Feel free to contact David to learn more.