New site design: Post all feedback here

[sam]

Hi cityride23

The site wasn't outsourced.

The design and build was done by Future plc. Who used to own the site until June 2014. The site build and development was continued by Future until October 2014, Future also launched the adaptive site to 100% of mobile traffic then too.

We Immediate took 'control' then, since October we have done extensive A/B testing on elements of the new design and many user questionaires on the site and held off launching the site fully until december after we had implimented changes that were a result of the user feedback and tests.

We are continuing this process daily.

 

[cityride23]

quick hack fix

Out of curiousity, I decided to take a quick look at the css/code to see how well it can be salvaged, and the results aren't actually that bad. Given I've never seen this code and only spent an hour or less on it, I'd say this css/html can in fact be fixed. Note that columns are hard to debug so I just dumped most of the floats. I don't see a way to attach the css, so here's a temp fix. You can use a firefox/chrome extension https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome stylish to do a per site css update. Save this code into a file, call it: cn-fix.css Then save it somewhere on your system, and you'll tell stylish where to get that. My tests showed a massive improvement, this turns off all the unusable features, and restores density, and gets rid of all the images.

.post-header, .post-content { padding:0px; margin:0px; clear:left;  } .post-figure {display:none;} .list .post-header, .list .post-content, .list .post-footer { margin:0px; padding:0px; } .slider{   overflow-x: visible;   overflow-y: visible;   position: relative; /*display:none;*/ } #homepage .carousel .slider{   height: auto; } .read-more { clear:both; } .median {clear:left;} .widget-title {display:none;} #homepage .carousel.count-3 .post:nth-child(3){ width:auto;} #homepage .carousel .slider .slider-item .post:first-child {   float: left;   width: 45%;   height: auto; } #homepage .carousel{ height:auto;}   #homepage .carousel .post {width:99% !important;} #homepage .carousel.count-3 .post {width:98% !important;}  #homepage .carousel .slider .slider-item .post:first-child {   float: none;   width: 98%;   height: auto; } #homepage .carousel .post .post-header-container, #homepage .carousel.count-3 .post:nth-child(3),  #homepage .carousel .post:nth-child(3) .post-header-container { height:auto !important; width:98% !important; } #homepage .carousel .post-title { padding:0px;margin:0px; } .row-pad {padding:0px;} h1,h2,h3,h4,h5,h6 {margin-bottom:.2em;}

Note again, I'm not trying to do an actual fix here, I was just curious how much I could easily get done. I did this via web developer toolbar's css debugging tools, which allow for live edits of css, and the view css tool, which lets you find what css is running what part of the site. With this css, cycling news is almost usable as a news source, there's a few more things I'd do, get rid of more screen wasting white space, bring the bottom column back up to the top, floated right, but for now it's a massive improvement over what was there on a desktop, now I can actually view, once I actually use this css in non test mode, the news, and it's not too hidden. This also turns off that unusable top scrolling thing, and makes it all linear, so you can see everything that was in it, in just a bit more room. So this is fixable, I was wondering. And it's not that hard to fix either. I suggested the outsourcing as an excuse for the unusable site, just trying to be polite.

 

[cityride23]

Out of curiousity, I decided to take a quick look at the css/code to see how well it can be salvaged, and the results aren't actually that bad.

Given I've never seen this code and only spent an hour or less on it, I'd say this css/html can in fact be fixed.

Note that columns are hard to debug so I just dumped most of the floats.

I don't see a way to attach the css, so here's a temp fix. You can use a firefox/chrome extension https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome stylish to do a per site css update. The below code works as is for firefox, chrome does not support the:
@-moz-document domain(cyclingnews.com) {
....
}
wrapper. This still doesn't fix the jquery slider completely, that's harder to debug but it is a lot better. I'll work on this now and then and see if I can restore cn to a somewhat usable state, and post any updates I do on this for those cycling fans who actually want to read cycling news.

Save this code into a file, call it: cn-fix.css
Then save it somewhere on your system, then copy and paste it into stylish by creating a new rule.

My tests showed a massive improvement, this turns off many the unusable features, and restores density, and gets rid of all the images. I would say it would take about 8 to 16 hours to actually produce a real css file for commercial use, give or take, though some of the html structures are sub optimal for actually dealing with this site in this way. Time to fix would depend mostly on how stubborn some people would be about admitting their mistakes and being willing to fix them.

