Cyril Mottier

“It’s the little details that are vital. Little things make big things happen.” – John Wooden

Redesigning cyrilmottier.com

Some of you may have noticed the maintenance page this weekend and the new face of this website. I’ve recently spent some time lately working on a complete redesign of my cyrilmottier.com domain. Here is a brief explanation of the motivations behind this redesign and a list of the main changes.

3 or 4 months ago I received an email from my host telling me they were dropping support of my old version of PHP (5.2). The version of Wordpress used for my android.cyrilmottier.com blog was so old it wasn’t supporting the PHP 5.4 and can’t even upgrade itself to a PHP 5.4 compliant version… Not being a server/backend guy, I decided to go for a complete redesign of both the guts and the look of cyrilmottier.com.

No more PHP or MySQL

The new version of the website is now using Octopress. Put simply, Octopress is a static website generator. Some of the main advantages of Otopress over Wordpress is it requires no SQL and no PHP, is responsive by default, deals perfectly with code snippets and relieve me from the pain of updating stuff I don’t know well. The only required piece of software Octopress needs is … Apache.

Bringing simplicity

The cyrilmottier.com domain was previously redirecting to a landing page made of tons of redirections to subdomains. Whilst it keeps clear sections in your website, it is hard to maintain and require time I don’t have (nor don’t want to spend on). As a result, I decided to go for something way more simple:

android.cyrilmottier.com is now cyrilmottier.com

In the process, I removed several subdomains and redirections I considered outdated and useless :

  • My professional website
  • A prehistoric web page of my TI calculators apps
  • A old blog about my experience as an Erasmus student in Helsinki, Finland
  • A file manager I never ever used in 5 years

Holo-like theme

Aside from removing a bunch of subdomains, I also created a theme from scratch. Once again, the idea behing the ‘Carrot’ theme (don’t ask me why I decided to name it that way) is to make things simple, remove all distractful and useless info just like the Android Holo style does. I really think I managed to focus on the content by getting rid or minimalizing of all secondary information.

As a mobile UI/UX engineer and designer, I wanted to finally have a website that looked like what I would have done if my website was an Android app. You can now notice the new website is layout and density1 responsive. As a result, it renders like magic on phones as well as tablets and desktop

Do not hesitate to delegate

Static websites don’t let you create dynamic algorithms… After all that’s what “static” means :). In order to keep features such as comments or search I used a plain old design pattern in computer science: delegation. Starting from now, comments are managed by Disqus2, and search is done by the best search-engine in the world: Google.

Miscellaneous

Meaningless URLs are now over. When creating android.cyrilmottier.com I wanted to have short URLs to blog posts. The only purpose of this was to avoid the use of URL shorteners in social networks such as Twitter. However, using short URLs is far from being a great search engine optimization (SEO). Now that Twitter automatically shorten URLs, I’ve decided to switch to a more standard URL model:

http://cyrilmottier.com/<year>/<month>/<day>/<post-slug>.html

The previous version of android.cyrilmottier.com was great for accessing new content but it wasn’t easy to browse the entire content of the blog. The new version now includes an “Archives” page you can use to easily browse old posts.

Conclusion

I have spent quite a lot of time redesigning this domain but it was worth it. I learned tons of new stuff and I loved it. From a user point of view, everything should work fine seamlessly. However, as I said, I’m not a server administrator nor a backend guy so please contact me if you think something is wrong.

One of the redirection that scares me the most is the RSS feed (R.I.P. Google Reader …). The URL (from http://android.cyrilmottier.com/?feed=rss2 to http://cyrilmottier.com/atom.xml) as well as the format (from RSS2 to ATOM) has changed so please make sure you RSS reader now points to http://cyrilmottier.com/atom.xml.


  1. I’m only talking about the theme. Indeed, images from posts are not density-responsive for one single reason: Octopress nor HTML correctly handles it.

  2. Disqus comments are not activated nor migrated for now but I plan to do it as soon as possible.