Bart De Waele » Wolf's Little Store

Wolf's Little Store (10 unread)

My Google I/O highlights

Posted: May 21st, 2013, 8:45am CEST by Wolfr

Tags: [edit]
If you’re a tech reporter, chances are big you are busy. Adobe MAX was 2 weeks ago, last week there was Google I/O, there’s an Xbox event tonight and Apple’s WWDC is underway.

This post is about my highlights from Google I/O. I didn’t go but over the long weekend I watched the sessions that looked the most interesting to me.

Seemingly every session has been recorded and has been put/is being put online at the Google Developers YouTube channel.

If you only watch one thing, watch the keynote. I feel it’s worth watching entirely to get a feel of where Google is going. For me Google is the most important tech company in the world right now.

They announced Android studio. Some kind of IDE for Android. One interesting feature is a per-device layout preview. Curious how this could help me when designing Android apps.

I tried downloading Android Studio but couldn’t get a simple project up (at least not in 5 minutes).

Indoor maps. Pretty epic. See one in action by searching Google for “Bozar Brussels” and zooming in. The presentation on this is here: indoor maps. And then I watched another session on Design principles for maps.

One of the presentations (I think the keynote) showed the Referral flow for a Play application inside Google Analytics. It also showed the developer console which surely seems to beat the measly iTunes Connect. You can roll out your apps in phases, assign beta testers directly from the developer app, get semi-automatic translations etc. In terms of services, Google is owning Apple.

More:
- Some presentations that might appeal more to web designers: a presentation on CSS filters and one on designing for high DPI: video and slides.
- Interesting new feature: Over the air installs
- Two interesting presentations on web components and AngularJS. I’m very interested in the concept of web components – it seems with web components web development will grow up.
- A presentation by Paul Irish and Dan Heberden on package management for the web (mostly about Bower).
Fronteers #d3js meetup (2)

Posted: May 14th, 2013, 8:50am CEST by Wolfr

Tags: [edit]

Just a quick note about the Fronteers meetup next week (see earlier post).

We had 100 people who reserved their spot, and 20 people on the waiting list. We got word from Thomas More that they have room for 150 people. So that means there’s 30 spots left.

Sign up here.
3 weeks with an Android

Posted: May 13th, 2013, 6:05pm CEST by Wolfr

Tags: [edit]

A few weeks ago Coolblue started selling the Google Nexus in Belgium. It used to be that you couldn’t order it here – some people went through quite a bit of hassle to get one.

After my previous Android experience (an HTC Desire S) - I was quite relieved to see that Android has grown quite a bit to a more mature and stable platform.

I’m using the Nexus as my primary phone these days and I must say I quite like the experience.

First and foremost, I love the big screen. I used to be in the “WTF is that in your pocket”-crowd but really, when you use your smartphone as a pseudo-tablet for watching videos and reading articles a bigger screen is a better experience.
Notification system
The notification system is the #1 best thing about Android. I never use the iOS notification center since it’s so bad. But Android has a nice system where you can swipe away a single notification or dismiss all notifications. Much better than the tiny touch target in iOS’s notification center.
Global sharing
The sharing system between apps is also much better. It’s a lot more “system-wide” than iOS i.e. if you use an app like Pocket once you install it, seemingly every other app can share to Pocket.

Sharing data between apps is often more cumbersome in iOS, where you have to go through hacky bookmarklet ways or rely on the developer to have provided sharing between the exact combination of app X and app Y.
Quality of apps/Holo UI
In terms of UI, more and more apps are respecting the Holo UI guidelines. It’s very flat which sometimes makes it unclear what is tappable and what’s not but overall it’s a well documented and well thought out system.

I’ve mostly used “big name” apps so far like Twitter, Facebook, Foursquare and Instagram.

Overall, their quality is great but sometimes it seems like the Android version is playing catch-up with their iOS counterpart (and losing).

Having seen (and been in) many projects where this exact situation was the case this doesn’t come as a surprise.

Some apps (like DoubleTwist’s Alarm Clock and Instagram) look like a bizarro clash between Android 2.3, Android 4 and iOS where I’m not really sure if the designer ever cared about the Android design guidelines.

I know this is the work of some big name designers (hello Tim and Sebastiaan) but I am wondering what their line of thinking is to not follow Holo. Maybe because the rest of the world is seeing Samsung’s TouchWiz and HTC’s sense interface, both of which have an abundance of shadows and gradients.
Advanced features and tinkering
When Android fans say that iOS has been stuck for years I get what they are talking about.

I don’t necessarily agree with that statement but there are some features in Android that are just really nice.

For example, Android apps auto update in the background.

Google Play is wonderful. You can send apps to download on your device through a website. Developers can comment on app store reviews.

What’s also nice with Android is that you can “tinker” a bit with it. If you want the weather to show up on your homescreen, you can do so.

My iOS home screen is a ridiculous combination of app folders and is nowhere near what I want on my homescreen, which is mostly quick access to system functions like camera/flashlight/WiFi/bluetooth.

