[Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by hanakin »

*Note This is part 10 of a series found here

We need to construct a better semantic HTML structure for the template prior to doing any sort of design work. This allows us to define the structure based on the content rather than trying to make the structure fit a design and rendering garbled content. It also allows for better search engine optimization since it will be extremely parseable with proper weight being given where it should. In order to accomplish this however their may be some minor changes to the aesthetic of the theme.

What this will provide
  1. Better more readable HMTL
  2. Both design and HTML fit the content
  3. Better parsability by search engines and crawlers leading to improved SEO
  4. Easier modularity as everything should be built in blocks that are reusable
  5. Easier themeability due to improved structure
This however requires an answer to viewtopic.php?f=81&t=45563 on how to handle a grid system as class based grids will add to the complexity of the HTML since we will need twice as many wrapping elements

I put together a quick mock-up test case http://midaym.com/test/mino/semantic-index.html, I left out the nav elements as they are irrelevant for the over all hierarchy if you plug it into this http://gsnedders.html5.org/outliner/ you get a very clean parsed outline

something like this
  1. PHPBB | Creating Communities PHPBB
    1. Forum Group 1
      1. Forum 1
      2. Forum 2
      3. Forum 3
    2. Forum Group 2
      1. Forum 1
      2. Forum 2
      3. Forum 3
    3. Forum Group 3
      1. Forum 1
      2. Forum 2
      3. Forum 3
    4. Forum Group 4
      1. Forum 1
      2. Forum 2
      3. Forum 3
    5. POWERED BY PHPBB� FORUM SOFTWARE � PHPBB GROUP ALL TIMES ARE GMT+00:00 | TIME : 0.646S | 20 QUERIES | GZIP : ON
Compare that to what you currently get with 3.1 prosilver
  1. Development Discussion Board
    1. Who is online
    2. Birthdays
    3. Statistics
Thoughts and Suggestions
Donations welcome via Paypal Image

Weskey
Registered User
Posts: 16
Joined: Mon Nov 04, 2013 4:57 pm

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by Weskey »

I agree on every point you mentioned.
I say we should also look favorably to the extensive use of Microdata on the forum is something imperceptible to the user, but it can bring a great return to the forum itself, and your posts, discussions, and users being displayed in search engines with their due form.

Getting started with schema.org

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by hanakin »

Weskey wrote:I agree on every point you mentioned.
I say we should also look favorably to the extensive use of Microdata on the forum is something imperceptible to the user, but it can bring a great return to the forum itself, and your posts, discussions, and users being displayed in search engines with their due form.

Getting started with schema.org
its already being done
Donations welcome via Paypal Image

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by Pony99CA »

hanakin wrote:I put together a quick mock-up test case http://midaym.com/test/mino/semantic-index.html, I left out the nav elements as they are irrelevant for the over all hierarchy if you plug it into this http://gsnedders.html5.org/outliner/ you get a very clean parsed outline

something like this
  1. PHPBB | Creating Communities PHPBB
    1. Forum Group 1
      1. Forum 1
      2. Forum 2
      3. Forum 3
    2. Forum Group 2
      1. Forum 1
      2. Forum 2
      3. Forum 3
    3. Forum Group 3
      1. Forum 1
      2. Forum 2
      3. Forum 3
    4. Forum Group 4
      1. Forum 1
      2. Forum 2
      3. Forum 3
    5. POWERED BY PHPBB� FORUM SOFTWARE � PHPBB GROUP ALL TIMES ARE GMT+00:00 | TIME : 0.646S | 20 QUERIES | GZIP : ON
Compare that to what you currently get with 3.1 prosilver
  1. Development Discussion Board
    1. Who is online
    2. Birthdays
    3. Statistics
Huh? When I go to Area 51, I see:
  1. 1.Development Discussion Board
    1. Forum Group 1
      1. Forum 1
      2. Forum 2
      3. Forum 3
    2. Forum Group 2
      1. Forum 1
      2. Forum 2
      3. Forum 3
    3. Forum Group 3
      1. Forum 1
      2. Forum 2
      3. Forum 3
    4. Forum Group 4
      1. Forum 1
      2. Forum 2
      3. Forum 3
    5. Who is online
    6. Birthdays
    7. Statistics
    8. POWERED BY PHPBB...
Technically, there's also a navigation area before the forum lists, too.

Your post makes it seem as if phpBB no longer has a forum list on the index page.

Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by hanakin »

if you read the post I stated I removed that for this example. This is not a full site just the HTML for the semantics of the logo and the forum structure. I left out the rest for simplicity for this specific example of why semantics needs to be addressed and how
Donations welcome via Paypal Image

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by Pony99CA »

Yes, you said that you "left out the nav elements as they are irrelevant for the over all hierarchy". You didn't say that you left out all of the forum index (which was my main point -- the nav part was an aside).

However, given your disclaimer, does that mean that your including Who Is Online, Birthdays and Statistics means that they are relevant for the hierarchy? Those items are also at phpBB.com, so I'm not sure why you mentioned them here.

Steve
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by hanakin »

I was testing something, they are not important to hierarchy, just the logo and forums themselves. as my post outlined. As for why you get something different then me are you logged in when you copied the viewsource
Donations welcome via Paypal Image

User avatar
Louis7777
Registered User
Posts: 394
Joined: Fri Apr 04, 2014 12:32 am

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by Louis7777 »

hanakin wrote: Sat May 24, 2014 8:07 pm We need to construct a better semantic HTML structure for the template prior to doing any sort of design work.
Any updates on this? Will it make it in 3.2?

The posts could become more semantic for a start. Here's a proposed skeleton:

Code: Select all

<article class="post">
	<header>
		<h3><!-- Post title goes here --></h3>
		<p class="author">Posted by Louis7777 on
			<time datetime="2015-08-01T21:40">August 1st, 2015 at 9:40PM</time>
		</p>
	</header>
	<aside class="postprofile"><!-- Mini profile --></aside>

	<div class="postbody">
	<!-- POST CONTENT GOES HERE -->
	</div>

	<footer class="signature">
	<!-- User signature -->
	</footer>
</article>

User avatar
callumacrae
Former Team Member
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [Define New Theme] 10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.

Post by callumacrae »

That would be really nice from an accessibility perspective, too 👍
Made by developers, for developers!
My blog

Post Reply