Jump to content
Mike Rockett

Site in development

Recommended Posts

Hi All,

So I started working on my own site about a month ago. I think we can all relate to the pain behind one doing one's own site (nothing is ever perfect, frustration, etc.). That said, I'm enjoying it this time around (yes, I've tried several iterations over the last few years). Why? Because I'm keeping framework usage to a minimum, and employing my own methods to get certain things done. So, it's becoming a learning experience for me - I guess that's one of the best methods to 'open one's mind'.

Anyways, I'll be keeping an updated version here: sb201510.foundrybusiness.co.za

Quite liking the home page thus far. It's responsive, and I think it does a really good job at that. Far from perfect, but a good step in the right direction. Of course, I need to add a few more things to the page before I continue with the others, and then, eventually, port over to PW.

Opinions and ideas are most welcome. :)

  • Like 3

Share this post


Link to post
Share on other sites

I think it does look more modern than the previous site! It took me a while to "find" that there was a menu bar after scrolling a bit, I don't know if contrast is the issue, or maybe the thin fonts.

Code it live in livecoding.tv! :D I'm kind of planning doing that with my own site (this related to other thread), as you said, it's a pain to "be happy" with your own work.

  • Like 1

Share this post


Link to post
Share on other sites

I think it does look more modern than the previous site! It took me a while to "find" that there was a menu bar after scrolling a bit, I don't know if contrast is the issue, or maybe the thin fonts.

Code it live in livecoding.tv! :D I'm kind of planning doing that with my own site (this related to other thread), as you said, it's a pain to "be happy" with your own work.

Thanks! The current site is really just a quick placeholder. There was a nice site before it, but I wasn't enjoying the development of it at the time.

The menu appears after you scroll past the top of the white pane. I am thinking of making the hero image darker (with a white logo and arrow), and then using a darker menu as well. Will play around first...

livecoding.tv looks cool, but I have bandwidth constraints, which is a mission for me to get around at the moment. Will stick to my little subdomain for now. ;-)

  • Like 1

Share this post


Link to post
Share on other sites

Yep, same problem here with the menu. And also the About Foundry button, if it would be working already, I would have never seen the "essencial solutions part".

Share this post


Link to post
Share on other sites

Yep, same problem here with the menu. And also the About Foundry button, if it would be working already, I would have never seen the "essencial solutions part".

Do you agree with my previous idea? Or should I perhaps show a menu without a background (and without the Foundry logo) when viewing the hero image, and then showing the Foundry logo and the menu background-color when scrolling past the hero image?

Not sure what you mean about the About Foundry button - could you clarify please?

Share this post


Link to post
Share on other sites

I like it visually but i'm always a bit torn about such 'empty' first screens. Why do i need to start scrolling or clicking/tapping before i get an idea of what the site is about? Isn't the function of a brochure site of sites to inform the visitor, and do this as quickly as possible? I see this kind of design quite a lot lately but i wouldn't be surprised if it was actually harmful for user engagement. In a sense it reminds me of the (flash) intro pages of the olden days with a 'click here to enter the site' message. Bad practice. But maybe it's just me.


...

Not sure what you mean about the About Foundry button - could you clarify please?

When you go to the About Foundry part of the page via the downwards arrow click you have no visual clue that there is additional content beneath it. The only clue is the scroll bar but that is easily overlooked.

Share this post


Link to post
Share on other sites

I want to mention that i don't mean to sound harsh. I just have some concerns about the emptiness of the first part of the page and the usability of this kind of 'fake page' effect design.

PS i see that you use flexboxgrid? How is that working out? I thinking about redoing a site making use of flexbox but i'm not sure yet that i can skip IE<10 support.

  • Like 1

Share this post


Link to post
Share on other sites

When you go to the About Foundry part of the page via the downwards arrow click you have no visual clue that there is additional content beneath it. The only clue is the scroll bar but that is easily overlooked.

Yes! I agree on this too, forgot to mention, but it also happened to me.

Share this post


Link to post
Share on other sites

I like it visually but i'm always a bit torn about such 'empty' first screens. Why do i need to start scrolling or clicking/tapping before i get an idea of what the site is about? Isn't the function of a brochure site of sites to inform the visitor, and do this as quickly as possible? I see this kind of design quite a lot lately but i wouldn't be surprised if it was actually harmful for user engagement. In a sense it reminds me of the (flash) intro pages of the olden days with a 'click here to enter the site' message. Bad practice. But maybe it's just me.

When you go to the About Foundry part of the page via the downwards arrow click you have no visual clue that there is additional content beneath it. The only clue is the scroll bar but that is easily overlooked.

--

want to mention that i don't mean to sound harsh. I just have some concerns about the emptiness of the first part of the page and the usability of this kind of 'fake page' effect design.

PS i see that you use flexboxgrid? How is that working out? I thinking about redoing a site making use of flexbox but i'm not sure yet that i can skip IE<10 support.

I completely understand your concerns - that's why I posted this here. As much as I'm enjoying development, there are always things I tend to overlook when seeking different/interesting design principals. One of the reasons I picked this direction was because I don't want the site to look too common. Whilst that isn't always a good thing, I'm not marketing to the same people who look for common things. That said, I do still have plans to make it more user-friendly. I'm also looking at adding a one page scroller, with arrows to indicate further content.

