The idea that a website should be adaptable and responsive to its users and uses isn’t new, but achieving or even setting that goal has sometimes been difficult. It isn’t uncommon to look at website statistics and see most activity coming from what we imagine are desktop browsers, and then design for that use. Designing for specific devices also is a challenging and expensive enterprise when done properly.

Another approach, sometimes called Adaptive or Responsive web design, has attracted attention recently. It is often related to a Mobile First design philosophy, suggesting that by thinking about mobile users whose devices lack extensive displays and have cumbersome keyboard entry tools, you’ll naturally think first about the system’s key features and build those for efficient use.  The Adaptive/Responsive approach then leads you to use the same base of code, as much as is practical, for any device your users may find you with, incorporating display and input features accordingly.

Although ArchiveGrid’s use statistics suggest only a very small number of users reach us with smartphone or tablet devices, that isn’t a reason not to provide them with a good user experience. In fact, the low-use statistics could be directly correlated with issues that a design oriented toward desktop browsers has when it’s delivered to a different type of device.

We find the current design isn’t working well on smartphones and on some tablet devices, although it’s fine at medium to higher-range desktop displays. Here’s how it would look on a display with a resolution of 1280 x 960 pixels (a pretty common size for desktop systems these days):

ArchiveGrid's version 1 desktop design

We’re testing an adaptive/responsive redesign now, which would give the system a different look. At that same desktop resolution, we’ve made some adjustments to allow  more information to be visible without scrolling, to highlight the search box, and to fix the display width so that it works more effectively on much higher screen resolutions:

ArchiveGrid's version 2 desktop design

When the same page is viewed on a tablet device, we start to make some choices on what’s most important to see and do. We drop some of the collection highlights and tune the amount of space used by the search box.

ArchiveGrid's version 2 tablet design

And for smartphone users, we highlight the search box, drop a few other less-critical home page widgets, and expect some scrolling to reach other widgets.

ArchiveGrid's version 2 smartphone design

There’s still more to think about with this design, and much to learn. We expect to promote it to the Beta version of ArchiveGrid soon. When it surfaces, we will be glad to hear your reactions and suggestions to improve it.