Some First Thoughts on Making Arras Responsive

A couple weeks ago someone asked a question on on the Arras Repository about whether the theme could be made responsive. It’s something that has been on my “to do” […]

A couple weeks ago someone asked a question on on the Arras Repository about whether the theme could be made responsive.

It’s something that has been on my “to do” list for Arras for a while. Not being mobile-friendly these days is a deal breaker for using Arras. For myself, included. The question prompted me to get to work again on it.

After a couple weeks of work, I’m sharing some screen-shots of what it’s starting to look like on my development server. I’m leaving comments open on this post for the next 2 weeks, and would encourage you to chime in with your thoughts.

A couple notes before we get to the pictures:

  1. Concurrently with the change-over to mobile-friendly, I’ve increased the over-all font sizes. My thinking behind this is that current website user experience (UX) best practices call for larger sizes to reduce eye strain. It seems like Arras ought to be “easy on the eyes”.
  2. I’ve replaced the tiny icons in the “Quick Links” menu bar with ionicons. They’re not as glossy, but they do stand out more.
  3. The pictures below show a random placeholder image in the header. The featured image, above shows the header with the site title and description text. You might notice the search bar is missing from the header area in these shots. I’m on the fence about that change and a couple alternatives come to mind:
    1. Replacing it with a new widget area in the header, allowing users to choose their own small widget content (and possibly allowing the social media icons to go there instead of being added to the main menu).
    2. Leaving the area empty and expanding the size of the header image to take up the whole header background.
    3. Leaving it blank and allowing a custom header image (instead of the solid background color) AND a logo image to go into the header.
  4. Screenshots below show 4 widget areas in the footer. In this first pass, I’ve made their widths flexible to dynamically resize based on content and screen-width available, however, I’m leaning in favor of returning to the current behavior, which keeps the footer widgets all equally sized in width.

That said, here are the pictures, starting with the desktop view and default single right sidebar:

Homepage on Desktop with Right Sidebar

Here’s what the entry content markup looks like when the fonts are a little bigger:

Here’s a browser in a narrow window on a page with lots of threded comments:

Narrow with Comments

And now for the mobile versions: Here’s the home page on an iPhone 6Plus in vertical orientation:

 

iPhone 6 Plus

Here’s the single column page template on a Galaxy S7 in landscape orientation:

GalaxyS7 One Column

Finally, here’s the above-the-fold desktop view with 2 left sidebars (the current Arras offers only 2 right sidebars and a left and right sidebar).

Homepage with 2 Left Sidebars

All of this has a long way to go, and at this point everything is up for revision. Comments below for this post will remain open until Sept 7, 2018, with thanks in advance to all who want to contribute to the discussion.

Tags:

About Caspar Green

Caspar Green has been doing web stuff stuff since before Y2K and working with WordPress since 2007. He is the owner and Sr. Developer of iCaspar Web Development, based in Potsdam, NY.