Reprinted from TidBITS by permission; reuse governed by Creative Commons
license BY-NC-ND 3.0. TidBITS has offered years of thoughtful commentary
on Apple and Internet topics. For free email subscriptions and access to the
entire TidBITS archive, visit http://www.tidbits.com/
Unveiling the New Take Control Web Site
Adam C. Engst
The yellow-bellied Take Control Web site is extinct! After three years
of effort, we have replaced it with [1]a complete redesign. 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.
[2][tn_Take-Control-before-after.jpg]
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 [3]ExpressionEngine, 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 '[4]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 [5]Neversink.
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 [6]FUN is OK, 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 [7]Trello board, where we moved bug report
cards between Open, Testing, and Done lists, carrying on conversations
within the cards and attaching screenshots as necessary ('[8]Trello
Offers Compelling Collaboration Tool,' 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, 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!'
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 [9]SHA-2 (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 is 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.
[10][tn_Catalog-Library-pages.jpg]
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.
[11][tn_Book-Ebook-Extras-pages.jpg]
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.
[12][tn_On-site-cart.jpg]
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
panelling 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 woodgrain 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
wishlist 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.
References
1. https://www.takecontrolbooks.com/
2. http://tidbits.com/resources/2015-07/Take-Control-before-after.png
3. https://ellislab.com/expressionengine
4. http://tidbits.com/article/11169
5. http://neversinkcreative.com/
6. http://www.funisok.com/
7. https://trello.com/
8. http://tidbits.com/article/13101
9. https://en.wikipedia.org/wiki/SHA-2
10. http://tidbits.com/resources/2015-07/Catalog-Library-pages.png
11. http://tidbits.com/resources/2015-07/Book-Ebook-Extras-pages.png
12. http://tidbits.com/resources/2015-07/On-site-cart.png