CSS-Tricks

ArchDesignLabs

Hey hey everyone I would love some feedback on a new site www.eco-cred.com I am creating. It basically serves as a promotional piece right now but we still wanted to have a ton of fun with it. Any suggestions would be much appreciated! This is only my second site ever and I mainly code just to learn new things. Its a real project and we have a couple of programmers and coders that are starting next week to make the dreams become a reality.

http://www.eco-cred.com

Thanks a million!

Odd_E

It looks basic. Not minimal, basic. Not much design to it really. It's a block of text with a huge image on a grey background. I recommend looking at other application sites. On another note, you never say what kind of app. iPhone/iPad or Desktop? You could turn it into something much better with a little bit more work. Try adding a logo to the left of the main header, then maybe maker the block of text faintly bordered.

I'd love for you to make a JSFiddle of this site so I could play with it and help you out.

ArchDesignLabs

I appreciate the feedback! Like I said I am new to this and just wanted to experiment until we hire the rest of the team. Here is the JS Fiddle let me know if it works! http://jsfiddle.net/552j4/

Thanks again.

ArchDesignLabs

Come up with anything using JS Fiddle? Still curious about what others think.

amyth91

hi,

i am too new to all this, but i would surely use something more instead of the grey background, other things are ok, also, when u hover over the fishes at the bottom for the first time, the hover image takes time to load, so how about using sprites fot the same, that would avoid the loading of the second image.

thanks

ArchDesignLabs

I haven't looked into sprites at all, but I would love to get rid of the "blink" that happens due to the load. I didn't know how to approach that. We are playing with background textures too we haven't found any yet but we definitely think it needs something.

Thank you very much!

amyth91

using sprites is real easy once you know how to use them, i faced the same blink problems, but sprites helps you a lot.

here is an article by Chris Coyier

ArchDesignLabs

Awesome! Thanks for pointing me to that!

ChristopherBurton

@archdesignlabs http://spritecow.com is useful to grab the positions for your code.

ArchDesignLabs

Thanks @christopherburton I will check that out too and hopefully get some time to play with sprites this weekend!

ArchDesignLabs

@odd_e did you ever play with the JS_Fiddle?

Odd_E

I'm so sorry! I feel horrible! I forgot about this thread. I'll do a little now.

ArchDesignLabs

haha not a problem happens to me all of the time.

Odd_E

I basically just cleaned the code, and added a text-shadow.
http://jsfiddle.net/552j4/72/

ArchDesignLabs

The drop shadow does look a little better. I will take a closer look at the code later as well. Any other visual enhancements you can suggest?

dfogge

hey, just wanted to point out something i noticed.

when the browser is below a certain width the woodchucks feet get cut off and move to the left of him.

krysak4ever

for inspiration
http://mobile.tutsplus.com/articles/marketing/7-great-app-promo-websites/

ArchDesignLabs

@dfogge we have noticed that the beavers ankles get cut but I cant for the life of me figure out a solution. Any suggestion?

@krysak4ever great article I will def check it out! Thanks!

robst

Well...I think you're off to a great start, ArchDesignLabs! First off, I enjoy the illustrations. I think the site definitely has personality.

I see a lot of comments about the dullness of the grey background...ok, so, maybe not the best color choice.

I would build this site from the standpoint of someone who doesn't know anything about this app. I agree with others as I'm not clear how this app really works either. Maybe a diagram to show users, as well?

ArchDesignLabs

Thanks @robst we are definately going for personality and quality graphics to stack onto the idea.

We are actually coding the begins to the web app now and will soon be posting more information and graphics including a nice video on how to use and why you should use it :)

The grey is def. dull and should probably have a subtle texture applied to it to give more depth so that is something we will continue to explore. Hoping to have updates by the end of the weekend actually! Great comments I am def. not a web designer but I am passionate about learning anything and everything related to architecture and design.

dfogge

Hey @ArchDesignLabs I'm pretty sure you could fix the woodchuck leg chopping issue by putting

<div id="footer-top"></div>

inside of

<div id="wrap"></div>

and underneath

<div id="main"></div>

After that would be you'd just need to drop in a wider background image for #footer-top to compensate for wider monitors.