@-moz-document domain([cyclingnews.com) {
.post-header, .post-content {
padding:0px;
margin:0px;
clear:left;
}
.post-figure {display:none;}
.list .post-header, .list .post-content, .list .post-footer {
margin:0px;
padding:0px;
}
.slider{
overflow-x: visible;
overflow-y: visible;
position: relative;
/*display:none;*/
}
#homepage .carousel .slider{
height: auto;
}
.read-more {
clear:both;
}
.median {clear:left;}
.widget-title {display:none;}
#homepage .carousel.count-3 .post:nth-child(3){
width:auto;}
#homepage .carousel .slider .slider-item .post:first-child
{
float: left;
width: 45%;
height: auto;
}
#homepage .carousel{
height:auto;}


#homepage .carousel .post {width:99% !important;}
#homepage .carousel.count-3 .post {width:98% !important;}

#homepage .carousel .slider .slider-item .post:first-child
{
float: none;
width: 98%;
height: auto;
}
#homepage .carousel .post .post-header-container,
#homepage .carousel.count-3 .post:nth-child(3),
#homepage .carousel .post:nth-child(3) .post-header-container {
height:auto !important;
width:98% !important;
}
#homepage .carousel .post-title {
padding:0px;margin:0px;
}
.row-pad {padding:0px;}
h1,h2,h3,h4,h5,h6 {margin-bottom:.2em;}

}

Note again, I'm not trying to do an actual fix here, I was just curious how much I could easily get done. I did this via web developer toolbar's css debugging tools, which allow for live edits of css, and the view css tool, which lets you find what css is running what part of the site.

With this css, cycling news home page is almost usable as a news source, there's a few more things I'd do, get rid of more screen wasting white space, bring the bottom column back up to the top, floated right, but for now it's a massive improvement over what was there on a desktop, now I can actually view, once I actually use this css in non test mode, the news, and it's not too hidden. This also turns off that unusable top scrolling thing, and makes it all linear, so you can see everything that was in it, in just a bit more room. I didn't test it on inner pages, which all suffer from the same issues.

So this is fixable, I was wondering. And it's not that hard to fix either.

I suggested the outsourcing as an excuse for the unusable site, just trying to be polite.

 

[TheGame]

you can use stylebot for chrome and opera, works pretty well as you can edit pretty much every element of the css

For instance, with stylebot i can hide that really annoying big image at the start of every article and unneeded titles as well as the related topics box

So, article pages for me now look like this

instead of this

Seriously, which looks better?

And that gets me a lot more of the article on my screen initially, in fact almost the whole of the text. The other interesting side effect from that, is while i am reading the text the lovely advert for "deals of the week" is visible on screen the whole time, as opposed to when you have that huge picture at the beginning, in scrolling past the picture, you also scroll the advert off screen

and little things like removing pointless whitespace

 

[TheGame]

images are being handled really weird as well. All the portrait images being cut down to landscape thumbs, but the positioning of the image staying at the top of the picture

 

[Pete]

I'm not sure I understand the hyperbole about "stubborn developers", "getting defensive" or "admitting mistakes". As has been mentioned, no one on the team here at Immediate was involved with the Cyclingnews.com design you're seeing now. That's very liberating in the sense that we have no reason to be stubborn or defensive, because it isn't our creation. We can work on the changes we feel will make genuine improvements, and not find ourselves holding onto something for the sake of being attached to it. On the flip side, that does mean we share a lot of your frustrations because we recognise many of the shortcomings and issues being raised.

Spontaneously adopting new layout changes is not a sensible solution, however. The forum feedback may seem "overwhelming" in isolation, because it's similar feedback from a group of like-minded users. But we are getting feedback from other channels, as well as stats and analytics (I'm pleased to say that users are not "leaving in their hordes"). Some of it is positive, but even some of the negative comments have a slightly different perspective than the comments here. Different users are commenting on different areas of the site. Not everyone feels exactly the same about the new design, whether positively or negatively, so it'd be irresponsible of us to make hasty fixes based on one particular segment of feedback. There might be users who react negatively to those changes, too. It's certainly not black and white; response to the new design has been quite subjective, even though it may not seem that way looking at just the forum-centric feedback.

As we've tried to reassure those making very valid points here, we're not sitting back and putting our feet up, thinking "job well done". We're very conscious of the feedback, and are actively working on fixes and improvements. But in the interest of making those changes worthwhile, we're going to be looking at all of the feedback - including, but not limited to, the suggestions in this thread - and making them over time. We'll be continuing to A/B test on a feature-by-feature basis, rolling out improvements wherever we can.

 

[avanti]

