MyBB Community Forums

Full Version: Will it be possible to create table-less templates?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5
(2013-04-29, 02:47 AM)Jazza Wrote: [ -> ]There are times when you want to use tables over divisions. Tables have some very handy features such as column and row spanning that divisions and CSS just don't have. You can try and replicate them using JavaScript but you're opening a whole new can of worms with that.

Yes, I know there are times to use tables over divs and other block elements. Unfortunately, mybb contains very few actual tables.

Table elements are for tabular data only.

Also, anything tables can do (fixed width columns in fluid width containers, for instance) can be replicated perfectly with the display: table property in CSS.

Anyway, I've decided to start this project using the current 1.8 alpha theme. Whatever changes between now and the full release, I can change as well. As of now, I've replaced the forum lists with actual list elements. I'm trying to start with the most commonly accessed areas and work from there.

Basically, how it works is that rather than tables, we're working with a "module" class that can be added to any block-level element (div, section, article, etc). Then there are a few classes within those modules that can be reused, such as module-header (which is basically the same thing as the "thead" class, but it's attached to actual heading tags)

Taking advantage of headings won't just help with semantics and accessibility; it'll help with SEO too.
Would anybody be so kind as to give me a list of all the areas that [currently] require tables, due to tables being referenced in the javascript?
Tableless forums are like turning your BMW into a corn burning car. It's neat and more energy efficient but at the end of the day it's still a car that goes from point A to point B. It's also a ton of work to accomplish the feat. Not worth the effort.

phpbb went tableless years ago. No one seems to care and I have never seen an awesome design from someone running that forum software.
Anyone who says it's not worth the effort knows absolutely nothing about accessibility on the web.

MyBB is some extremely powerful free software that is, unfortunately, stuck in the past because of its table-based layout.

Try browsing the internet for just a day using a screen reader. Check out a site that uses proper semantic HTML, versus one that spams tables and strong tags for presentational purposes. That'll change your mind.

Plus, it's not like we're just talking about under-the-hood changes that nobody will notice unless they're blind---responsive design is IMPOSSIBLE with table layouts, and it's quickly becoming the preferred method to make sites viewable across all devices and resolutions.

Using strong tags for their intended purpose, rather than just to make text bold, as well as adding proper headings, will make forums more SEO-friendly.

I realize that forums aren't nearly as popular as they used to be, but that doesn't mean the technology has to be stuck in the past. There are tons of benefits to this that aren't immediately apparent, but will help everyone in the long run.
Quote:Anyone who says it's not worth the effort knows absolutely nothing about accessibility on the web.

You're right. I'm not on the web very much and my sites not that popular.

Quote:Try browsing the internet for just a day using a screen reader.

I've never done that. Would it make my browsing experience more efficient or better in some way than how I access it now?

Quote:responsive design is IMPOSSIBLE with table layouts

Ooo...fancy words. What's responsive design? I want to hear more.

Curious about how many forums are a success on mobile phones with responsive designs. Terms like fluid, responsive, and flexible are used to describe nifty new design elements but forums are high-content web pages that don't really scale down to a mobile very well. A single showthread page can have hundreds of links.

Quote:Using strong tags for their intended purpose, rather than just to make text bold, as well as adding proper headings, will make forums more SEO-friendly.

How does strong tags fit into a tableless design? MyBB already does use them. And tableless is not really that much more SEO friendly.

Quote:I realize that forums aren't nearly as popular as they used to be

Oh really? If you want my real view on this I'll dish it out. I think what's happening is guys like you are continuing to increase the complexity required to make, design, and implement a web site for the average joe. Most forums get started by the little guy. I think we're seeing a lot less Mom & Pop websites nowadays. Most now seem to rely on a Facebook fan page or use other social media instead of making an attempt at being a webmaster. And who can blame them? PHP which was the noobs friendliest coding language is now just filled with complex frameworks, designers all want fancy CSS frameworks, and sites have to be mobile ready to boot.

I think it's over for the small webmaster. If you want your content on the web you either use someone else's social services or you get a college degree in computer science.
Quote:I've never done that. Would it make my browsing experience more efficient or better in some way than how I access it now?

A screen reader is a device that blind people use to browse the internet, so no, it wouldn't. In fact, most websites are so terribly constructed that it's a nightmare to browse them without being able to take visual cues. HTML is not a visual language---that's CSS's job. HTML is a structural language that is meant to organize content. Not everyone is fortunate enough to be able to see the site they're browsing. This may not seem like a big issue, but there are more blind people using the web than you think.

When you use tables for a layout, you're basically saying that every single solitary element of the site you're designing is, in fact, tabular data. This is laughably incorrect, and ignorant to boot. It was fine back when CSS didn't have any suitable replacement for tables. Nowadays, we have inline-blocks, and pretty soon we'll be able to start using flexbox. CSS hacks and complicated grid systems will be a thing of the past.

