Tags:

Groping Toward Responsive WordPress Admin Screens

I’m working on the UI for my WordPress Install Profiles plugin, and after some thought, I believe tabs are the way to go. The current interface has a few semi-unrelated tasks on the same page, so it seems logical that breaking them up into separate areas will keep things a little less intimidating for first-time users, and still keep features close for people who know what they’re doing.Originally, I had the tabs arranged below the main title of the page (see here), but I ran across WP Candy’s Completely Unofficial Guide to Plugin UI, which suggests a best practice to place the tabs inline with the title, assuming doing so won’t create any horizontal scrolling.It turns out that the tabs fit nicely next to the main title.But at smaller screen widths, the three tabs take a collective dump on the right side of the screen:Time for some responsive design. The tabs start to break down when the screen is around 730px, so I added the following:

@media screen and (max-width: 730px){.wrap h2 {float:none;}ul.tabs li {top:0;}}

On narrow devices, the tabs now slide nicely under the title of the page:The real question is whether the tabs really belong in line with the page title. Honestly, I wouldn’t have thought to put them there, but it does look cleaner now that it’s in place.PS: Sorry for the lack of a live demo. Version 3 of WP Install Profiles will be out in the next few weeks with the new UI and some other improvements.Extra: I built the tabs using tabs.js, which is distributed as a part of the Skeleton CSS framework. In addition to fitting the general style of the WordPress admin UI right out of the box, tabs.js is extremely light weight and uses no images, which makes it ideal for plugin inclusion. Both the CSS and JS are relatively short, so I just stuck them inside the WP Install Profiles CSS and JS files, keeping extra size to a minimum.

Leave a Reply

Your email address will not be published. Required fields are marked *

.