After using the new format for a week or so I can say it is harder to follow than the prior website. Especially what I miss is the old left page column listing current and older races with each entry having subtitles such as history, riders, stages, pictures and of course race dates.

In fact I spend less time looking at Cyclingnews.com than I did before the change.

Thanks for listening.

 

[rote_laterne]

The fact that anyone has to explain to the site operators why presenting basiclaly no usable information per screen scoll on a news site that offered easily the best at a glance cycling overview anywhere to me shows there is a fundamental problem with the people tasked with trying to deal with this mess, the concepts are so simple, it's not about 'being used to something', it's about this site FAILING TO DELIVER cycling news efficiently. If this is too complicated to get across, then there is no real hope of this site getting fixed any time soon. I realize there is a problem with bruised egos etc that don't want to admit that this is a messed up rollout.

spot on.
.....

 

[PeterB]

spot on.
.....

Hey, it was not them who made up this new messed-up design, it was those lunatics at Future, and Immediate had no other choice but use what they got..! No other choice, I'm telling you. And people at forum who have no idea what it means to write a line of code (though some somehow manage to know a thing or two about web development) keep throwing blame at them! That's unfair!

 

[gregghoush]

I'm not sure I understand the hyperbole about "stubborn developers", "getting defensive" or "admitting mistakes". As has been mentioned, no one on the team here at Immediate was involved with the Cyclingnews.com design you're seeing now. That's very liberating in the sense that we have no reason to be stubborn or defensive, because it isn't our creation. We can work on the changes we feel will make genuine improvements, and not find ourselves holding onto something for the sake of being attached to it. On the flip side, that does mean we share a lot of your frustrations because we recognise many of the shortcomings and issues being raised.

Spontaneously adopting new layout changes is not a sensible solution, however. The forum feedback may seem "overwhelming" in isolation, because it's similar feedback from a group of like-minded users. But we are getting feedback from other channels, as well as stats and analytics (I'm pleased to say that users are not "leaving in their hordes"). Some of it is positive, but even some of the negative comments have a slightly different perspective than the comments here. Different users are commenting on different areas of the site. Not everyone feels exactly the same about the new design, whether positively or negatively, so it'd be irresponsible of us to make hasty fixes based on one particular segment of feedback. There might be users who react negatively to those changes, too. It's certainly not black and white; response to the new design has been quite subjective, even though it may not seem that way looking at just the forum-centric feedback.

As we've tried to reassure those making very valid points here, we're not sitting back and putting our feet up, thinking "job well done". We're very conscious of the feedback, and are actively working on fixes and improvements. But in the interest of making those changes worthwhile, we're going to be looking at all of the feedback - including, but not limited to, the suggestions in this thread - and making them over time. We'll be continuing to A/B test on a feature-by-feature basis, rolling out improvements wherever we can.

Yes, but in another post it states clearly that you did extensive A/B testing before launching this. Having done this for more than 20 years now, I just can't believe that. Extensive A/B testing, stressing the extensive, would have quite clearly shown that this new design is completely unusable. I have run A/B tests on sites with 100,000 uniques a week, and sites with 1,000,000 uniques an hour. This design would not have made it out of any test I ever did. So you are trying to sell us something that just doesn't add up. That is one of the big reasons its so hard on this side.

