I’m updating a web site and the HTML has the content first and the hero element and top menu last.
I know this used to be considered a valid technique for things like SEO and mobile/accessibility to get the core content to the top of the page when there were no styles applied.
But I’m updating it to a Foundation based responsive design and I’m wondering if it’s going to cause hassle to keep it in reverse order. It means messing around with relative/absolute positioning etc…
I tried googling, but I can’t really find anything that mentions the technique after about 2011.
Is it still in use? Is it recommended? Not recommended? Ok?
Flexbox allows for altering the order of elements in the page quite easily so you can have your content first and your hero images later. No need for absolute positioning these days as flexbox will still allow the page to flow nicely.
However, I doubt that the benefit for seo would really be affected either way if you have good content in your page. Usually if you do something specifically for seo then you are doing it wrong. You should arrange content that best suits your visitors and best suits the designs that you are creating.
I do remember Max Cutts from google mentioning a few years ago that there was a small benefit from having content high up the html but that headings and structure was also important. Google seems to be able to find good content wherever it is in the page so good content should be the number one priority.
Of course I can’t confirm either way but generally I don’t change a pages’s structure just to satisfy some mystical seo beliefs.
That was kind of what I was thinking. I remember there being lots of articles about html content order back in the day, but I don’t really hear about it these days. Seems like it might have become unnecessary.
I’m not up to date with flexbox, so I’ll go and check it out. Are there any issues with compatibility etc?
It seems excellent, might even make grid frameworks like foundation unnecessary. That said, I don’t really have time to get up to speed on it for this project.
If there are no issues with just reordering the html to move the hero box above the text then I’ll do that this time. Since it takes 3 seconds and simplifies working with the css
Flexbox is only really appropriate in small doses (a row of elements, for example), but the new grid layouts will ramp up the possibilities for re-ordering page content bigtime. I can’t wait until it’s supported in the main browsers.
Flexbox is reducing my need for media queries as well. I have a 3 column setup (on a personal project, and on some small section of my page), then 2, then 1. All flexbox. No queries. It’s nice to see, when you give the right CSS, flexbox to do all the work for you.
I did try making a “future” CSS framework a couple months ago. Still have the spreadsheet planning the classes ; one that used flexbox, and all the new toys, etc. Decided it was too much hassle .
I imagine grid-frameworks will just be left out for flexbox, in the future. The distant future.
; one that used flexbox, and all the new toys, etc. Decided it was too much hassle