Microsoft reverted to flat colors and shapes for their Windows 8 design. As you can see below, the logo used to be wavy and the gradients gave it a solid 3-D feel. The Windows 7 operating system went further and encased the logo in a candy-like round button for the start menu. Then in Windows 8, they went in the other direction and made everything flat.
This new app from Wiley Publishing gives you access to the latest news, published titles and articles, and events in Physics and Astronomy, Maths and Statistics, Engineering and Construction on the go, and lets you save articles for reference.
Click here for iOS
Click here for Android
When updating legacy content, I often come across cases where we never got the original Photoshop files from the designer or it's so old that it got lost many generations ago. So I'll work from an existing JPG and use selections to keep parts of a composition. In the case below, we need to swap out the old logo for "Wiley" and replace with the Akzidenz-Grotesk font. The text was however placed on top of a background that was hard to rubber stamp out. So I kept the 3 square images and recreated the background using filters.
Before
Wiley China is actually a minisite of Wiley.com US used for marketing purposes. As you can see with the old site, it was out of date for some time already. It needed some new templates to handle features more easily and in a more fixed manner. The new site was divided up and organized so that it would save time for non-technical editors. At the same time, it keeps the look consistent with the mother site.
Before
As part of a partnership with TED, Wiley had a minisite setup under their main Wiley.com. Unlike most minisites, this one used the same header and footer as the main site, so it saved a bit of time in coding the templates.
It's been a while since Wiley.com had a redesign... long before I started working there. I'm almost constantly redesigning sites or launching brand new ones at work, but this one was by far the largest one I've done. It wasn't the most technically difficult, but the amount of content and various page types made the project time consuming. This was so heavy on the frontend that 3 of our developers dropped their normal backend duties to help me out.
The production of energy, a critical resource for the welfare and prosperity of society, is a complex process that may also cause adverse environmental and societal effects.
As of this weekend, Dummies.com is fully mobile optimized for iPhone and Android devices. In general, creating a mobile site is pretty easy. Pages have simpler layouts and there are less browsers to worry about, but the challenge in this case was hooking up the mobile templates with a site that already existed. Here are the technical highlights of this project:
Sharing Content
The mobile site is setup so that editorial staff never need to logon to edit both sites. Whatever is done to the desktop site will reflect on the mobile. The structure of the sections are reading from the same source, but applying different layouts/CSS.
Regions
The store part of the site is globalized to display the relevant currency while shopping. The site now does 2 checks to the user: 1) whether they are mobile or desktop… 2) what region of the world they are in.
Slideshow
More time was spent on this article type than all of the others combined! This was a new type that went up on the desktop site earlier this year. Translating it to mobile line for line didn't work at all. It was important to get some sort of touch and drag functionality into it, but that's not fully supported via HTML/JS yet. The closest is a plugin called iScroll, which overrides the native scroll with its own. Check out the Pilates series for an example.
Video
Previous work on Dummies.com allowed video content to be played back on iOS, which doesn't support Flash. Going mobile added another layer on top of this. Now there's a check for mobile device that serves up a smaller player. So…
- If you're using a computer or Android tablet, you get the Flash player at full size
- If you're using an iPad, you get an HTML5 player at full size
- If you're using an iPhone, you get a mini HTML5 player
- If you're using an Android phone, you get a mini Flash player
Not all e-book formats are as straight forward as Kindle or iBooks. One of the more difficult ones to deal with is Adobe E-books (.ACSM) because it's a protected format. Purchasing the e-book and getting it on your PC is the easy part. It can get complex when you try to transfer the purchase to your e-reader or tablet. In an attempt to reduce customer service calls, a new, detailed help page was created with step-by-step instructions for all of the top devices. Check it out at... www.wiley.com/go/help/ebook
PfeifferCustom, a service selling custom training material went up about a year and a half ago. Just last Friday, it had its first redesign. Previously, the homepage was a splash advertisement. The new one is more functional and provides a lot of "help" instruction based on experience over the past year. With the growing list of franchises, a more complete top navigation was also created. Now, the user can get to any franchise from any page. The old site had "about" links in the topnav.
The Dummies author widget was recently redone and went up this Monday. The old version was a very static one where the book was overlaid on a GIF image. This worked up to a certain point because it required the book to be a certain height. The newer portable guides had a taller aspect ratio that would break the widget. So I based the new widget on the Wiley one that went up a couple of weeks ago. The widget now stretches with the height of the book cover, making it compatible with all Dummies guides.
One of the things that went up in last weekend's build was a new tool that generates widgets like this for authors to use. With it, they could simply enter an ISBN and the little app will generate the code for use on their personal sites and blogs.
It has a clean neutral look so it will fit in well with any page design. It was coded to have a flexible vertical dimension. So it accommodates the wide variety of aspect ratios across all brands and series. Clicking any part of the widget will take user to Wiley.com's multi-retailer page where they'll have several options to buy the advertised book.
Here's the address of the new AARP Bookstore by Wiley:
bookstore.aarp.org
So far, we have travel, health, cooking, money and technology e-books available as well as FREE content.
We had another Saturday morning deployment today, though not as early as the usual 6am. Here are some of the highlights:
WIREs: Another new journal went up for WIREs... Developmental biology is concerned with the fundamental question of how a single cell, the fertilized egg, ultimately produces a complex, fully patterned adult organism. Click here to visit WIREs.
AARP Bookstore: In partnership with AARP, we'll be selling a bunch of our books with special branding through this co-branded bookstore. The site components went up with this build, but the URL has not yet been publicized. I'll provide it in a future post once it goes public.
All Sites: All sites in our system will now have links to buy books from Foyles, MPH, Kinokuniya, Sony and WH Smith if they are detected as being available.
The Wiley's Scientific, Technical, and Medical Databases mini-site was updated last week. It was another quick design refresh to modernize the look and make things easier to navigate for the user.
Before
After
Visit Wiley's Scientific, Technical, and Medical Databases
CliffsNotes underwent a number of changes with the last deployment. The "college" header item now goes to a 3rd party section. "Cliffs Films" was added as a new section. The Literature section had a bunch of design changes after some user testing. "Chapter Summaries" now has a more prominent button on the first page of each Litnote. The graphic repeating the Litnote title was removed because it wasn't serving any purpose other than bumping the TOC lower down. Rolling over the next and previous buttons now displays the page titles. Click here to visit CliffsNotes.
WIREs had a logo change and a new homepage feature that links deeper into some of the articles. Each journal now has it's own unique header graphic and matching splash image. Click here to visit WIREs.
Leadership Challenge was completely redesigned. Previously, it was still stuck in an outdated 800x600 design. The new site was widened to 1024x768 and given a fresh new color palette. Click here to visit Leadership Challenge.
Sybex has always been one of my favorite computer reference brands. I was happy when Wiley acquired them so I could get discounts on the books. Now I'm also happy that I could contribute to the website. For the past few months, the development team in Indianapolis has been working on a redesigned site, updating the previous one which was in a very old style. It wasn't even 1024x768 yet! We used a lot of jQuery to make the navigation rich and compatible across browsers and platforms. It also helped in customizing around the restrictive template we were working with.
The template we were moving Sybex into is a mini-site that actually lives in Wiley.com. Many of the past ones visually look like part of Wiley, but with Sybex, we used a lot of style overrides and inserts to really make it stand alone. The dominant dark colors take the attention away from the green Wiley tab in the upper right. And the techie community will appreciate the nice graphics and visual effects. The new site also does a great job of highlighting all of the titles.
Click here to visit the new Sybex
A couple of weeks back, Dummies.com added a quiet update. There's now a JavaScript detecting iOS and Android mobile devices whenever a video page is accessed. When detected, it'll switch to an HTML5 video player (rather than the default Flash one). Now users accessing Dummies videos on the iPhone or iPad won't get a blank box or error. This is a very useful update because the iPad is a great tool for how-to instructions, which Dummies.com has a lot of.
Android users probably won't notice a difference because those devices were already able to play the Flash version. It just serves up HTML5 if Flash is not installed.
CliffsNotes
This site was recently redesigned to have a more modern look. CliffsNotes was already the right width, but it needed some color and layout changes to keep up with its competition. Though I worked on some tweaking of this site, my work was primarily on the standalone mobile version. It was the first Wiley to go fully mobile, so it was fun to research and try out what methods worked best.
Click here to visit CliffsNotes
eLS
eLS, or Encyclopedia of Life Sciences was a very similar project to Comprehensive Physiology. It had identical component types, but a different design. This went along very smoothly as I learned a lot from the previous project and also took jQuery and CSS classes just before starting.
Click here to visit eLS
My WileyPLUS
The largest relaunch of all was WileyPLUS. It involved a login system, a customizable account for students & instructors and a homepage server move. There were so many moving parts and different groups involved that we had to kick this one off on a Saturday with some cleanup on Sunday. I worked primarily on frontend JavaScript/jQuery/CSS for My WileyPLUS and the homepage.
Click here to visit WileyPLUS
