What are the Accessibility Conformance Testing rules?

The easiest way to understand what the ACT rules are is to take a look for yourself. Check those out at the link below:

https://www.w3.org/WAI/standards-guidelines/act/rules/

There you’ll see the familiar WCAG guidelines organized into a list filterable by WCAG specification (level A, AA, etc.), status (approved vs. proposed), and implementation type (manual vs. automated). Within each of the rules are multiple methods for testing the rule. Each method has a dedicated page with detailed instructions on what to look for and how to test.

Why are the ACT rules important?

In the early days of compliance testing, different software packages aimed at addressing website accessibility would have slightly different takes on how to interpret WCAG rules resulting in inconsistent results between platforms.

While much of that difference has diminished over time, the ACT rules further crystallize exactly how the W3C expects guidelines to be tested and interpreted. This will increase auditing accuracy for all accessibility testing platforms.

What the ACT rules don’t do

The ACT Rules are great for clarifying how to test the WCAG guidelines, but they do not comprehensively determine if a website at large is compliant. The rules only look for specific kinds of failures (albeit common ones) that would disqualify a related bit of code/UI from being compliant. Passing all of those tests for a guideline doesn’t necessarily mean it has been satisfied—there are other ways to fail outside of what these rules test for.

The WCAG guidelines still remain the source of truth on pass/fail scenarios and the ACT rules are just supporting resources for understanding and using the guidelines.

How this impacts our audits

Harmonic Northwest offers website accessibility auditing and remediation as a service. Our focus is more on the manual testing side of things—in other words, the parts of accessibility testing that are currently out of reach of automated testing. As such, we’ll be keeping a close eye on updates to the manual and semi-manual categories of the ACT rules and ensuring that our testing processes follow the best practices listed there. We’ll also keep tabs on the suite of tools we use for automated tests to make sure they are keeping up with these rules.

References

You can follow the links below to learn more about the W3C’s Accessibility Conformance Testing (ACT) Rules:

https://www.w3.org/WAI/standards-guidelines/act/rules/ (ACT rules)
https://www.w3.org/WAI/standards-guidelines/evaluation/ (ACT overview)
https://www.w3.org/WAI/standards-guidelines/act/rules/about/ (ACT rules overview)
https://www.w3.org/WAI/standards-guidelines/act/implementations/ (software using ACT)
https://www.w3.org/TR/act-rules-format/ (ACT rules)

The post Website accessibility gets a boost with ACT 1.1 appeared first on Harmonic Northwest.

AI-Assisted Development Example #1: Scaffolding

A client needed a complex branching form setup where the question fields that would show depended on answers to previous questions. Additionally, they wanted the data for the form to be in an easily editable data file.

Normally I might do something like this using WordPress’ Gravity Forms plugin via the plugin’s conditional fields in the admin area, but in this case that wasn’t going to work because we needed a single data object that would power the logic.

So instead I fired up Claude Code and started writing a requirements document. I gave Claude a paragraph or so describing what I wanted (JSON object for data, conditionally show/hide questions, store answers in hidden fields, validation, etc.) and had it write a formal requirements doc. I looked this over, gave feedback, and we iterated on the doc for a while.

Once that looked good, I asked Claude to review how the current codebase for the project worked so that it understood the current state of affairs. Then I let Claude loose on the code. It produced some new JavaScript, CSS/SCSS and PHP code with all the structure needed to power the functionality. I updated the data file with real data (this part took some human parsing to get right) and the functionality mostly worked great. We did some more iterations after testing with real data, but it wasn’t long before the project was ready to ship.

Scaffolding complex projects by hand can be super time-consuming, but for the AI it was much more efficient. Claude ended up producing several hundred lines of code, which, if I had done completely by hand, probably would have taken the better part of a week. Instead we had a first draft up with a completely working form and real data in under a day.

AI-Assisted Development Example #2: Working with Complex Data Structures

The JSON data object mentioned in Example #1 ended up being somewhat complex. We ended up with a couple dozen questions and a lot of metadata around the conditions under which those questions would show. There were also a bunch of display options for each question such as label, help text, and field format (simple text input, large text input, checkboxes, etc.). This large amount of data made the data file a little tricky to edit if you wanted to, say, add a new branch to the logic that showed a series of new questions.

