Please break me.

  • Thread starter Deleted member 66701
  • Start date

Deleted member 66701

D

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 :)
 
Last edited by a moderator:

Deleted member 66701

D

Deleted member 66701

OP
Mynight said:
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 :).
Click to expand...

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.
 

Deleted member 66701

D

Deleted member 66701

OP
touch said:
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:
Code: 
//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.
Click to expand...

Good shout - thanks :)
 

Deleted member 66701

D

Deleted member 66701

OP
Mynight said:
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?
Click to expand...

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

Deleted member 66701

D

Deleted member 66701

OP
Mynight said:
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 :).
Click to expand...

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.
 

Deleted member 66701

D

Deleted member 66701

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

Deleted member 66701

D

Deleted member 66701

OP
touch said:
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.
Click to expand...

Good point!

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

Deleted member 66701

D

Deleted member 66701

OP
roccles said:
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
Click to expand...

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

Deleted member 66701

D

Deleted member 66701

OP
roccles said:
The HTML <label> Element represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the label element, or by using the for attribute. Such a control is called the labeled control of the label element.

MDN Link
Click to expand...

Gotcha - thanks :)

I went to break it, but your site is already broken? It has been hacked by some girl called Beyonce apparently.
Click to expand...

It was that or Elvis (we picked our "clients" out of a hat) and I'd rather stare at videos of Beyonce dancing around in her underwear tbh!


Done a bit more work on it - added a few transition effects to the nav bar items and meida page links. Image gallery now scrolls the "selection of six" picks much nicer I think. And refined the album/player paged (added a "back to albums" link to keep navigation rounded and so on). Just tweaking the mobile version now :)

Thanks for everyone that's helped so far. Tutors were impressed when I showed them today and reminded me I've only had it two week and still got until 20th April until hand in.

I think I've nailed it tbh!
 
Last edited by a moderator:

Deleted member 66701

D

Deleted member 66701

OP
Last edited by a moderator:
You must log in or register to reply here.
Back
Top Bottom