Recreating a site like this

Yuk. That’s one of the fugliest sites I’ve seen in a long time. Should’ve been strangled at conception.

Change my mind.

2 Likes

Agree! It’s horrible. I looked ta it over the weekend on my phone, where it’s just a load of stacks blocks, and wondered what the fuss was about. Now seeing it on desktop I have to agree with Marten, why the feck would anyone want a site like that?

Desktop use is falling, tablet use is flatlining, smartphone use is growing now that screens have settled at a much bigger size. I bet the next set of figures are going to show a big move to smaller screens for users, questioning why anyone is bothering with cool looking sites with fancy animations that only work/loo cool on big landscape screens.

Personally, I’ve all but given up worry too much about how a site looks on a desktop, my focus is almost entirely portrait views now, where almost everything stacks and animations don’t work.

I think it is a cool site that is very appropriate for the subject. It has a distinctive look and colour scheme and fits the target market IMHO.

Where it doesn’t work is in the over aggressive mobile version where content is thrown away instead of trying to make it work on smaller screens. The desktop version is fairly straight forward but it becomes quite challenging as the screen width reduces.

1 Like

Thanks, Gary - I totally agree. For the right product, it’s a very cool site. And, it could be made to work on mobile devices with a bit of work.

The synced sliders are pretty cool which you will only see this if you don’t move your mouse over contact. Nice effect to have running as a desktop screen saver in their office.

Wan’t someone going to build this site in RW a few weeks ago?

I recreated this site using Source. The site is built with just the source Grid and Containers as well as the Header and images stacks ( i.e. just 5 stacks) and uses only 3 lines of CSS. I haven’t added in any sliders, but the navigation buttons are ready for this.

The original site is a challenging mix of fixed width borders and proportional heights for some of the elements. This mix of fixed and proportional height never works perfectly but I have used the same technique as the original. It could do with some more fine tuning but really it should be built completely in proportional heights. Luckily this is easy to do with Source and had it originally been built with 1 big Source grid, it could be better behaved and look more elegant with repositioned grid items at all 4 breakpoint ranges, instead of the older 2 column collapse approach, used in the original layout.

The demo site is at https://www.webdeersign.com/xdemo/

5 Likes

That’s a beautiful recreation, Gary! Luckily for you, though, I purchased one of your templates and used it instead. And, when I was asked to build another site for a new client with an extremely short turn-around, I purchased a different template of yours. It turned out pretty darn nicely, too. https://www.vortexhvactech.com/

If you knock your demo up and sell it - I’m liable to purchase it too. A different author approached me a few weeks ago about building a site for him, too. I guess that’d be good for Stuart, too. :)

1 Like

Thanks. I wouldn’t parcel it up as a Project because it is someone else’s design, but the exercise was really just to see how quickly and completely that the layout could be built with just Source. You can learn a lot by tying to reproduce challenging layouts

That looks great! Good job. Recreating sites / designs is definitely is the best way to learn. And that’s a great layout to test out grid designs with!

I think this could actually be done with a single Source Grid Plus stack. I’ll give it a go and post if successful!

5 Likes

I updated this demo site to use all % borders (0.5vh) to match the % heights used throughout, and it behaves as it needs to in fringe screen sizes.

Great to read about this in the recent Source blog post (https://source.shakingthehabitual.com/source-blog/block-grid) using Grid Pro Plus and some of the more recent enhancements. What is amazing, is to realise that this original post thread, is from over a year ago.

@dave Hey Dave, what happened with this in the end?

I found this demo on my server and was about to delete it when I thought I would leave it there. It has been a long time since this was created yet it is still as fresh and ground breaking now as it was then.

With some of the new Source stuff added since this was built such as the Utillty and Image Fit stacks, it would now be an even easier build in Source.

Ignore - Just a layout demo site

2 Likes

Hey Gary - that was a long time ago! I ended up using a different project instead. The site is up, here: https://www.5-fs.com

1 Like

That’s a very different direction indeed. Cool.

I noticed a few strange text animated zoom issues where the text sometimes seems to zoom up to full readable size and sometimes it seems to stick at a small size. Here’s a screenshot of the home page:

Well, that’s not good. I will have a look. Thanks for the heads-up!

EDIT : What browser, @Webdeersign? I just checked it in about half dozen different ones including IE on Mac and IE11 on Windows - and it worked great in all of them.

Mac Safari 13.1.2

Not sure if relevent but there is a Machform JS error.

1 Like

Definitely fugly. And somewhat frightening.

After reading Stuarts blog post about this site from way back in 2020, I just had a look at that site again and wondered why it was so symmetrical when it could have been so easily broken up a bit more. Turns out it was never built with CSS Grid.

It also reminded me of how much we have learnt about using CSS Grid since them and how sometimes, layouts can become over complicated when there is an easy way to build them.

1 Like

Thanks for circling back around, Gary. Always good to take the easy road, when we know it.

Agree. We did take the easy road back then by using CSS Grid but assumed they did too, which was not the case.