But navigating these kinds of updates with the help of an LLM was very simple.

Instead of manually editing lines of code in the JSON file, I could ask Claude to do what I wanted, and for Claude this was a very simple task. For example, I could say something like, “Can you remove the third answer for the question titled [title] and replace it with this question [question] and have it be a multiple-choice question with responses [A], [B], and [C]?” Claude could handle this request in seconds without breaking a sweat.

This dataset wasn’t all that big—just a couple dozen question entries. But the same principle applies to larger datasets, like a spreadsheet file in CSV format with several thousand entries.

Another example along these lines that I did recently: I exported a bunch of WordPress data in standard XML format and then had Claude parse through that data to produce a spreadsheet-compatible CSV file with just the SEO data. This would have taken a while to do by hand, but with Claude’s help it only took a couple minutes.

AI-Assisted Development Example #3: Debugging

My AI assistants have become essential for debugging code. I generally use them for debugging in two ways:
analyzing the codebase and
producing useful log messages.

I was recently having a problem with the shipping calculation portion of a checkout process for a custom Shopify theme. I didn’t have a lot of useful information coming back in the browser or server logs, so initially I just told Claude what was happening, pointed out a couple files I thought were likely involved, and asked it to assess the code to see what might be happening.

Sometimes in this scenario Claude will propose a solution right away and the problem is solved immediately. In this case, we needed more data. I asked Claude to write some debug logs that outlined several data points that were potentially contributing to the issue. After doing more testing with the new logging enabled, I was able to identify the root cause of the issue. I pointed this out to Claude and suggested a fix and Claude implemented the fix magnificently.

AI-Assisted Development Example #4: Understanding Documentation

I recently was working with an API I’m not terribly familiar with and needed to know how to pass an extra data type that I hadn’t worked with before. I asked Claude to look at the documentation to see if it could figure out how to do it. Claude scoured several sources of information (not just the documentation page) and came up with a pretty good answer. It might have taken me an hour to sort through this; Claude gave me testable API calls in a few minutes.

AI-Assisted Development Example #5: Generalized Knowledge

I’ve been using Claude and ChatGPT to fill in gaps in my knowledge around best practices for SEO, site performance and accessibility. I can oftentimes ask it a question like, “Do I need to add an ARIA label for this DOM element given that its functionality is X, Y and Z?” and it usually gives me an answer that if not 100% correct, at least gets me pointed in the right direction.

A lot of times these questions surface new bits of knowledge that I wasn’t aware of and lead to further conversations that further extend my knowledge.

Adapting to New Standards

This is the gist of how the Harmonic Northwest team is using AI tools today, but of course the tools are changing and improving and new ones are popping up all the time. The way we interact with LLMs and other AI tools is going to change.

We don’t know what the future holds, but we’ll continue to learn and adapt so we can do our work efficiently, integrate the industry’s best practices and produce more robust and plentiful code.

The post How We’re Using AI to Save Time and Write Better Code appeared first on Harmonic Northwest.

These NDA arrangements usually happen when we’re partnering with other (typically larger) agencies to work on the website portion of a marketing campaign. In these cases we essentially become a white label service and an extension of the agency, sometimes using agency email addresses to communicate with the end client.

While I can’t go into great detail about individual projects, I can give you a sense of the kind of projects we do under NDA. Below is a sampling of work we’ve been involved in that you won’t see in our portfolio:

• Several WordPress sites for a prominent US-based semiconductor manufacturer
• A headless next.js/CMS site for a sports equipment company
• A Shopify site for a well-known international retailer
• A Shopify site for a niche bicycle manufacturer
• A Shopify/WordPress combo ecommerce site for a CBD tincture manufacturer
• A WordPress site for an award-winning west coast marketing agency
• A WordPress site for an award-winning west coast construction company
• Two WordPress sites for a pharmaceutical company
• A Drupal site for a large insurance company
• A custom site for a popular online payment processor
• Several microsites for a branded merchandise company
• A custom microsite for a US-based Fortune 500 IT company

