I have experimented with Foundation for a single small site for a couple of years. Now I need to jump seriously in CMS and that makes Foundation the obvious choice moving forwards for my main site. So here is the question: The best navigation or even layout & navigation options?
Many of you have kindly viewed my site (nickwb.com) and it has grown organically into quite a behemoth of multiple pages, with galleries, video, articles and a blog. My stats tell me that the navigation, probably site planning too, is not as good as it could be. I have not helped by choosing to use the trendy looking ‘hamburger’ mobile menu for all navigation.
If you have looked at the site and thought “What a mess” or “what bad design” now is the time to say so: I would really welcome comments and suggestions on ways to improve things. Here or via pm is fine - I need to get this right going forwards. Perhaps with films and videos on the front page? Perhaps a side-bar navigation?
I experimented successfully with Screens a while back on another site and the ‘fashionable’ page sliding is lovely, but not sure it would work for such different content? 60-70% of my traffic is mobile, so my build has to be aimed in that direction - Screens did give me issues when I combined text and images.
Over to you and thanks for any input!
OK, so you are all SHY
I got on an re-built the site in Foundation with InStacks awesome new Poster Stack for a news blog (a little more work needed on the blog + 50 posts to add)
Feel free to comment!!
Nice looking, clean site.
On this page/post, the tags at the bottom all point to the same url/tag. Not sure if that was your intention.
All I get on your photo pages are blank images and a non working menu
- Chrome/Mac OS
PS. Your workshops page opens at the bottom of the page
PPS - I get nothing on your photo pages in Chrome, Firefox or Safari on fast broadband.
Same here. No photos are displaying (Firefox)
Sure that your TypeKit code is working?
@NickWB I’d guess that your form has ‘autofocus’ set on that one field, which is why the page is jumping down to the bottom.
Oh Bother! it was going to be a quiet evening
Thanks for the heads up everyone!!
OK looking on Opera Neon (nice browser BTW, and not Google…) All the galleries are blank, but workshops is OK here.
I’ll do a site reload now.
Thanks again for checking!
Again, thanks for the heads-up everyone! Everything now appears to work OK, although a couple of article links are needing a tweak.
Does the navigation work OK in terms of function and logic? Should I put more content on the front page to make it sticky, or is it OK as a ‘book cover’?
Photos now showing ok but I do find the navigation a bit confusing - If I go to Photos>Commercial I have to then go back to the Menu then Photos to get to another photo category - would it be much simpler to have the Photos categories on all the photos pages?
Workshops still goes too far down the page.
Navigation needs keeping all to one side instead of having a hamburger in the right and the menu links appear on the left. My poor mouse is knackered.
Forgot to say the blog works and looks great.
Interesting Dave. Workshop has to stay is is for the moment (but you are definitely right; I’ll do some tweaking on pic size etc later). The menus are what I really was not sure about, so thank you.
Do you mind me asking you to clarify your point about photos categories? I’m quite new to Foundation for a bigger project like this (the last one had 4 pages)
Gary - you are right. I have a partial with navigation and I need to separate logo from Nav
Your current nav = 3 mouse clicks, my suggestion = 1 click
If you go into your foundation form and the Text Input settings for the ‘Name’ field, just uncheck the ‘autofocus’ setting and it won’t jump. Or, if you need to keep that autofocus, maybe consider moving it to the top of the page.
I’d suggest your images are way to heavy, even for a photographic site. They are slowing loading (on my humble 7MB anyway) enough that visitors will give up and move on.
You have quite a few images at 1MB +.
I took one (the red squirrel). I cropped it from 2500 to 2000 pixels in width (still plenty big enough for any screen) and ‘reduced’ the quality in PhotoShop’s ‘save for web’ to 50%. I could see no deterioration in quality when placed next to the original and it went from 920 KB to 212 KB.
So a top bar? I’m trying so hard to keep a clean look, but I really know where you are coming from…
You have a good point, I looked at a site today, saw the flash logo and immediately clicked away.
Historically my audience has been the most fastidious of the few (London art directors) and everything was maxed in terms of quality, so I did not worry about file size. It is a a dilemma even now as I see quite a lot of traffic from people on iMacs with 5K screens, but your point is very valid and I’ll do some reviewing - I work on jpeg 10, so even 8 would halve file size and as you say, 2000 px is a good size
The blog setup works and looks great.
One of the larger turn-offs for me is hamburger menus on desktops. Navigation should be easy with as few clicks and mouse movement as you can.
Doug - good point!
I have taken everyone’s opinions on board and on the test site, I have a fixed menu that I’m working on right now. I perhaps should look at a side bar (or is that now out of fashion?) I have never used one, or worked out how to do one since using RW.
Updates on the way
Out of interest and in response to Doug and Dave, it seems impossible to constrain the mobile menu to a percentage of the width - I tried single column stacks, flexible settings and more . Anyway, I’m now going ‘fixed!’