Do you remember the design principles from the introductory blog post? No worries, here they are again:
- Showcase the stories told and the memorabilia shared, not the project and its consortium members
- Showcase the real persons these stories are about and the memorabilia they left behind
- Showcase and empower the person, often a descendant of someone the story is about, sharing this story with us
- Improve the search for stories and allow for more exploration of stories via browsing
- Ensure a good user experience whether you’re visiting the site on your PC, tablet or mobile
I’ll actually focus the most on that last bullet point first as it was as much a constraint as a goal. Also, since we were doing a responsive design (our chosen method for improving smartphone and tablet UX) we chose to change the process a bit. Specificallywe spent much less time on the wireframing. Instead we moved quickly from lof-fi wrireframes to designing on screen. Some of the layout ideas in the sketches and wireframes just didn’t translate well into an actual tactile/swipe-controlled experience across devices. In those cases we chose reality over the wireframe.
In comparison to our first attempt at responsive design I think we did better this time in letting the display flow from the nature of the content rather than just by establishing artificial break points. Also, we opted this time to not use one of the existing frameworks for responsive design, but rather developed a specific CSS of our own.
In terms of time, our front-end developer Dan probably spent the most time on the image carousel on the story display page. First of all getting it to interact with the user, via mouse and touch both, at different viewport widths took some work. But then we noticed in early testing that when stories consisted of dozens, sometimes even hundreds, of images the loading time at low connection speed was just prohibitive. So the image slide-show was re-factored to load three images at a time.
Loading time, despite server-side processed images served at different sizes for different viewports (and the media queries to go with them), is certainly the greatest challenge in responsible responsive design.