This article originally appeared in TidBITS on 2015-07-20 at 4:40 p.m.
The permanent URL for this article is: http://tidbits.com/article/15799
Include images: Off

Unveiling the New Take Control Web Site

by Adam C. Engst

The yellow-bellied Take Control Web site is extinct! After three years of effort, we have replaced it with a complete redesign [1]. Speaking as the person who designed and coded the bulk of the previous site, when Take Control was something we were going to throw against the wall to see if it would stick, I had become thoroughly sick of those colors.

[image link] [2]

In 2003, when we started Take Control, the site was just a bunch of static HTML pages. By 2008, we knew we needed a database-driven back end and settled on ExpressionEngine [3], from Ellis Labs. Developer Adam Khan of Engaging.net worked with us on it for the next few years, first turning it into a database-driven site, and then, in 2010, collaborating with Glenn Fleishman on an account management system that serves both Take Control and TidBITS (see “Reading Take Control Ebooks on an iPad (or iPhone or iPod touch),” 7 April 2010). But this was all back-end work, and at the end of 2010, we started working with designer Terry Evans to update the look and feel of the catalog and library pages first, with the rest of the site to follow. Unfortunately, after those first major pages, Terry got busy with other projects, and it took us until early 2012 to find Sam Schick and Eli Van Zoeren of Neversink [4].

So why did it all take more than three years? At first, there was just a lot to do, in terms of going back and forth with Sam on the site and associated book cover design, working through a logo redesign with Geoff Allen of FUN is OK [5], and answering questions from Eli about the complex business logic embedded in the bones of the site. But it took longer than we’d anticipated, and our window of free time closed. From then on, it seemed that whenever we had time to look at something, Sam and Eli wouldn’t be ready, or a major bug would prevent further work. And when they had addressed that problem, we’d have our heads down in another book release or three (blame Apple!). Feedback cycles took months, not days. So it goes, to quote Kurt Vonnegut, and so it went until earlier this year when Eli and I finally synced up well and were able to make solid progress.

Key to that progress was a Trello [6] board, where we moved bug report cards between Open, Testing, and Done lists, carrying on conversations within the cards and attaching screenshots as necessary (“Trello Offers Compelling Collaboration Tool [7],” 9 July 2012). Other lists on the board helped us track issues that required further discussion, things we’d need training on, and ideas we put on hold. In the last few months, Lauri Reinhardt, who helps us with customer support, dove into Trello and employed her past experience with eSellerate to make our cart match the site’s new look and identify subtle cart behavior bugs.

Some of the delay was our extreme trepidation to pull the switch, since the new site came part and parcel with an upgrade to ExpressionEngine 2, which in turn required non-trivial changes to the underlying MySQL database tables. Making it all the scarier, various aspects of the TidBITS site rely on the same tables, particularly for account information. It was a one-way trip, not something that could be done piecemeal, and something that had to work immediately with live data, since every Take Control order through our cart writes to those database tables.

We were ready to go in early July, so Eli spent July 2nd bringing new versions of the database tables over to our staging site, and on July 3rd, Tonya, Lauri, and I spent 12 hours straight catching transition bugs for Eli to stamp out. By 8 PM on the 3rd, we were ready to make the jump, and after an hour-long panic caused by Apache refusing to launch after we pointed it at the new site (caused by some long-missing closing quotes in our Apache configuration files), it came online. I felt like Dr. Frankenstein: “It lives! It lives!”

The Fourth of July weekend is always slow, which is why we’d chosen July 3rd for the transition, and while most things worked, we all kept finding bugs. Permissions in the new site’s file hierarchy were different, I hadn’t known certain file locations would change, and most surprisingly, the encryption used for account passwords had changed, requiring us to loop in Glenn for significant changes to the TidBITS account code. This turned out to be quite interesting. ExpressionEngine 2 has a neat feature designed to increase the security of its account passwords. On a user’s first login after the upgrade, it changes the hash used for the password from SHA-1 to SHA-2 [8] (specifically SHA-512), and it adds “salt” (extra random data that makes attacks harder) to each. That’s great, but because the TidBITS account code didn’t know about the salt or SHA512, merely logging in to the Take Control site rendered that user’s login on the TidBITS site inoperable. Oops. The two are once again in sync, so for every person who logs in to either site and has their account updated behind the scenes, the stored passwords become all the more resistant to attack, reducing the impact of a data breach. Speaking of security, the entire site is now served with HTTPS, so logins are always encrypted.