The fact that apps can access more system functions comes with a the obvious downside of instability. I’ve experienced a few app crashes which might be related to some of the widgets I’ve installed (I used Widgetsoid).
Conclusion
I’m happy enough to be using the Nexus 4 as my primary phone, which for me says a lot. Google I/O is around the corner. I’m excited what the future holds for Android.
Mobile web app framework/tool recommendations

Posted: April 30th, 2013, 7:34pm CEST by Wolfr

Tags: [edit]
I’m looking for framework/tool recommendations for putting together a mobile web app prototype.

One of the projects on my plate right now is designing a native iOS, native Android and mobile web app.

I’m doing most of my work in Photoshop but it feels elaborate to be designing each and every screen in it. Like my other projects these days I intend to only design the visual “styles” in it and make the rest in code.

However, this project being a “web app that looks like a native app but is not” (think forecast.io) poses some problems that I didn’t have before namely: a lot of animation, a single page app, multi touch events, etc.

I am putting together some code to form my own framework for this but there are a lot of missing parts. The genius of Hammer.js leads me to believe that there must be more tools out there that are brilliant yet that I never used before.

I don’t want to be writing logic that already exists out there (and probably in a much better form) i.e. reinventing the wheel.

Therse are the main things I’m looking for:
- Some kind of framework that handles “pages” and internal links through anchors; I want the prototype to be a single page javascript application with no page refreshes (so it can be added from homescreen on iOS). jQuery mobile’s click handling/page handling is a good example but I want something lean so I can write my own CSS.
- Some kind of framework for webkit animations. I tried animate.css in a previous project but I feel there must be something better out there by now.
- Some kind of “bootstrap” CSS for iOS/Android style forms. I figure I will just use -webkit-appearance to customize the form elements to look like native iOS/Android components but a framework that handles the pitfalls would be nice.
Any other suggestions within the theme would also be cool. Who’s got some advice?
Fronteers #d3js meetup

Posted: April 29th, 2013, 9:41pm CEST by Wolfr

Tags: [edit]

The Fronteers #d3js meetup is almost selling out faster than WWDC: in less than a day over 80 people signed up making this the most popular Fronteers Belgium event so far.

I wanted to host a small event (see) and now we have this – great! Toon will be giving an intro to D3js. Andries will tell you what it’s like to run a studio that focusses on interface design and data visualisation.

In between there will be some demos of awesome d3 work by Bart and Piet. And I’ll also show a bit of what I did recently.

Don’t forget to sign up and see you there!
Twitter Music

Posted: April 25th, 2013, 8:41am CEST by Wolfr

Tags: [edit]

Twitter’s music app is beautiful, in that now-tiresome way apps from VC-backed companies are required to be, sacrificing utility for aesthetics and looking dated as soon as it hits your neighborhood app store. That’s fine, they’ve got plenty of designers to restyle it every 18 months.

Still have to test it – it’s U.S. only for now. Here’s Jim Ray’s well written opinion.
The short story of the AB Concerts website

Posted: April 20th, 2013, 11:35am CEST by Wolfr

Tags: [edit]
Five years ago I was working at a small web design firm in Ghent: Netlash (now Wijs). It was very successful – over a two year period there was a new hire every 2 months.

It was a nice time in my career – we were doing small websites for small companies and started getting bigger and bigger projects every month.

At some point, I was told we were going to make the AB Concerts website. I was excited since this was my favorite concert venue and I really wanted to make this something great.

My boss and the information architect (this is what we called our UX person) came up with a good concept that added a social network layer on top of a good informative site. It was a bit ahead of it’s time but still stands.

Unfortunately, the design was going to be done by another company… that mainly specialized in print and advertising. I got their initial proposal and suddenly I wasn’t so enthusiastic about the project anymore.

While these guys did quality work, what they produced was very print-like and there was no match between our vision of what it should be and what was designed. It had fixed frames with scrollbars and tiny text and no webfonts – you know the kind of design I’m talking about.

I decided to take matters into my own hands and proposed that we pitch another design to AB and let us handle the design part of the website.
Some designs including an interaction design for an audio player (where I discovered my true calling) and a light version which I actually like more than the dark one.

The idea was executed – I worked some nights and weekends to come up with what I thought was a good approach. I was coached by my design lead and we ended up with something web-like that could work.

Then at some point in the process I found myself in a meeting room with my boss, the ad agency and the people from AB. It was an awkward meeting since we “took” their work but in the end we got the web design part of the job.

It’s really impossible to separate the design and building part of a website and come up with a good end result.

We spent a ton of hours collectively making the website great. This was one of those projects where I could feel the passion from the team in a way that just wasn’t there when we were making sites for hospitals and lawyers. Subject matters.

I remember the solid relationship I had with the lead programmer on the project. It was a bit of a ping pong game – I would design a small bit and he would develop it. Repeat. He went on to co-found his own company.