But there's really no reason to be using tables for anything other than...tables. Hell, nowadays you can even use the "display: table", "display: table-row", and "display: table-cell" properties to emulate tables PERFECTLY on semantic HTML. There is no excuse.

Quote:Ooo...fancy words. What's responsive design? I want to hear more.

Responsive design is the art of crafting a website in a way that it will be viewable across all devices, regardless of their screen size. It does away with fixed-width layouts and other lazy design techniques that have plagued the web for years. "Mobile versions" of sites are no longer required in 2013.

Responsive design uses CSS3 media queries to change certain styles after a certain window size is reached (there are also other things you can do with it, such as detecting the DPI of a screen and adjusting icon sizes accordingly)

Here is a list of websites that use responsive design techniques. The first one is my own personal site. All of these sites will "respond" to a change in window size as long as they're viewed in a modern browser (I'm assuming you don't still use IE8 Wink)

http://keithpickering.net/
http://css-tricks.com/
http://microsoft.com/

And of course, there are so many more where this came from. Just google "responsive design" and you'll see some of the amazing things people have done. CSS3 isn't just about box shadows and rounded corners---it's about rethinking the way that we make websites.

Quote:Curious about how many forums are a success on mobile phones with responsive designs. Terms like fluid, responsive, and flexible are used to describe nifty new design elements but forums are high-content web pages that don't really scale down to a mobile very well. A single showthread page can have hundreds of links.

It's true that forums have a lot of content, but it's not that hard to show all that content in a more efficient way. Have you seen the goMobile theme? That's a perfect example of how this should be done, except there's no need for a separate theme if you're using responsive design.

And forums aren't successful on mobile phones because of their archaic code; they can be successful on mobile phones in spite of it.

Quote:How does strong tags fit into a tableless design? MyBB already does use them.

Strong tags are just one example of incorrect HTML usage.

Strong tags themselves aren't incorrect or unsemantic, but the way myBB uses them is. MyBB uses strong tags wherever it wants text to appear bold, when in reality, a strong tag is only supposed to be used to set certain elements apart. This takes us right back to the screen reader issue---screen readers take advantage of strong tags to tell them which parts of the page are most important. When someone browses a MyBB site on a screen reader, they're likely bombarded with "important" text such as "Current time", "get more", and of course the ever-popular "Post #15". Hardly any of the strong tags in myBB actually indicate important content, and it's painfully obvious that they used to be <b> tags before being switched out (a lot of people seem to think they're interchangeable, when in fact, the <b> tag is a remnant from when nobody gave a damn about their HTML making any sense). I'm not trying to insult the myBB developers, because I know this HTML is very old and that it's being rewritten, but if I were them, I would've rewritten it a few years ago.

Quote:And tableless is not really that much more SEO friendly.

You wanna bet?

And it's not just about the whole tableless thing---myBB, in general, uses presentational HTML almost everywhere. Strong tags for unimportant content, deprecated "width" and "align" attributes, br tags to add extra margins---this is why they're rewriting the whole thing in 2.0. It's not just because they're bored.

Search engine crawlers are similar to screen readers, and if sites are poorly coded, they can have a hard time determining if the site is relevant at all. With an over-abundance of strong tags, Google might even think a site is trying to unfairly compete for your attention.

Quote:Oh really? If you want my real view on this I'll dish it out. I think what's happening is guys like you are continuing to increase the complexity required to make, design, and implement a web site for the average joe. Most forums get started by the little guy. I think we're seeing a lot less Mom & Pop websites nowadays. Most now seem to rely on a Facebook fan page or use other social media instead of making an attempt at being a webmaster. And who can blame them? PHP which was the noobs friendliest coding language is now just filled with complex frameworks, designers all want fancy CSS frameworks, and sites have to be mobile ready to boot.

I think it's over for the small webmaster. If you want your content on the web you either use someone else's social services or you get a college degree in computer science.

It's really not that complex to use HTML and CSS correctly. If we could get rid of all the poor and outdated resources on the web that tell people using tables for layouts is a good idea, nobody would have a problem.

"Guys like me" are just trying to make the web usable for everybody. I think the reason we're seeing fewer Mom and Pop websites is that not everyone feels like they NEED a website anymore. Nowadays we have Facebook and Tumblr, both of which offer a lot of customization tools. A lot of small business owners might see this as enough. As a web developer, I tend to disagree because I want a paycheck, but it's just a fact. Social media offers a lot of things that a dedicated website doesn't: 1) It's free to set up, 2) it provides instant exposure to millions of users, and 3) it allows people to interact with their customers extremely easily. Every business needs to be on Facebook these days, whether you find that agreeable or not.

PHP isn't really required for an extremely simple website, and for things like myBB, you don't have to know any PHP whatsoever to customize a theme.

I'm always going to recommend that people code their own websites (or hire someone to do it) rather than using a fancy CSS framework. Most of them are bloated and offer waaay too much than is needed for the average web developer.

