Critique my new social site design (ditched responsive design)

ArmyofHarmony · 5 Aug 2013 at 21:27

Hi guys

I just launched a new homepage design for www.sharemyriffs.com. I've ditched responsive design for now due to time pressures but wanted to get some feedback on the new design and site in general!

Do you find the site takes a long time to load?

Cheers

AJK · 5 Aug 2013 at 21:35

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?

ArmyofHarmony · 5 Aug 2013 at 21:39

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!

Th3M8dH8tt3r · 5 Aug 2013 at 22:15

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.

AJK · 5 Aug 2013 at 22:26

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!

zyfar · 6 Aug 2013 at 12:17

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

GravyMonster · 6 Aug 2013 at 12:56

- 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

JoeF1 · 6 Aug 2013 at 13:00

There is no back to home button from your blog. There is an home button there but it just refreshes the blog.

gord · 6 Aug 2013 at 13:18

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;
}

dmsims · 7 Aug 2013 at 10:19

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

Nemeses · 8 Aug 2013 at 17:38

Looks great on the iPad.

cheerfulplum · 9 Aug 2013 at 11:44

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

darubio · 9 Aug 2013 at 12:00

very cool website I like the idea

Doraku · 12 Aug 2013 at 12:28

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.

Draeger · 13 Aug 2013 at 17:24

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.

zyfar · 13 Aug 2013 at 17:49

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);

Doraku · 14 Aug 2013 at 00:48

zyfar said:
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);

+1

I'm not sure why I didn't suggest that.