1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Looking for HTML5/CSS3 improvement suggestions

Discussion in 'Off Topic' started by Floris, Sep 12, 2010.

  1. Floris

    Floris Guest

    Hey guys and girls, I've put some time into making a HTML5 template for the layout and CSS3 for the design of the page. And ignoring IE and Opera and older versions of FireFox, focussing on Safari5 and Chrome6, I think I've come quite far. However, it could use some suggestions to see if I can fix potential issues or improve the code. I have kinda ignored my own coding standards as it's just 'open TextMate and write it > Save > test > Update > Works? Great! Time for bed..'.

    So today I want to improve on the HTML5/CSS3 a bit, hopefully with your suggestions.

    Known issue: The links to 'test' articles do not work yet, I started on the back-end code and the sql.output, but simply have not made the page?id=x part uploaded.

    Anyway, hope to hear from you guys so I can consider improving. And HTML5/CSS3 is client-side, so all the code is available to you (for review, not for re-use obviously).

    Thanks! Site: http://mycoffeecupisempty.com

    This is how it "should" look like:

  2. Elizabeth

    Elizabeth Well-Known Member

    Floris, have you seen the info that Smashing Magazine has put out on HTML5 and CSS3? I know they have a HTML5 PDF that is available to download along with a whole bunch of other links. http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ and the other links are at the bottom of the article. I hadn't gotten into it yet but I have been following it.
  3. Floris

    Floris Guest

    Yeah, I read that last year. :) I know HTML5/CSS3, I write it daily.
    But after finishing this page, I am just looking for suggestions from people. More eyes mean more input. :)

    I've gone through the pdf you recommended, and it's a bit off, outdated, but after reading it I can confirm I use the right tags for the right elements. At least, that's what I like to believe :p

    Thanks for the tip, the article reminded me of HTML5 Doctor; going to read through that again to see if something comes to mind.
  4. Elizabeth

    Elizabeth Well-Known Member

    Figured you had but just in case, thought I might mention it. And others reading the thread can find it too. :)
  5. Floris

    Floris Guest

    Woops, clicked the button before finished typing somehow; edited my above post :D
  6. Floris

    Floris Guest

    HTMl5 Doctor reminded me of <article>, which is what the page will have, being able to identify the article with article; Silly how I forgot about it. Thanks again Liz for the reminder :)
  7. Elizabeth

    Elizabeth Well-Known Member

    Floris, what I did was do a search of htlm5 at Smashing Magazine. Unfortunately they don't order by date as in newest first. And there is no way to refine the search, LOL. But there were over 2,000 articles on it. One was a Boilerplate Template with a recent print date. Liz
  8. Cezz

    Cezz Well-Known Member

    Just one questions Floris... Why are you wrapping your <h3> in a div??? E.G.

    <div class="title">
    		Welcome :)
    Actually another one, I may be wrong but I am sure that <article> is meant to appear inside larger block elements like <section> you have them the other way around...

    I personally would use <article> in place of your <div class="text">
    Edit: After reading up I realise that it is intended for the way you are doing it...
  9. Floris

    Floris Guest

    Ceri, because there are also <p> and other tags, part of the title.

    <p> details, like author, publish date </p>
    <p> first 250 characters </p>

    for example.
  10. Cezz

    Cezz Well-Known Member

    Ahh Ok, it isn't formatted like this ATM there is only the h2 that is why I asked...
  11. Floris

    Floris Guest

    After having some test data it seems you are right, it's nesting it without need. I will work on the function later.
    In the mean time I have added some mark up, test data, tidied up the .css a bit, and made it work with Safari5 Reader (which disclosed another html5 issue).

    Canonical urls are now added and the article page is working. I've added mod_rewrite .htaccess rules for pretty urls.

    I've improved on the html5 code a bit, so it works for 95% in firefox 3.6 and opera 10.6 now, looking almost exactly like safari5 and chrome6.
  12. Floris

    Floris Guest

    Someone pointed out I forgot the favorite icon, I will work on that later.

    Today I've worked on a theme switcher function, I hope to finish it later and put new version online.


    tnx everybody for the private msgs, tweets, etc with suggestions. Keep them coming.
    Mikey likes this.
  13. Onimua

    Onimua Well-Known Member

    I really like those four styles... I'm not sure which one I wouldn't use. :)
  14. Mikey

    Mikey Well-Known Member

    I love the coffee one :)

    Hopefully you get the About page sorted soon floris :D
  15. Floris

    Floris Guest

  16. Miko

    Miko Well-Known Member

    Hi Floris, looking good.

    I like the domain name and concept.

    I have a question and a suggestion:

    1) why are you using the html5shiv with firefox conditional? Isn't it made for adding html 5 compatibility to Internet Explorer only?

    <!--[if FF]> 	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 	<![endif]-->
    2) I like the style switcher, but I recommend a jQuery version that will not need the page to reload.
    With the current version if I'm on http://mycoffeecupisempty.com/latest/ and change style I'm automatically redirected to the index page.

    Other than that is great :)
  17. Floris

    Floris Guest

    Hey Miko, it's great to get your input!

    Regarding the html5.js for FF, that's left over debug code, I forgot to turn off debug('*.js[ff]') :D

    Yeah, I wanted a modern solution that does it on the page, without a page reload. The js I wrote didn't work so I decided to just go old-school for now. I tried to have a low footprint javascript wise and use html5/css3 mainly without having to compliment it with any js. Still undecided - the page redirecting to index can probably be fixed with having it load http://{$canonical}/?style={$switch}
  18. Miko

    Miko Well-Known Member

    I thought to myself why is he using FF conditionals.... That explained it! :)

    The canonical solution should work.

    Now that you don't have content is not an issue but I can imagine the frustration if a user is reading a long article and decide to click on one of the style switch.

    I really like the name and concept my coffee cup is empty.... I guess is because I can relate to it daily.

    Will keep an eye on it, bookmarked it.
  19. Floris

    Floris Guest

    The idea is that "time to code, let's get coffee", and the blog is that downtime version of it. I am constantly on boards, irc, msn, skype, etc where people ask me questions "what is your opinion, how do you do this, what do you think is best approach, etc" regarding html5/css3/php5/mysql, etc. I answer it when I am done coding something and waiting for the coffee refill.

    We were on skype with some friends and someone mentioned in a sentence, my coffee cup is empty! and I shouted; omg, perfect domain name. And we had a race to see who could get it first. Glad I won :p

    For me it's just a nice place alongside my normal blog and guest blogs where I am asked to post, to post those things that are on my mind. Hopefully as a reference point for me and others, and maybe for others who are learning to put some thought into things. Hopefully we can all add consistency to our code.

    That it's time for a refill and to start coding again, just invites the idea that it's for a bit of fun. A bit of in between info. I am not posting anything new there, or anything people can't find on other pages. Just the stuff that people usually tell me "I wish you could teach me weekly", or "If only I knew about this stuff 5 years ago".

Share This Page