Site(s) of the Week 1/19/2024

Whew! Another week in the books. I’m trying to keep up with adding a few sites every week, but it is certainly taking up a bunch of time. I’m really hoping to find a nice rhythm as we move into the year. I have a bunch of tutorials I think you all would enjoy, but if you have anything in mind you would like to see, I’m all ears. This is just a fun little side project so don’t hold me to a timeline, but I like to use this to exercise some creative energy in my “spare” time.

Built With Bricks
January 19, 2024

FieldEdge App

Link to the page

This site hits on a few different trendy things that have been used lately in the web design field. The most standout is the hero design. This is a little more reserved than some others that are out there, but I really am digging this style of hero.

It really makes it easy to have a hero without having to worry about finding the “perfect” image to go with it. That’s the hardest thing sometimes is to avoid making a hero look “stock photo-ish” and this lets you add the visual flair without the need for an image. Let’s keep this style going! Here’s the FieldEdge hero:

image 3

What I like about this one is that they do it how I would consider to be the “correct” way. As I’ll show you below, some of the other examples don’t do it how I would consider to be the semantically correct way.

With the one above, they broke it up just by changing the font, which is relatively simple. The complexities start to happen when you introduce icons and images to fold like this one:

2024 01 19 11 26 56

So this one is using actual images, inside their H1 tag. They start with a grid and then use areas to place the elements, like this:

image 4

This whole block is their H1 essentially. I know HTML5 changes things in terms of how we view H1, and that Google’s John Mueller confirmed this here, but it just feels DIRTY to have that mess of an H1. It’s probably just fine, and the actual CSS is quite elegant in their approach — doesn’t mean that it doesn’t just feel wrong. Here’s their entire block of code for the H1:

image 6

Here’s an example from Butter.us which actually includes inline links to different things they want you to do. Pretty slick. I’ll definitely be using that idea in a future build!

They actually did it how I normally do it, which is to use spans to hold the links/icons/images.

2024 01 19 11 57 33

Anywho, I digress.

This next piece will fit well in our future components library, and it is absolutely simple to do with Bricks, but I actually really enjoyed the simplicity of it.

2024 01 19 11 35 12

Another component here. While this fits with the modern extra large text trend (which I LOVE), I’m torn on whether or not it needs something to clear out the space on the right. Or maybe it would take away from the focus of the CTA? What do you all think?

image 7

Conclusion

So that’s it for today. Let me know what you think about what you would like the Site of the Week posts to be about. I enjoy digging into one or maybe two individual sites, and maybe some weeks I’ll just do a quick “things I like/don’t like” on a few different sites. Kind of depends on what you guys want. Drop me a line below and let me know.

Drop Me A Line