Minor fixes and tweaks are not going to solve this. The biggest problems are still that it is "responsive" only in name. I am sitting here on a computer with 3 40+ inch screens (42", 42", 46") and no matter how wide I choose to make the page the Races section doesn't move up next to the news section. That is pretty much one of the most basic responsive designs. Instead of any columns or sections moving around to adjust to my screen size, I get a very thin sliver in the center of the screen, that never changes size.

Now its easy to write me off as an edge case, and with my monitor setup I am one. But the thing I described there is not related to just how much of an edge case my setup is. Because its the same problem on my 15" laptop. My big setup just really lets me see how bad it is.

 

[sam]

Yes, but in another post it states clearly that you did extensive A/B testing before launching this. Having done this for more than 20 years now, I just can't believe that. Extensive A/B testing, stressing the extensive, would have quite clearly shown that this new design is completely unusable. I have run A/B tests on sites with 100,000 uniques a week, and sites with 1,000,000 uniques an hour. This design would not have made it out of any test I ever did. So you are trying to sell us something that just doesn't add up. That is one of the big reasons its so hard on this side.

Minor fixes and tweaks are not going to solve this. The biggest problems are still that it is "responsive" only in name. I am sitting here on a computer with 3 40+ inch screens (42", 42", 46") and no matter how wide I choose to make the page the Races section doesn't move up next to the news section. That is pretty much one of the most basic responsive designs. Instead of any columns or sections moving around to adjust to my screen size, I get a very thin sliver in the center of the screen, that never changes size.

Now its easy to write me off as an edge case, and with my monitor setup I am one. But the thing I described there is not related to just how much of an edge case my setup is. Because its the same problem on my 15" laptop. My big setup just really lets me see how bad it is.

Cool 1 million uniques an hour, what site was that?

Oddly CYN only is responsive up to 1000px due to advertisement requirements - we are looking at solutions around this as thats not really good enough.

 

[Armchair cyclist]

That is, I agree confusing...

I see that http://www.cyclingnews.com/races/classic-sud-ardche-souvenir-francis-delpech-2015/results is referred to a "report" and takes you directly to a page headed "Report" but under a well hidden secondary header "race results" then it just lists the results...

Fault acknowledged, but nothing done about it. Rather like the failure to do anything about the lack of diacritics in the forum, this does not speak to a high respect for readers.

 

[Pete]

Yes, but in another post it states clearly that you did extensive A/B testing before launching this. Having done this for more than 20 years now, I just can't believe that. Extensive A/B testing, stressing the extensive, would have quite clearly shown that this new design is completely unusable.

I suppose there isn't much more I can say on this. The feedback we've received, and results of testing, show that not all users agree with your statement. Plenty of users are finding the site usable, or at the very least haven't shared those criticisms with us. But that's why we're continuing to get feedback. We're not saying "the results of the A/B test don't match your opinion, so you're wrong". Perhaps the randomised group of users viewing the design during testing were more receptive to this kind of layout, or simply less forthcoming with their criticisms. Whatever the reason, what we are saying is "your opinion is a little different to the results of the A/B test - please tell us more so we can make improvements". Surely that's a positive?

Minor fixes and tweaks are not going to solve this.

Agreed. We're fully prepared to make changes beyond that, but are concerned that rushing into big adjustments so soon after the launch would compound the issue. Design updates are being looked at, discussed and prototyped. We're not limiting ourselves to minor fixes and tweaks at all, but the changes will come out in smaller steps to ensure we're getting feedback and iterating in the right direction.

 

[sam]

Fault acknowledged, but nothing done about it. Rather like the failure to do anything about the lack of diacritics in the forum, this does not speak to a high respect for readers.

Yes, fault is acknowledged - you may see the other race has a full report attached now?

This race has no report, Myself and the design team are currently working on a solution to this issue to make it clear what is a report and ones that are just results.

The way it works editorially is that the results get posted straight after the race then the report follows.

Sorry I couldn't get you a solution this week.

 

[Armchair cyclist]

Yes, fault is acknowledged - you may see the other race has a full report attached now?

This race has no report, Myself and the design team are currently working on a solution to this issue to make it clear what is a report and ones that are just results.

The way it works editorially is that the results get posted straight after the race then the report follows.

Sorry I couldn't get you a solution this week.

It looks like you are trying to find a complicated fix to a very simple problem. For as long as you only have results, label the link as "results". When that is upgraded to a report, change the text on the link to "Report".

If the default is that results precede report (which is logical), then the default template should say results: it is one very brief task for whoever posts the fuller report: deleting 5 letters and typing 4.

How does that require the intervention of a design team? Why should it take any longer than the time taken to type the 5 letters that are different?

Sledgehammers and nuts don't even come close.

 

[Armchair cyclist]

I don't see a way to attach the css, so here's a temp fix. You can use a firefox/chrome extension https://addons.mozilla.org/en-US/firefox/addon/stylish/?src=external-userstyleshome stylish to do a per site css update. The below code works as is for firefox, chrome does not support the:
@-moz-document domain(cyclingnews.com) {....} wrapper. This still doesn't fix the jquery slider completely, that's harder to debug but it is a lot better. I'll work on this now and then and see if I can restore cn to a somewhat usable state, and post any updates I do on this for those cycling fans who actually want to read cycling news.

Save this code into a file, call it: cn-fix.css
Then save it somewhere on your system, then copy and paste it into stylish by creating a new rule.

Many thanks for this.

I am by no means a programming expert (I was taught a little bit of BASIC in 1980), but I was able to use this, and it is a definite improvement in utility. I did have to make one slight change though: in the opening line, I had to remove the square bracket within the round brackets in the first line:
@-moz-document domain(cyclingnews.com) rather than
@-moz-document domain([cyclingnews.com)

 

[Peter 22]

Straight to the text

Don't like to have to scroll through 450 pictures before I reach the results. How about a quick link?

 

[sam]

It looks like you are trying to find a complicated fix to a very simple problem. For as long as you only have results, label the link as "results". When that is upgraded to a report, change the text on the link to "Report".

If the default is that results precede report (which is logical), then the default template should say results: it is one very brief task for whoever posts the fuller report: deleting 5 letters and typing 4.

How does that require the intervention of a design team? Why should it take any longer than the time taken to type the 5 letters that are different?

Sledgehammers and nuts don't even come close.

Thanks for your comments, I will keep this in mind - as you may notice that the race pages looks a mess - this is why the design team is looking at it.

 

[rote_laterne]

Yes, fault is acknowledged - you may see the other race has a full report attached now?

This race has no report, Myself and the design team are currently working on a solution to this issue to make it clear what is a report and ones that are just results.

The way it works editorially is that the results get posted straight after the race then the report follows.

Sorry I couldn't get you a solution this week.

Why should we give feedback when nothing changes? The "reports" of the prologue and Stage 2 of Driedaagse van West-Vlaanderen, a race that started AFTER Armchair cyclist made you aware that links named report simply lists results also only list the results.
The races are a mess as they are not chronologically listed. I for one don't go to your site for race results anymore. Good work.

 

[sam]

Why should we give feedback when nothing changes? The "reports" of the prologue and Stage 2 of Driedaagse van West-Vlaanderen, a race that started AFTER Armchair cyclist made you aware that links named report simply lists results also only list the results.
The races are a mess as they are not chronologically listed. I for one don't go to your site for race results anymore. Good work.

I can only do so much work a week, the site isn't powered by magic pixies.

You can find races listed in order http://www.cyclingnews.com/races/calendar/ there, the others are ordered by editorial teams.

 

[fishtacos]

Using Firefox on a mac, the picture galleries at the top of an article display as full images rather than thumbnails, requiring one to scroll halfway down a page to get to the actual article text. Chrome displays the galleries correctly. At least on the last version of the site I could read the article and look at about half the gallery before it blew up.

To be honest, there are so many issues with the site in Firefox/mac that it's pretty much unusable, like the mobile site on Safari.

And, while I'm at it - the new layout is really, really bad. The quite decent hierarchical structure of the former site is lost, race results are pushed down below the fold, ads are given equal sizing/importance to content, live reports are much harder to read, races aren't listed chronologically... I've been checking cyclingnews daily for more years than I can count, and now I'm looking at other sites much more often.


Don't even get me started on the click-bait "Promoted Stories" garbage at the bottom of every page.

 

[TANK91]

I think its poor im sorry but the layout stinks.

 

[sam]

Using Firefox on a mac, the picture galleries at the top of an article display as full images rather than thumbnails, requiring one to scroll halfway down a page to get to the actual article text. Chrome displays the galleries correctly. At least on the last version of the site I could read the article and look at about half the gallery before it blew up.

To be honest, there are so many issues with the site in Firefox/mac that it's pretty much unusable, like the mobile site on Safari.

And, while I'm at it - the new layout is really, really bad. The quite decent hierarchical structure of the former site is lost, race results are pushed down below the fold, ads are given equal sizing/importance to content, live reports are much harder to read, races aren't listed chronologically... I've been checking cyclingnews daily for more years than I can count, and now I'm looking at other sites much more often.


Don't even get me started on the click-bait "Promoted Stories" garbage at the bottom of every page.

Hi, would you mind sending over some screenshots of what you see and your Firefox version number please?

What makes the site unusable on Safari?

 

[mewmewmew13]

I'm on Safari..I have to go to first page to log in ..then need to reclick on "log in" to get the window to go away..then have to go back and click on "forums"

Besides the general loathing over the horrible new layout what might be a time frame for fixing the login process?

 

[TheGame]

Many thanks for this.

I am by no means a programming expert (I was taught a little bit of BASIC in 1980), but I was able to use this, and it is a definite improvement in utility. I did have to make one slight change though: in the opening line, I had to remove the square bracket within the round brackets in the first line:
@-moz-document domain(cyclingnews.com) rather than
@-moz-document domain([cyclingnews.com)

If you have chrome, there is a plugin called stylebot.

And here is a custom css for CN that works with it that totally changes the front page. (you need it in conjuction with ad block though)

http://stylebot.me/styles/9042