∅ the empty set

Back from California

Golden Gate

Fighting jet-lag, the head full of amazing images, we're back from California.

Once again, I used Tumblr as a travel weblog to collate pictures and words throughout our trip (with the Publisher theme from Projector Themes).

As I explained in a previous post, it remains the best tool available for this purpose. Paired with IFTTT it aggregated my Swarm (aka Foursquare) check-ins and the few Instagram pictures I crossposted.

The only caveats that come to mind are,

  • Be careful to post in the right blog if you have more than one;
  • On the mobile app, I still can't find where the entries saved as drafts go.

Other than that, it works as a charm. The photosets layout engine was fun to play with both on mobile and in the browser. The online mass post editor turned out useful to assign tags to several posts at once (is this new?).

I love Tumblr.


Retrofitting responsive design

The BIS launched their retrofitted responsive website today. Congratulation to the @BIS_org web team!

This was a project I worked on this Winter throught to Easter. The idea was to preserve as much of the current website as possible while making it responsive to mobile devices.

The challenge was to design a CSS stylesheet with media queries with some custom JavaScript while editing as little of the HTML markup as possible.

The website had been redesigned fairly recently, and they didn't feel the need for a full redesign. There would be no content update or review and no visual design either. They were to stay as is. So over the course of a few workshops in their premises, I made an inventory of the website's components and designed how they should behave at different viewport widths.

Navigation

The main challenges were related to navigation. The main navigation has entries and 3 levels dropdown on the desktop width. That's a lot. This generates long breadcrumbs…

Main nav

This was solved by pulling out the third level navigation. The main menu was display the first and second levels in a expand/collapse fashion, and the third level would be available via a toggle switch when it existed. The best place to put it turned out to be next to the breadcrumb.

On narrow viewports, the breadcrumb was trimmed to display a link to the parent level only. This mimics the back button behaviour and is immediately understandable. For more options on third level links (our current level), expand the third level navigation by clicking on the arrow next to the breadcrumb.

Bis header
Sample02

Navigation: 1st and 2nd levels

Sample03

Navigation: 3rd level

Layout

The three column layout was easily tackled as its content was used systematically throughout the site (second level navigation / main content / aside content). These could easily be linearised.

The search is a important navigation tool and had to be easily reachable whatever screen used. So placing it up the top was the ovious choice. Custom CSS and a sprinkle of JavaScript fixes its behaviour.

Toolbar

The upper right toolbar was the only markup that required a major markup change. Webfonts were used for icons and the whole block was moved down in the page footer. Absolute positioning moves it up on wider viewports.

Otherwise, some custom jQuery, Modernizr, and a couple of IE conditional comments took care of gluing everything together. It was a fun project to work on and the BIS team did a brilliant implementation. Congratulations to all :)


#663399Becca

, Rebecca Alison Meyer will be buried after fighting a fight no one could win against cancer. She was six years old to the day.

It feels so unnatural for a child to die before his or her parents. I can't imagine a more devastating experience that a parent can face. Missing the child never goes away. A piece of yourself is lost and the future is forever changed.

To celebrate Rebecca, Matt Robin came up with the idea : “let’s get #663399Becca trending for Thursday 12th.” So, that's why my Twitter avatar is purple (#663399).

Let's paint the world purple for Rebecca today.


Le Temps : eaten up by ads

I was browsing my news feeds this morning at breakfast and I followed a link to an article published by our daily newspaper Le Temps to discover it was eaten up by ads.

Le Temps

Scrolling down to get rid of the banner ad didn't help much:

Le Temps

Scrolling to bring the article's title to the top of the window neither…

Le Temps

Now what really gets me is that I have an electronic subscription to this newspaper and my reading experience is crippled with useless promotional information I never asked for!

I use a cookie manager (Ghostery for Safari) in my browser which prevents this kind of page littering – unfortunately my iPad is devoid of such a tool…

Le Temps

Now, the web app version of Le Temps doesn't display this behaviour, but chooses to send you to a splash screen each time you hit the home button #gaaargl

Le Temps web app

Moreover, this behaviour can't be circumvented: preventing add cookies such as Smart AdServer simply breaks the app by generating a JavaScript error.

These are sad days for a daily newspaper that I enjoy and respect. I might just give up on their electronic versions which either litter your screen with ads, forgets your credentials and makes it close to impossible to reference permanently an article.

Back to my newsfeed…


I am a proud uncle

Sea sand heart

My nephew James, soon to be 24 yrs old, leaves for Australia this evening.

James is going back to settle with his girl friend T. - one of my favourite names :), taking what could be a life turning decision.

It takes a lot of courage at that age to decide to fly to the other side of the world, with the prospect of having to look for a job, and maybe requalify. It's a leap into the unknown, but what an opportunity!

I'm proud of my little sister C. who, after devoting more than half of her life bringing up her children, will say goodbye to her eldest tonight not knowing when she'll see him again.

I'm proud of my Mum, who's known James almost on a daily basis since his birth, and who is waving him goodbye with her loving smile and comforting big hug, giving him the confidence needed to part with his land and family.

We all want the best for our children, and to see them take control of their lives is both a source of pride and sadness as we must learn to let go. Especially so, when we know we can't pop over for the week-end…

The world may fell a “smaller” place with the web, social networks and FaceTime, but nothing lives up to hugging one's child in the real world.

So, I'm a proud uncle, brother and son today. Our family is all the richer with James seizing the day and living his life fully, now and here.

A good friend of mine once told me "you can only evolve in imbalance". Thinking out of the box and leaving your comfort zone behind broadens your mind and is the making of you.

So, follow your feelings James, and seize the day! Australia may be miles away, but you'll always be close, in a special part of my heart! Farewell buddy :)

Love you // uncle david


older entries


About

Hello, my name is David Roessli. I am a freelance web designer and developer based in Geneva, Switzerland.

This weblog is an nth attempt to solve my multiple online personalities and weblog/rss feeds burnout issues. (more)

Words

I have been contemplating the idea of upgrading my desktop Mac since this spring. The latest 27" iMac (Quad-Core) seemed the perfect candidate, but the release of Apple's 27" Monitor last September made me stick with the Mac Pro...

Music

Like many, I discovered Melody Gardot through her second album "My One and Only Thrill" and immediately took to her soft voice and elegant style. Last night, Fabienne and I had the opportunity to go and listen to her...

Pictures

Check out my latest Flickr ramblings. Mostly day to day cameraphone pictures stolen here and there.


© 2000-2012 David Roessli | v4.1 | as valid xhtml and css as possible | hosted by pair Networks | RSS feeds.