> beautiful code & photos

about <

Posts tagged: design

Ghost: RetinaJS integration

In this post, I will show you how to quickly make your Ghost blog retina-ready.

If you are new to the retina thing, please read the Wikipedia page so you know what we are talking about.

Step 1: make your images retina-ready

I won't explain the whole thing about how to make your images retina-ready but this article covers the most of it.

Whether or not you are using the provided Photoshop export script, just make sure you save your files with @{factor}x.{ext} instead of _{factor}x.{ext}.

  • {factor} is the image dimension factor
  • {ext} is the
> Continue Reading

CSS: Quick tip to test your design responsiveness

Meanwhile I'm finishing my photography portfolio, I was wondering how could I test my design responsiveness as my screen resolution is 1440x900 max so I figured out a work around...

For low resolutions, it's quite easy because you only have to resize your browser window or use Web Developer extension which provides some predefined common window sizes.
But what about 1600x1200 resolution when your laptop screen is 1440x900 (for my example)?

You could either use tool like Responsive Design Testing by Matt Kersley OR, you could use your native browser functionality if your design is well done. I mean if

> Continue Reading

Introducing: joris.me

Hi! I'd like to wisely introduce you my new online resume. I worked hard to reach this level of quality so I'm kinda proud of it.


  • HTML5 + CSS3
  • Spritted CSS images
  • Smooth scrolling using jQuery
  • Full responsive layout (from 320x240 to... whatever!)
  • Mobile version (goes with responsive layout)
  • Supports IE7+
  • 98/100 on Google Page Speed
  • A Grade on YSlow
  • HTTP caching + compression
  • Twitter Bootstrap
  • Semantic HTML5 design
  • RDF/XML + Dublin Core metadata

It took some time for me to realize it because I'm not a designer and I didn't know what I really wanted... Wanted something very neat,

> Continue Reading