22 Aug

Harbour Front HK Monthly #1

I’m happy to announce that Harbour Front HK will now introduce a new monthly event called ‘Harbour Front Monthly’. Harbour Front Monthly will cover a variety of topics around all things design strategy & process, mobile & responsive web design & development. The format will settle somewhere between presentations and hands-on workshops, rounded off by Q&A’s as well as possible discussions around the evenings topics. Of course there will be some time at the end of each event to mingle with your industry peers and have a relaxed drink.

The first event will be held on Wednesday, 27th of August at the Hive in Wan Chai. We will kick off #1 with the following talks:

  1. Don’t Overwrite My Stuff!
    An Introduction to Git for Front End Web Design – by Bart Verkoeijen
  2. Building Better Responsive Sites
    Tips, Tricks & Advice to Improve Your Responsive Design Projects – by yours truly

You can register for the first event right here on Eventbrite, add yourself to Lanyrd or follow @harbourfronthk on Twitter for the latest updates. We hope to see you there!

20 Aug

Grunt-processhtml Multiple/All Files in a Directory

A while ago I started to use Grunt in my projects and once you get your head around it, it can be a great helper. Unfortunately I find the documentation for some things hard to find and sometimes difficult to understand right away, so this shall serve as a note, in case you run into the same problem.

I’m using grunt-processhtml to replace various CSS and JS files with different ones, after the sources have been processed otherwise. So far my approach has always more or less looked like this, moving the processed file into the ‘dist’ directory:

processhtml: {
  dist: {
    files: {
      'dist/index.html': ['index.html']
    }
  }
}

For my latest project there are many more HTML files than just only one that need processing and the list suddenly got quite long. This wasn’t a maintainable solution after all:

processhtml: {
  dist: {
    files: {
     'dist/index.html': ['index.html'],
     'dist/page1.html': ['page1.html'],
     'dist/page2.html': ['page2.html'],
     'dist/page3.html': ['page3.html'],
     'dist/page4.html': ['page4.html'],
     …
     'dist/page20.html': ['page20.html']
    }
  }
}

As a result I wanted to grab all HTML files in the root directory, process them and then save the resulting file in a directory called ‘dist’. I couldn’t quite work out how to get this done and the documentation on file handling at first didn’t help either, but after looking at different other Grunt tasks and their file operations I finally figured it out. The solution to what I wanted to do now looks like this and works just like I needed it to:

processhtml: {
  dist:{
    options: {
      process: true,
    },
    files: [
    {
      expand: true,
      cwd: './',
      src: ['*.html'],
      dest: 'dist/',
      ext: '.html'
    },
    ],
  }
}

There are probably other options you can use but for now I’ll leave this for the basic task that gets the job done. I hope this helps in case you are looking for the same or similar solution.

07 Aug

Front End, Front-End or Frontend?

Despite so many people working, writing and talking about this field, it’s hard to find out what the correct spelling of “front-end” was. At times I can become quite obsessed about such things and so I went on a very short quest to find out.

While I was writing my talk on Front End Best Practices for WomenWhoCodeHK two weeks ago, I started to wonder once again what the proper spelling for “Front End” was?

It turns out that it’s pretty difficult to find the ‘correct’ spelling and opinions seems to differ widely. Many of the points made in below articles seem to have a valid reason for whichever their preference is and I really couldn’t take a side.

Then I went on to Google search and this yields the following:

  • front-end: About 405,000,000 results
  • front end: About 403,000,000 results
  • frontend: About 204,000,000 results

As we can see, “front-end” and “front end” seem to be the spelling leaders, with “frontend” only showing up about half as much. Because I’m not a very big fan of dashes and in consideration of the above results, I will stick with “front end” which has been my personal favorite for quite some time already. I also like the one-word-spelling, but I do like consistency even more, thus I will stick with one of the more popular ones and would love to see if there was only one proper spelling at some point :)

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 ;)