Wrapping up a site for a Michigan roofing company, and I’d love to get some feedback from the community! I’m still adding loading and scroll interactions to the elements, so those aren’t live yet. Let me know your thoughts and any feedback!
Project Link
Hi Jordan,
Nice site. Clean, smart and to the point. Love the hamburger! I would only say that the blurred hero image is a bit of a strain for my eyes, so perhaps put a slightly dark overly on this and it may work better. Unless this was unintentional (as the above thumbnail image seems much sharper) and the resolution of the image was distorted when set to cover.
One other point - I noticed that when clicking on the referral list, it opens a pdf that isn’t housed in dropbox etc, but incorporated within the company url. Who did you use for this, if you don’t mind me asking?
Thanks @DanUK1. I’ll play around with it a little to see if it’s easier on the eyes with an overlay.
The PDF is currently just hosted on my cPanel. Usually I would just upload documents like these to a separate folder in the client’s cPanel, so it’s hosted right on their site. Any drawback to this that you know of?
@jordanshotwell The hamburger X is misaligned when open (mac/ safari)
I agree with @DanUK1 that the hero image needs something more. Otherwise the site is very nice looking
Thanks @jdesign. Any idea as to why it’s misaligned in Safari? The editor is not showing the misalignment and it doesn’t appear to have the issue in other browsers.
Here’s the read only link: https://preview.webflow.com/preview/oakesroofing?preview=0dbf637e8bf71b792fa5648c6b86e943
Looking good @jordanshotwell ! I agree with the blurry hero image make it sharp and put a overlay on it. Also the logo looks a a bit wonky the arrow bits aren’t aligning to the centre and the alias on the logo in the dark area look a little jaggy
Id add hover states to the social icons too.
Cheers
Sveky
@jordanshotwell I’ve had certain aspects of Flexbox get iffy on Safari so you might try adjusting the setup. Do you need to use use flexbox for the nav button? I’d normally not for something like a nav button…I stick to using it more for column or grid type of content that might vary in length/size.
It doesn’t have to be Flexbox, but I found it easy to use for keeping the menu button lines aligned to the center of the button. Any other suggestions for doing the same thing?
Edit: @jdesign To clarify, when I set the Menu Button to “Block” instead of “Flexbox,” the idea is that I’d use padding to keep the lines centered. However, on the button used in the Nav Menu (“MenuButton.CloseButton”), the lines are rotated 45 degrees and -45 degrees to create an “X”, so the padding doesn’t work in this case. The Webflow Editor reads the lines as being not transformed, so if Flexbox isn’t being used, then the Menu Button shrinks itself to the height of the two lines as if they weren’t rotated at all. See the screenshots below.