Not sure what you mean by 'fake page' effect?

Yeah, I'm liking the grid. As for IE support, I am really getting tired of it - it's taken such a long time for IE to catch up. I hope Edge is doing a better job - I haven't tested it as yet (waiting for Threshold 2 before I commit to Windows 10). Will be looking further into to it to see if it's a going concern, but I don't think it will be.

Share this post


Link to post
Share on other sites

I completely understand your concerns - that's why I posted this here. As much as I'm enjoying development, there are always things I tend to overlook when seeking different/interesting design principals. One of the reasons I picked this direction was because I don't want the site to look too common. Whilst that isn't always a good thing, I'm not marketing to the same people who look for common things. That said, I do still have plans to make it more user-friendly. I'm also looking at adding a one page scroller, with arrows to indicate further content.

Not sure what you mean by 'fake page' effect?

Yeah, I'm liking the grid. As for IE support, I am really getting tired of it - it's taken such a long time for IE to catch up. I hope Edge is doing a better job - I haven't tested it as yet (waiting for Threshold 2 before I commit to Windows 10). Will be looking further into to it to see if it's a going concern, but I don't think it will be.

The one page scroller is something I'm always asked for, I have always used fullpage.js it has a lot of useful mumbo jumbo, nice to see another option!

Then again, since I'm constantly asked for this line of design in websites, I feel it is that mobile oriented design is kind of filtering into desktop design, so I kind of understand your point of attracting this type of client who prefer more fanciness than "here's all you need to know about this bussiness in half page".

Me, I don't know that to think anymore, haha, I just want their deposit in my bank account :rolleyes:  

  • Like 1

Share this post


Link to post
Share on other sites

The one page scroller is something I'm always asked for, I have always used fullpage.js it has a lot of useful mumbo jumbo, nice to see another option!

Then again, since I'm constantly asked for this line of design in websites, I feel it is that mobile oriented design is kind of filtering into desktop design, so I kind of understand your point of attracting this type of client who prefer more fanciness than "here's all you need to know about this bussiness in half page".

Me, I don't know that to think anymore, haha, I just want their deposit in my bank account :rolleyes:  

Thanks for the tip of fullpage.js.

Interestingly, I'd never thought of it like that - that is to day I didn't know it was referred to as mobile oriented design.

Gave this a little bit of thought on my way down to the shops just now. I'm starting to think that the user experience goes against one of my busines principals, which is about sticking to simplicity. Whilst the design itself looks simple, it may not feel simple. As such, I may just revert to the normal flow. Other few ideas are in mind - will work on them through the week and into the weekend.

So far, thanks for all the input everyone - very much appreciated. :)

Share this post


Link to post
Share on other sites

'Fake page effect' was just my stupid description of the fullpage/one page scroller :) It's very hot atm. You've given it thought so that's perfectly fine. Small things make the difference in user friendliness. That one page scroller you linked to looks pretty nice.

As for flexbox support; it should be right around 90 to 95 %, depending on where your audience is, especially if you use the appropriate prefixes (autoprefixer ftw). Certainly Edge should be fine but there are some known issues wkth certain browsers. See http://caniuse.com/#feat=flexbox

  • Like 1

Share this post


Link to post
Share on other sites

'Fake page effect' was just my stupid description of the fullpage/one page scroller :) It's very hot atm. You've given it thought so that's perfectly fine. Small things make the difference in user friendliness. That one page scroller you linked to looks pretty nice.

As for flexbox support; it should be right around 90 to 95 %, depending on where your audience is, especially if you use the appropriate prefixes (autoprefixer ftw). Certainly Edge should be fine but there are some known issues wkth certain browsers. See http://caniuse.com/#feat=flexbox

Ah, I thought that may be the case. As said in my previous post, I may revert. However, I'd like to do some more thinking first.

I didn't intend on supporting IE<10, though I see many visitors are still using 8 and 9 on Windows 7. Adoption rate of Windows 10 is picking up here, but probably not as fast as everyone (and Redmond) would like. Would need to do some more research into the matter. If IE support turns out to be a big issue, I'll have the site use a fallback grid with the same class names - maybe overkill, but could be necessary.

Autoprefixer is cool, but sticking with Lesshat for now. Thinking about a move to PostCSS, but not for this site.

Share this post


Link to post
Share on other sites

The menu appears after you scroll past the top of the white pane. I am thinking of making the hero image darker (with a white logo and arrow), and then using a darker menu as well. Will play around first...

After having another look I realised that the problem I had was that I pressed the arrow to scroll down and the menu didn't appear, when I scroll normally, the way it appears is perfectly fine. So, that particular problem would be solved simply by making the menu appear when you press the arrow.

Share this post


Link to post
Share on other sites

After having another look I realised that the problem I had was that I pressed the arrow to scroll down and the menu didn't appear, when I scroll normally, the way it appears is perfectly fine. So, that particular problem would be solved simply by making the menu appear when you press the arrow.

I'd specifically wanted that white slide to be on its own until you continue scrolling. But have noticed a problem with that: browsers with smooth scrolling enabled by default seem to have a problem showing the menu while scroling is occuring - it takes a while to fade in. I've only seen this in Firefox, and understand that Blink/WebKit browsers don't have smooth scrolling anymore.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...