Wordpress-seo: Optimize metabox for smaller screen sizes

[tacoverdo]

Problem description
Metabox can be hard to use on smaller screen sizes (e.g. 1024*768).

Example

Possible solution
Change CSS to make metabox more responsive

Tested version
WordPress 4.4-beta-4
Yoast SEO 3.0.4

[monbauza]

In Yoast SEO 3.4. and WordPress 4.5.2, the metabox overlaps the right-hand side boxes (tested on Chrome and Firefox)

[iamazik]

Please inform the customer of conversation # 138935 when this conversation has been closed.

[afercia]

Looking a bit into this, there are a few reasons for the non-responsiveness:

1.
The snippet preview and the snippet title have a fixed width of respectively 640 and 600 pixels. As far as I know, this is intentional to make the snippet preview look as much as possible like the real Google snippet. Also, the snippet title should be allowed to break in new lines when too long. The related CSS rules come from YoastSEO.js. Worth noting on Premium these fixed widths are different and need to be updated, see https://github.com/Yoast/wordpress-seo-premium/issues/675

2.
Even changing the widths to max-width, the result wouldn't be ideal because of the layout based on a table, see screenshots below. We should probably get rid of the table in order to use the whole metabox available width for the content.

3.
On Premium, the metabox can have up to 6 tabs, see last screenshot. On smaller screens the tabs should probably use some CSS flexbox.

Overall, I'd say this would be a nice opportunity to consider a re-design of the metabox. Something that needs a decision though, and a solid design proposal.

Using max-width:

The table doesn't allow a full responsiveness:

Tabs on Premium:

[Rarst]

Related issue with settings screens #3082

[iamazik]

Please inform the customer of conversation # 144005 when this conversation has been closed.

[atimmer]

For posterity (from https://github.com/Yoast/YoastSEO.js/pull/857)

The eventual solution for this issue should be that we show a preview of the mobile site of Google once the screen isn't large enough to display the desktop site preview.

[iamazik]

Please inform the customer of conversation # 144183 when this conversation has been closed.

[omarreiss]

This should be dramatically improved with the redesign in 3.8

[iamazik]

Please inform the customer of conversation # 145637 when this conversation has been closed.

[chrisTX972]

I've had this issue for 3 months. Using Web Developer Tools in Firefox, I have been able to fix the problem by rearranging the table rows/cells/divs and not even touching the CSS/widths... It appears to be exclusively poorly coded html and the entire div/table configuration is a huge mess.

[chrisTX972]

I left a bug report, with a screenshot and the steps I took to resolve the problem using Web Developer Tools (Firefox) in my report above. The problem persists, even with the most recent plugin update. Since I have to disable the plugin before I can work on my laptop (due to Yoast extending beyond its boundaries and covering important items in the right margin), I have emailed Support for a refund. This problem isn't going to be resolved, clearly; it's a basic html issue considering that I could fix it by using a Firefox add-on.

[omarreiss]

@chrisTX972 thanks for your feedback and apologies for the poor experience. I realize the damage has already been done, but let me give you some information about where we are headed with this.

We are definitely going to fix this. You are right about the poor quality of the HTML. That's something that has evolved over time and is not something we can fix immediately. We plan to release an initial improvement next week that should fix the problem for your screen size. Apart from that we are redesigning and rebuilding the entire metabox with (mobile) accessibility in mind. That should completely resolve this issue for everyone. We plan to release the new metabox within the next few months.

[iamazik]

Please inform the customer of conversation # 151925 when this conversation has been closed.

[afercia]

Related: https://github.com/Yoast/YoastSEO.js/issues/1071

[benvaassen]

We are no longer able to reproduce this issue. Therefore, I'm closing this.