phpBB goes all CSS / tablefree

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • ---MAD---
    Senior Member
    • Jun 2005
    • 2522
    • 3.8.x

    #61
    Originally posted by Wayne Luke
    AlexanderT already stated that a couple of posts above this one.
    So it improves loading speed?

    Comment

    • Dream
      Senior Member
      • Mar 2001
      • 1898
      • 3.6.x

      #62
      And makes standards zealots happy

      /run
      Radio and TV Player for vBulletin

      Comment

      • Dean C
        Senior Member
        • Mar 2002
        • 4571
        • 3.5.x

        #63
        Originally posted by ---MAD---
        So it improves loading speed?
        Minutely, but remember it can only deliver it as fast as the server it's on. There are many factors involved in delivering a page to your browser, not just filesize
        Dean Clatworthy - Web Developer/Designer

        Comment

        • Dream
          Senior Member
          • Mar 2001
          • 1898
          • 3.6.x

          #64
          I take out what I said, a cleaner code, easier to understand and modify is better, given CSS does that.
          Radio and TV Player for vBulletin

          Comment

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73976

            #65
            Originally posted by ---MAD---
            So it improves loading speed?
            As Dean says, Theoretically.

            As long as you have the proper knowledge and training, XHTML/CSS design gives you several concrete benefits.

            These can include:
            • Better Presentation of information.
            • Accessibility.
            • Usability in multiple clients.
            • Faster presentation speed.
            However the learning curve is more strict than slapping code in an HTML document and going with it. Go look at www.csszengarden.com. All the designs use the same XHTML but different CSS files. Some are good. Some are very "artsy" but impractical. Others are just plain impractical for most people.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment

            • ---MAD---
              Senior Member
              • Jun 2005
              • 2522
              • 3.8.x

              #66
              Originally posted by Wayne Luke
              As Dean says, Theoretically.

              As long as you have the proper knowledge and training, XHTML/CSS design gives you several concrete benefits.

              These can include:
              • Better Presentation of information.
              • Accessibility.
              • Usability in multiple clients.
              • Faster presentation speed.
              However the learning curve is more strict than slapping code in an HTML document and going with it. Go look at www.csszengarden.com. All the designs use the same XHTML but different CSS files. Some are good. Some are very "artsy" but impractical. Others are just plain impractical for most people.
              Thats the sort of explanation I was after - thanks .

              Comment

              • Cromulent
                Senior Member
                • Oct 2005
                • 627
                • 3.8.x

                #67
                The major benefit on a CSS based site is ease of coding. I find all the nested tables in vBulletins default template highly confusing, in fact so confusing I have decided to leave it as it is so that I don't end up mucking anything up. On the other hand CSS based sites are much easier to read the code and understand, thus making design and implementation that much faster (and in my case possible at all).

                Comment

                • JakeS
                  Senior Member
                  • Jul 2005
                  • 1975

                  #68
                  Well guys, as long as they work I don't care if it has tables or not.

                  Comment

                  • Zachery
                    Former vBulletin Support
                    • Jul 2002
                    • 59097

                    #69
                    There are very few nested tables within vBulletin.

                    Comment

                    • filburt1
                      Senior Member
                      • Feb 2002
                      • 6606

                      #70
                      Originally posted by DirectPixel
                      The "proper" way to code a page begins with separating your content from your layout. This involves using CSS to style your page and coding your page for content only, using proper XHTML.

                      The next step involves properly coding your XHTML content. While it's nice to have your code validate in W3C's XHTML validator, it's more important that you are coding your page in a semantically correct way. For example, you should divide out the different sections of your page using <div> tags (without unnecessarily nesting multiple <div>'s), marking up your paragraphs using <p> tags, using a heading system that uses the <h1>, <h2>, <h3>, etc. tags, and creating numbered or unordered lists where appropriate (for navigation or lists, for example).

                      Increasingly, an industry "best practice" involves coding not only for your standard Mozilla Firefox/Internet Explorer browser with standard settings, but also for those who are using accessibility enhancements, such as enlarged font sizes, high-contrast display settings, image-less or style-less display settings, and also for limited screen sizes as well.

                      By separating your content from your layout, it is possible to address all the needs of your users with relatively few changes, if any at all, to your content code.
                      If it wasn't for you hunting me down and killing me, I'd rip that post and dump it directly in the paper I'm writing at work. Another developer and I there are finally getting pissed off at sites that use even the slighest presentational markup, so I've been assigned the task of writing said paper to force my ways upon them. It's fun because I get to be a dictator for six developers--four if you exclude myself and the other developer who already codes semantically.

                      There is no reason at all that vBulletin, any other forum, any other web application, or any other web page cannot be coded semantically for IE6, IE7, Firefox, Opera 9, and Safari, which covers more than 99% of browser usage to date and will be 99.9% in the future. The only reason vBulletin is unsemantic now is to support old-ass useless garbage browsers that don't understand CSS--and the entire point of using CSS to separate style from content renders that point moot too since the page should still be just as usable as with CSS off.

                      View a page with CSS on and CSS off. If the version with CSS off still has things like colors, columns, layout images, or other formatting (other than headers, emphasis, etc.), then your code is wrong. No argument for that that I can't attack. I have no tolerance for unsemantic code anymore.

                      Lots of double negatives in that paragraph.

                      And I'm aware of the hypocrisy of my very own site using tables liberally. I had no choice unless I wanted to rewrite nearly every single vBulletin template--and indeed, I did rewrite most of the major ones (forumhome, forumdisplay, showthread, postbit, etc.). The next version of my site won't contain a shred of unsemantic code, no matter what it takes. Period.


                      edit: I'll quote some select passages from my article thus far:
                      ever use a table unless you are representing tabular data. For example, a table is completely appropriate when you want to present a list of article names, view counts, and actions to the user, because you are naturally displaying a table. It is not correct to use a table if you want a left column and right column for layout, as that is not tabular data and defines presentation, not structure. Tables are sometimes appropriate! However, for most conventional uses, they are not.
                      On why to use semantic code:
                      It'll render the same either way, right? The reasons are the same as using CSS in the first place: it lets you separate style from content, and therefore it makes it very easy to update all pages' appearances, just like using includes is easier than using Dreamweaver templates. It also has some benefits you might not have though of.

                      How many times has a client asked that headers have underlines removed, or made bold, or changed color? If such headers were merely formatted using presentational tags, then it would take a long time to go through every page on the site and remove those tags rather than adding literally one line of code to a CSS document.

                      Google and other search engines read your document through the source code and not like a human would. It will know that headers carry more importance than other text in a document, for example, and the only way to tell Google that a header is indeed a header is to use the appropriate tag rather than a combination of <strong> and other formatting tags.

                      Mobile users could have the ability to view your page with CSS off. It is true—in fact, a very good sign"that your page will look completely different with CSS on and off, but it means much faster render times for mobile users.

                      In fact, I personally find it faster to develop with CSS than with presentational markup. I'll often write the markup for the PSD a designer provided without thinking of the design in mind at all, instead reading the text on the PSD and structuring it into markup. This means you can have most of the markup done within literally 15 minutes—15 minutes! From there, I create the CSS, adding necessary (but still semantic) elements to the HTML as necessary.
                      Semantic Does Not Mean "use <div>s"

                      Semantic means to write markup that defines the structure of a document. This does not mean filling the design with <div> tags because that is what people associate CSS with. Rather, you should use the right tag for the right situation.
                      Validate

                      The fastest, but hardly the most effective, solution is to write your code using the XHTML 1.0 Strict—not transitional—document type. While Transitional allows many presentational elements such as <center>, XHTML 1.0 Strict does not. Use the W3C Markup validator on a document with XHTML 1.0 Strict to quickly find many uses of presentational code. The next release of XHTML, which is supported by all browsers except IE (and it doesn't fully support it for one very minor HTTP issue), completely disallows presentational code and, even more strictly, won't even render the effects you used in your markup at all.

                      Even beyond the benefits of detecting presentational code, validating your document ensures the browser is parsing it as you told it to and not just inventing rules on its own to try to adapt to a broken document. If something bewildering is happening with even the simplest test, validate your code because it's quite possible you forgot to close a tag.
                      View with CSS off

                      Your page should look nothing like it does normally with CSS off. It should be 90% or more text with no colors whatsoever. If you see bits of the layout (images, logos for the site, columns, and so on), you are doing something wrong and using presentational, unsemantic code.

                      Internet Explorer buries its CSS option in the Advanced options of Internet Options. Firefox has it in its options. In Opera, switch to "User Mode" to turn off CSS. You can add a button to do this to Opera's toolbar, making it a one-click process to view your page with and without CSS.
                      Reflect

                      Think about every tag you are using. When you are using a div, are you saying "this is a group of content" or "I want this content to appear this way?" When you use an image, is it showing an image that goes along with the text or is it part of the layout? If you are using a tag for the intent of making it appear a certain way, you are using the tag improperly or not using the correct tag at all. In reality, your page will rarely contain floods of divs. Your CSS will likely be two or three times as many lines as the markup itself, which is actually good.
                      Long ranting posts FTW.
                      Last edited by filburt1; Thu 22 Mar '07, 7:25pm.
                      --filburt1, vBulletin.org/vBulletinTemplates.com moderator
                      Web Design Forums.net: vB Board of the Month
                      vBulletin Mail System (vBMS): webmail for your forum users

                      Comment

                      • Chousho
                        Senior Member
                        • Jan 2004
                        • 967
                        • 3.8.x

                        #71
                        This is a bit interesting, but there's that saying going through my head:

                        "Put a rabid dog in a pretty package and it's still a rabid dog".


                        Maybe I messed up the quote somehow, but you get the idea.

                        Comment

                        • Kier
                          Former Lead Developer, vBulletin
                          • Sep 2000
                          • 8179

                          #72
                          There is absolutely no doubt that semantic XHTML styled with CSS is the way forward and that the use of tables for layout purposes is yesterday's technique.

                          The vBulletin development team has done several experiments with this method of producing pages and we will be employing it for vBulletin 4.

                          However, these experiments also identified several points which mean that, as Wayne rightly pointed out earlier in this thread, there is no way that we can or will switch to an entirely CSS-driven template system for the vBulletin 3.x system.

                          Firstly, we aim to maintain backward compatability for the most part between versions x.y and x.y+1 and the change to an entirely CSS-based system would completely destroy this. We'd be looking at rewriting every single template from the ground up to achieve a semantic XHTML + CSS base.

                          Secondly, CSS lends itself to a very different way of laying out pages. Many of the interface elements in vBulletin 3.x simply cannot be reproduced using CSS alone without major hacking, and we'd like to avoid that. For this reason, we decided to stick with the current system for the time being and then start again with a clean slate for vBulletin 4.0, which will most likely look very different from the current 3.x style.

                          Thirdly, the vBulletin 3.x style is built around a fairly small group of CSS classes, each of which do little more than define background and foreground colors, text styling and in some cases some padding and border definitions. A style where the layout is controlled exclusively by CSS will require vastly more CSS classes and selectors. Take a look at the gargantuan CSS files used in the new phpBB system and it's obvious that the current vBulletin style editor would struggle to present all of this data in an elegant and user-friendly manner. Even now, the CSS editor page is overly long and unwieldy. When we go with a full CSS system we'll be looking to dramatically change the CSS editor to allow it to better deal with the inevitably larger number of items it will need to control.

                          So in conclusion the message is this: Semantic XHTML + CSS is good and you'll see it in use in vBulletin 4 but for the time being we have to stick with the current system.

                          Comment

                          • Milado
                            Senior Member
                            • Mar 2005
                            • 703
                            • 3.8.x

                            #73
                            This releaves any way.
                            Syrian Medical Society - mi la do - My Hacks - vCharset converter - Projects Queue

                            I want to breathe the freedom, and to strew the mounts of nostalgia in your eyes.

                            Comment

                            • Mazinger
                              Senior Member
                              • Jul 2005
                              • 2399
                              • 3.7.x

                              #74
                              What I can get from looking at their code is that the code became very brief.

                              There are some variables which I cannot understand like; <li class=...> & <dl class=...>...

                              I was expecting only <div class=...>.
                              $post[signature]

                              Comment

                              • Kier
                                Former Lead Developer, vBulletin
                                • Sep 2000
                                • 8179

                                #75
                                That's the nature of semantic XHTML - if something is a list entry, use <li> (list item), if it's a heading use <h1> (heading 1), <h2> (heading 2) etc.

                                The <dl> (definition list) tag is one whose use seems to be often mistaken. I haven't looked at the phpBB code so I can't comment on their use, but I've seen a lot of sites advocating the use of <dl>, <dt> and <dd> for form field labels like this:
                                HTML Code:
                                <dl>
                                	<dt>Username</dt>
                                	<dd><input type="text" id="username" /></dd>
                                	<dt>Email</dt>
                                	<dd><input type="text" id="email" /></dd>
                                </dl>
                                ...but that seems to me to break semantics. How is the label for a form field a definition term, and moreover, how is the form element itself a definition description? These tags should be used for their intended purpose, which is to list terms and their definitions, for example:
                                HTML Code:
                                <dl>
                                	<dt>RAM</dt>
                                	<dd>Random Access Memory</dd>
                                	<dt>CPU</dt>
                                	<dd>Central Processing Unit</dd>
                                </dl>
                                I personally believe that the use of <dl>, <dt> and <dd> for lists of form fields is incorrect, and the code above should be more correctly presented as
                                HTML Code:
                                <div>
                                	<label for="username">Username</label>
                                	<input type="text" id="username" />
                                </div>
                                <div>
                                	<label for="email">Email</label>
                                	<input type="text" id="email" />
                                </div>
                                Regarding <div class=...>, the <div> (division/divider) tag is by its very nature simply a container, as it does not describe its contents.

                                Comment

                                widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                                Working...