I’ve received an amount of feedback recently and wanted to share it with you so that as a community we could attempt to define a better tagging and category structure for the site.
Kroc pointed out that there was some inconsistency between the tagging schema I’ve used so far and we could do with better defining tags and categories. Kroc also had a suggestion that rather than use ratings we include a grade for the amount of html5 used in the site. Now I don’t profess to know everything about html5 what with it being such a mamouth spec but I’m sure with some help we could ‘review’ sites and give them a grading.
I also had a discussion with iheni and we thought it best to not include sites that only use the html5 doctype as the gallery would be flooded with them and people wouldn’t really be learning how to implement the spec. (Although both UXLondon and A List Apart are currently are included that do this so they may need to be removed.)
Basically I’m opening these questions to the floor to find out how you’d like to see the site develop. The areas I’d like to address first are:
- What do you think of the current category structure? Do you have suggestions for how it should be better defined?
- What are your thoughts on the current tagging schema and how could this be better defined? Or should tags be removed altogether?
- Should we include sites that only use html5’s doctype and no new elements, attributes or technologies?
- Should sites be graded on their use of html5? E.g. doctype only = 1 star, new elements, doctype, validates = 5 stars.
- If a grading system is implemented should we ditch the ratings system that currently exists and only allow admins to assign grades/ratings?
I look forward to hearing your thoughts on the above and please feel free to join in the discussion, I’d like as many people to be involved as possible.
51 thoughts on “Ideas for html5gallery”
First of all, well done on getting this site setup, I hope it goes on to become the first stop html5 gallery.
I’m not keen on the rating system at all to be honest because I think most ratings will be based on design like most other galleries. But if the site keeps the ratings gallery then I think keep it the way it is.
Sites that are entered on the gallery should use the doctype and elements.
I like the tagging system, particularly for svg, nice touch.
Keep up the good work.
Firstly, thank you very much for providing this opportunity.
As I had said in one of my tweets- don’t let the site fall into becoming nothing but a ‘Photoshop wank contest’ like all these so-called ‘CSS’ galleries, where the sites with the most Photoshop layers get the most votes and anything with any actually decent CSS is buried! Many of these over-graphical sites have terrible, terrible HTML and CSS spat out by Dreamweaver.
If this is a site about HTML5 sites, then it’s the code that should be the focus and the object of praise. Clean HTML and heavy use of HTML5 features — and good design too! — should be drawn to attention.
In answer to your questions:
1. What do you think of the current category structure?
Lacking clear objectives and definition.
Do you have suggestions for how it should be better defined?
Most HTML5 websites are currently very tech-crowd related. Attention should be drawn to HTML5 use in the public, non-tech-savy crowd. “Brochure” is very non-descript. One could do away with the current categories, and use grades as categories instead.
2. What are your thoughts on the current tagging schema and how could this be better defined? Or should tags be removed altogether?
The current categories should be used as tags instead, and the tags used now would become part of grades (the new categories). — basically swap categories and tags over 😛
3. Should we include sites that only use html5’s doctype and no new elements, attributes or technologies?
Yes, but put them in the lowest grade for being HTML5 in name, but not in spirit. If you are weary of bloat, then no, leave them out. An HTML4 page with a different doctype is nothing special. HTML5 is all about the new semantic elements.
4. Should sites be graded on their use of html5?
Yes. Even though it will no doubt draw some controversy, it really will make developers think more about furthering their use of HTML5.
Grade A+ could equal full HTML5, including the elements / technologies not very well supported: for example, Figure/Legend can only be used if served as xml, and thus rules out IE support entirely. The A+ should only be awarded to sites using clean, tidy, semantic, validating HTML5 / overall excellence in design & coding. And personally IMO, sites not using Javascript shimmies.
Grade A should be awarded to sites using full HTML5 elements, semantic tag use, validating. JS shimmies allowed.
Grade B should be awarded to sites using HTML5, but not validating
Grade C should be awarded to sites using little HTML5 (too many DIVs), unsemantic in design and overall lack of polish
Or something like that.
Medals or bonus points could be awarded for particular achievements like no DIVs, no classes &c. (Both mine and Intertwinglys redesign-in-progress have no classes).
5. If a grading system is implemented should we ditch the ratings system that currently exists and only allow admins to assign grades/ratings?
Perhaps let the admins set the grade, and then let users vote and comment if they agree with that grade given.
—
Regqardless of what route you do decide to go down, just please give praise where due, and don’t let the attention boil down to the screenshot and nothing else.
Kind regards,
Kroc Camen.
Hi,
I say tag with elements used as you are now – doctype, video, audio, forms etc so people can find actual implementations.
As to ratings, I would devise a score system (for use of HTML5), publish that system and assign the scores yourself otherwise I can see public ratings purely reflecting how good a site looks (but don’t discount looks from the scoring altogether).
Hope this helps.
Regards, Karl
For ratings I’d advise creating a HTML5 evaluation rubric. Score by assessing each criterion. Then assign a rating. Along same line as @karl_dawson said.
“4. Should sites be graded on their use of html5?”
Absolutely.
Perhaps distinctions should be drawn between types of invalidity; Some sites (like mine) don’t validate because they use ARIA roles or other constructs that aren’t yet added to the validator.
Sites, like Apple, don’t validate because they either misunderstand the spec or need to do something that the spec doesn’t allow. It would be interesting to highlight these, correcting bad html 5 or, in the latter example, demonstrating a use case for a currently illegal construct so it can be put to the HTML 5 team for consideration for adding to the spec.
I can help co-curate if you want…
All
Firstly thank you for your help in contributing to this thread I really appreciate your input.
I think you’ve come up with some great ideas and suggestions and agree wholeheartedly that the site shouldn’t be graded on looks alone. After all the gallery is here in order to showcase the use of html5 markup.
Because of this I’l devise a grading system in order to allocate grades to sites (similar to kroc’s suggestion). However, I’ll also take into account the validation issue that Bruce pointed out. My personal site for example doesn’t validate because of some attributes included with the creative commons license.
To sum up, I’ll gather your’s and my thoughts and come up with a plan in the next couple of weeks as I’m away for a few days over easter.
@Bruce if we start to get flooded with entries your help would be much appreciated.
As a side issue, is any going to Future of Web Design in London at the end of this month? It’d be good to discuss some of this in person.
Cheers
Rich
Not sure if I’m going to FOWD, but will be down there to hang with Molly (who’s speaking) as she’s now an opera employee and I’ve got to do the Norwegian hazing wedgie ceremony.
So let’s have a pint. Any other html 5 early adopter peeps fancy an ale and a meetup?
Sounds like a great idea. I don’t think I’m going to be at FOWD but I’m definitely up for catching up with Mols, talking HTML5 and drinking beer.
@ Rich – fantastic idea this gallery I’m glad to see so many people getting out there and into html5. I’m not sure looking at some of the entries whether the gallery is meant to showcase sites _built with html5_ or sites about html5. I’d love to see more clarification on this on the gallery.
While I’m bowled over by the number of people trying out html5 in all sorts of generators (WordPress particularly) – and good on them for doing so – are they html5 sites or xhtml sites using the odd html5 element? I would like to see some distinction between different types of site such as suggested above with categories?
I want to get some of the compatibility issues sorted with my html5 sites before getting them on here. I’m torn between reporting flaky interpretation to Microsoft (and then ignoring IE) to go the ‘pure’ route, and using javascript to overcome IE’s ‘little problems’.
So thanks for all the work so far, hope my 2p worth is helpful…
@ brucel – sorry I’m miss you guys in London but I’ll be up in Clun that weekend…
OK: Anyone fancy a pint on the 30 April, natter about html 5 etc?
So that’s me and you then Bruce!
We’re looking at meeting somewhere around Kensington Town Hall from 5.30pm onwards, details to follow.
Rich
OK, so an html 5 meetup and surgery (making an html 5 site? bring yr laptop and we can all help each other) immediately after FOWD at The Devonshire Arms, Kensington http://www.beerintheevening.com/pubs/s/22/2241/Devonshire_Arms/Kensington, map http://maps.google.co.uk/maps?q=W8+6LA&spn=0.005,0.02&hl=en
Won’t go on too late as I need to get back to Birmingham afterwards. Be there, or be square.
Good one Bruce, thanks for organising, look forward to seeing you all there.
Rich
Ok all, Bruce has set this up on upcoming, let us know if you’ll be there
http://upcoming.yahoo.com/event/2495982/
My only suggestion would be to have thumbnails in the RSS feed.
Thanks for the suggestion Alice, someone else brought that to my attention and I think it’s a great idea. I’ll be scheduling it in to get it done just as soon as I can 🙂
your RSS does not include images of the sites submitted and therefore does not REALLY suplly the content. want to increase your rss reader list? include an image of the sites with a link
Thanks, yes you’re right a few people have pointed this out and is something we will add soon.
Great work – I’m looking forward to see all the progress – I might be able to submit a site here too soon 😛
Hello,
It could be a good idea to make a post to explain what is HTML5 !!! New fonctions, real possibilities of creation…, how to recognize specific markup.
Tks anyway
w
Terrible! People uses english language and and they do not see that this not work AT ALL on – for example – many mobilephones (until they use a language spec-chars like (for example polish): ążźćłóńę, they think that everything is ok). 70% of exposed sites uses also (in 50-60% of html’s head) fixations for microsoft’s idiots exploiter. And 90% of sites exposed on this “service” are totally unacessible, unuseful, with hard to understand navigation and with layout “just from the trash”. 80% of them is: about nothing. Standards sucks – becouse they are ALWAYS not used properly by about 99% of pseudo webmasters.
Something is cutted by engine of this site in comment above: should be: …People uses english language and [meta charset=utf-8] and they do not see that this not work AT ALL…
The only 3 things that are really good in HTML5: audio tag (and source tag), video tag (and source tag), canvas tag. That’s all. The rest in html5 sucks – it means: the rest makes webmastering/coding harder (all those sections, headers, articles, asides etc. – they are: for idiots or/and for robots, but TOTALLY NOT FOR USERS / SITES GUESTS). Code of html5 document has shorter Doctype declaration, but in fact: all the total document size will be much more bigger (than in – for example – HTML 3.2 Final or HTML 4.01 Strict). Standards sucks. It is just a next marketoidal step for promoting and making webapps for iphonez-only etc.).
Hmmm… I was reading an article about HTML5, and it suggested that I pop over here to see many HTML5 examples. The first thing I did once I arrived was pull up the page source…
I’m surprised, no actually shocked would be a better word. You would think that a gallery designed to showcase the best in HTML5 would actually be writtem in HTML5 itself, well thats clearly not the case.
Apart from the Doctype and Meta tag, there is nothing in you page source to suggest that it is anything other than ‘division heavy XHTML’. Fortunately, the sites you have in your gallery are written in HTML5.
A classic case of style over content!
@michael, you’re right the site isn’t built with HTML5. When I set the site up a little over a year ago now I had the idea over a weekend and wanted to get something up quickly so I used a free theme from WooThemes.
The plan is to update the site and make use of HTML5 markup, however having a life, full time job, running this site, the HTML5Doctor site and running a series of conferences means it’s pretty low on the priority list I’m afraid. I’m sure you can understand that.
Yes each of the sites featured are built with HTML5, their source code is checked and commented on to try and help people correctly interpret the spec.
Cheers
Rich
I agree with Michael and also understand your situation, Rich. I’d be willing to help you recode your WP theme in my spare time. Send me an email if you’re interested.
If you want to promote evaluation of the html5 code and not just front-facing design, I encourage you to show the css in the area where people rate the sites – the gallery thumbnails only show the design, but none of the code. To emphasize that the code is what we’re evaluating set it out there clearly. Currently, the gallery does not promote code viewing at all.
You could also create a simple way for comment-ers to highlight code to illustrate their point. This will facilitate conversation about the code itself. While the gallery is a great asset for us, you could build in some tools built that encourage the kinds of conversations you want to have — the ones about the code.
I would like the notes on each site to include a description of any special HTML5 features of note. For example if a site uses embedding or anything particularly interesting, especially creative uses and things not possible in HTML4. Some of us are just getting into HTML5 and are looking to explore the different features and how they are used.
Really nice and found much useful…
Thanks a lot guys..
The gallery should have a comment about the sites featured explaining what HTML5 characteristic they are using, how and to what advantage. The first several I clicked on I couldn’t immediately see what HTML5 aspects they were using. This gallery really should be about making the HTML5 advantages more obvious.
Perhaps snippets of the relevant source from the page in question in the gallery with comments?
Thanks for your inputs guys, I’ll mull it over and put it together with another bunch of ideas I’ve got for the site.
Cheers for your offers of help too, I may well take you up on that soon.
@Wayne, I’m not sure which posts you’re looking at but most have a note of this sort on them.
Create some “Html5 Valid Badges” so we could proudly put them in our websites 🙂
Templates for blogger
First step make this site in html5 then we can talk about other sites.
Hi,
A section with demonstrations of HTML5 functions/features would be great.
Casper, for that you want HTML5 Demos by Remy Sharp.
Hello,
Well done on getting content and users.
However, I find it quite ironic that you pass judgement on websites and designs, yet have many errors with your own.
For instance, in one of your “Notes” I read how a website should sort out their “type” attributes for …yet, you fail to do this yourself.
I would sort your own problems out before throwing stones.
@Carl, thanks for the feeback. Throwing stones isn’t our objective. We aim to provide constructive critique of peoples work, as many developers find getting their heads around HTML5 hard work. Rather than simply posting up screenshots of the latest design we spend time delving into the mark-up to see how it could be improved.
As explained on the about page and in the footer of each page, the site is built on the back of a theme from WooThemes and hasn’t yet been converted to HTML5. It will be when I get time. This site is run in my spare time along with several other projects I’ve got going it perhaps doesn’t get the attention it deserves.
Hope that explanation helps a litte.
Rich
Why have I only seen the messages regarding a meetup with Bruce and Rich now? Only 5 months too late!
I personally like the ratings, but wish there was a way to search by rating to see who has the best code, rather than look through everyone.
@ksrich – Searching by ratings is a good idea and something that we’ll look into, the problem is lots of folk only vote on the visual not on the best code which needs some further thinking.
I like the idea of the search or filter on ratings. However, I would say have another rating for code. Combined scoring filters the “Champs”. Where I have little to no experience or talent with the code I would NOT rate anyone. However someone that liked the code and knew it well enough to rate it might enlighten me on code that is truly exceptional. Additionally consider the the option to filter on the class or descriptor Agency, Blog, Agency, or Education.
There by allow a novice, as I am, to filter a few good examples of the type I am looking for so I might actually make a decent page.
This isn’t intended to be a rant/sour grapes so I hope it doesn’t come across that way but…I submitted my site quite a while ago and check back every day to see if it’s been listed. When I find it hasn’t I shrug my shoulders and think ‘Oh well, try again tomorrow’. Call me impatient but what would be useful is an estimated time of listing – assuming my site is worthy of being listed, of course!
Also, if a site is submitted and fails to be listed perhaps an indication of why it wasn’t listed would be helpful. Although I apreciate you may not have the time to provide this type of feedback.
Anyway, that’s my tuppence worth. Overall, it’s a great site, it’s been a real help to me and really inspiring so thank you.
@Art, we’re going to be looking at a (long overdue) redesign and rebrand in the new year so a ratings filter is something that we’ll look into.
The option to filter by category or tag already exists; just click on them!
@Dan, you’re right there is a long wait at the moment, we do have four of us curating the site and posting as much as we can. As I’m sure you can appreciate we all do this when spare time allows which isn’t always easy with families etc.
We’ve also purposefully decided not to make the process automated to ensure each site gets valuable critique. We’re currently processing some sites that were submitted in September. You’re right a time indication is probably a good idea for something to add.
I did used to email folks make when their site was rejected but this no longer happens because of time. I also found that no-one tended to reply with “ok, I understand, I’ll improve it” rather they didn’t reply at all.
Hopefully that addresses your concerns.
Yep, thanks for the reply.
First, i think that’s a good idea, but the criterious to submit a page are a litle irrelevant.
I see some codes an they have i little of html5, not the entire development of the content.
Great site guys, thanks for the share. It’s good to see what other people are doing with HTML5 Such an exciting move for web designers ! Hooray for HTML5 !
Love the site. Love the updated look.
But did you know that your header image (http://html5gallery.com/wp-content/themes/html5gallery2/images/logo.png) has a different background color than header[role=”banner”] behind it?
Not sure if it is intentional, but I’m assuming that it is not, since it is so subtle. You might need to convert that png to a transparent one or re-save with a different color profile.
Please correct me if I’m wrong – I won’t take offense. I come across this problem every once in a while, too and usually using a different profile helps.
Thanks Erik, yeah I noticed that the other day but then checked on another machine & it seemed ok so thought I was going crazy! Updated to a transparent logo now though.
At DlhSoft we are building a Gantt Chart JavaScript library that makes use of HTML5 inline SVG features. This is not a site oriented to end-users, but a component set that other developers may use to develop HTML5 sites. Therefore we would like to request, whenever possible, to add a separated category for such type of projects. (Our components are currently in beta and available here: http://dlhsoft.com/gch.)