We love helping our agency partners and seamlessly integrating with their teams to do great work together. They benefit from the deep technical expertise of Harmonic Northwest, and we get to work on some pretty neat projects with some pretty fantastic people. Teamwork makes the dream work, right?

The post NDA projects appeared first on Harmonic Northwest.

One of the ways the City wanted to help artists was to create an artist directory that could bring attention to working artists within the district. This would help artists get more visibility within and outside of the community, and to connect with patrons and each other to create new opportunities.

Harmonic Northwest was selected to make it happen, having helped out with the website before and leading multiple years of marketing efforts for the Soundcheck Arts Festival. You can check out the results here:

https://ptcreativedistrict.org/artists/

Harmonic Northwest designed the experience using Figma. We built upon the existing WordPress site, adding templates, styles and scripts, and installing and configuring some key third-party plugins. We ensured that the updates were compatible with their existing Elementor setup and other plugins. We created documentation for users and provided training to allow office staff to manage everything.

People browsing the site can view a listing of artists arranged in a grid with a photo of their work as the primary image and a small profile image overlaying that. Users can filter by artistic discipline, use a search box or sort the listings (by date joined or alphabetical).

The directory allows artists to self-register and then create and manage their own profiles. Artists can add a bio, links to social media and portfolio sites, and add images and video. They can also do basic account management such as changing their password.

Administrators can edit artist profile content and also are responsible for approving artist registrations.

The site currently features over 100 artists—not too shabby for a town of only about 10,000 people. The artists get some exposure, the city gets to show off its remarkable lineup of creative talent, and everybody wins.

Shoutout to the extraordinarily resourceful Ryan Niswonger for leading the development effort on this one.

The post City of Port Townsend Artist Directory appeared first on Harmonic Northwest.

Here at Harmonic Northwest, we felt a bit like that cobbler. We make amazing websites for our company clients and agency partners, but all the while our own website was rather lacking.

Well we finally decided to treat ourselves, and now this cobbler has some smokin’ kicks!

The new look leans much more heavily into the “Northwest” part of our name. Jameson Spence of Blocktype created the brand visuals that included the new logo and website. Local artist Ruby Gale contributed the delightful hand-drawn artwork of northwest critters and nature. Code for the site was started by David Siemers, picked up by Kelsey Kopecky, and taken down the home stretch by me (Gage).

If you’re interested in learning about why we rebranded and some of the thought process behind it, just keep on a-scrollin’…

The beforetimes

Before I go on about how the new branding came to be, I think it’s worth talking about the origins of the old look.

When I bought the domain name for harmonicnw.com back in 2004, I wasn’t really sure what the site would be. I was an indie rocker, designer, animator, videographer and web developer (roughly in that order) and I wanted a name that could serve as a homebase for any and all of those things.

I put together a first website outlining the offerings of my “company” which included recording jingles and producing audio. The website was built using HTML tables and Dreamweaver (as one did in that era) and featured a simple design with a bright blue and vivid orange color scheme.

Later I enlisted a colleague from CMD Agency to do some proper branding for a v2 of the site. I suggested that he lean into my musical background and go for a somewhat flashy tech vibe. And with that, the long-running version of the orange Harmonic Northwest website and the hexagon and squiggle logo were born.

The rebrand

So why did we decide to do a rebrand?

While it’s true that the old site wasn’t too bad and was still relatively serviceable, it just felt like it didn’t quite match the level of work we’ve been doing for our clients lately. Harmonic Northwest has built some amazing sites for big name companies, but you probably wouldn’t guess that from a quick tour of our old site.

Also, it just didn’t quite feel like us. The color scheme was as bit too in-your-face and artificial. The squiggly line for the logo was in step with some of the brand messaging that visualized a chaotic waveform becoming streamlined, but otherwise it didn’t make a lot of sense without that context. You might guess we were a medical device company or maybe something to do with analytics based on the logo.

A brand that embraces the northwest vibe

The new brand exudes northwest. We use photography featuring foggy mountainsides with soaring doug firs, majestic deer and bellowing elk. Hand-drawn images of moose, bears, skunks, foxes, moles, mountains, lakes and trees contribute even more northwest-ness. The color scheme features a deep green with a bit of calming blue and an earthy brown/orange that evoke colors from nature.