paulwhite

It all looks good.

http://documentstorageexpert.wordpress.com/

ArchDesignLabs

@dfogge thats how I originally had it but even if I put in a large background image for wider monitors the page wrap is still chopping off the visible image outside of 1214px. I have tried to set overflow to visible and everything else I can think of but I still cannot get it to show what is outside of the pagewrap. Suggestions?

TheDoc

You would need to put a min-width of 1214px on the footer-top to make it stop chopping.

ArchDesignLabs

I cant believe this but just by doing what @thedoc said it fixes the entire problem it looks like. Thanks a billion the simple answer wins again!

Odd_E

So I styled the box that holds the main text a lot. Here's what got:
http://jsfiddle.net/552j4/113/
There's a lot of CSS3 so many of your IE users won't be seeing the same site as you unless they have Chrome/Safari/Firefox.

ArchDesignLabs

Not sure how I feel about it @odd_e it seems like it just added on for no reason. I like the idea of calling more attention to the test but I think it can be done in a more elegant way. Got any other ideas?

Odd_E

Well, there's not a whole lot of information given, not even a screenshot of the app, or even what platform it's for. I think that if you gave more information, your site would look a lot nicer.

ArchDesignLabs

We have basically hit on everything that it does in the paragraph but we are changing everything to more graphics like the ones we have started on. Its a web app not for the phone yet I guess that would help if we said that. We have graphics of the design and how it works too that we are constantly adapting based on our Alpha testers. What is one thing you think should be added specifically? Graphics/Info. We are just having trouble deciding what to show because if we put everything up it would be an info overload. haha

Thanks again

Odd_E

I think that you should check out other web apps websites and that you should also see how other sites use the color scheme you do, and see how you should set it up.
ex:
Notable App

Schot

Great concept Arch! Go Canada! @ Beaver. :D It would be fun if the coloured buttons did something. Maybe ajax speech bubbles that pop up saying some sort of power saving operation but with different colours for the bubbles than the usual white.

Keep at it!

ArchDesignLabs

Thanks @schot we love our mascot too! You have a great idea and we would love if the buttons would do something too but frankly I have no idea how to get it done haha. We are also still building both our front-end and back-end team as we only want the best for our startup! Gone through 12 candidates and counting with a few being tested as we speak!

If you would like to take a stab at making the buttons do something let me know and I can update a Js_fiddle or tinkerbin for you to show us the way.

Thanks again!

ArchDesignLabs

Updated texture. Yay or Na?

http://www.eco-cred.com

karlpcrowley

Here's my two cents, like it or leave it..

I like the page but there's still some work to do, I would definitely animate the fish and bubbles with CSS
Check out the bottom of this page http://www.zurb.com/playground/css-boxshadow-experiments

Change the input text from Value="Email..." to Placeholder="Email..."

The input and the button need some styles to match the theme

Since there is a lot of text on the page, check out http://www.google.com/webfonts#ChoosePlace:select

ArchDesignLabs

The bubble technique is actually really cool! It only seems to work in safari for me though and displays in a very ugly way when it doesnt animate. Do you know what the browser support is?

I am using a wufoo form for the email part and I cant seem to figure out how to change the EMAIL part as you suggested. The form styling wont accept the placeholder="email" value so I will have to scratch my head for a while.

I actually hate how much text there is so we are changing it to be more infographic or even a simple 4 step process to explain the idea.

Great advice! Love the idea of the bubbles and really hope I can figure that out!

karlpcrowley

The reason that only works in Safari (and Chrome) for you is the animations are prefixed with -webkit-transform

you can copy these and change them to -ms-transform -moz-transform -o-transform and transform free

It may not need prefixes in some browsers
the -webkit-box-shadow should work as just box-shadow

it's best to try it out on as many browsers as possible
-ms is trident (Internet Explorer)
-webkit is webkit (chrome, safari and android browser)
-o is presto[I think] (Opera)
-moz is mozilla (Firefox)

http://en.wikipedia.org/wiki/List_of_web_browsers#Graphical

ArchDesignLabs

crap thats right! Thanks!

Forums Get help. Give help.

Howdy, Stranger!

Categories

Tips