Please break me.

[Deleted member 66701]

This is my latest assignment for Uni - a website that has to use at least 4 Jquery functions (I think I've done about 20 lol) - due date is 20th April so loads of time to refine.

http://beyonce.frontierwebdesign.co.uk/

Please try and break it and let me know what's wrong with it

NOTE: -
1: I'm aware rapid clicking of the next and back arrows in the gallery can create multiple galleries - I'm attempting to built a wait/flag function for that now. EDIT:- Now fixed.
2: Music wont play in Firefox due to no MP3 license. EDIT: Fixed - thanks touch!
3: Issues may be experienced playing audio/video on mobile devices - if this happens on yours please list device/model/OS. I know it can take a while to buffer before playing - I'm trying to find a solution to pre-buffer in the background (although this isn't required as that would be too advanced for term two of year 1!).

EDIT: - Issue 4: Not added any real validation on the contact/email form yet - we haven't covered the PHP/AJAX server side stuff in lectures yet (will do in a few weeks though).
EDIT: - Issue 5: General responsiveness needs tweaking - especially the mobile layout. It doesn't break (which is good and all that is required for this level of assessment) but I do want to resolve the general alignment issue on the mobile layout.

Cheers

 

[Noxia]

I can't break it, looks pretty good to me Nice one.

 

[Mynight]

Not sure if it's actually happening but (ios 7.1 iPhone 6) I can send a blank message using the form at the bottom.

Looks good .

 

[Deleted member 66701]

Not sure if it's actually happening but (ios 7.1 iPhone 6) I can send a blank message using the form at the bottom.

Looks good .

Oops yeah - that's the other thing I should have said I know about - not covered that yet - in a few weeks we're going to go through PHP and AJAX to cover off the validation!

Thanks for taking a look.

 

[Mynight]

Not really a break but when clicking through the info the last page closes the expanded view instead of looping back round(unless that's intentional).

Actually quite like it. Is it built off a template or coded from scratch?

Are you including asetical issues as a break?

 

[touch]

I think the problem with mp3s not playing in firefox is due to the way you are referencing events.

You just need to pass the event to the functions where you are using it: ".click( function(event) {"

Changing the audio player function like this fixes the firefox problem:

//Audio player control
	$("[id*=audio]").hide();
	$("[class*=audioplay]").click(function(event){
		var player = ($(event.target).attr('class'));
		$("[id*=audio]").hide();

There are also several other functions which reference event, so you'll need to do the same for those also.

 

[Deleted member 66701]

I think the problem with mp3s not playing in firefox is due to the way you are referencing events.

You just need to pass the event to the functions where you are using it: ".click( function(event) {"

Changing the audio player function like this fixes the firefox problem:

//Audio player control
	$("[id*=audio]").hide();
	$("[class*=audioplay]").click(function(event){
		var player = ($(event.target).attr('class'));
		$("[id*=audio]").hide();

There are also several other functions which reference event, so you'll need to do the same for those also.

Good shout - thanks

 

[Deleted member 66701]

Not really a break but when clicking through the info the last page closes the expanded view instead of looping back round(unless that's intentional).

Actually quite like it. Is it built off a template or coded from scratch?

Are you including asetical issues as a break?

From scratch but I did look at a template as to how they were doing it.

Yeah - include usability/aesthtic issues for future improvements All feedback greatly appreciated - it's nice to have a seperate pair of eyes look over it

 

[Mynight]

Good job then . As easy as templates are nothing beats knowing you built something ground up .

Right literally the only asetical issue I have is in the albums with track listing(it appears to be centered). It would look better if the track numbers were aligned, with the album cover centred. By lining up the numbers it should also pull the player directly under the track when clicked. At the moment it's off to the left of the track name(I don't know if it's like that on desktop only mobile safari).

Other than that minor thing I think it looks great .

 

[Deleted member 66701]

Good job then . As easy as templates are nothing beats knowing you built something ground up .

Right literally the only asetical issue I have is in the albums with track listing(it appears to be centered). It would look better if the track numbers were aligned, with the album cover centred. By lining up the numbers it should also pull the player directly under the track when clicked. At the moment it's off to the left of the track name(I don't know if it's like that on desktop only mobile safari).

Other than that minor thing I think it looks great .

Good suggestion - yeah, the mobile css needs a little work to resolve alignment issues - desktop is aligned exactly as you suggest

Gives me some stuff to work on.

 

[Mynight]

Hope you'll keep us up to date on how it goes .

 

[Deleted member 66701]

Well I got a 100% (A+) mark for assignment 3 in the Web development module in the first term for building this:-

http://bfunion.frontierwebdesign.co.uk/

So got to keep my standards up!

 

[Mynight]

Where'd you get that background from? I want to steal it .

 

[Deleted member 66701]

Lol - I can't remember but:-

http://bfunion.frontierwebdesign.co.uk/images/

 

[Mynight]

Wasn't sure if it was your own design. Thankfully it's not I'll have to search for it make sure it's royalty free.

Thank you .

 

[Deleted member 66701]

Yeah - the beauty of designing/building websites in an education environment - no copyright issues

 

[touch]

Yeah - the beauty of designing/building websites in an education environment - no copyright issues

I'm not sure that's correct.

Educational use usually comes under 'fair use' but I dont know about putting it up on a commercial website which has no links to the educational institute.
You also have copyrighted music available for download on your site (with directory browsing enabled on the /audio/ folder), that could get you in trouble as well.

 

[Deleted member 66701]

I'm not sure that's correct.

Educational use usually comes under 'fair use' but I dont know about putting it up on a commercial website which has no links to the educational institute.
You also have copyrighted music available for download on your site (with directory browsing enabled on the /audio/ folder), that could get you in trouble as well.

Good point!

I might do a little htaccess landing/redirect page that says educational use etc.

 

[roccles]

Looks very good but as you have plenty of time you could see if you could fix it to make it fully accessible as it fails on a few points and Universities usual love this sort of stuff. Most are very quick fixes such as:-

Most of your images are missing alternative text
Image buttons do not include text alternatives
Your form does not include form labels

 

[Deleted member 66701]

Looks very good but as you have plenty of time you could see if you could fix it to make it fully accessible as it fails on a few points and Universities usual love this sort of stuff. Most are very quick fixes such as:-

Most of your images are missing alternative text
Image buttons do not include text alternatives
Your form does not include form labels

Hear you on the alt text - I always go and put those in last so that's part of my code tidy/comment run through but good shout

I'm not sure what you mean about the form labels. We haven't really covered forms that much. Can you elaborate?

Thanks for taking the time to go through it