The logo mark itself features a single buck deer, which is an animal commonly found in (though not limited to) the northwest. Deer are sort of the spirit animal of the town I live in, Port Townsend, Washington, and bucks like the one in the logo regularly tramp through my backyard. Symbolically, buck deer often represent strength, protection, abundance and vivaciousness. The deer is depicted with rain falling in the background, which is important for keeping our forests mossy and green, and is also a symbol for growth and abundance. All in all it seemed like an appropriate emblem for us.

Smart and approachable

I wanted to integrate the whimsical hand-drawn art as that makes the site feel more approachable and gives some opportunities for small moments of delight. It was important to me that it feels like you’re viewing a website that represents a group of people who are kind, communicative and down-to-earth. I thought this warmth might be a distinguishing factor in an industry where people spend a lot of time pushing pixels and flipping 1s and 0s.

And in an age where all things creative are being disrupted and replaced by AI, there’s something to be said for having a website that has some very human-crafted looking elements.

We also wanted a site that felt open and airy and not boxed in and heavy, and I think we accomplished that. That weightless elegance contributes to the readability, usability and ultimately, loveability of the site.

By keeping the tone of the content casual and relatively succinct while showing off a bunch of great projects and outlining problems we have solved, I think the content strikes a good balance of showing off our smarts without seeming too full of ourselves and avoiding talking over our audience.

Visit the archive

The old site is archived at iheart.harmonicnw.com/harmonicnw-v2/ if you want to see the difference this rebrand made. Mad props to the enormously talented Michael Fofrich for putting together the previous design that stayed modern-looking for an eternity in web years.

The post The Cobbler has Shoes! (the story of the Harmonic Northwest rebrand) appeared first on Harmonic Northwest.

The site uses the Twenty Seventeen theme and is hosted on wordpress.com.

Updates included:

• Adjusted layout to improve UX and overall look-and-feel
• Adjusted navigation
• Added new content and pages
• Added carousel of ongoing projects
• Added search bar
• Improved RainChangers banner
• Made responsive updates for mobile
• Reworked company logos on Corporate Opportunities page
• Performed general back end updates (WordPress core, plugins)

You can check out the website at:

https://www.stewardshippartners.org

The post Making Puget Sound Watersheds Healthier appeared first on Harmonic Northwest.

When we built the first version of the Northern Pacific Power website, the Google Lighthouse scores were pretty good, largely in the 75-95 range. But we really wanted to make an effort to help the site reach its full SEO potential, so we took a little extra time to see how far we could push the boundaries.

The results of the efforts were quite good. After doing some auditing and making updates, test results were hitting 100 or very near to it for all categories on most pages.

Getting there required applying a variety of updates including alternate image delivery, improving semantic markdown, auditing accessibility tagging, optimizing load times for mobile and adding server-level cacheing rules.

This is on a WordPress site, btw. So don’t let anybody tell you WordPress sites can’t be blazing fast!

The post Lighthouse Scores That Shine Mighty Bright appeared first on Harmonic Northwest.

The audit entails running some automated tests on your website and more importantly, non-automated tests done by a real human, to produce a report containing a detailed checklist of items you’ll need to fix to bring your site into WCAG 2.2 AA compliance. We aim to provide this service at an affordable price to companies large and small.

But Why?

Why is accessibility important, you may ask? Well, firstly, because access to information is a human right. Measures to make websites accessible are important for the same reasons that installing wheelchair ramps in front of building entrances and adding audio to crosswalk signals are important—they help ensure everybody has access to the benefits provided by our society.

Beyond that, it turns out that making websites accessible to folks who have sensory disabilities usually makes them easier for everybody else to access, as well. Those captions that are put on videos for folks who can’t hear? Turns out those come in handy for the rest of us when we’re trying to watch a video in a bustling cafe or at a noisy job site. The large text used for folks who don’t see well? That actually works great for when you browse a website on a tiny device or try to pick out text through sunlight glaring off a screen.

