Hiya,

 

Could you check out https://buttonific.com

 

It has yet to be released into the wild, so all feedback will be taken most seriously and will influence the site.

 

As it's a closed beta, if you register interest (from the landing page) I'll send you out a beta invite as soon as possible.

 

It's all free and there is no advertising on the site.

 

Thanks,

 

Paul

Hi Paul, I'll provide you with some feedback. Some of it focuses on coding practice, some of it is purely personal opinion.

 

Firstly with your coding, it's best to link your stylesheet externally rather than within the HTML, it's neater, easier to manage and loads the page quicker. You've linked some stylesheets, but also have some CSS in the <head>, I'd strongly suggest linking all CSS in a separate sheet. Also, you've used in-line styling in some cases, such as: "<div style="width:100%; display: inline-block;">" - it's better practice to group all CSS together, rather than leave random bits and bobs lurking within the HTML. It can get very confusing with in-line CSS when editing the styling in later stages and you develop more and more code.

 

With the Community Guidelines page, you've used a table setup. Tables are incredibly obsolete and exist only for features that would perform best as a table, such a calendar. I'd consider keeping consistent with your use of divs and eliminate the table, it would actually be a heck of a lot simpler than this table, easier to manage and less code. Here's what it'd look like if I coded it:

<div id="container">
    <div id="guidelinesh3">Buttonific Community Guidelines</div>
    <div id="guidelines_subhead">These guidelines are proposed with the intention to encourage and support a fun, energised community that is both harmonious and civil.</div>
    <div id="guidelinesbox">
         <div class="guidelineslist" style="float: left;">
         Do's
         </div> 
         <div class="guidelineslist" style="float: left;">
         Don't's
         </div> 
    </div>
</div>

Clean and simple, give it a try, tables are horrid.

 

Not sure if you're aware (probably are, but still), everything is loading on about.html, is that intentional? I would've thought each section (about, contact, security etc) would have its own page, correct me if I'm wrong.

 

Generally the website is a bit bland and lacking the 'modernity' factor. For example, the grey background on the sub-pages isn't exciting, nor is the bog-standard white Tahoma font seen everywhere. Take a look at CSS background gradients and the @font-face attribute for a custom font, or simply choose a web safe font (normal font) that's a bit more exciting.

 

More on the design front, not to be nitpicky, but I'm not a huge fan of the logo and its many colours, seems somewhat juvenile. This is purely personal - if you love your logo then by all means keep it; I would keep it more professional rather than a horizontal contrast of many colours. Additionally, you've explored CSS attributes like hover effects and rounded corners, perhaps go further with transitions, box and text shadows, just go berserk with experimenting, you'll be surprised with what you can learn.

 

When downsizing the browser window, the content frame becomes narrower and eventually a scrollbar forms, which is kind of uncomfortable to use. This is mostly because the content frame doesn't have a defined width, I wouldn't rely upon the browser window size to dictate the width of your content. Consider setting a pixel width of the entire body, a size that's comfortable on most conventional resolution sizes, for better content management.

 

You could also consider livening up each page by including an accompanying image alongside the text, as opposed to simply text on a background. It would be a somewhat 'moo image' (in reference to the phrase 'moo point', as in it has no meaning or purpose), but from a purely aesthetic perspective it would make each page seem more interesting.

 

I'll stop there. There's a fine line between opinion and what's best for the site when it comes to critiquing and I feel I may be bordering on my own personal feelings, rather than what would work best. As long as you're happy with your product then all is well.

 

Hope this helps.

Edited August 9, 201313 yr by throzen

The site doesn't really give me any idea what it's about, it's features, whether it's free ect. It looks like this is your competitor, it's a very clear site, answers a lot of questions initially on the homepage as is generally well executed.

 

The colour scheme, icons, general UI are way off the mark. To me, a black background for a family network feels wrong. Let's compare your about page to this one. The first is dark, inconsistent and the graphics look dated. The second is clean, easy to read, easy to navigate and overall just feels a bit friendlier and welcoming. That last point is the key here, getting parents to sign-up and post information about their family and children is a hard sell.

 

This book may go some way to helping you with some design decisions moving forward, there's also this which raises some good points.

 

 

 

One thing I noticed in terms of the code is that you had two <head>sections, one at the top and one at the bottom.

 

Was this done on purpose?

Thanks throzen, Jack and MG1878. Excellent feedback.

 

@throzen. Many great tips.

 

CSS - yep, I need to gather it all together and farm it off to another file.

 

I've never had an issue with tables - but you're right, they are a thing of the past, so DIVs it is.

 

I must admit - the logo has kind of grown on me, but I'll take your comment on board and if it keeps getting negative feedback I'll look into a redesign.

 

The about page was coded to be all in the same file to incorporate some transitional effects - I just haven't put them on yet.

 

More images - yep, definitely. Resizing - I'll look into that as well.

 

Thanks so much for taking the time - really appreciated.

 

@Jack - great tips as well - awesome links, thanks for those. I'm addressing the colours as I type - looks better already. I'll work on the clarity of the text as well.

 

@MG1878 - the two headers are a Microsoft recommended method to prevent browser caching. http://support.microsoft.com/kb/222064

 

Cheers guys, you've given me a lot to think about and work to do - but you've also made my day as well.

 

 

Paul

I agree with previous feedback and my only criticism is the colour of the background on the about sections I find it difficult to read the writing, I would possible consider a more subtle shade for the blue and orange, and also the font is rather bland, you might want to experiment with web safe fonts or google fonts which are easy to incorporate into your designs.

 

I would also agree with the lack of images. Another thing I also found to be a bit uneasy to look at was the button images which are good, but I am not sure if you want the grey background for the descriptions.

 

I would also create more emphasis on heading and suitable corresponding font to the body text (google fonts gives so good font combos which work together)

 

I can't comment on the coding as I haven't looked at the code.

@MG1878 - the two headers are a Microsoft recommended method to prevent browser caching. http://support.microsoft.com/kb/222064

 

...you really shouldn't be writing invalid HTML because Microsoft told you to do silly little hacks to support a 15 year old browser.

 

 

 <iframe id="tree" name="myiframe" src="login.html?<?php echo time(); ?>" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" style="overflow:hidden;"></iframe>

Looks like that PHP isn't being run.

 

Wait, why is the whole thing in an iframe?!

Edited August 18, 201313 yr by A­­

Hey chris paris-haines, rallport and A, cheers for the feedback - really helpful.

 

I've completely redesigned the landing page and about pages. So please check them out

 

I hope they are more appealing.

 

rallport - 'do we need another social media network?' I am a firm believer that competition is essential in every market to keep that market fair. To quote:

 

“The early bird gets the worm, but the second mouse gets the cheese.”

― Willie Nelson

 

Besides, Buttonific is uniquely tackling a common and serious problem that I have yet to see addressed anywhere else - an environment where both children and adults can interact side-by-side, where the children are protected from damaging influences.

Edited August 26, 201313 yr by paulphillips1706