New Music Website - Dancingbear.co.uk

[Joss]

Okay, when I say music website, this is actually my own company website.

This is built starting with my bootwire starter profile.

It has a couple of interesting bits:
 

It uses the Mediaelements jquery plugin for the audio to make it cross browser compatible (each audio file is in both mp3 and ogg format).

It uses the explode tip I put in another post for posting the audio, allowing me to post one or several audio slugs at a time.

It has a modified version of Jack Moore's tabs to which I have added slideup and down for a more interesting look - that is used on the front page with the three images.

Each page can have either the default top banner or a custom one. 

I have also used a bit of JQuery to create a TOC on the fly for a couple of the longer articles and then rendered it with the Bootstrap Affix plugin. This can be toggled on and off on a page by page basis.

Couple of other bits.

If the site is running slow, that is not ProcessWire, I seem to be having some network difficulties with Cloudflare at the moment.

http://www.dancingbear.co.uk

Joss

[Manfred62]

looks nice.

But seem's that nowadays no one cares about the basics anymore...?

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.dancingbear.co.uk%2F

[Macrura]

nice site Joss...and it should be easy to fix those validation errors....

one of the things i always do is constantly check my markup output of templates with the validator, since it often finds things like missing alt, duplicate IDs, unclosed divs....even if you're really careful, sometimes when doing a complex layout with includes, things can get messed up..

[Joss]

I am not very worried about them to be honest.

[MatthewSchenker]

Greetings,
Nice Joss! But are you sure you wouldn't be better off doing the site with Joomla?

Regarding validation errors: I think it's great to run our sites through the validator, but I find that most of the time it's a bunch of little ones. Also, just for fun I often run major sites through that validator to show how even "the best sites" have errors!

For example...
Microsoft - 515 errors
NY Times - 379 errors
Facebook - 33 errors
Techcrunch - 20 errors

So with 22 errors, you are doing better than Facebook!

Thanks,
Matthew

[Joss]

Joomal?

Nah....

Mambo, possibly.... Should I add a Marquee somewhere while I am about it?

I have a love hate relationship with validators. I go to all the trouble of not putting alts on everything just to have them moan at me about it.

But then, that is probably because I am a creative not a techy (don't be fooled by me being a sound engineer - that is surprisingly un-techy!)

If it looks nice and works, I tend to stop while I am ahead!

[Manfred62]

 attention: OFF TOPIC

 Also, just for fun I often run major sites through that validator to show how even "the best sites" have erors!

For example...
Microsoft - 515 errors
NY Times - 379 errors
Facebook - 33 errors
Techcrunch - 20 errors

So with 22 errors, you are doing better than Facebook!

you do compare your own sites with e.g. Microsoft, Facebook..? Wow.

Fact is: MS, FB etc. have no need for clean code. They are big enough.

I'm doing the web things only for fun since 3 years. Building sites for friends etc in my free time (beside full working). But I have learnt html and css from the base with books. So I say, clean (valid, semantic) html is the starting point for good design.

Look through the category 'Showcase':

the most people here are so called 'professional web designers' and make this job for money. But the most sites presented have errors. Also the most errors are easy to fix. So far I don't understand what they are doing. They are too lazy to check and fix this?? More worst, they don't know about this?? Or they think, webdesign is the use of Photoshop?

Before hand over to the client: using validator is about 5 sec. Fix most simple errors is about 10-20 min? Just like macura said: do it frequently. Also nearly every texteditor supports you with highlighting. I'm doing even more to check logic and usability: check a site without js, without images, without css. That's just one mouse click.

For me that's understood, to do my best when I earn money with a job. Doing the best with html is no real problem. html is a very simple language with simple rules (and also the basic of the web). What's the problem with e.g. including an empty alt attribute to img template? Way better, why not use a clever phrase for alt attribute to support SEO?

Exactly that is the reason, why I choose PW and MODX as CMS. With both I can create my wanted output. Don't have to rely on a theme and plugins for getting cluttered source code with hundreds of senseless div, span, id and classes.

end of OFF TOPIC

scnr

[diogo]

Manfred, although I think you are right in some of what you say, I think your tone is wrong and reveals your inexperience. I confess I was a bit irritated with your post because this is not the first time you throw the validator errors at someone in the forum.

I agree that it's not difficult to add alt to all images but, although the validator is a useful tool, your brain and judgement are much more needed. Analize the images on Joss's site without your beloved validator and you will understand what I mean. Tell me honestly, is there any image that needs a description? I will answer: no. The first image is the banner, after that you have three images that are there to support the headlines, and finally you have the social buttons that are inside links (in this case the link should have a title, since there's nothing beside the image explaining what it does). I'm not saying that we should ignore the suggestions of the validator, and the recommendation is to add an empty alt to an image if there isn't a description (which Joss didn't). This is not for SEO as you mentioned, but mostly so that screen readers (software for visual impaired people) know they should ignore them. So, here's another important tool to have in your toolbelt http://webanywhere.cs.washington.edu/beta/

I sincerely hope I'm not being too harsh and that you don't take my observation personally.

[Manfred62]

ok.. forget my write-up.

The first image is the banner..

in my eyes this should be the (missing) h1.
 

[MatthewSchenker]

Greetings,

Manfred: I don't directly compare my sites to Facebook, Microsoft, and the NY Times.  Kind of the opposite... I was trying to support Joss's point that the strict list of errors that show up in the Validator do not necessarily mean something is wrong with the site.

I definitely think we should run our sites through a validator to be aware of what they say, but we should also be nuanced in our assessment of these things.

Thanks,

Matthew

[Joss]

Since I am in the media industry and therefore a lot of the sites I deal with have huge amounts of media embedded from elsewhere (like YouTube), I have learned to realise that I cannot do a perfect site - if for no other reason that on Chrome I get huge amounts of Script errors relating to iframes.

There is also the small matter that If there can be an opposite to OCD, I am probably suffering from it - I am the most disorganised person I know and absolutely terrible when it comes to dotting Eyes and crossing Tees. 

But the site works and my clients seem to like it - more importantly, they like the show reels, and those are the only thing they and I care about.

It is all about priorities.

[teppo]

Validation tools are best used to check for real, structural problems; things that can cause you awful lot of headache when something odd happens in browser X because you forgot to close a tag or some script completely fails to function (or affects more stuff than it should) because your "unique" ID attribute wasn't unique after all.

It may have been WordPress that made "code is poetry" a relatively well-known metaphor, but there's still some sense in it; working with pretty and compact (yet expressive!) code and valid, semantic markup is almost like reading a good book. Still the reality is that most people browsing your site couldn't care less whether or not it's "valid (X)HTML", so you really shouldn't sweat it too much either. (Not to mention that if you use editors like TinyMCE and CKEditor, implement any external widgets etc. you're probably going to end up with validation errors anyway.)

The point I'm trying to make here is that if it makes you happy then by all means make your markup 100% valid -- otherwise just make sure that there's nothing fatal within those minor errors 

Regardless of that, adding empty image "alt" attribute is a good habit -- partly because it keeps validator quiet and makes spotting real problems easier but more importantly because it's actually an indicator for screen readers that "this image is not important and should be skipped." If I remember correctly, some screen readers spit out file names whenever alt is left out and that's not very cool or useful. (Will have to do some fact-checking about this later..)

On the other hand, using alt texts purely for SEO is an awful idea. Seriously. I'm pretty sure that most people browsing with a screen reader don't appreciate having to listen useless, keyword-infested alt texts unless those also provide some real value for them.

Sorry for taking this even more off-topic, but the subject was too fun to skip. @Joss: the site is very nice too!