Google and other search engines have given us an additional reason to make our websites accessible: to improve search engine result placement. Google has taken the step of penalizing sites that are found to not be accessible. This incentivisation has actually gone a long way toward making the web more accessible.

If none of the above are enough to motivate you to make your site accessible, then perhaps the threat of a lawsuit may. Companies big and small have been successfully sued in many states for failing to make their sites accessible. The payouts in these lawsuits can be significant, even when settling for reduced amounts to avoid court proceedings.

How The Audit Works

Let’s say you manage a company website and are interested in getting a Harmonic Northwest Website Accessibilty Audit.

The process starts on our audit request page, where you give us some information about your company and website, choose some options and submit a payment. During this process, you’ll call out a few of the more important pages on the site, which we can prioritize in our audit.

When we run the audit, we’re not evaluating every single page of the site, but rather looking at a cross section of three to six representative pages. This is enough to allow us to see problematic patterns that likely appear on other pages of your site beyond the handful that we check. Three pages is our “standard” starting point, but choosing more pages allows us to get a fuller picture of potential problems on your website.

We begin our audits by running industry-standard automated tests that quickly identify technical issues on your site. This automated testing covers about 30% of the range of accessibility issues you might find on a site. Then we run through a checklist of manual tests to identify the other 70% of issues that automated tests don’t check for. The human part of the process is the most important part, catching structural and context-specific issues that robots currently aren’t so good at identifying.

Within 2-3 weeks, we’ll send you a report on our findings. Those findings will include an easy-to-digest list of issues that will need to be addressed to be fully compliant with the WCAG 2.2 AA standard. Each issue we call out will contain information on where the issue is present, how severe it is, how difficult it might be to fix and a star-based “fix value” that can help you prioritize remediation work (i.e. where is the low-hanging fruit?)

The audit is primarily geared toward informational and ecommerce websites built on common platforms such as WordPress, Shopify, Squarespace, Wix and the like. We are able to audit most sites, even ones that aren’t on a popular site-building platform. The audit is not particularly well-suited to sites with a high degree of custom-built interactive components that function more like web applications—to audit that kind of site you would need a custom quote.

Interested in Learning More?

You can learn more and book your audit here:

https://www.harmonicnw.com/website-accessibility-audit/

The post The Harmonic Northwest Website Accessibility Audit appeared first on Harmonic Northwest.

The year was 2007. Steve Jobs and Apple release the first iPhone. Barry Bonds passes Hank Aaron for most career home runs. Mortgages in the U.S. subprime market are defaulting at an alarming rate and a global financial crisis is brewing. The sound of Beyoncé’s Irreplaceable fills the air.

In that same year Ruby 2.0 drops, much to the delight of the web development world. This new version of Ruby is considerably more mature than its 1.x predecessor and provides a solid foundation for Ruby on Rails to really take off amongst developers looking for an alternative to Java, .NET and PHP.

It is around this time period that Pinemeadow Golf embarks on rebuilding their online store. The previous version of the store had been built several years earlier on another hot new framework of its time, PERL, but the front end needs some major updates and PERL is quickly falling out of fashion. The team decides to take a chance on a new framework and the journey of building a store with Ruby on Rails begins.

Fast forward to 15 years later. The site is still chugging along using a combination of Ruby on Rails code along with some legacy PERL components. The site needs some new features and maintenance but the company’s lone code maintainer has moved on to greener fairways. The company’s CEO finds Harmonic Northwest and a new partnership begins.

Renovate or Rebuild?

It quickly became clear that major changes would be needed to get the site into shape (more on that below) and that presented a choice that would define the rest of the development process: do we make updates to the existing codebase or scrap it all and start over with a newer framework?

We knew that frameworks like Shopify and Magento could handle the store’s functionality and it was certainly tempting to switch to a more modern platform… but was that the best choice for the client?

We elected to keep the store on the same platform, that is to say on Ruby on Rails powered by AWS Elastic Beanstalk. There were enough complicated pieces on the site that were currently working well that we felt trying to translate all of those to a new platform might not be the best way forward. And so the Harmonic Northwest team dove into understanding and transforming this legacy codebase.

Environment Upgrades

