New BBC homepage - beta
Requiring horizontal scrolling from users of 800x600 by fixing its width for 1024x768 is not the right decision. A %-based layout would accommodate both of those common setups, all points in between and some range of setups either side of them.
Currently on the news site homepage, the "OTHER TOP STORIES" bullet list of links:
| Code: |
| <div class="nlp">
OTHER TOP STORIES </div> <div class="arr"> <a href="/1/hi/education/7325000.stm"> Teachers vote to strike over pay </a> <br /> </div> <div class="arr"> <a href="/1/hi/uk_politics/7325138.stm"> Speaker facing expenses inquiry </a> <br /> </div> <div class="arr"> <a href="/1/hi/uk_politics/7324485.stm"> Brown rejects cap on immigration </a> <br /> </div> <div class="arr"> <a href="/1/hi/world/7323910.stm"> Iraq UK troop reduction delayed </a> <br /> </div> <div class="arr"> <a href="/1/hi/uk/7324246.stm"> Diana's butler 'obviously lied' </a> <br /> </div> <div class="arr"> <a href="/1/hi/england/wiltshire/7324341.stm"> Hercules inquest hears radio call </a> <br /> </div> <img src="http://newsimg.bbc.co.uk/shared/img/o.gif" width="1" height="5" alt="" border="0" vspace="0" class="" hspace="0"><br /> <div><img src="http://newsimg.bbc.co.uk/media/images/44505000/jpg/_44505726_greyline_306.jpg" width="306" height="3" alt="grey line 306" border="0"></div> <img src="http://newsimg.bbc.co.uk/shared/img/o.gif" width="1" height="5" alt="" border="0" vspace="0" class="" hspace="0"><br /> <!-- S BO --> <!-- S IINC --><!--mpu--> <!-- E IINC --> <!-- E BO --> <img src="http://newsimg.bbc.co.uk/shared/img/o.gif" width="1" height="10" alt="" border="0" vspace="0" class="" hspace="0"><br /> <div class="nlp"> <a class="lp" href="/1/hi/also_in_the_news/default.stm">ALSO IN THE NEWS</a> </div> |
I'd suggest this markup:
| Code: |
| <h2>Other top Stories</h2>
<ul> <li><a href="/1/hi/education/7325000.stm">Teachers vote to strike over pay</a></li> <li><a href="/1/hi/uk_politics/7325138.stm">Speaker facing expenses inquiry</a></li> <li><a href="/1/hi/uk_politics/7324485.stm">Brown rejects cap on immigration</a></li> <li><a href="/1/hi/world/7323910.stm">Iraq UK troop reduction delayed</a></li> <li><a href="/1/hi/uk/7324246.stm">Diana’s butler ‘obviously lied’</a></li> <li><a href="/1/hi/england/wiltshire/7324341.stm">Hercules inquest hears radio call</a></li> </ul> <h2><a href="/1/hi/also_in_the_news/default.stm">Also in the News</a></h2> |
The numbered lists in "MOST POPULAR STORIES NOW" are using <ul> with background-image. They should be <ol> but at least some type of list element has been used. The tabs are done as a <ul> of links which is neat attention to detail.
The main navigation lists aren't marked up as lists. The page has hundreds of validation errors and that's only to a Transitional standard. Both pages are using an XHTML DOCTYE of one flavour or another for text/html documents. Just making your homepage validate is rather a false gesture, imho.
Lots of heading-link text hasn't been marked up with heading elements. There is no :focus styling. This is compounded by the native focus rectangle being invisible (Firefox 2.0.0.13 on Windows XP) which makes keyboard navigation just about impossible.
There are stacks of CSS files and empty conditional comments:
| Code: |
| <link type="text/css" rel="stylesheet" href="/css/screen/nol/v4/index.css?v10" />
<style type="text/css" media="all"> @import "/css/screen/shared/v4/mastheadfooter.css?v10"; @import "/css/screen/shared/v4/styles.css?v10"; </style> <!--[if IE]><![if (IE 6)|(IE 7)]><![endif]--> <!--[if IE]><![endif]><![endif]--> <!--[if IE 6]><style type="text/css" media="screen"> #blq-mast span{position:absolute;top:-5000px;left:-5000px;} #blq-footerlinks{margin-right:7px;} .blq-js #blq-nav-links-inner{background:none; height:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/v4/panel.png', sizingMethod='crop');} .blq-js #blq-nav-foot {background: none; overflow:hidden;} .blq-js #blq-nav-foot div {height:10px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/shared/img/v4/panel.png', sizingMethod='image'); margin-top:-159px;} </style><![endif]--> <style type="text/css" media="all"> @import "/css/screen/shared/v4/styles.css?v10"; @import "/css/screen/nol/v4/styles.css?v10"; @import "/css/screen/nol/v4/business.css?v10"; @import "/css/screen/nol/v4/furniture.css?v10"; @import "/css/screen/nol/v4/ukfs.css?v10"; </style> |
As ever the content is outstanding. But the poor workmanship of the pages is really sad.
(EDIT) Adjusted some whitespace in the CSS so it fits in the forum layout.
Last edited by Ben Millard on 03 Apr 2008 05:17 pm; edited 1 time in total
Share: 
I didnt actually scan the source but...
| Quote: |
| 650 bytes, 81% more efficient. Did someone say whitespace doesn't matter? The CSS for spacing, bullet images, decorative uppercase and the grey line is trivial. |
Thats a very good point and a shame they haven run even the automated HTML tidy's etc.
Share:
| Barking_Mad wrote: |
|
Still, the image descriptions suck and dont really describe whats in the image. Should be more descriptive i think. For example the current image of "Paul Burrell" is just alt="Paul Burrell". Not gonna win any creative writing prizes there  |
I don't think the images need further description unless relevant and actually conveying information found in the image itself. Some are actually too descriptive, for example the current one of George Bush for which the alt text is "President Bush and First Lady Laura Bush step off Air Force One upon arrival in Bucharest, April 1, 2008". This is way too much. If the image doesn't convey certain information (like the date of the photo) then the alt text shouldn't either.
James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
Sure i agree, but it should at least describe the information in the picture relevant to the topic.
Some good examples:
http://news.bbc.co.uk/1/hi/business/7325692.stm - "First Direct Building in Leeds" - Not bad, personally id use "Photograph: The First Direct Building in Leeds.". Because i usually do my alts in "Image Type: Description." format.
Some bad:
http://news.bbc.co.uk/1/hi/world/7326532.stm "Tendai Biti, *date*" - For a sighted user its obviously a person, hes obviously coloured and standing at a microphone, now you can put a name to the face. If you didnt know the name that alt text would be usless.
http://news.bbc.co.uk/1/hi/technology/7324556.stm Just sais "Computer Code", which it isnt and doesnt convey the same as the image.
There are more bad examples than good, possibly a bad example to use the BBC news site though as its so often changing i guess media comes and goes fast.
Share:
| Quote: |
| Requiring horizontal scrolling from users of 800x600 by fixing its width for 1024x768 is not the right decision. |
Agree. They should have optimized it for 1024 with max-width but make it able to scale down.
However any design that is flexible/elastic are just hard to control and maintain. I assume there are quite a few content mangagers on this site both real and electronic so having a fixed layout makes sense and in that case... I guess 1024 IS the most used screen size now, so I can understand the decision
Share:
would it kill them to add some :focus styling to their millions of links?Patrick H. Lauke / splintered
Share:
I guess Im the only one who thinks it's bloody awful then? Clunky and lacking real content?
Share:
As this is more of a Site Critique than anything else, I've moved it to that section.
Share:
| Cerbera wrote: |
| fixing its width for 1024x768 is not the right decision. |
Johan De Silva / Portfolio
Share:
| Johan007 wrote: |
| No one really minds a bit of horizontal scroll these days [...] |
Share:
| Johan007 wrote: |
| No one really minds a bit of horizontal scroll these days... |
James Coltham - Local gov web manager by day, web and accessibility blogger at lunchtime, freelancer by night. Tweets at @prettysimple.
Share:
3rd'ed here!
Share:
You could also use separate style sheet depending on the size of the screen but it it increases programming, design and limits Web 2.0 features. I see 1024x768 as perfectly acceptable when a large amount of information needs to be displayed.
| James wrote: | ||
|
| Cerbera wrote: |
|
| Phil Teare wrote: |
| 3rd'ed here! |
If it is annoying you all that much then use a monitor with greater than 800x600 resolution or increase the resolution size
What I am trying to get at is we should not be catering for these obsolete screens and people who still hang onto 800x600 expect horizontal scrollbars. And don't use mobiles as a justification as these devices can adapt nicely to any screen size.Johan De Silva / Portfolio
Share:
Well, I'd agree that 640x480 is obsolete. But 800x600 is hanging around for a long time. Low vision users sometimes run 800x600 on moderate or large screens as a low-cost way to get zooming. Low income families seem a likely case, too. I'm not happy about creating barriers for them.
I've yet to come across a mainstream layout (such as BBC's) where a %-based layout would fail to adapt sensibly from 800x600 to 1024x768. But I haven't seen every layout!
Guess I should make a %-based BBC homepage mockup with proper HTML somewhen to show what I mean? Others are welcome to do this as well. BBC have posted here in the past, so maybe they'd see it and make the obvious improvements.
Share:
Cerb, if you do, and you'd like, I don't mind handing it on to some folk there, for their perusal..? Obviously not saying it'll make a difference, but he's always keep to learn new tricks, and he does effect how some fairly prominent sites and areas get developed. Very small chance (pretty much nill I'm guessing) that he'd have sway over the homepage though.
Share: