Approaches to Responsive Design User Experience in WordPress
One of the areas of WordPress theme development that I focus quite a bit on in this blog is responsive design. Most recently, I came across two specific elements of responsive design integrated into two distinctive themes. Both elements concern the user experience side of responsive design.
On the one hand, in this video I take a brief look at a new WordPress theme launched on ThemeForest called the Flipit theme by a new company called FD Themes, which promotes the idea of “flipping” content. This simply means that at the click of the mouse button or with a single touch on a mobile device you can reveal a reverse side to a content object such as an image for example.
On the other hand, I take a look at the latest theme from Press75, the premium theme company run by Jason Schuller. The theme is called the Series Theme, which is geared towards video content and it promotes the idea of what I’m calling a “one-click” approach to content interaction. In this case at the click of a button or with a single touch on a mobile device you can reveal an overlay containing more content.
Both approaches imply a “surface experience” of the website, that is to say, that you no longer interact with websites through weblinks or “hypertext“, but you remain on a single page and simply activate “hidden” elements of content that don’t require any depth of navigation.
In the conclusion to this quick tour of two approaches to responsive design user experience in WordPress, I talk about the implications of this type of innovation, drawing specific attention to the problem of dense content and how a surface approach restricts access and presentation of more complex data.
Feel like sharing?
Hi Will,
Thank you very much for drawing my attention to this new prespective of web design when it comes to displaying content.
I like the approach of loading content behind the scene and only displaying it without leaving the page when needed. In fact, as you motioned in the video, you view the second layer only when you do something (i.e. flipping, or clicking a button).
However, I think developers and designers should focus on the ways they should follow to solve loading everything and only load what’s really needed. I’m thinking about utilizing AJAX and the likes to load the second layer, but if a third layer exists then it should be loaded on demand!
Thanks for taking time out to post a comment Ayman, I appreciate it. I agree with the “on demand” principle, particularly for mobile devices where processing power and weak Internet connections are often diminished. I wonder what your take is on Anthony’s point below?
One of the problems that I see with the Press75 “Series” theme is that the URL never changes, presumably because they’re loading everything via AJAX. This means that you can’t bookmark anything on the site which isn’t very good from a usability perspective, as well as just being plain annoying.
Not sure I’m a big fan of the way “Flipit” works either. It means your visitors have to perform an extra click to be able to view a full article. Instead of just clicking on a “read more…” link to read the rest of a post like on a typical website, you have to click once to “flip” the tile and only then do you get the “read more…” link.
Very good points you make here Anthony. I wonder if I can get Jason Schuller @Press75 to chime in on this. I’ll send him an email and see if he has time to respond to your points. Thanks for sharing your thoughts.
@Anthony Hortin:
Good points Anthony.
Well, in my honest opinion, there’s a thin line between hiding parts of the content for aesthetic reasons or for a purpose. If we’re only “hiding” some content, i.e. the excerpt, to save some real estate space on the screen then clicking a mouse button or making a finger gesture I guess would be OK, specially for mobiles and small hand held devices.
I totally agree with you though when it comes to the difficulty of bookmarking a page if it only loads within a div via AJAX. On top of that, if people come to the original post/page from a search engine they might be seeing unexpected results.
@Anthony Hortin: Just to clarify, the Series Theme does not load everything via Ajax. Every episode posted using the Series Theme has its own unique URL, just like any other theme. Episode parts are the only thing loaded via Ajax.
@Jason Schuller: Thanks for dropping by Jason and for making the clarification. Much appreciated indeed.