The BiteSizedJapan blog is now live, if a little rough around the edges.
Musings of a frustrated designer read more »
Archives for category: Projects
I’m still not totally happy with our Kameko designs, but there are so many distractions (especially at this time of year!). Sadly our Christmas card project became a bit of a rush-job at the end, but finally we have something online!
A couple of first-passes of place-holder backgrounds for the BiteSizedJapan twitter account (@bitesizedjapan). I’m not happy with these yet, but it’s better than nothing… Featuring, as ever, our hostess Kameko and some of the branding carried across from the layouts.
While AJAX has its place, it’s good to learn when not to use it.
We discovered with our Intranet project significant speed penalties introduced by loading a lot of dynamic content in via AJAX at the same time. It’s very easy to get carried away and try load everything in with jQuery, but on an initial page draw this is clearly a Bad Thing:
Take our Intranet portal as an example. It consists of 9 widgets, each of which has fully dynamic content. After the portal is initially constructed by the server, loaded by the client, and jQuery has initialised, each Widget then goes and fetches its own content. This resulted in an average 35 seconds until the page was fully ready. Clearly this in unacceptable.
Going back and re-working the widgets so that they “pre-populate” the data server side reduced this time to 5 seconds. Subsequent updates are then performed by jQuery AJAX calls so the user experience is unaffected.
A lot of this is due to locking – only two connections can be made to a web server at once from a single client, so an application that generates many AJAX requests will end up having request queued. Also all those requests going back and forth from the server generate a lot of overhead, not to mention that once all the data has finally been received by the client poor jQuery has to do a lot of work!
So we learned the hard way: be careful how you use AJAX!
Another week, and Misa-misa (AKA Vixen) has modified Kameko for BiteSizedJapan. She’s looking cuter each version!
In our infinite wisdom, for the BiteSizedJapan project it was decided that writing a Publishing system from scratch would ensure a much better fit for the magazine than trying to hack an existing content management system.
Let me say this up front: Content Managers are not easy to write!
Thankfully the pain is somewhat mitigated thanks to TinyMCE and a lot of jQuery.
Another late night with team BiteSizedJapan, but we now have some of our other community projects running for the magazine. Over at Flickr we have a brand new stream, we have a dedicated blog for the magazine over at blog.bitesizedjapan.com (a bit rough and ready) and of course we’re on Twitter (@bitesizejapan) now too. If that’s not enough, we’ve also setup a Youtube account for good measure.
blog.bitesizedjapan banner
Over the last few weeks we’ve been following the Nagisa Oshima retrospective at the Filmhouse here in Edinburgh. We bumped into Atsuko Betchaku who was there to organise a film discussion group, and after the film we had an interesting chat.
Atsuko is also in the process of putting together of the Japanese Institute of Scotland. The proposed Institute shares many of the goals of Bite Sized Japan. While the focus of the Institute is focused on Scotland (where BSJ is based) I’m hoping that in the future we’re going to be able to work together on local events (such as a filmgroup). To quote their web site:
Two Purposes of the Japanese Institute of Scotland:
スコットランド日本会館の二つの目的
- Assist to create the environment where Japanese population can live with ease in the local community as members of multicultural society of Scotland 日本人がスコットランドの多文化社会の一員として地元コミュニティの中で、安心して暮らせるような環境を 創る支援をすること。
- Spread information about Japan and culture related to Japan in Scotland
スコットランドにおいて、日本についての情報、日本に関する文化を広めること。
While we work like crazy lil bees on the content and publishing system for Bite Sized Japan, we found time to put together a dummy front cover for the magazine. The artwork is from our archive and we’re trying to track down the original artist. Anyone know who created it?
Issue 1 demo cover. Who drew the anime girl?
I have mixed feelings about cover design. April 2010 being our first issue, and we really don’t want BiteSizedJapan.com to be seen as “just another Anime magazine”. After all, that’s not what we’re about. We’re a Japanese Culture magazine, and Japan is far more than Anime, Manga and schoolgirls (no, really!). We will be far broader in our exploration of Japanese culture.
A quick google of “japanese culture” kicks up 100′s of interesting web sites that touch on similar themes to BSJ. While many are packed with interesting information, the majority feel like academic web sites or wikis. Not that there’s anything wrong with either of these, but they are hardly inspire or catch the eye. There are obvious exceptions such as the rather excellent www.tokyocube.com or www.pingmag.jp (sadly no longer published). This is the “cool” end of the market, but both of them lack the magazine format that attracts me to working on Bite Sized Japan.
Finding a balance between the “cool” and “academic”, while trying to keep our magazine format*, is challenging. For our premier issue its really important for us to catch the eye of casual surfers, while managing to promote that we’re an information rich publication, rather than just lots of pretty pictures of anime girls and funny things in Japan.
* There is of course one small caveat to all of this: We’re not a printed magazine. Being exclusively online means that pretty welcome pages are a no go: we have to present the guts of our content to our readers (and the lovely GoogleBot) first-hit. Our cover page is unlikely to be the first page a reader will see when they come across our magazine as we’ve actually reversed the order from a traditional print magazine!
So, if you come up with a fab design with sexy typefaces and a wonderful layout… and then you can pretty much kiss that goodbye within a browser. After all, you are limited to a handful of rather dull typefaces, and until now there was very little you could do about that….
The solution? Well, over the past week or so I’ve been playing with the Cufon font library.
Cufon is a very clever tool that lets you upload fonts and reprocess them in a format that can then be displayed in almost all browsers. Simply including the Cufon script:
<script type=”text/javascript” src=”/script/cufon.js”></script>
…the font script (generated via their web site)…
<script type=”text/javascript” src=”/fonts/EurostileT_400-EurostileT_700.font.js”></script>
…and a simple jQuery call and you’re good to go:
Cufon.replace(“.myCssClass”);
Cufon will walk through your page and replace all instances of “.myClass” with your fancy font. It’ll even maintain the formatting (including colour).
We’ve tested this on Internet Explorer 6 and 7, FireFox 3.5 and Safari 4.1 and it works like a charm – and ideal tool for a type-heavy publication like a magazine (BiteSizedJapan).