New site soon to go live ... any observations?

Test of what happened if I post a link to this forum:

Not bad… in FB and Twitter the image is full width with the text below.

Hi - could you tell us how you did this? I am looking for a way for my own site…

TotalCMS gallery called (in my case) social-fb, I have another for Twitter with different image dims.

In the Foundation SEO Facebook OG stack I use the gallery random image macro to pull one of the 6 images I have in the gallery.

It took a bit of fiddling to get the full url to work but nothing complex.

This is a great site for testing Social links, try entering the ScaleNI site url a few times https://social.pilcro.com

1 Like

600 px wide - that’s interesting , I’d never thought of using a self imposed max width on text blocks.
I’m always looking at my betters for those little snippets of info ;) . I always feel its these little details that can consistently make sites better, Ill take that one if I may :)

No, I’m sorry, you can’t take that one. 600px is mine, you’ll need to use 599, or 601, although I recall 601 has been taken by someone else so best check that first.

I’m positive 593 is available though.

1 Like

Ok ill take the lower one , however I’d like to point out that being Numerically Fluid , there may be times where Id like to be known for using 600 too. If I can’t, I will do a youtube vid about being marginalised. Just wanted to get that off my chest. So 593 it is.

@paul.russam There is a great deal that I like about this site. The overall look, colours and above all your technical ability to use RW to build it. Its fresh and the top left curved overlay is genius.

However, I think it looks more like a demo of RW stacks in places and the animations are too much for release into a live site and is the type of site that would be ideal as a demo of the divider stacks from Tav, 1LD, JW, even me, etc…

The content of the site is beautiful and the portfolio of work is stunning and I think that should be what strikes you when you look at every page rather that the layout attracting your attention.

I feel that he curved dividers which I assume is Seams (but there are so many these days), doesn’t add anything to what is essentially an architectural site based on straight lines. The top left curve is all you need. The building photos should pop out and work without any effects IMHO.

Generally the text is a bit too big and I agree that limiting the width of text to 700px or so with 96% width, would create more white space and improve the design feel of the site. I think the quality of the content demands a better quality font and Proxima Nova or Gotham, would add so much I think.

Also, I think the icons look a bit like blocky FA icons and a lighter variant without the black thick circle would simplify and improve the layout. Better more professional icons would match the content better too.

I love the effect on the Our Process page, but I see a long delay before content appears and the animation is over the top making the text which is truncated sometimes, is unreadable for me due to the tiny font size. That page needs simplicity, because the user has clicked to investigate it and they need to see clear information and not effects. Again the Seams dividers and slider, just get in the way.

One thing I do when I think that I have finished a new site, is to stand back, and go through the whole site and start removing stuff that doesn’t add something. I do this over and over and every time I have done this, I end up with a better site. The first thing I used to remove was the latest stack that I bought and decided to use (simply because it was interesting and I felt I had to use it). In your design, Seams jumps out as that stack. Us Weavers are all guilty of building new designs using the latest stacks at the forefront of or minds instead of thinking purely about the design and layout and then considering what stacks to use.

Thanks for the detailed reply !

  • I’ve played with the fonts and replaced the headers with Proxima and the body with Malabar. (I tried Charter but it was to formal) … Proxima is a great replacement, I’m still not 100% on the body font though.
  • I’ve reduced the max content width a little but I’ll never go as low as 700.
  • The fonts have 4 size break points so I can adjust them, Now that I’ve changed fonts I’ll revisit the sizes.
  • I’ll look at the 10 icons on the home page and see if I can get a bit more consistency between them, they originated for different sources so there’s a bit of a miss match.
  • The load speed of the Process page has always bugged me but its due to the amount of content, I’m hoping that ClouldFlare will help a bit …

Use Proxima throughout in same weight or a different weight if it needs it. Proxima loves being used on slick sites:)

New icons in place

They are better. Try Proxima reg or book for the paragraph font as a test. The para serif font looks too heavy and the serif wrong IMHO.

Nice site Paul, how did you do the arrows?

That’s a bit of BWD secret sauce.

1 Like

Alternative layout for the process’s page, any thoughts?

Existing: https://www.test.scale-ni.com/ourprocess/
Alternative: https://www.test.scale-ni.com/test/

I prefer the alternative. I still think the seams don’t add anything and it would look sharper without the seams.

I like the design. But on my iPhone it does stuttering a lot with al the fixes elements. Also to open the navigation sometimes need to tap multiple times before it response.

On my iPhone it is as smooth as silk and the menu responds every time to the slightest tap. Were you by any chance using the Discourse app and its built in browser to view the page?

On my iPhone6, the home page, the slider is a little unsmooth. Most people wouldn’t notice it.

On an iPhone6 I find it is a bit cluttered and the menu is difficult to see and many may not understand how to navigate. Must be a bit worse on an iPhone4. iPhone6 screenshot below.

Also if you add a page BG made up of vertically tiled images of a white image with the black and brown used in the main left overlay, you will lose the white line that shows itself on some screen sizes.

Unfortunately, on my iPad2 with the latest IOS9.3.5, nothing at all shows. Just a blank screen.

Thanks for the feed back,
I’ve noticed the mobile menu activation thing (though its inconsistent) and I think I know what might be causing it … I gave it a hover effect which is silly as it only appears on mobile … silly me … I’ll fix it.

Mobile menu clicking should now be fixed.