Looking for HTML5/CSS3 improvement suggestions

  • Thread starter Thread starter Floris
  • Start date Start date
F

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:

Screen%20shot%202010-09-12%20at%207.52.15%20AM.png
 
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.
 
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 :)
 
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
 
Just one questions Floris... Why are you wrapping your <h3> in a div??? E.G.

HTML:
<div class="title">
	<h2>
		Welcome :)
	</h2>
</div>

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...
 
Ceri, because there are also <p> and other tags, part of the title.

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

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

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.
 
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.

coffee_themes.png


tnx everybody for the private msgs, tweets, etc with suggestions. Keep them coming.
 
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?

Code:
<!--[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 :)
 
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}
 
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}


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.
 
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".
 
Top Bottom