Just wanted to share my progress from a year of using bootstrap studio from knowing close to 0 things about web design when I started. It’s been an awesome way to learn, I used to just be able to do photoshop mockups of websites and figma prototypes.
My latest build:
I’d appreciate any feedback I can integrate!
I’m looking into adding owl carousel 2 in the testimonial section at some point. Any tips on how best to do that?
The design is nice. You’ve incorporated some interesting features and customizations. There are a few things I found a little confusing (like there are things that you can hover over that change size/color, but are not links, which begs the question, “why do they have hover effects?” I had a little trouble figuring out where the page navigation actual was.
Clicking the brand logo sends an email. Traditionally, this is expected to take you to the website’s home page. There are a lot of png images that would be better as jpg or webp images to cut down on the payload. The image in the accordion for Digital under Digital Specs > EMAIL NEWSLETTERS is 198px x 315px on the page, but it’s native resolution is 1065px x 1682px. You should not resize bitmap images using HTML/CSS but size them appropriately when they’re created, before importing them. Also, the last line of text in that accordion item that starts out, “MCAA and MASONRY send out 104 emails…” is not visible due to the color.
The fixed navigation element at the bottom of the screen with the PROGRAM, SPECS, CALENDAR AND CONNECT icons gets cut off below 350 px, so you may have issues with it displaying on smaller phone screens (ex older iPhones, GalaxyS series, Galaxy Fold, etc.) There seems to be some bizarre resizing behavior taking place with some of the elements near the testimonial carousel towards the bottom when you change slides on mobile. It’s also hard to see the forward and backward arrows.
Please take the following as constructive criticism…
Your SEO is pretty rough. Not sure how important this is to you, but there are a lot of errors that would seriously hurt your page rank. The page title has no relevant keywords. The page description is way too long. All the meta keywords are total unneeded as they’re not a ranking factor. You’re missing a canonical tag. You’ve got 181 H1 tags! Some of them are empty. (there should only ever be one H1 tag on a page.) You’re basically not usings the heading tags for the purpose they’re meant.
None of your images have alt tags. None of your links have titles. There are some broken links. There’s no sitemap. None of the images have explicit height and width declarations (which hurts your page load time.) You’ve got a lot of aspect ratio issues, and some sizing issues.
Lastly, with such a long page, you might want to consider adding a “back to top” button somewhere.
Hope this helps.
all extremely helpful! thank you, I appreciate it, unfortunately, I’m flying a little blind with SEO, we don’t have an in-team person so I will probably end up learning the role at some point– the use of appropriate heading tags is a good start I can probably implement fairly quickly
question about the bottom nav- I have two setup with media queries- one to display on mobile devices and one on desktop did you encounter a scenario where it didn’t show up? I’d be happy to know so I can adjust. Please also let me know if my method is too unconventional or has drawbacks I don’t know about
No, there’s no issue with the menu not showing up. It just does a weird resize thing when you scroll the testimonial slider. See the gif below…
And if you view the site on a narrow device, like a older iphone or Galaxy fold, you can see the menu gets cut off. (See image below.) The menu is not behaving responsively. While it’s unlikely you’ll get much traffic from such devices, it’s just good practice to make sure everything works at all screen widths.
Hope this helps you out.
You should also be aware that there’s a weird bug in the Bootstrap 5.x carousel where on moblle, if you have the carousel set to not auto slide (meaning you can only advance by swiping or clicking) swiping won’t work unless you first advance to the next slide using the next button. After that, swiping works normally.
So this issue will affect the carousel you’re using for the Calendar on your page. You can advance the slides by tapping the forward and back buttons, but you’ll note that if you try to swipe the first slide, nothing will happen. After you click on of the buttons, then swipe will work.
Kulligaposten created a script to fix the issue. You can find it on this thread…