The website had not seen any updates to its various environments and dependencies for a long while. Much needed updating when Harmonic Northwest arrived on the scene including Ruby, Ruby on Rails, Puma, various gem packages and the Elastic Beanstalk platform. The Elastic Beanstalk platform was sufficiently outdated that it was no longer supported by AWS which was going to be a problem for deployments and maintaining website stability.

Ultimately we were able to bump versions on all of these (1 major version for Ruby and RoR, more for many gems) and migrate the application to a supported Elastic Beanstalk platform.

Elavon Converge Credit Card Processing

The primary ask for this work wasn’t actually modernizing systems—that was just a prerequisite to being able to do anything else on the site. The main task at hand was actually swapping out their custom built credit card processing system with a new one.

We had a business requirement to implement Elavon’s Converge payment processor, a hosted payment gateway similar to something like Stripe or PayPal. Their system offers tooling that integrates tightly to application code to handle credit card authorizations and payments. Converge has a few ways to do this, but we opted to use their standalone lightbox solution. This method opens a modal window containing a short form for entering credit card information. All of the data is stored on Converge’s side and our application would receive a token to capture payment.

New Admin Orders UI

Adding the new credit card functionality also entailed setting up a new admin area where administrators can log in to charge, update and cancel payments. Harmonic Northwest designed a UI using Figma and the interface was built onto an existing Active Admin instance used for managing other parts of the site.

Other Updates

After modernizing their systems and swapping out the credit card processor, we performed several other improvements. Some of the tasks involved improving data tagging for Google Merchant and Facebook. Other tasks were geared toward improving SEO and analytics. We also did some work to reconnect the site to their affiliate sales provider Commission Junction.

Tee Off with Pinemeadow Golf!

You can check out the site and discover your next set of golf clubs at https://pinemeadowgolf.com.

The post Ruby on Rails, Elavon Converge and the Modernization of a Legacy Codebase appeared first on Harmonic Northwest.

Josh and his business partner Nico Courtelis are co-founders of The Portland Stamp Company and are in the business of reviving the somewhat forgotten art of poster stamps. They specialize in producing sheets of custom stamps to be used for celebrating special occasions (think weddings or births), promoting events or just good ol’ embellishment. You can have them help you design special stamps, upload your own artwork for them to print or purchase some blank sheets in bulk to print or draw your own art on them.

The two were interested in putting together an ecommerce site for the business that would be tightly integrated into a WordPress site. Having a long history of working with Josh on a number of other great projects (see: Fort George Brewery, DMS Architects, studioriley), we quickly agreed to help out. Josh provided some designs and then we dove right into the build.

WordPress Integration

The website needed to have a trove of information about poster stamps, an easily updatable gallery and a section showcasing the talented featured artists they work with. The site would also need to have a number of content modules that could be used flexibly across the site.

On the ecommerce side, they needed to offer a guided experience to their customers that would allow them to go through a sequence of steps to input all of the information and assets needed to produce a customized sheet of stamps.

These requirements pointed to WordPress being a good solution. WordPress’ flexible and easy-to-use CMS system could handle the informational content and some specialized plugins would allow us to put the pieces in place to do the ecommerce part and customize the shopping experience.

Configurable Products with File Upload

The focal point of the ecommerce experience was giving the customers the ability to order custom stamps using their own artwork. There were a few challenges that stood out here, namely:

• Creating a multi-step checkout process to allow a customer to upload information and assets
• Handling individual pricing on the 90 or so product configurations stemming from four different selectable options
• Allowing users to attach artwork to an order

In the end we used a combination of plugins and custom code to create the experience Josh and co. were looking for, and it all came together very nicely.

Dynamic Visualizations

Another feature that really makes this site special is the stamp visualizer. A user can upload their artwork to the site through their web browser and instantly see what that artwork will look like placed onto a sheet of perforated stamps. The tool allows the user to choose which stamp sheet to use, select page orientation and to choose a custom background color, and then it updates the product preview in real time. It’s fun to use and seeing the finished product has surely inspired some to become self-styled stamp makers.

Other features

