Blogs An update on the redesign

Did I mention that I like the new design?

 

Indeed this is one of the reasons I stick with bit-tech, despite the zillions of other tech sites in existence. There's much more of a sense of community with the bit-tech staff.

 

I'm using a computer thats not mine right now, and it runs Opera 9.51 (don't know if thats current)
Anyway there's a glitch in the "header Bars"

Looks like this (can`t take a picture) imagine the dots gone, space doesn't work for formatting)

HO..HARDWA..MODDI..GAMI..BI..BL
ME..RE............NG........NG......T...OG
..............................................S

Revie..Featu..Previe
ws......res......ws

Also, theres no way to "go to the Forum" from "Comments"

 

Yes, I did that too!

Can the 'discuss in the forums' button be at the top of the comments please, next to where it says 'reply', instead of having to scroll down to the bottom of the comments to click the link to the forum for that article?

 

Overall, I prefer the new Bit Tech website.

I understand that changes needed to happen and I welcome new fresh designs.

The higher quantity of news articles on the homepage has its advantages by obviously maintaining longer periods of exposure for each recent article. The only negative to that would be that, for regular bit tech visitors, the homepage can look very similar to how it may have looked days before, giving the impression that not much new 'news' has happened. I suppose a visitor could go away for a few weeks, return, and not feel they have missed out on much. Apart from this, and one or two other extremely minor negative points, the new look is great.

 

I've done a little tweaking in Stylish, and I've made the site look (I think) more than half-way decent for a widescreen monitor. I've even kept the ads (what ads I could, the background ad is a loss unfortunately) intact, as these screenshots show:





It should work well at higher resolutions than mine (1680x1050), but as this is all I've got, it's all I can test it on.

 

Yeah, now try reading it.

There's a reason newspaper/magazines use narrow columns.

 

I do read it. It's how I have the site set up by default now, and it's a lot less tiring and less work than having to read back and forth again and again. It also means there is much less scrolling to do.

And, contrariwise, there is a reason why books don't use columns. The reason newspapers use columns is so that the page is readable even when folded. That is not an issue with online media, as you don't fold your monitor.

Besides, it's not like I'm forcing this on everyone. If you want it, you can load it into Stylish yourself, and if you don't, you don't have to.

Here's the CSS to paste into Stylish (Give it whatever name you like):

Code:

@namespace url(http://www.w3.org/1999/xhtml);
/* For all pages under www.bit-tech.net... */
@-moz-document domain("www.bit-tech.net") {

/* Set things up for 100% width... */
.pageContainer {
   width: auto !important;
}
.grid_18 {
   width: 100% !important;
}

/* Position the nav container background correctly. */
.navContainer {
   background-position: top center !important;
}

/* Give the feature blocks a width. Then the smaller headlines can float to the right */
.singleFeatureBlock, .doubleFeatureBlock, .tripleFeatureBlock {
   width: 406px !important;
   margin-right: 10px !important;
}
.alpha.grid_8.omega {
   width: auto !important;
   position: inherit !important;
}

/* Front page articles list. Set width of each article to 406px and let floating wrap them */
.grid_8 {
   width: 100% !important;
}
.grid_8 .listBlock {
   width: 100% !important;
}
.grid_8 ul.articles {
   width: 100% !important;
}
.grid_8 ul.articles li {
   width: 406px !important;
   float: left !important;
   clear: none !important;
   padding-right: 5px;
}

/* Headers for lists are 100% wide and breaking - causing a hard break */
.listBlock h2 {
   float: none !important;
   clear: left !important;
}

/* Set up the frontpage columns. */
/* If you want column 2 to be only 1 story wide, (for narrower screens):

#column_1.grid_8 {
   width: auto !important;
   margin-right: 515px !important;
}
#column_2.grid_4 {
   margin-left: -505px !important;
   width: 200px !important;
}

As it is, however, this works well for 1680x1050, at the very least.
*/

#column_1.grid_8 {
   width: auto !important;
   margin-right: 715px !important;
}
#column_2.grid_4 {
   margin-left: -705px !important;
   width: 400px !important;
}
#column_2.grid_4 .listBlock li {
   width: 185px !important;
   float: left !important;
   clear: none !important;
   margin: 4px 0px !important;
   padding-left: 10px !important;
}
#column_2.grid_4 ul {
   width: 100% !important;
}
#column_3 {
   margin-left: -302px !important;
}

/* Set up the article page columns */
#column_1.grid_12 {
   width: auto !important;
   margin-right: 305px !important;
}
#column_2.grid_6 {
   position: absolute !important;
   right: 0px !important;
}

/* Purely cosmetic. For some reason on FF, this is a little too wide, so narrow it. */
.search input {
   width: 150px !important;
}
}

 

I find narrower columns easier to read because it's easier for the eye to go the next line when flicking back to the left.

I'm amazed you found it so bad that you went to the effort tbh.

 

Yeah, making it wider has the ironic effect of putting even more information on the page - something many people were complaining about even with the current fixed-width design. In fact, although I said before that it was too narrow and would like it to be wider, now that I've seen what it could potentially look like I'm glad it's the way it is now.

 

Got to say, I'm not a fan (you shouldn't expect me to be, given that I played a fairly big part in the redesign); super wide sites just aren't good. *However*, I think the fact you've made the code available for people to try is pretty cool

 

Some people have suggested that having the content in columns is the way to go, to aid readability. Fortunately (in Firefox and Webkit, at least), this is a simple matter:

Code:

@namespace url(http://www.w3.org/1999/xhtml);
/* For all pages under www.bit-tech.net... */
@-moz-document domain("www.bit-tech.net") {

/* Set things up for 100% width... */
.pageContainer { width: auto !important; }
.grid_18 { width: 100% !important; }

/* Position the nav container background correctly. */
.navContainer { background-position: top center !important; }

/* Give the feature blocks a width. Then the smaller headlines can float to the right */
.singleFeatureBlock, .doubleFeatureBlock, .tripleFeatureBlock {
   width: 406px !important;
   margin-right: 10px !important;
}
.alpha.grid_8.omega {
   width: auto !important;
   position: inherit !important;
}

/* Front page articles list. Set width of each article to 406px and let floating wrap them */
.grid_8 {width: 100% !important; }
.grid_8 .listBlock { width: 100% !important; }
.grid_8 ul.articles { width: 100% !important; }
.grid_8 ul.articles li {
   width: 406px !important;
   float: left !important;
   clear: none !important;
   padding-right: 5px;
}

/* Headers for lists are 100% wide and breaking - causing a hard break */
.listBlock h2 {
   float: none !important;
   clear: left !important;
}

/* Set up the frontpage columns. */
/* If you want column 2 to be only 1 story wide, (for narrower screens):

#column_1.grid_8 {
   width: auto !important;
   margin-right: 515px !important;
}
#column_2.grid_4 {
   margin-left: -505px !important;
   width: 200px !important;
}

As it is, however, this works well for 1680x1050, at the very least.
*/

#column_1.grid_8 {
   width: auto !important;
   margin-right: 715px !important;
}
#column_2.grid_4 {
   margin-left: -705px !important;
   width: 400px !important;
}
#column_2.grid_4 .listBlock li {
   width: 185px !important;
   float: left !important;
   clear: none !important;
   margin: 4px 0px !important;
   padding-left: 10px !important;
}
#column_2.grid_4 ul { width: 100% !important; }
#column_3 { margin-left: -302px !important; }

/* Set up the article page columns */
#column_1.grid_12 {
   width: auto !important;
   margin-right: 305px !important;
}
#column_2.grid_6 {
   position: absolute !important;
   right: 0px !important;
}

/* Purely cosmetic. For some reason on FF, this is a little too wide, so narrow it. */
.search input { width: 150px !important; }

/* Some people wanted columns. Can do! */
.articleCopy {
   -moz-column-count: 2;
   -webkit-column-count: 2;
}

}

That will put the text into 2 columns for you. (The only thing that's different to the last version is the ".articleCopy" definition at the bottom there.) Still works (And looks) great @ 1680x1050.

 

Please please please mobile version.... would be soooo sweet!