25 Jul

Front End Best Practices

This week I held a talk about Front End Best Practices at WomenWhoCode Hong Kong at the Wynd co-working space. While I was putting the talk together it became clear that there could be more than enough material to make this a three hour long session and it was quite difficult to select what to put in and what not to roughly fill one hour. Especially without knowing the level of expertise of the audience, it was quite difficult to choose the right content and I tried to strike a good balance that had something for everyone, from novice to expert.

Nevertheless, again I noticed how things have changed in the web design world over the years and how many things we, as web designers or front end developers, actually have to know, learn and keep up to date with in this ever evolving industry. Still many times I hear things like “It’s just HTML/CSS/JS” which is very likely due to the lack of knowledge and understanding of what goes into today’s (responsive) front end development process.

Here are the slides from that talk “Front End Best Practices” and even if you’re not a developer, there might be some take-aways and an idea of what’s up in the front end world. This is not even the most extensive list, but rather a selection of best practices, tips and advice.

24 Jul

A Different Mobile Navigation Pattern – Made in China

I recently came across the mobile shopping pages of Taobao and noticed their rather not so common approach to their mobile navigation. I’m not quite sure what to think of it at the moment though, but what I do like is that it’s something different in a way.

I haven’t gone into extensive testing on different devices, but it seems to work fine on iPhone and the MiUI Android browser. Because of the major market share of Android in China, I suspect it works on most other Androids, too.

T-Mall screenshots with mobile navigation

I do like the positioning and the general direction of this idea, since it allows you to easily reach the navigation without a problem.
Because of its absolute positioning this at the same time might also a problem that this approach faces…

During the workshop we ran at Harbour Front Web Days, we talked about perfect positioning of navigation and showed off where the hard to reach areas for navigation are located. This falls exactly in line with this navigation being positioned in quite a smart way, because it’s very easy to reach, (almost) no matter how large your phone is. For larger phones like a Samsung Note 3 or the Xiaomi Redmi Note, this position actually works much better than e.g. a ‘hamburger’ at the top of the page.

Luke Wroblewki wrote about optimizing for touch across different devices quite some time ago and his article best illustrates the different pain points and challenges of navigation positioning on touch devices.

Visit Tmall (This navigation only works on touch-enabled devices it seems)

Visit the mobile site of Taobao (This navigation also works with mouse-clicks)

I think this approach could turn into a solid solution for mobile devices and even might be a future version or replacement for our beloved hamburger menu icon, if done well.

I’m curious to hear your thoughts on this approach. Let me know!

28 May

The Ultimate* Guide to Conference Speaking

Over the last few months I have been collecting all kinds of different posts on speaking at conferences, from the dos and donts to sound advice and how to get into speaking in the first place. Without a lot of blah, here you go:

For Speakers

Getting Paid, Not Getting Paid And Other Options

Recently many people have been thinking, writing and discussing about getting paid for speaking. There are a lot of very fair points and it’s great to see how motivations differ. I personally think it depends a lot on where you coming from and to what level you want to take it to. Many people have different reasons for why want to speak and you’ll have to decide for yourself. The following links contain good pointers and thoughtful opinions about the different possible directions you can take in this regard.

For Conference Organizers

We all know that it (mostly) needs two hands to clap, thus it’s not only on the speakers to make an effort, but conference organizers can also help make everybodies experience a happy and great one:

Ready, Steady, Go

With all of this information you should now have all the basic knowledge to make a sane call on what you need to get started, how you would like to approach your speaking career and where to take it from here. For those of you who have been speaking at a few (or many) events already, I’m still confident that you’ll find some useful tips to enhance your future talks in some way or another. Happy speaking!

* I’m of course not claiming this collection ultimate or complete, but ‘ultimate’ is an extremely good looking word ;) I also didn’t want to call it something like “13 Links and what happens after reading will leave you speechless…”, because I’m strongly opposed to this trend of bad writing.
Fun Fact: While reading through the above linked posts again and copying the titles I noticed that only about three or so didn’t have text-transform: uppercase applied to the article headline. Must be a trend going on here ;)

26 May

On The Existence of Slow(er) Mobile Networks

