We discovered an issue on the customer’s website when someone submitted the contact us form. We would get a bounce back saying the auto responder email address was sent not from the website’s domain. Since the first email from the form went to the customer we knew it does work, but just won’t send the second email.
We contacted the developer and said it was SPF, DMARC or something in that realm that was causing the issue. We didn’t want to mess with the customer’s DNS setting, but something needed to be done. In the customer’s SPF record was one “include” already so we looked up how to add the second. It was very straight forward.
With a older website we needed to fix some Fontawesome issues where the icons stopped displaying correctly. We needed to match their old Fontawesome version 4. The template was set to use Fontawesome 4. All of this needed to be set in the CSS. Here is what we needed in our CSS file.
Okay, maybe not a full blown tutorial just some lessons we have learned. We recently got asked evaluate a website. The site seemed very plain Jane; however, when running Google’s page speed insights we were blown away by the performance. It scored above 90% on everything. We tested a new version of our website and was crushed by the disappointing score. It was time to get to work and learn how to lower the load times, increase the accessibility and SEO scores.
Here are the first test results for mobile and desktop.
The performance scores were terrible. The SEO was so disappointing.
Keep your <h> tags in order
Digging in deep with the browser developer tools. We realized that a simple module we had at the top of the page as an attraction had the text was in wrapped in a “<h3>” tag. This seemed so simple but Google wants your page <h> tags to be in order starting with “<h1>” and working way through the higher / smaller <h2 – 6> tags. Simply moving this module below our “<h1>” tag greatly raised our SEO score. Oh yeah!
Make it link
The other small issue was the navigation bullets in front page slide show didn’t have a destination. The module’s code knew what to do, but the link wasn’t visible to the browser. Simply not having the destination url in the “<a href=””>” tag. We didn’t have a way to control this so we choose not to show the dot-navigation. We switched it to showing arrow on the hover for the user to jump ahead in the slideshow. Time to run another test in Google’s Page Speed Insights.
The results are in
These two small changes super charged our results. Here are the results we got.
We were so please with the results. We still have some work cut out for us, but is good to know we are not so far off. We dug in deeper. We really wanted “Accessibility” and “SEO” to reach 100. “Best Practices” we could work on, but is “Performance” based on the CMS platform? Is that why “Performance” isn’t reaching 100?
Going Deep
We followed the details in each section of the Page Speed Insights and eliminated a few small problems. One of the issues we had was “contrast“. It was pointing to a red button we had on the screen that had white text in it. We thought the contrast was strong, but we used this following link to check the contrast ratio between the background and the text. We needed to change our background color just a little.
We took some the images into Photoshop and got the resolution down. We also cropped the images to fit the space they occupy better. We lost a little quality but took it down to a quarter of their size. Not fantastic, but lets see how it could help.
The next run we are finally hitting the numbers were are happy with. We had to eliminate just a couple of small features, but we are not really sacrificing user experience. Take a look at the results.
We received an email from Google Business Profile for an ownership request. This was a good customer and we wondering if they might be leaving us. We reached out to the customer to verify the request, and found out the customer didn’t request it. Good for us, but very troubling had the request been granted.
Your Google Business Profile is very important to businesses. In the past we have seen customer loose almost all new business when their profile gets suspended. Getting Google to remove the suspension can be next to impossible. As a business owner you need to have this tool under your control.
Our advise for anyone is to respect and appreciate your Google Business Profile and make sure you have ownership over it. We have spent a lot of time with customers who have gotten into trouble and lost their listing or got it suspended. If you get in over your head and need some help feel free to reach out to us for help.
We used Gantry template on our blog since we built the main website using this template as well. It saved us a bunch of time because we were able to use alot of the same CSS. We mainly audit our main site for SEO, but when examining AHREFs full data we noticed all the blog post titles were h2 tags, so the h1 tag was never created for the page.
We ended up having to do an override in the template. Not something we like doing; however, Gantry does make it easy-ish. We did need to edit some template files directly. We used the following forum post to help us.
We are upgrading a Joomla 3 website to Joomla 5 and keeping a Gantry template, and when testing the mobile view we noticed the mobile menu wasn’t showing up. This drove a bit crazy, but we were able to get it resolved. Once resolved we needed to work with the “custom.scss” file to use Media Queries to make it perfect
The secret here is in the layout section of the template click on the gear or options of the Menu Particle. At the bottom of the options you will see “Mobile Target“. This will make this menu the mobile menu. Here is a link to the instructions from Gantry.
We were upgrading some Joomla 3 sites to Joomla 5, and fortunately Gantry 5 is ready for Joomla 5. We needed to use a Media Query, but just putting it our CSS override files wasn’t working. These Media Queries were working in our Joomla3 / Gantry 5. Gantry has great documentation and we found our answer here.
Gantry has funky methods for overrides, and that you will need to work with the file structure. You will need a “custom.scss” file put into your theme. The path is: “your site root/templates/g5_hydrogen/custom/scss“. We mainly had an issue with the mobile menu icon not showing up in mobile mode. We started with the following lines in our “custom.scss” file:
// import breakpoints @import “dependencies”;
// Mobile Menu Breakpoint @media only all and (max-width: $breakpoints-mobile-menu-breakpoint) {
Your CSS Classes go here
}
@import “nucleus/mixins/breakpoints”;
From here it was normal CSS. The secret is to put it in the “custom.scss” file, and to follow the syntax that Gantry provides. We provided a link above to their instructions.
We like using Joomla over WordPress when it comes to portals, so while working on a site we ran into an issue where some Fontawesome 5 Free fonts were not showing up. The template framework Gantry has the capability for Fontawesome built-in. This comes up periodically and here are some tips you can try if you run into this issue.
Choose “Font Awesome 5 Free (Webfont / CSS)” in the settings.
In your CSS class use the font family “font-family: ‘Font Awesome\ 5 Free’;“
In your CSS class right after the font family set the font weight to: “font-weight: 900;“
We moved to “Font Awesome 5 Free (SVG / JS)“, but we lost our CSS styling. We had buttons with a red background and that was lost. When we switched it back to “Font Awesome 5 Free (Webfont / CSS)” we were able to style the way we pleased.
The next issue we had was only the code was showing over the symbol. We had the correct font-family, but we had the font-weight set to “normal”. You must set the font weight to be: “font-weight: 900;“; otherwise, you will see the following.
Our IT Network staff recently did a network upgrade for a new customer who was getting a new ISP, and when we finished the customer couldn’t get to their website. Seems like a DNS issue, but it wasn’t. We could use just the Comcast router and go to the website, but when we added our Firewall with no rules set the site was blocked.
The issue turned out to be a Security feature in the Comcast router. A featured called “Securityedge”. Once we determined it could be this feature we were unable to turn it off via the router. The only way to turn off this feature was to ask Comcast to turn it off.
One of our employees called one our partners, but didn’t reach them. When they called them from their cell phone the person told them they didn’t answer the call because it came across labeled “Spam Likely”. We reached out to our VOIP provider.
The VOIP provider said there was nothing they could do and that the number was reported as spam. They said we would need to go the website Free Caller Registry and submit our number.
We had to fill out the form and verify our email address. We received an email stating their team will investigate it and we will be hearing back when they have finish the investigation.
