4 ms·

HTML5 Rocks has a whole new look

89 points by kinlan 15y ago

ronaldj 15y ago
I don't like it as much as the old look. The "Or get straight to the tech" autoscroll thing really messes with you when you are scrolling / reading.
jahmed 15y ago
The weird dot backgrounds makes the font look terrible.
dreamdu5t 15y ago
I wish the design was focused on presenting content instead of "HTML5 IS SO AWESOME!"
ninjo 15y ago
Poor Opera never had a chance.
- jacobr 15y ago
  Performs better in Opera than in Chromium for me.
deleted 15y ago
[deleted]
dev_jim 15y ago
Really harsh on the eyes. There's a reason image backgrounds went out with MySpace.
jomohke 15y ago
http://www.html5rocks.com/en/features/presentation http://www.html5rocks.com/en/features/presentation The "Try this" demos on this page show features that Firefox supports, yet they only have "-webkit" prefixed styles so they don't work. Is the page out of date? Many of the features have been supported since Firefox 4 according to their own browser support chart.
- paulirish 15y ago
  Ack. Sorry about that; one contributor got lazy. :( Just fixed: http://goo.gl/dalkp http://goo.gl/dalkp Deploy going out soonly.
cgarvey 15y ago
The navigation font should be thinner, I can still see it a little.
mattlong 15y ago
Is it just me or does the homepage display noticeable lag when scrolling up/down? I'm assuming its due to the event handlers that trigger certain blocks' showing and hiding based on scroll position.
- Fixman 15y ago
  The site works perfectly for me, with Firefox Nightly 13 in Arch Linux.
  - aiscott 15y ago
    Works good with whatever the release version of firefox is as well (on osx). I've noticed for a while now that firefox has very smooth scrolling. Way better than both chrome and safari on my laptop.
- gisenberg 15y ago
  Unusably laggy for me running latest Chrome on high-end hardware.
thezilch 15y ago
If it wasn't obvious, some text and/or sections are clickable on that page; given that everything is "black" and looks alike, there is no delineation of interactive content. Something is trying to be really fancy on the page, but I'm not sure it's worth a 200ms browser-paint event every step of a mouse scroll. At least, this time, it mostly works in prominent mobile-browsers.
NDizzle 15y ago
Quick, someone pick up gaudyhtml5.com while it's still available.
dangrossman 15y ago
This site is almost a showcase of things not to do when designing a content site... inconsistent navigation, surprise interactivity, low contrast font/background combinations, inconsistent typography, icons thrown all over the place. I'm sure there's some useful stuff here, but I can't stand to decipher the navigation and focus on the text long enough to find out.
- Gigablah 15y ago
  Indeed, the noisy background with thin, un-aliased fonts make for a really bad reading experience.
wavetylor 15y ago
At least it has the Konami code.
getsat 15y ago
HTML5 makes my 2560x1440 Chrome window drag a quadcore CPU to its knees. Feels bad, man.
Fludae 15y ago
Wow, harsh comments. Apart from navigation being somewhat ambiguous, I thought this was an elegant app.
- Fludae 15y ago
  Wait. Which site is the new one? The colorful book or the white boxes + image based background? My comment above is based on the book one.
mcot2 15y ago
Ugh, CSS flexbox is such a mess. The new standard which is implemented in chrome 17 is here: http://dev.w3.org/csswg/css3-flexbox/ http://dev.w3.org/csswg/css3-flexbox/ The old standard which was implemented in previous versions of chrome and IE10 beta is here: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ Lastly there is a unrelated display: box implemented by mozilla for XUL which is often confused with the flexbox standards but behaves in some weird ways. Ssee here: http://csscurmudgeon.com/2011/11/flexbox-sucks/ http://csscurmudgeon.com/2011/11/flexbox-sucks/ Now we have an HTML5 advocacy site which is openly suggesting that people use the old webkit implementation and the unrelated mozilla spec based on XUL. If anything, use the version in Chrome 17, its far better both in terms of property names and the flex() function.
- paulirish 15y ago
  Been wanting to update the article for a while. At least added a disclaimer http://www.html5rocks.com/en/tutorials/flexbox/quick/ http://www.html5rocks.com/en/tutorials/flexbox/quick/ Hope to provide a real guide to new flexbox soon.
blocke 15y ago
Please use a solid color (preferably white) background under all content text, Thanks. The site has great content. The new design makes it too hard to read.
angrycoder 15y ago
Since everyone hates the site, I recommend entering: up up down down left right left right b a b a Then you can shoot the whole site down.
upthedale 15y ago
I wasn't going to comment, as everyone else seems to have already commented how horrible this looks (and performs). However, on closer inspection it looks like they've just tried to copy Windows Phone. There's the obvious big bold tiles, a generic enough idea that I wouldn't completely attribute it to Metro. However it starts to get suspiciously similar when you compare the mobile link in the top right of html5rocks with the more apps arrow to the right of WP7 start screen: http://upload.wikimedia.org/wikipedia/en/5/55/Windows_Phone_7.5_Start_Screen.png http://upload.wikimedia.org/wikipedia/en/5/55/Windows_Phone_...

89 points by kinlan 15y ago

I don't like it as much as the old look. The "Or get straight to the tech" autoscroll thing really messes with you when you are scrolling / reading.

jahmed 15y ago

The weird dot backgrounds makes the font look terrible.

dreamdu5t 15y ago

I wish the design was focused on presenting content instead of "HTML5 IS SO AWESOME!"

ninjo 15y ago

Poor Opera never had a chance.

jacobr 15y ago
Performs better in Opera than in Chromium for me.

deleted 15y ago

[deleted]

dev_jim 15y ago

Really harsh on the eyes. There's a reason image backgrounds went out with MySpace.

jomohke 15y ago

http://www.html5rocks.com/en/features/presentation http://www.html5rocks.com/en/features/presentation The "Try this" demos on this page show features that Firefox supports, yet they only have "-webkit" prefixed styles so they don't work. Is the page out of date? Many of the features have been supported since Firefox 4 according to their own browser support chart.

paulirish 15y ago
Ack. Sorry about that; one contributor got lazy. :( Just fixed: http://goo.gl/dalkp http://goo.gl/dalkp Deploy going out soonly.

cgarvey 15y ago

The navigation font should be thinner, I can still see it a little.

mattlong 15y ago

Is it just me or does the homepage display noticeable lag when scrolling up/down? I'm assuming its due to the event handlers that trigger certain blocks' showing and hiding based on scroll position.

Fixman 15y ago
The site works perfectly for me, with Firefox Nightly 13 in Arch Linux.
- aiscott 15y ago
  Works good with whatever the release version of firefox is as well (on osx). I've noticed for a while now that firefox has very smooth scrolling. Way better than both chrome and safari on my laptop.
gisenberg 15y ago
Unusably laggy for me running latest Chrome on high-end hardware.

thezilch 15y ago

If it wasn't obvious, some text and/or sections are clickable on that page; given that everything is "black" and looks alike, there is no delineation of interactive content. Something is trying to be really fancy on the page, but I'm not sure it's worth a 200ms browser-paint event every step of a mouse scroll. At least, this time, it mostly works in prominent mobile-browsers.

NDizzle 15y ago

Quick, someone pick up gaudyhtml5.com while it's still available.

dangrossman 15y ago

This site is almost a showcase of things not to do when designing a content site... inconsistent navigation, surprise interactivity, low contrast font/background combinations, inconsistent typography, icons thrown all over the place. I'm sure there's some useful stuff here, but I can't stand to decipher the navigation and focus on the text long enough to find out.

Gigablah 15y ago
Indeed, the noisy background with thin, un-aliased fonts make for a really bad reading experience.

wavetylor 15y ago

At least it has the Konami code.

getsat 15y ago

HTML5 makes my 2560x1440 Chrome window drag a quadcore CPU to its knees. Feels bad, man.

Fludae 15y ago

Wow, harsh comments. Apart from navigation being somewhat ambiguous, I thought this was an elegant app.

Fludae 15y ago
Wait. Which site is the new one? The colorful book or the white boxes + image based background? My comment above is based on the book one.

mcot2 15y ago

Ugh, CSS flexbox is such a mess. The new standard which is implemented in chrome 17 is here: http://dev.w3.org/csswg/css3-flexbox/ http://dev.w3.org/csswg/css3-flexbox/ The old standard which was implemented in previous versions of chrome and IE10 beta is here: http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ Lastly there is a unrelated display: box implemented by mozilla for XUL which is often confused with the flexbox standards but behaves in some weird ways. Ssee here: http://csscurmudgeon.com/2011/11/flexbox-sucks/ http://csscurmudgeon.com/2011/11/flexbox-sucks/ Now we have an HTML5 advocacy site which is openly suggesting that people use the old webkit implementation and the unrelated mozilla spec based on XUL. If anything, use the version in Chrome 17, its far better both in terms of property names and the flex() function.

paulirish 15y ago
Been wanting to update the article for a while. At least added a disclaimer http://www.html5rocks.com/en/tutorials/flexbox/quick/ http://www.html5rocks.com/en/tutorials/flexbox/quick/ Hope to provide a real guide to new flexbox soon.

blocke 15y ago

Please use a solid color (preferably white) background under all content text, Thanks. The site has great content. The new design makes it too hard to read.

angrycoder 15y ago

Since everyone hates the site, I recommend entering: up up down down left right left right b a b a Then you can shoot the whole site down.

upthedale 15y ago

I wasn't going to comment, as everyone else seems to have already commented how horrible this looks (and performs). However, on closer inspection it looks like they've just tried to copy Windows Phone. There's the obvious big bold tiles, a generic enough idea that I wouldn't completely attribute it to Metro. However it starts to get suspiciously similar when you compare the mobile link in the top right of html5rocks with the more apps arrow to the right of WP7 start screen: http://upload.wikimedia.org/wikipedia/en/5/55/Windows_Phone_7.5_Start_Screen.png http://upload.wikimedia.org/wikipedia/en/5/55/Windows_Phone_...