We have been talking about web performance being part of the design and how UX can be improved by performance for quite a while now and web performance has even become a whole new discipline to specialize in. Web Performance belongs and luckily already gets a lot of attention early on in the process by making it part of the strategy, part of your design thinking and so on.

Unfortunately this concept isn’t too widespread yet and I’m always surprised to come across designers and developers who don’t recognise a 1MB or 2MB pagesize as a problem, because “with nowadays’ bandwidth it isn’t a problem anymore”, who don’t test their designs for page speed and other performance and pretty much don’t care about mobile users on a slow connection speed at all, unless it’s a ‘mobile-first site/service/app’, misunderstanding the approach of ‘mobile-first’ as a design strategy in the first place. But back on topic:

While I was in Europe over the last two weeks, I used prepaid SIM cards including data. Usually I don’t do any research before buying one, I’m just happy to get my hands on one that gets me online quickly. Mostly this approach works well, at other times I might not get the best speeds or coverage. Most of the time this is ok, since I don’t use it for a very long time and I get somewhat of a good 3G or at least an EDGE connection which basically gives me all I need. Don’t get me wrong here, of course I don’t mind a faster connection at all, but for short travels, I’m not too picky.

This time, I was slightly surprised to see that my prepaid O2 Germany SIM wasn’t getting me the same experience that I was used to. I’ve been using this SIM on all of my Germany travels for more than a year now and it mostly provided me with a stable 3G signal. Unfortunately on this last trip GPRS (speed comparison), or even worse no coverage at all, was not rarity.
Quite surprising to me, but a definite indicator to those still in doubt, that slow networks aren’t only limited to developing countries, but might exist just in front of your very own doorstep. No matter where that doorstep.

25 May

Harbour Front Web Days

It’s been a while in the making and it wasn’t easy to make everything work out due to timings and scheduling, but I’m happy that we’re finally getting close to the start of Harbour Front Web Days, welcoming ZURB in Hong Kong. The Harbour Front Web Days will be spread out over three evenings with a different focus each night. Topics range from general product design advice and best practices to more technical topics on how to use front end frameworks and build responsive designs and a ZURB Foundation hands-on workshop. For some more details, have a look at the site and the schedule and of course, register ;)

03 Dec

Getting Ready to Grunt

Over the last few months (or should I even say years?), frontend development has become much more advanced, mature and many new tools have been popping up. One of these tools is the build tool Grunt, which helps you run certain automated tasks, like e.g. compiling SCSS files, minifying CSS or JS files, moving compiled files to another directory and so on.

After seeing people use Grunt more and more and also noticing that a lot of projects on Github use it, I decided to finally give it a shot and dive into it. I have to say it all sounds much more complicated than it actually is and after a couple hours of playing around with it, I have gotten my head around the basics and included Grunt in a first project.

I basically started with the following two articles, plus checking out a few projects and their Gruntfiles on Github to get a better idea on the real world usage (even these were way over the top for a Grunt beginner, but it still helps to get a better idea).

Grunt – A build tool for front-end projects

GruntJS: Getting started

It’s quite rewarding to finally understand the Grunt story and being able to use it in your projects. And now onwards, there’s still a lot to learn about it!

02 Dec

Talks from Chrome Dev Summit 2013

It already took place a few weeks ago, but there were some great talks at the Chrome Dev Summit 2013, especially on browser and web performance. Fortunately there are two video recordings available, so we who haven’t been there can watch the talks and I can only recommend them!

Have a look at the summit schedule to find the talks you’re interested in, since both videos (unfortunately, but not complaining!) are in one piece, roughly 8 hours each.

Day 1: Chrome Dev Summit Live Stream (Day 1)
Day 2: Chrome Dev Summit Live Stream (Day 2)

My favorites (in no particular order):

Enjoy.

10 Nov

Introducing ‘layout boundaries’

‘Layout’ is the process a browser undergoes to calculate the position and size of each element in a document before it can start painting pixels. The process of layout can be costly, especially on low powered mobile devices.

There’s so much stuff happening on the performance side of things these days, it’s interesting to see from how many different angles this can be approached, whereas they all go together in the end. Thus, here’s one more on performance optimization during “layout’.

Introducing ‘layout boundaries’