Jump to content

SandAndFire launch


Recommended Posts

Hey everyone. A few hours into the launch party and so far everything's going pretty well. We're doing a live webcast as part of the celebration. I'm not much of a designer but I'm pretty proud of the underlying code used to make the site, in particular the JavaScript and the PHP classes I wrote for handling all the API's. Anyways, any feedback would be appreciated. Thanks for your time.http://www.sandandfire.nethttp://www.sandandfire.net/stickam.php //direct webcast URL

Link to post
Share on other sites

Congrats on the new site!You did a good job at integrating all the APIs and I'm sure you did a lot of backend work. However, I have a few suggestions as far as design goes.Homepage:I would add a padding or margin around "Facebook Profile" and "Friends". Possibly a bit around "Latest News", too. About:Same thing with "The Studio"Gallery:Same thing with the headings in the Etsy bar ("Etsy ListingsWhispy Fumed Wine Stopper") and the "Gallery" heading.Also, I the blue text color in the main content container doesn't work, IMO. You may have to do some experimentation to make the text color fit with the theme and not clash with the grey bg. Media: Padding for the headings on the youtube videos bar. Padding around the heading for the featured video.Contact: More padding around the cramped headings...Links: Padding around headings on the tweets bar (below "Latest Tweets").__________________I like how you designed each page with its own color theme, but lack of padding/margins around headings was what stood out to me most. One more very minor thing. I'd design the navbar slightly differently. You have to click on the text for the link to work. I find it slightly annoying that I can't click on the underline. Instead of making the underline a separate <span>, I'd do something like this:

/* default styles for navbar links */#navbar li {   padding:3px;   padding-bottom:15px;   border-bottom:2px solid #222;   font-size:16px;   color:#eee;}/* hover styles for list elements on the navbar */.brown:hover { color:brown; border-bottom-color:brown; }.purple:hover { color:purple; border-bottom-color:purple; }.blue:hover { color:blue; border-bottom-color:blue; }.green:hover { color:green; border-bottom-color:green; }.red:hover { color:red; border-bottom-color:red; }.orange:hover { color:orange; border-bottom-color:orange; }/* for active links... */li.brown_text { color:brown; border-bottom-color:brown; }li.purple_text { color:purple; border-bottom-color:purple; }li.blue_text { color:blue; border-bottom-color:blue; }li.green_text { color:green; border-bottom-color:green; }li.red_text { color:red; border-bottom-color:red; }li.orange_text { color:orange; border-bottom-color:orange; }

HTH!

Link to post
Share on other sites

wow, thanks for the great feedback Fdmpa. I really appreciate it.As for the padding for the headings on each of the page, are you suggesting that more bottom padding be needed? Or are you suggesting paddings all over? I know you are a fan of Opera, so I assume that is how you viewed it. (which I have too, for OSX) so I'm pretty confident that we can see/talk about the same viewing conditions. I had only intended the color underlines to be decorative, as opposed to functional, but I'll think about making them links as well.And yes, I had my suspicions about the text color of the album descriptions on the gallery page being too 'tacky'(?), so having someone speak on it too confirms that I need to change it.Thanks for all your good feedback.edit: fixed the font color on the gallery page

Edited by thescientist
Link to post
Share on other sites

The site looks great! I'm not much of a designer myself, but I think the design is great. The only issue I had was that I found the dark blue header on the Gallery page (right above the drop down) was kind of hard to read. I'm not sure what you could do with it and maintain the theme, though.....:)Couple other things:There are a couple validation warnings on the Gallery, Media, and Contact pages. Nothing serious. An empty <p>, an empty <span>, and a couple missing id's.On the Gallery page, the gallery itself has a little glitch. When I click the arrow for the next picture, the image fades to black then fades back in, but for a split second it's still the same image before it just instantly switches to the new image. Some images took a second or two, while a couple did actually fade to a new image.I viewed the site in FF 4.All in all, I think the site is pretty slick! :) Oh, and give your friend props for me, I really like his work. :)

Link to post
Share on other sites

It has a nice feel. The colors look nice on my LCD, and I like the overlapping elements.A lot of empty real estate on a big monitor, but I understand why.I too wonder about the underlines that are not links.I also experience the little hitch in the gallery.You probably worry about bandwidth, but I'd add some alpha transparency to remove the jaggies on social_box_home_bg.png