And of course sites have to be mobile-ready---desktops are quickly vanishing. Trust me, I'm going to keep building my own computers til the day I die, but for the average person, a smartphone or tablet is enough. It's your guys' choice if you want to avoid making sites mobile-ready, but don't be surprised when your traffic drops significantly.

Lastly, I don't have a college degree in computer science, nor have I taken a single web design class. Nearly everything I know is from reading a few web design blogs. If I can do it, anyone can.
This is a very interesting series of articles

http://www.webdesignerdepot.com/2013/01/...cs-part-1/

and this one for screenreaders and html5

http://tink.co.uk/2013/02/screen-reader-...-sections/
Note that I'm not only talking about HTML5; semantic code can be just as easily implemented in XHTML 1.1

I know the new elements are pretty controversial. I personally like to use them because they make more sense than dozens of divs.
Why don't blind people have a browser then that simply removes all structure tags? I gotta believe they have special browsers they use.
http://www.webbie.org.uk/

But I for one am not going to worry about 40 million people out of 7 billion. Percentage wise it's not even on the charts. I might as well develop my site to be Netscape 1.0 compatible too.

Quote:When you use tables for a layout, you're basically saying that every single solitary element of the site you're designing is, in fact, tabular data. This is laughably incorrect, and ignorant to boot.

I don't place every single element in a table. It's more laughable and ignorant that you believe forums don't contain tabular data. Forums are one of the few websites which are almost exclusively table data.

Quote:But there's really no reason to be using tables for anything other than...tables.

CORRECT! That's why creating a tableless design for a forum is silly.

Quote: Hell, nowadays you can even use the "display: table", "display: table-row", and "display: table-cell" properties to emulate tables PERFECTLY on semantic HTML. There is no excuse.

So I should emulate when I can just use a table? What for? Is there a new browser that stopped supporting table markups I'm not aware of? Did tables stop getting support? Nope.

Quote:Responsive design is the art of crafting a website in a way that it will be viewable across all devices, regardless of their screen size.

Yes, yes, yes...I know. But can you show me any forum that's done this? Forums are complex in nature with a ton of data on most of the pages. Simply discussing responsive design and knowing how cool it is doesn't mean it should be implemented into forum software. Your examples of course are NOT forums and they are not content rich. Your blog is nice but imho looks best in mobile or tablet size browsing. And I realize that's a very popular medium to be online nowadays but it's still not very profitable for most sites including Facebook. Your blog in normal browser looks sloppy with jumbled boxes placed oddly across the page. The flow is poor.

Quote:It's true that forums have a lot of content, but it's not that hard to show all that content in a more efficient way. Have you seen the goMobile theme? That's a perfect example of how this should be done..

Gomobile is nice...but guess what. It still uses tables.

Quote:And forums aren't successful on mobile phones because of their archaic code; they can be successful on mobile phones in spite of it.

The only way I forsee forums being success online is if you go with completely different software like Vanilla where the entire forum structure and software are simplified. Have you seen Vanilla? It's tableless and I believe falls under a responsive design.
http://vanillaforums.org/ (didn't notice they ditched GetVanilla.com)

Quote:MyBB uses strong tags wherever it wants text to appear bold, when in reality, a strong tag is only supposed to be used to set certain elements apart.

Yes that's mainly true and for my own SEO I went into the templates and altered a ton of things. Since I have 12 million pages in Google just for one site I think I've done a good job at SEO.

Quote:I'm not trying to insult the myBB developers, because I know this HTML is very old and that it's being rewritten, but if I were them, I would've rewritten it a few years ago.

I think MyBB should have a Design & SEO team personally. One that will focus on the templates, css, seo, and validation of markup. Since MyBB does separate them by placing templates in the database I don't see why that can't be done.

Nice convo btw...I know I seem argumentative and I am but that's just how I am. Don't take it personal and we can chat all day about the topic. This is why I love forums. The discussions are fun for me. And this creates amazing content for sites like Google to crawl. Smile

Quote:And of course sites have to be mobile-ready---desktops are quickly vanishing. Trust me, I'm going to keep building my own computers til the day I die, but for the average person, a smartphone or tablet is enough.

I'm really hoping you are wrong. While I believe that smart devices are going to be the norm I really hope the desktop remains. But things like Windows 8 scare the hell outta me as it was an attempt to dumb down the interface and it created a panic for me as a power user. I use dual screens (considering quad) and I multitask like a crazy man. When I travel I bring my tablets but realistically I can't work on those. I can type 60+ words a minutes from my keyboard but from a tablet I'm probably lucky to do 20. Plus I have to rely on a small selection of apps that are utilities for webmasters. There is not enough there to work. And the trend does scare me. I won't lie.
I have to disagree that forums are mostly tabular data. I'd consider them to be primarily list-based.

I'd type more, but I'm on my phone. And mybb is difficult to use on a phone :p
Pages: 1 2 3 4 5