There were a number of other useful and notable features we added to the site including an integration to Shipstation, Stripe payment processing, category-based filtering for purchasable pre-printed stamps, cross linking to buyolympia, optimizing email deliverability for the order notifications and adding tagging for SEO.

Go Get Your Stamps!

You can check out the site and create your very own customized poster stamps at:

https://theportlandstampcompany.com

The post Lick, Stick, Shop appeared first on Harmonic Northwest.

But there are some good reasons for its popularity. AWS has a broad range of useful and powerful features and its scalable nature makes it a practical choice for projects big and small.

Harmonic Northwest has been working on a couple of web application projects lately that are built on AWS and we have had a chance to get a bit more familiar with the platform. I thought I’d share some info that might be useful to others who are new to it.

Where is my site?

AWS doesn’t organize things by website or particular project, but rather they steer you to their various service offerings individually. So if you have a website that uses AWS for the DNS records, hosting and database, you’re going to have to look in three different places to find and manage those individual parts of your site.

Where is my service?

The Recently visited list shows you services you have used lately, but it’s not a comprehensive list of services that might be used by your project. To find a service not on this list, your best bet is using the Search tool up top. And if you don’t know the name of the service you’re after, you can wade through their rather long list of All services.

What services does my application use?

There are a whole lot of AWS services, but most projects probably only use a handful. Here are some popular ones that were relevant to projects we’ve been working on:

• IAM — Stands for “Identity and Access Management”. This is where you manage users of your AWS account. You can assign user-level permissions to various servies, reset passwords and add or remove users here.
• Route 53 — This handles DNS and is comparable to the feature set of a standard registrar like NameCheap or GoDaddy.
• EC2 — These are the individual cloud servers you’ll likely be hosting your application on. You can connect to these servers via an online console in the AWS admin area.
• RDS — Stands for “Relational Database Service”. These are virtual servers that host database installations like MySQL or PostgreSQL. The data for your application is probably here.
• S3 — This is used for media storage. Images and videos from your website can live here.
• Elastic Beanstalk — This service manages clusters of servers for load balancing, scalability and multi-server applications.
• CodeCommit — This service acts as your Git repository for a project. You can use your commits to deploy your application. And you can employ adjacent services like CodeBuild and CodeDeploy to manage your build/deploy pipeline.

Security Groups

You’ll need to add entries to the security groups for your EC2 and RDS instances to allow developers to directly connect to those servers. Specifically, you’ll need to pick what kind of connection is needed (SSH, MySQL, etc.) and the IP the developer is working from. That IP will then be added to a whitelist.

The format required by AWS for these entries isn’t the most obvious. You’ll need to list the IP followed by “/32” to tell it to pay attention to all four parts. Use “/16” if you want it to allow for variation in the last two parts (i.e. 123.456.*.*).

Also note that you can use the same security groups for multiple servers, which can save you the hassle of applying the same rules to multiple servers.

The post Unpacking the AWS Toolbox appeared first on Harmonic Northwest.

The specific solution to these problems depends on the situation, but I’ll go over a few common threads we’ve been seeing and scenarios that Harmonic Northwest has addressed.

The Holy Trifecta of Email Deliverability: DKIM, SPF and DMARC

Most of the email deliverability issues we’ve been seeing stem from missing or incorrectly configured DKIM, SPF and DMARC records. Email providers have explicitly called out strict requirements to have these three types of records set up properly in order for an email message and the email sender to be consider legitimate. I’ll go over what these are and summarize some typical fixes below.

SPF refers to a DNS TXT record that lists out servers that are allowed to send emails from your domain.

For example, if you use Outlook for your company email, MailChimp for marketing emails and have a WordPress site that sends contact form notifications, your SPF record will contain references to those three sources. If a malicious actor attempts to spoof your email and send out messages from a server not on that list, email services will see that and mark those emails as potentially fraudulent.

DKIM is a little more complicated—it refers to a secure key pair that validates an email message as being authentic where part of the key is contained in a DNS TXT record for your domain (the public part) and the other part of the key is on the server sending the email (the secret part). If you have multiple services sending emails out using your domain, then you’ll likely have multiple DKIM records.

