Issues with Current “Responsive” WordPress Templates

Posted on July 9th, by admin in Blog posts. No Comments

Introduction – What is responsive web design?

Responsive design became a buzz word a couple years ago in web design circles. In short I would define it as one website for all devices. The website automatically scales to suit the screen-size that the visitor is using. This scaling is both in terms of layout and in controls such as the nav menu. Usually this is accomplished by utilising CSS @media queries and using % and em instead of fixed widths and px in the code.

The opposite of “responsive design” is “device experiences” that designs for touch screens or tablets specifically. Boards.ie is a great example of device experience as they have both a mobile site (m.boards.ie) a touch-friendly site (touch.boards.ie) to complement their main site. There are also a number of unofficial Android and iOS apps which provide a more tailored experience. However, if their main website was responsive, they would not need to maintain these separate sites.

Problems

The problem with responsive web design is that the concept has only been around for a couple of years and isn’t fully defined: there is no rule book. I’m not going to try and write one here (not yet anyway) but I am going to outline some things that should be considered by other web designers or WordPress theme developers.

Images

Even the most basic responsive website resizes images but if that image is megabytes in size, a mobile device will still receive the full size image. Since mobile devices frequently are on capped data plans and slow mobile networks (3G) this is far from optimal. The ideal scenario would delivering a smaller file size image, but at the same time giving the user the option to view the full size if they wish.

In an even more ideal world, the website would be able to detect the quality of the connection that the user has. For example, if they are on a good Wi-Fi network it will send a better resolution image whereas if they are on a slow data connection (or have indicated that the site should conserve as much bandwidth as possible and load fast) images will be at the smallest size possible or perhaps only load after a user clicks on them. Certain mobile browsers such as Opera have this feature built in, but it would be nice to see websites with this feature. This is something we may see coming included with smart phones and tablets rather than on websites.

Of course, there is also the case where you may want to specifically deliver a higher res image to a certain device, such as an iPhone/iPad with “retina” display, but balancing this with the users network abilities…

There’s a nice article on the subject of responsive images here: http://www.netmagazine.com/features/state-responsive-images

A possible solution that could be built into WordPress Templates: http://adaptive-images.com/ so hopefully this will happen in the not-to-distant future.

Source: http://adaptive-images.com

Menus & Navigation

At the moment, this is a bit of a mess. “Responsive” menus currently seem to fall into 4 main categories:

1) simple dropdowns
2) complex dropdowns
3) “normal” menus, re-shaped for mobile, and
4) Other.

I have found that when using premium WordPress themes, in order to maximise flexibility (and therefore sales), designers opt for the drop down menus which allows for the display of a multi-layered menu tree. However, on websites with less than, say 6, menu items, I believe it is more sensible to have a regular shrunk menu so that you can immediately select the page that you want without having to open a separate menu.

A normal screen width menu.

: An example of a simple dropdown in responsive mobile menu. Note that because there are only 4 menu items, it doesn’t really make sense to have a dropdown menu.

A simple dropdown would suit a website with more than 6 first level items and only a few second level items. A complex dropdown could be used where a website has quite an intricate menu tree, however at this point, it might be worth considering other solutions. I hope that the next “generation” of WordPress themes will morph between these 3 initial options depending on the number of menu items that the web designer has.

For most websites, the above guide will probably fit quite well and be a far better experience for users however there are always websites that break the mould. Vevois an excellent example of this. The whole menu is relegated to a button on the top panel, with the focus instead on the search bar and site content. The magic happens when you touch or click this button: the whole menu pops out from the left and suddenly vertical space is no longer at a premium. In this bar, Vevo manages to fit a nice menu (note the nice icons that fit in this way), site options, and copyright information. Because the bar scrolls separately, you can put as much as you like in it without worrying about running out of space. It also allows you to get rid of the whole bar when it’s no longer useful to you. The unified experience across devices increases familiarity amongst users.

Screenshot of vevo.com showing the slide in side menu which I quite like! Try resizing the page or loading it on your phone to test it.

m.facebook.com uses a similar idea but obviously the Facebook website isn’t responsive, and this goes back to device experiences.

The menu on the Facebook mobile page – definitely in “other”.

Other things

It would also be nice to see optimisations for different inputs. Currently touch is the most popular on mobile devices, but there should always be support for mouse/pointer at the same time. Remember that you can’t “hover for more information” with your finger, nor can you “pinch to zoom” with a mouse or a stylus. In the future we will have input methods that we can’t even imagine now, such as just thinking to do things and it would be great if we could prepare websites for that now, but since that’s probably impossible we should just make sure that everyone can easily use a website on any device that they choose.