I remember struggling with sIFR/Flash and Cufón to get a custom font for the headings. Things are easy these days with @font-face and Typekit!

I remember the “profile” page which had so many variations that I ended up designing everything in the browser since that made more sense. These days I seem to be designing most projects in the browser.

I remember that the site eventually won a usability award.

And what I’m most proud of is that the design still stands after five years.

(But to be honest, now it’s really time to modernize some things!)
My HTML prototyping jQuery plugins

Posted: April 15th, 2013, 8:45am CEST by Wolfr

Tags: [edit]
There’s some code I’ve been using over and over when building HTML prototypes, mostly to show UI changes, for example:
- to toggle buttons (use jquery.extendedinput.js)
- to create forms with repeating elements (use jquery.multiadder.js).
Over the weekend I made jQuery plugins from that code. I’d figure I’d share it on Github so people can use the code and improve upon it.

jquery.extendedinput.js provides some generic markup patterns for HTML prototyping.
- allows you to show or hide HTML elements based on the state of radio buttons, checkboxes, select boxes.
- contains a generic pattern to trigger a HTML element when another element is clicked.
- contains a generic pattern to create a toggle between two views e.g. list and map view.
View the online demo.

jquery.multiadder.js provides a generic markup pattern to prototype “multi adders”.

A data attribute (data-maxrows) optionally limits the amount of items.

View the online demo.

jquery.bootstrap.simple.lightbox is a simple image lightbox using jQuery and Bootstrap.
- This lightbox builds on Bootstrap using the Bootstrap modal styles.
- Keyboard close with escape button
- Easy to add, just add a data attribute data-lightbox to a linked image.
View the online demo.
D3.js user group

Posted: April 13th, 2013, 10:48am CEST by Wolfr

Tags: [edit]

Lately I’ve been using and exploring d3.js a lot, mostly as a modern charting solution for the web.

A screenshot of a chart I’ve made using d3js. In the actual app it animates nicely.

It’s a great project with one of the most solid APIs I’ve ever seen. I know a few developers who’ve been using it too.

We were wondering who else in Belgium is using d3. If you know someone using d3, please redirect them to this post. If you use d3.js yourself please comment on this post and make yourself known.

This is meant to gauge interest in a d3.js themed user group/meetup in Belgium.

(P.S. If you want to know what it is capable of check this out.)
Why I choose an open source CMS

Posted: April 13th, 2013, 10:31am CEST by Wolfr

Tags: [edit]

There’s been some talk over on Twitter about choosing the right CMS. I’ve talked about why I choose WordPress. I want to delve a bit further into this in a blog post.

Expression Engine fans have been looking at Craft since, well, thing don’t seem to be going so well with Ellislab/Expression Engine.

I tried installing Craft and it didn’t work. I should take a look at it again when I find some more time and it’s out of beta.

Looking at the packages most Craft sites I would have to build would cost $600 since I would need “Publish Pro”, “Localize” and “Users”. These basic modules cost $149-$299.

Now, I’ve evolved from building €1000 websites a long time ago, but $600 is still a healthy cut from any small website budget.

So there is the issue of price. If it’s really a quality product I can live with that. But for me, the bigger reason why I’m hesitant is that I feel these guys are reinventing the wheel all over again. How exactly is this better than WordPress?

Craft has less features and every module costs money. Also, you are locked in a system where if development goes stale (hello Ellislab!) there is no way for the community to continue it. To their credit the core is a free product, but that doesn’t mean that everyone has the right to go and fork it.

It’s very unclear from the homepage what the licensing terms are. If you are going to release a commercial product based on licensing – please put the licensing terms on your website. This tells me these guys don’t have their legal down.

If the WordPress core team suddenly gets a disinterest in working on WP, a new core team will rise. This is the beauty of open source. If you spend time on releasing your own custom modules you will get back from the community.

I’m hearing some arguments about the cleanliness (or rather, dirtiness) of WordPress’ code base. That you can’t use any HTML you want. This is simply untrue. What is true is that some of the PHP in WordPress a bit old school because of legacy reasons. That’s pretty normal: WordPress is celebrating it’s 10th birthday soon.

It’s true, WP is not the best tech stack for making applications, it’s meant to be a CMS for magazine/news/blog/business type websites. And for that, it’s great.

For years, I’ve been using WordPress. While it has it’s share of problems it’s evolved into a full blown CMS. The WordPress core team has been doing a fantastic job. For example, a few months ago WordPress 3.5 was released with much better media management.

There are tons of great plugins like ACF, WP Super Cache and Yoast SEO.

The latter is a good example of community: while I’m personally 100% disinterested in SEO, some of my clients are, so I can serve them with this plugin. It will take a while until similar plugins surface for Craft, if ever.

There is no way a small team with a commercial product can achieve these levels of greatness. And if they ever do, they are just playing catchup. In 3 years WordPress will be bigger and better too.

You only get greatness through openness. For CMSes, the days of closed source development are long over.