Mike Rockett Posted October 27, 2015 Share Posted October 27, 2015 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. 3 Link to comment Share on other sites More sharing options...
elabx Posted October 27, 2015 Share Posted October 27, 2015 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! 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. 1 Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 27, 2015 Author Share Posted October 27, 2015 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! 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. ;-) 1 Link to comment Share on other sites More sharing options...
diogo Posted October 27, 2015 Share Posted October 27, 2015 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". Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 27, 2015 Author Share Posted October 27, 2015 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? Link to comment Share on other sites More sharing options...
SiNNuT Posted October 27, 2015 Share Posted October 27, 2015 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. Link to comment Share on other sites More sharing options...
SiNNuT Posted October 27, 2015 Share Posted October 27, 2015 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. 1 Link to comment Share on other sites More sharing options...
elabx Posted October 27, 2015 Share Posted October 27, 2015 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. Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 27, 2015 Author Share Posted October 27, 2015 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. Link to comment Share on other sites More sharing options...
elabx Posted October 27, 2015 Share Posted October 27, 2015 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 1 Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 27, 2015 Author Share Posted October 27, 2015 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 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. Link to comment Share on other sites More sharing options...
SiNNuT Posted October 27, 2015 Share Posted October 27, 2015 '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 1 Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 27, 2015 Author Share Posted October 27, 2015 '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. Link to comment Share on other sites More sharing options...
diogo Posted October 27, 2015 Share Posted October 27, 2015 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. Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 28, 2015 Author Share Posted October 28, 2015 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. Link to comment Share on other sites More sharing options...
diogo Posted October 28, 2015 Share Posted October 28, 2015 I'm on chrome, can't be that. Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 28, 2015 Author Share Posted October 28, 2015 I'm on chrome, can't be that. Chrome doesn't have smooth scrolling anymore... (So far as I'm aware.) Link to comment Share on other sites More sharing options...
gebeer Posted October 29, 2015 Share Posted October 29, 2015 I was looking into cross browser save flexbox grid frameworks myself the last days and found http://leejordan.github.io/reflex/docs/. Haven't tried it yet, though. But might be worth taking a closer look. 1 Link to comment Share on other sites More sharing options...
Mike Rockett Posted October 29, 2015 Author Share Posted October 29, 2015 I was looking into cross browser save flexbox grid frameworks myself the last days and found http://leejordan.github.io/reflex/docs/. Haven't tried it yet, though. But might be worth taking a closer look. Thanks for the tip there - will look into that too. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now