For example, let’s say your WordPress site sends out notifications to a company email address when someone fills out a contact form. To ensure that message reaches the inbox of your office staff, you’ll need to make sure that 1) your server is configured to serve up DKIM keys, 2) that there is a properly configured DKIM key on the server that gets used for those outgoing notification emails and 3) that there is a corresponding DKIM entry in your DNS TXT records.

DMARC is the simplest of the three: it is a relatively straightforward DNS TXT record that tells email services what to do when emails are judged to be invalid. With the help of a DMARC record, you can get notifications about emails that are getting denied with useful information for debugging.

Troubleshooting Website Notifications

When working through email issues related to messages coming from a website or web application, typically we are looking into the hosting situation to make sure a good DKIM record is set up and then editing DNS entries to make sure we have a matching DKIM record and properly configured SPF and DMARC records. Most popular hosts already have the baseline DKIM technology in place and you just need to know where to look to find the DKIM key that you need on the DNS side. This is case for hosts like Dreamhost, Bluehost and SiteGround. With more customized server setups for a host like DigitalOcean, there might be extra work to do to ensure the server has the correct suite of packages and the proper setup in configuration files to link the DKIM key to the outgoing emails.

Email Deliverability for Marketing Campaigns

In the case of email marketing systems like MailChimp, there are configuration steps that need to happen within the administration panel of the account as well as the addition of DNS records (provided by the email service) at your domain registrar. Often times these involve using CNAME records instead of TXT records. These configuration steps are generally well-described by the service and usually easy to implement.

Third Party Email Services

While we generally prefer to set up DNS records and tweak server settings to allow emails to be sent directly from a website or application server, sometimes we choose to send email via a third-party service like SendGrid, MailGun or Postmark. In this case, we will typically install plugins or packages that link a site or application’s email functionality to this third party sender and update some DNS records as directed by the service. Once connected, the service handles the more technical parts of your email setup to ensure you are in compliance with deliverability standards.

Using a third-party service can be advantageous in several circumstances:

• The sending server has been blacklisted due to previous email history
• The sending server does not support DKIM authentication or is otherwise unsuitable for sending emails
• The client would like better visibility into statistics around email deliverability
• The client doesn’t want to deal with “server stuff”

Send via External SMTP

Sometimes we set up a connection to send emails from an email account within a company’s existing email system. This can simplify the setup process as you don’t need to sign up for a third party email service or update any DNS records or server settings.

For example, maybe you’re using Outlook for your company email. You can create a user called “notifications@mydomain.com” that is a dedicated address for sending out notifications from your website. In this case we can connect to your Outlook SMTP server, log in as that particular user and send out emails as though they were being sent by that user.

There are downsides to doing it this way. If the password for this email account is ever updated by a staff member or if the account is ever deleted, that would cause the email sendouts from the website to fail. The connection may introduce speed and reliability issues and depending on the quantity of emails being sent, costs for the email service could increase. Also, by using an email address on your primary domain (i.e. not a subdomain), there are risks for damaging the reputation of your primary domain… more on that below.

Protecting Your Domain Reputation by using a Subdomain

Let’s pretend for a moment that a website you manage is behaving badly, perhaps due to a bug or malicious activity, and sending out a large quantity of emails that are being classified as junk. This can have implications for your entire email domain. If notifications@mydomain.com is deemed an untrustworthy sender, other addresses on the domain (like janedoe@mydomain.com) might also end up getting lumped into this category.

To avoid this risk and protect your primary domain, you can set up your website or email list to send from a dedicated subdomain. You might choose a subdomain like “email.mydomain.com” to use with your email campaigns. Then if messages sent from notifications@email.mydomain.com get deemed spammy, the reputation of the subdomain will take a hit but the primary domain will remain unscathed.

In Conclusion…

Many factors can affect email deliverability and the reputation of your domain. I’ve touched on some of the more technical ones here, but there are more: the content of your messages, the validity of recipient email addresses, recipients marking your messages as spam, etc.

If you are having problems with email deliverability, get in touch and we can help get you pointed in the right direction.

The post Making Sure Your Emails Get Delivered, Rain or Shine appeared first on Harmonic Northwest.