If you ever had to implement some kind of visual change in SharePoint, you know that, with previous SharePoint versions, this could be a challenge. Even SharePoint 2010 is spitting out HTML that makes website designers cry.
I installed SharePoint 2013 Foundation Preview this week. And I decided to take a look at the changes in HTML with some of my past branding projects in mind
Notice: Although I’ve implemented quite a few custom look and feels in SharePoint. I do not consider myself an expert in CSS, HTML 5 or SEO. But I do recognize bad HTML code.
I’m also missing some hidden input fields. I’m not sure if this is by design or if it’s due to my freshly installed SharePoint and my lack of enabled features.
They have added an extra version number in the /_layouts path.
A good move as it will probably make future backward compatibility easier to maintain.
In previous SharePoint versions, adding web parts to your page results in nested <table> elements embedded in the page. Styling these nested tables is a handful. Luckily the tables made way for <div> elements.
One word of warning though. The web part title and body are still wrapped in 4 levels of divs. IMHO They could have simplified it even further.
Another example is that the HTML of the web part title is rather complex.
<div> <span> <h1> <nobr> <span>A web part title</span> </nobr> </h1> </span> </div>.
Personally I see no reason for this complex HTML structure. Except maybe for some compatibility issues with some older browsers?
No funky load scripts anymore on the body element. They are still there though. They are probably replaced with jQuery alternatives. For example the “#s4-workspace” style attribute is still updated dynamically with each screen resize.
The HTML in the body is cleaner. SP2013 clearly steps away from the table layout which is a good thing. I did notice some <div> elements with css classes like ms-table and ms-tablecell.
The deep nesting of HTML elements is still present in SharePoint 2013. Probably due to the extreme flexibility that SharePoint offers to modify and extend almost everything that is on your page.
In general the SharePoint 2013 HTML code makes a big leap forward. The nested <table> elements that were over present in older versions of SharePoint are gone.
Huge clean-up in the head section, controls are rewritten to use HTML best practice guidelines (example <ul> instead of <tables>) .
Yes there is still some optimisation possible but overall designers will have it a lot easier when applying a corporate identity on SharePoint site.