Building A Responsive Theme

Building A Responsive Theme

This is being written as the first AOM Skins responsive template, Varius, is being readied for release. I thought it would be a good idea to discuss some aspects of why and how it was built.

For some time now, I had been contemplating a theme that would have a fluid layout for display on desktops, tablets and mobiles. I had made an abortive attempt a few years earlier, mainly to research the possibilities. But Amazon was not allowing the use of mobile apps at that time, and it appeared that there were several technical issues from their side that made it impossible. The fact that nobody else had come up with one (despite much interest and some talk) appeared to reinforce that.

But when Amazon relaxed the rules about apps, it seemed right to take another stab at it. One of the first technical challenges was learning how to design a responsive layout. My original plan was to have a separate CSS stylesheet for each design size (desktop, tablet and mobile), then have the program switch between them. This proved to not be possible because of the way in which AOM deals with stylesheets. But when I learned about using media queries and setting the ‘viewpoint’, that became a sort of “A-ha!” moment.

Another obstacle was to make as few mods to the template files as possible, so that the breakpoints could be handled by CSS alone. Some minor modifications did have to be made however, but they were minimal and became the basis for design features that would be fine-tuned with the stylesheet instructions. The most obvious area where this occurs is the pagination, which uses the same PHP code for every layout size, but things like button width and overall configuration were accomplished with CSS.

Ultimately, there ended up being about five or six different groups of differing CSS commands, grouped by media queries. Some only handle one or two features, such as the footer or pagination. Others control large chunks of what you see on-screen. My main focus areas have been for the iPhone (4 & 5), iPad, and any screen larger than 1440px (desktop size). Some specialized modifications were made at a very late stage when I finally stumbled upon a decent Android emulator, and found that some things were breaking out of the frame at 240px. A few very minor visual gaffes remain at that size, but I managed to nail down the most blatant offenders.

This is probably the most intensely tested template I’ve done yet, and certainly the first one where I’ve had to use outside testers to try some functions, mainly Amazon checkout, since this can’t be done with emulators. As I’ve gone along, I’ve tried the theme in a variety of virtual devices (and real ones, thanks to my small group of testers), growing in confidence that Varius will function well in a wide variety of layouts. I’m sure there will be some that it won’t look so great in, but like dealing with Internet Explorer, at some point you have to draw a line and say “that’s it”. I could try to get it to work better with IE8 or below, or some obscure first-generation Blackberry. But would it be worth the effort? After the work that’s been done already, probably not. You’re just moving the line at that point, with diminishing returns (at one point an entire IE8 stylesheet was slated for inclusion, but as mentioned previously, dealing with multiple stylesheets proved to be not possible).

In determining the price to charge for this template, I’ve set the figure above the two-tier pricing structure I’ve used in the past. But as I’ve hopefully explained already, it has required much more deliberate, extensive construction, and a far longer period of debugging & final detail tweaking than any of its predecessors to this point. In describing the features of Varius, I’ve said that it’s almost like getting three templates in one (if not four or five). That is certainly the case; I’ve had to treat each major screen size class almost as separate from the others. So for that reason, I feel that the higher asking price is justified, and that it’s still a very good value for the money.

Will this mean that all future templates I make are going to be responsive? Possibly. The need for AOM templates that work on multiple screen sizes is only going to increase; I don’t foresee a drop in mobile or tablet sales anytime soon. Will I go back and redo the older themes to make them responsive? No. I’m not interested in doing that. But many features of the older designs will probably find their way into future layouts. There’s no need to continually reinvent the wheel. Varius borrows from what came before. The next template (whatever that will be) will almost certainly borrow from Varius, but add new twists. That’s the way things progress.

Latest Themes

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.