Critique my new social site design (ditched responsive design)

It's incredibly wide for a non-responsive design!

Took about 7.5 seconds to load from a cleared cache which isn't great... maybe could reduce some of your image sizes to get the page size down a bit from 2.9MB? Or load images from a CDN if available?
 
hmmm I was worried you would say that....

I'm going to look into image optimisation as a priority. I think the site should look ok for 1280 x 1024 res (the most common resolution used) but if you were alarmed by this i'm definitely going to have to make some changes!
 
Sites ok, no problem with size. Looks good on iPad, needs some media queries though. Center the site below 1025px, it's off which is sloppy and not difficult to sort out. I'd put a 1px text shadow on all the text on the header image, just to make it pop off the page a bit. Possibly 2px. On iPhone, the social buttons need sorting, but overall the site looks very nice and clean. Wouldn't be overly difficult to make the homepage responsive, there doesn't appear to be many break points which always makes life easier.

In general, the site is really nice, just needs some finishing touches to be complete. Nice work. :)
 
Re:width - firstly I see a horizontal scrollbar even on 1280, which seems to be caused by elements on the page that are just slightly too big (eg. your .row class is fixed at 1280). I'd advise designing to a max of about 1240 maybe even a little less to avoid this.

On 1024 vs. 1280 - it's not as much of a deal breaker as it used to be, that's for certain, but I think having responsive support for 1024 is a good idea. Opinions will vary on that one :)

Otherwise it does look nice!
 
Looks really nice on my widescreen monitor. Get considering some minification on your js and css files to squeeze those load times :)

I noticed you have a few images, possibly you can save some seconds by introducing some image sprites?

+1 for zurb foundation too :)
 
- The 'latest riffs' boxes (as on the RHS of this page) have enough space to wrap to two lines, but don't. Even then it'd be handy if the full title was a tooltip so you could read the whole thing a little easier.

- The register modal doesn't have a cancel button. I know you can click the bg to hide it, but it's not immediately obvious to noobs.

Other than that, purty dang good :)
 
There is no back to home button from your blog. There is an home button there but it just refreshes the blog.
 
Just some cosmetics I immediately noticed on the homepage.

- Fade the sides of your hero image to black so that it blends with the background, and use a small shadow on the top to make it look like the header overhangs.
- The grey border on the right of the main search border isn't consistent with the width on the left or in between the inputs.
- Your 3 white H2 titles are lost. They would look great if they had a transparent black background stretching up from behind the first item. Try this, tweak as necessary, you may not want to use inline-block if you're accommodating older IEs:

Code: 
.newcols h2 {
color: white;
font-family: futura;
font-size: 20px;
background-color: rgba(0,0,0,0.7);
padding: 10px;
margin: 0;
position: relative;
top: 5px;
border-radius: 4px 4px 0 0;
display: inline-block;
}

You'll need to add the below to the other column boxes too so that the black is behind the rounded corners.
Code: 
.rated_box {
position: relative;
}
 
Last edited:
OCD here :)

Top right where it says Login or create free account

the word or (in white) does not line up with the rest of the text
 
Just had a look, I assume you are using a MySQL database or something similar? I see you escape strings probably with the addslashses function. Have you looked into using PDO for this kind of stuff? It will make you a lot safer and less vulnerable to attack. If you don't use the addslashes function what do you use?

Also it's probably not to say what you've searched for with \' included in the string it will give hackers an idea of how your site works and any vulnerability that goes with it.

http://shiflett.org/blog/2006/jan/addslashes-versus-mysql-real-escape-string
 
Your column h2's text is disrupted by the hands making the text a little hard to read, but other than that I think it has UX.
 
That looks spiffy. Me likey. No load time issues here although I'm on a rapid connection and it does indeed look good on a widescreen 22" monitor.:)
 
Just looking at the h2s on the homepage, I would add some text shadow to make them stand out a little more,

something like text-shadow: 0px 1px 0px rgba(0, 0 ,0, 0.6);
 
You must log in or register to reply here.
Back
Top Bottom