TheAkiba V7 Revamp

It was a learning experience, and sometimes a total nightmare to rethink. Luckily I got it done, in a pleasant way.

When I look back around five years ago when TheAkiba was first established, it was running on a free theme, and for most amateurs, we rarely pay for those premium themes or plugins since most of us won’t even need them. There are always free alternatives, and when you start to realize that everybody else is using the same thing as yours, it is time to rethink. So why not just create our own theme? Let’s stop here and guess I could come up with another few thousand words for my learning experience. But now, let’s just get more focused on the latest revamp.

Making a Decision

I was using my almost-four-year-old Macbook Pro 13 to design previous themes of TheAkiba, with a 1280×800 screen, I ended up with a 1190 pixel width, non-responsive layout for the last version. It looked great on my old Mac, utilizing every inch of the wide screen. And then when I upgraded to a Macbook Air 13 earlier this year, I was almost shocked to see that the layout looked totally different, especially with a higher resolution of 1440×900 for the Air’s 13 inches screen. Everything was smaller, and quite different than in my old Mac. And more importantly, the theme was not responsive and with all the gradients, shadows that I added, it was almost unusable on my iPhone 4. Then I knew that things needed to be done.

Looking into Data

Before taking out a piece of paper and writing down what’s in my head randomly, something else needed to be done first. The data. I needed to know what operating systems, browsers and everything else that my readers relied on. So I fired up Google Analytics and dug into the data.

For those who don’t know, we have around 700,000 visits over the past year, that is around 2,000 visits per day. Around 82% of users used Windows, and around 7.5% used Mac, 4% and 2% for iOS and Android respectively. For browsers, which was more important than OS, 48.5% used Chrome, 29.5% used Firefox, 8% used Safari, 6.8% used IE. For screen resolution, 25% used 1366×768, 15% used 1920×1080, 9% used 1280×800, 7% used 1024×768, 6% used 1440×900.

A simple summary, in all the traffic we had during previous year, 7% were from mobile and tablet (10% for the latest month) and was increasing. Over 90% of our readers possessed big screen with at least 1280 pixel in width. Also I was surprised to see that IE users only took up less than 7% of the pie, compared to a usual of 30% worldwide, which both meant our readers were more tech savvy, and we had more space to grow our audience. However, it also means that the blog is not very well optimized for IE and support only IE 9.0+.

From all the data I have, the conclusion is obvious. I need a responsive theme that will work well on different browsers, as well as mobile and tablet compatible. And to avoid being too fancy which slows down on old smartphones and tablets, I need something simple and light.

Starting the work

Now I have all the information I need to know, it’s time to start the project. As usual, I use Reverie, the WordPress framework I created to build a theme quickly, instead of starting from scratch. I updated Reverie to the 4th version right after the release of Foundation 4 earlier this year, and it is still the most popular WordPress framework for Foundation. Reverie 4 has everything from Foundation 4 and it’s mobile first, which means I customize the theme for smaller screen devices first, and larger screen later. This method keeps the theme on smaller screen devices clean, light and fast.

For the new theme, I basically apply the flat design trend which it’s clean, light and of course, trendy. However it is not 100% flat, I still use a small amount of gradient and shadow, thus it won’t ended up a terrible interface like Microsoft Outlook. Flat design is convenient, flexible and extendable, it is simple, not simpler and should not be abused. So a mix of skeuomorphism and flatism did the trick. This somehow reminds me of Apple’s iOS 7 redesign, guess now I know the reason why Scott left the company.

TheAkiba V7 Revamp
A fully responsive layout for all devices, from tiny to ultra large.

Designing for Readers, and Writers

It was a difficult decision to make. Should I make it a vintage blog look, or a more fashion ones, like a magazine style where sliders and big images are all over the places. First, I ended up with a layout similar to Pinterest. With all the fancy Masonry and Infinite Scroll in place, feeling like I was going to create a bloated site. The process was smooth and I basically finished the layout and function of the homepage in few hours. After few days, I decided it was just a joke, archived and deleted everything.

After all the trial and error, I was finally able to come up with the decision. The layout of the new design is heavily borrowed from Medium, with all other features and decorations added on the top of it. Small screen devices also get a brand new looking and guess you will like it. To achieve the goal of this redesign, author profile page was also revamped, now a much more polish view and even support cover image, which you will like if you are a social media user.