Link to post
Share on other sites
The site looks great! I'm not much of a designer myself, but I think the design is great. The only issue I had was that I found the dark blue header on the Gallery page (right above the drop down) was kind of hard to read. I'm not sure what you could do with it and maintain the theme, though.....:(Couple other things:There are a couple validation warnings on the Gallery, Media, and Contact pages. Nothing serious. An empty <p>, an empty <span>, and a couple missing id's.On the Gallery page, the gallery itself has a little glitch. When I click the arrow for the next picture, the image fades to black then fades back in, but for a split second it's still the same image before it just instantly switches to the new image. Some images took a second or two, while a couple did actually fade to a new image.I viewed the site in FF 4.All in all, I think the site is pretty slick! :) Oh, and give your friend props for me, I really like his work. :)
Thanks ShadowMage, I went through and did a quick blast of validation again on all the pages using the web developers toolbar for FF (for this project I was doing my development in Chrome for a try) and I was able to find a few warning on the contact page, but not anywhere else. strange. anyway, thank you for bringing it to my attention nonetheless.I'll definitely make a note of the blue color, it is something I have been debating since the release (and has already been brought up once), and shall put it under advisement as I roll out some my upcoming feature enhancements I have planned. I'll propose a couple of color options to my friend and see what he thinks. Readability is key!As for the slideshow, perhaps I should play around with the fadeIn/Out times, to make sure I give the next image enough time to load. I think a little trial and error and testing on the live server will hopefully yield the smoother results that would be expected.Thank you very much for your time and consideration. Glad you liked the site and I'll make sure to pass along the kudos to my friend. :)
Link to post
Share on other sites
It has a nice feel. The colors look nice on my LCD, and I like the overlapping elements.A lot of empty real estate on a big monitor, but I understand why.I too wonder about the underlines that are not links.I also experience the little hitch in the gallery.You probably worry about bandwidth, but I'd add some alpha transparency to remove the jaggies on social_box_home_bg.png
Thanks for viewing! I like that I have not overlooked any major critical elements in the development of my site. I know ShadowMage uses FF, do you as well? I would just like to make sure I have the right environment for testing the slideshow.I also see what you mean about the 'jaggies'. I'll fire Photoshop up a little later on in the day and tweak those corners.I had wondered about having some sort of tiled/repeating background to help fill out the left and right sides of the page in the event the viewer was on a big monitor, but never got around to fleshing that part out. A note for version 2.0 for sure.And another supporter of the the underlines as links, haha. I guess the idea has merit, and shall make it part of v2.0 as well. :)Thanks DD!
Link to post
Share on other sites
It has a nice feel. The colors look nice on my LCD, and I like the overlapping elements.A lot of empty real estate on a big monitor, but I understand why.I too wonder about the underlines that are not links.I also experience the little hitch in the gallery.You probably worry about bandwidth, but I'd add some alpha transparency to remove the jaggies on social_box_home_bg.png
Thanks for viewing! I like that I have not overlooked any major critical elements in the development of my site. I know ShadowMage uses FF, do you as well? I would just like to make sure I have the right environment for testing the slideshow.I also see what you mean about the 'jaggies'. I'll fire Photoshop up a little later on in the day and tweak those corners.I had wondered about having some sort of tiled/repeating background to help fill out the left and right sides of the page in the event the viewer was on a big monitor, but never got around to fleshing that part out. A note for version 2.0 for sure.And another supporter of the the underlines as links, haha. I guess the idea has merit, and shall make it part of v2.0 as well. :)Thanks DD!
Link to post
Share on other sites

Thanks to everyone for contributing to my thread. I value peer reviews as an excellent way to highlight any strengths and weaknesses in my development process (from a more technical standpoint), and so all of this has been very helpful, as well as rewarding for only having minor tweaks to make based on your professional opinions. Safe to say I can rack this one up in the 'winning' column. :)

