1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Blogs An update on the redesign

Discussion in 'Article Discussion' started by Sifter3000, 20 Apr 2010.

  1. perplekks45

    perplekks45 LIKE AN ANIMAL!

    Joined:
    9 May 2004
    Posts:
    6,428
    Likes Received:
    721
    Did I mention that I like the new design? ;)
     
  2. Byron C

    Byron C Probably isn't Hitler, but definitely a muppet

    Joined:
    12 Apr 2002
    Posts:
    6,299
    Likes Received:
    1,288
    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.
     
  3. Xir

    Xir Well-Known Member

    Joined:
    26 Apr 2006
    Posts:
    5,311
    Likes Received:
    93
    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"
     
  4. mrbens

    mrbens New Member

    Joined:
    15 Aug 2009
    Posts:
    511
    Likes Received:
    4
    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?
     
  5. tron

    tron New Member

    Joined:
    12 May 2009
    Posts:
    253
    Likes Received:
    11
    Overall, I prefer the new Bit Tech website. :thumb:

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

    Anakha Member

    Joined:
    6 Sep 2002
    Posts:
    587
    Likes Received:
    7
    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:

    [​IMG]
    [​IMG]
    [​IMG]

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

    jezmck Well-Known Member

    Joined:
    25 Sep 2003
    Posts:
    4,456
    Likes Received:
    36
    Yeah, now try reading it.

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

    Anakha Member

    Joined:
    6 Sep 2002
    Posts:
    587
    Likes Received:
    7
    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;
    }
    }
     
  9. jezmck

    jezmck Well-Known Member

    Joined:
    25 Sep 2003
    Posts:
    4,456
    Likes Received:
    36
    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.
     
  10. smc8788

    smc8788 ...at least I have chicken

    Joined:
    23 Apr 2009
    Posts:
    5,969
    Likes Received:
    272
    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.
     
  11. Sifter3000

    Sifter3000 I used to be somebody

    Joined:
    11 Jul 2006
    Posts:
    1,766
    Likes Received:
    26
    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 :)
     
  12. Anakha

    Anakha Member

    Joined:
    6 Sep 2002
    Posts:
    587
    Likes Received:
    7
    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.
     
  13. Chaos_Engine

    Chaos_Engine New Member

    Joined:
    16 May 2010
    Posts:
    21
    Likes Received:
    0
    Please please please mobile version.... would be soooo sweet!
     
Tags: Add Tags

Share This Page