With a new profile view, I am now happy to announce that TheAkiba will soon be open to more users who are interested in becoming writers for us. However, it is generally difficult (and scary)  to keep your schedule elegant when all those things big or small coming to your life. And I am going to make it a breeze for all of our current and future authors. You will be able to write when you feels you want to write. Will get back to this very soon, stay tuned if you are interested.

Typography

We have plenty of fonts to use thanks to Google Web Fonts. Despite the increasing popularity of Open Sans, I decided to use Lora, one of the best serif fonts you can find on Google, as the major font for reading. Together with icon fonts which are used by lots of sites nowadays, the site is basically retina ready.

The New Toy

I am not sold on semantic classes, and most of time I write in hybrid. With this version and with the power of Sass, I was able to create some semantic classes while keep using non-semantic classes for my code in Sass. A handy feature called Placeholder was introduced since Sass 3.2 and enable users to create snippets that will be export only when Extended. This is extremely awesome to keep a manageable HTML which was more or less abused in my previous non-semantic versions, while at the same time decrease the size of the CSS output.

The Speed

The new design is extremely optimized for speed. There are no social buttons embedded and instead, linked icons are used so there are no more lagging due to data transmit among all those external social media sites. Furthermore, Infinite Scroll, Lazy Load and AJAX are used to improve the loading speed of the page and large images. The site was moved to a new hosting early this month and should be more stable.

The fact is, I tested the design on several devices and browsers personally. It looks great and runs smoothly on my iPhone 4 running iOS 5 (still). For desktops, beside all the modern browsers running on my Mac, aka Safari, Chrome and Firefox, I’ve also tested it on IE9 and Firefox 4 on PC running Windows 7 and both work as expected. For browser compatibility, it is still recommended to be IE9 and up. For IE8 users, the separate stylesheet was included and might resolve some problems of the layout.

What’s New?

In this new version of the site, engagement is emphasized. I’ve optimized it to be more easily to leave comments, ratings and reviews (coming soon). Of course, I am not going to make TheAkiba a comprehensive review site, it is just not possible and there are already loads of good blogs/sites doing great jobs out there. And instead, if you are interested in Anime and Japanese pop culture, you are most welcome to send us your post. Currently I am still working on a frontend publishing system fo TheAkiba, which will be quite useful for our users to quickly submit interesting topics to us.

It’s great to have the new theme finally running on the site, feeling much cleaner and faster, but not too cheap. Still I will spend the follow few weeks tweaking things here and there, as well as finishing the revamp for Series Card, which also gets a brand new design and much more features. The last revamp was made almost two years ago, I would say the previous theme has a great end.

TheAkiba V7 Revamp
Click the Love button at the end of each post to show your appreciation. And a new way to discover what other readers love.

Love Me Bu(tton)

Not everybody likes social network, and having all the Likes sent out to Facebook also means we are losing some of the valuable feedbacks from our readers. If only we have such a Like button to tell which post our readers like and we can bring more in the future. So here I added another nice feature to the site, the Love Me Button. The naming idea is Love Me Bu from the long-lost expectation of the second season of TV Anime Skip Beat!.

With this little green (not yet pink if you like it, let me know) button at the end of every post, you can simply click it and it will automatically add a value to the button, no other thing you need to do, no need to sign up to annoy social media. With more and more readers using this feature, we will be able to know what our readers are thinking. And the best part, you can see a “Loved” section on the top navigation of our homepage, where it always lists the most Loved 20 posts across the site.

For a bouns, a cute heart will show when navigating to the next page while browsing the homepage or archive.

Cover Story

Now in archive view, i.e., when you browsing through our channels, topics (former tags), you will be recommended a post related to your current channel or topic on the left sidebar, which I personally call it Cover Story. It is also good for discover topics you might not be aware of.

Brand New Navigation

The old fixed top bar is gone, instead, a small icon is always on the top left corner waiting for your click. It will guide your to almost everywhere on TheAkiba, including the searching function.

Give me some feedbacks

It is always good to hear from different voices, especially if you are running into troubles with this new design. Let’s me know in the comment.