At this point, we’ve dealt with all the user-facing bugs we know about, but if something doesn’t work for you, let me know.

So, the redesign. The structure and functionality of the site are quite similar to what we had before — there’s a catalog page that shows recent releases and allows filtering by category. The home page is now a variant of the catalog page, also calling out a few featured books in slides at the top. And all the books you own are still collected on a library page from which you can download the various formats or click over to the full Ebook Extra page for a title.

[image link] [9]

Each book has its own detail page, of course, and each book’s Ebook Extras page (with goodies for book owners) now looks more like a book detail page, for a more consistent user experience.

[image link] [10]

The most significant change is a full-fledged shopping cart. Previously, clicking the Buy button on a book page or after selecting books in the catalog sent the order to eSellerate for processing; it was so difficult to return to our site to keep shopping that a frequent user question was, “Where’s your cart button?” That simple question required a complex solution, but the site now provides an on-site shopping cart that lets you find and add multiple books before you wrap up with a Check Out button that sends the order to eSellerate (coupons are calculated on the eSellerate site once you click Check Out on our site). On both the home page and the catalog page, clicking Buy buttons adds the books to the cart and turns the buttons into Cart buttons; click any Cart button or the Cart icon in the upper-right corner to display the cart and check out.

[image link] [11]

Also, every book page and the cart itself display related titles — one of our biggest challenges is helping people realize the breadth of books we publish. The cart even notices automatically if you add three or more books and gives you 30 percent off (unless another coupon is already loaded).

Perhaps the hardest thing to code and test was how the site changes dynamically when you log in, based on which books you own. For example, when you’re logged in, it gives you easy access to the Ebook Extras pages for your books from the home page and catalog. If you see unexpected results here, it’s possible that there’s a bug, or you might have purchased books using different email addresses and thus ended up with multiple accounts. Unlike Apple IDs, our accounts can be merged; log in to your main account, click your name at the top of the site, and then on the Profile page you can add another email address. The system will do the rest (after email verification, of course).

The look of the site is utterly different and was designed to showcase the cover design Sam Schick created for us, with lovely graphics that look great on a Retina screen. It’s meant to be a lot less text-heavy — since Tonya and I are writers, we addressed every user experience problem on the old site with text explanations. For instance, on the new book pages, rather than have the free sample link be normal text, it’s styled like a little sticky note on the book image (which includes an iPad frame, a convention used to reinforce the point that we sell ebooks, not print books).

Finally, since I know the designistas will be all over this, a few words about the wood background. We started the design process before iOS 7 and Apple’s war on skeuomorphism, so iBooks still had wood paneling in the background. Referencing wooden bookshelves seemed entirely appropriate; we love natural wood, and all the renovations to our house have been done by a woodworker friend with locally harvested lumber. But iBooks appeared to be using cheap pine, and we wanted to do better, so we looked at hundreds of stock photos of wood grain before settling on the one you see in the background. Could we have swapped it out for a flat background after Apple switched iBooks to a dull gray? Sure, but we like wood, and we like the rich color, even if it’s not entirely Apple-trendy.

Of course, we’re not really done. We’re already adding cards to our wish list in Trello for features we’d like to add and changes we’d like to make, but now that we’ve made the big jump, we can bite off smaller chunks and turn some attention to the TidBITS site, which also needs some design attention.

[1]: https://www.takecontrolbooks.com/
[2]: http://tidbits.com/resources/2015-07/Take-Control-before-after.png
[3]: https://ellislab.com/expressionengine
[4]: http://neversinkcreative.com/
[5]: http://www.funisok.com/
[6]: https://trello.com/
[7]: http://tidbits.com/article/13101
[8]: https://en.wikipedia.org/wiki/SHA-2
[9]: http://tidbits.com/resources/2015-07/Catalog-Library-pages.png
[10]: http://tidbits.com/resources/2015-07/Book-Ebook-Extras-pages.png
[11]: http://tidbits.com/resources/2015-07/On-site-cart.png