Edited by thescientist
Link to post
Share on other sites
Thanks ShadowMage, I went through and did a quick blast of validation again on all the pages using the web developers toolbar for FF (for this project I was doing my development in Chrome for a try) and I was able to find a few warning on the contact page, but not anywhere else. strange. anyway, thank you for bringing it to my attention nonetheless.
I'm using the HTML Validator add-on for FireFox.
As for the slideshow, perhaps I should play around with the fadeIn/Out times, to make sure I give the next image enough time to load. I think a little trial and error and testing on the live server will hopefully yield the smoother results that would be expected.
What about preloading the images? That's going to make the initial load time longer, obviously, but I'm a little concerned that the fade in/out could get lengthy especially if you take into account those with slower internet connections.
Link to post
Share on other sites

This is a decent site, yo. :) The following comments are from viewing the site on FF 3.6.16.I like the changing link colors on each page that help reinforce where you, as a visitor, are. I also see the social networking links are all hooked up. I like how each becomes relevant as you navigate the pages. You really used those APIs. I need to get into that.The drop-down list to choose who to send an email do is a great idea. I know there was a whole lot of behind-the-scenes stuff here that's not overtly-present, so good going on that. Just a few notes, though:I'm not the biggest fan of the flat gray color you're using for the content area. I can't help but wonder if a light gradient or a full-on color coordination for each section might help it.On the home page only, the underline effect for "Links" is directly under the text.The footer seems like it's not lining up properly with the content on the right side. The copyright symbol is hanging to the left of the content container.That's all I saw. Hope this helps.

Link to post
Share on other sites
This is a decent site, yo. :) The following comments are from viewing the site on FF 3.6.16.I like the changing link colors on each page that help reinforce where you, as a visitor, are. I also see the social networking links are all hooked up. I like how each becomes relevant as you navigate the pages. You really used those APIs. I need to get into that.The drop-down list to choose who to send an email do is a great idea. I know there was a whole lot of behind-the-scenes stuff here that's not overtly-present, so good going on that. Just a few notes, though:I'm not the biggest fan of the flat gray color you're using for the content area. I can't help but wonder if a light gradient or a full-on color coordination for each section might help it.On the home page only, the underline effect for "Links" is directly under the text.The footer seems like it's not lining up properly with the content on the right side. The copyright symbol is hanging to the left of the content container.That's all I saw. Hope this helps.
thanks for feedback Ixzion.I appreciate the comments and feedback, especially those from a design perspective. I can see where you are coming from regarding the gray background, and had toyed with the idea of creating some sort of gradient or other similar effect to add a little flare to it, but never saw it though to the light of day. DD suggested I try and use up some the extra screen real estate on the left and right sides fo the pages when the page is viewed in wider screen monitors, so perhaps for version 2.0 I will attack this issues simultaneously.Though I have FF4 now, I have a copy of Ubuntu as a VM on my machine with an older version of FF (3.x), so perhaps I should give it a view in there too, as a friend of mine also noticed the underline issue for the nav link on his host Ubuntu machine. And with that I will look into the footer/copyright alignment issue as well.Although not fully realized, if you click on the logo, at the top of each page, I have somewhat attempted a "minimized" view of the site that lets the background shine through and only focuses the users attention on the main content. Until I officially "roll it out", I would like to move the gradient in the backgrounds down more so you can see more of the background image itself, fade out/in the elements that disappear, and make it a cookie so the "view" is preserved across all pages.Thanks for your time. Glad you like the site! :) Edited by thescientist
Link to post
Share on other sites
Hey everyone. A few hours into the launch party and so far everything's going pretty well. We're doing a live webcast as part of the celebration. I'm not much of a designer but I'm pretty proud of the underlying code used to make the site, in particular the JavaScript and the PHP classes I wrote for handling all the API's. Anyways, any feedback would be appreciated. Thanks for your time.http://www.sandandfire.nethttp://www.sandandfire.net/stickam.php //direct webcast URL
sorry I'm late weighing in. Have been fighting a losing battle with a cold.Very neat. I see you have implemented several suggestions and it seems all validates well now.I especially like the fact that on a MEDIUM screen size the pages are non scrolling.I saw an observation on colours and I will focus forma different perspective - old eyes. Even with my good reading glasses, I cannot see the purple link on copyright statement. Same goes for the dark blue on unfollowed links. The TEAL colour for some highlighted text is borderline acceptable (to me)I checked the purple on black at a contrast checking site with results of 1.4 (min 125) and 65 (min 500) on the brightness and colour difference scale. That is always the challenge with white on black - you have few options for contrasting colours.Other than that a very slick design.Guy
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.

Loading...
×
×
  • Create New...