Version française disponible

Not so long ago, I was talking about the “Mobile theme” feature included in the Jetpack plugin to ensure that your WordPress blog is accessible on mobile devices by making its content legible.

I will not change my mind about this great plugin because it works very well and each new version of Jetpack brings lots of improvements. Also, the fact that there is nothing to configure, just a button to activate the theme is a big advantage, you can hardly do better. Yes, but… if you are not scared of doing some programming, there is something even better!

I’m talking about Responsive Web Design, a very trendy concept that is not going to fade away. With Responsive Web Design, the site is unified on all platforms and automatically adapts to the screen size. The identity of your site remains the same (theme, images, colors…) and it saves you from maintaining different versions: desktop, mobile, tablet… The management of your site is simplified and its maintenance becomes much easier.

Before, there were few screen resolutions available (usually people were using a 1024 x 768 resolution or, for the lucky ones, a 1280 x 1024 resolution), it was the time of the 17 and 19 inch CRT monitors (ouch, my eyes are hurting… ok I am talking about ancient history). Today, there are hundreds of different sizes and resolutions on the market, Internet is everywhere on your TV, in your car or even in your fridge (well I guess I see a little bit too far, but this all-connected world is maybe not so far). In short, it is no longer possible to work on fixed resolutions on a case by case basis.

Of course, in the case of a specific application, there are arguments against the Responsive Design. A web application will have slower performance compared to a native app. But it is not the point here. I want to focus on general websites with a broad target audience (a newspaper, an online shop…). These websites need to be available on mobile devices and they should avoid using dedicated mobile versions (I am talking about the famous URL beginning with “m”). For instance m.facebook.com, m.linkedin.com or m.lequipe.fr which will disappear sooner or later.

Test by yourself

Right now, you can change the size of your browser window, you will see that this blog will automatically adapt (if you see bugs or have any idea for improvement, let me know!)

CarmaBlog in 1024 x 768

CarmaBlog in 400 x 768

You have probably noticed it, there are different changes as the width of the window decreases:

• The main menu becomes smaller before being replaced by a drop-down list.
• Some blocks are moving on a new line (RSS icon and search box).
• The secondary content disappears in favor of the principal. On a small screen, we want to get to the point (articles in my case) and avoid too much scrolling.
• The shadow effect and the background disappear. On small screens, dozens of pixels can represent 10% of the whole size, you have to take care of that.
• Images are resizing dynamically to avoid excessive disproportions.

Plenty of Responsive frameworks…

Many frameworks exist to help you achieve a responsive site. The best known is probably Bootstrap, by the way that’s the only one I already used on a project. There are plenty of others:

• Foundation
• Gumby
• Unsemantic
• Skeleton
• Pure
• KnaCSS

Home-made Responsive

It is also possible to make Responsive Web Design by yourself, without any framework. Actually, my blog is a good example. Some code of CSS, some code of Javascript and a few hours of work, that’s what you need. The final result may be not compatible with IE6, it certainly does not show great and smooth animations, but it will be more than enough in most cases.

The secret is to use media queries available from CSS3, below are some code samples:

@media all and (max-width:1000px) {
	.sidebar div {
		display:none;
	}
}

If screen width is less than 1000 pixels, the right and left sidebars are hidden.

@media all and (min-width:870px) and (max-width:975px) {
	#menu ul li {
		font-size:.7em;
	}
	#header_image {
		height:150px;
	}
}

If screen width is between 870 pixels and 975 pixels, the header and the menu are smaller.

@media all and (max-width:870px) {
	#menu {
		display:none;
	}
	#menuselect select {
		display:block;
	}
	#header_image {
		height:80px;
	}
}

If screen width is less than 870 pixels, the menu is replaced by a drop-down list. The header image is shrunk a second time.

@media all and (max-width:585px) {
	img:not(.fixed):not(.avatar):not(.wp-smiley):not(#sb-player) {
		height:auto !important;
		max-width:80%;
		min-width:70px;
	}
}

If screen width is less than 585 pixels, images are minimized. Images with CSS classes “wp-smiley”, “fixed”, “avatar” or with the ID “sb-player” are not affected. I had to do that because I had the problem of having some icons like smileys getting magnified, also some strange behavior with the embedded slideshow of Shadowbox.js player… I also add a restriction on the height (because I think you need a good view to see the content of an image smaller than 70 pixels).

Note: I use the “!important” keyword to redefine a style already present. The value specified with the “!important” will always overwrite the others.

I also wrote some Javascript to create the drop-down list that replaces the menu. I do not show the code here (it is very specific to my site), but be aware that the function have no more than 15 lines. I took advantage of the fact that jQuery was already included in the project, to save me from some additional lines of code.

All put together, to make my site responsive, I wrote more or less 200 lines of CSS code (with the format above so many lines with only one closing brace). It is not as complicated as you might think.

There is one last important thing. In the header of your pages, add this meta tag to indicate that your site is suitable for mobile devices:

<meta name='viewport' content='width=device-width, initial-scale=1.0'>

Inspection

At the end, the longest and tedious part was to refine styles depending on the resolution. There is no secret, this is an iterative and manual process: change the CSS, refresh the page and check results.

To help you, you can use Responsinator, a good tool to test a site with the most common screen resolutions corresponding to famous devices. You can also install Firesizer, a Firefox extension to know the resolution of the browser window, very useful when building your media queries.

 Version française disponible

That’s a fact, our short-term memory is not very efficient. Perhaps are we able to remember a dozen things you have to do at the same time. Unfortunately, it is impossible to remember everything resulting in some stress caused by the fear of forgetting important things.

I attended a very interesting training given by Renaud Marly and introducing a bunch of good practices to help us in our daily tasks.

David Allen is the key figure of the Getting Thing Done (GTD) concept. His book “The art of stress free productivity” is the reference on this topic.

Make lists to capture your ideas You can improve your list permanently You can read it and decide to do You can use it as a means of reporting You trust these lists, you have written them You no longer need to remember You reduce your brain drain You increase your sense of control You unconsciously make your life easier

Choose your tool

• Use as much as possible a centralized tool to avoid losing control.
• I don’t want to disappoint you by saying that there is no good universal tool, the “Holy Grail” note-taking tool will never exist. Formats can be different, it can be a traditional paper tool like a notebook and a pencil, an electronic tool like a simple text file, a mindmapping tool or a more complex and complete software tool like Evernote… Try them and if you are satisfied with one of these tools, it means that you have found it… You will find a list of applications at the end of this post.

Be simple

• Keep your list as simple as possible. Avoid using:
  1. Subsections of subsection. A list with two levels is more than enough (outcome / actions).
  2. Several fonts with different sizes and colors. Your list will be too complicated.
• This simplicity will allow you to be confident in your list by focusing on the essentials, content.

Other tips

• It is not necessary, but remember to separate the actions from the outcomes:
  1. First level, outcome: deliverable, final result, decision, milestone
  2. Second level, actions: context, time, energy, priority

Working in an office, I work most of my time on a PC and my inbox is always open. Here are the best practices to manage your emails.

Manage interruptions

• Turn-off email notifications, this will allow you to minimize your downtime and stay focus on your work.
  During a meeting, I guess you change your status to “Do not disturb” on your instant messaging application, here is a little bit the same.

Process all emails in one go

• Do it a few times a day, 3 or 4 times.
• Unless you work in a helpdesk service, it will be enough. In case of emergency, the person will call or visit you.
• The worst thing that can happen is that you have configured the push email service on your mobile phone to receive a notification of new incoming email. If you are in this situation, ask yourself: why did I do that? What are the good reasons?

Apply the “2-minutes” rule

• A rule to apply to every incoming email, three possible cases:
  1. Do it: If less than 2 minutes, process the email right now (read it, classify and store any attachments, do a quick check, reply if the sender is expecting your answer)
  2. Differ it: If you realize that it takes more than 2 minutes to process, flag it and put it in a todo-list
  3. Delegate it: You are expecting an action or reply of one of your addressee, use the “waiting for” rule (see below)
• At the end, the goal is to have no more email to process, the famous “Inbox 0“.

Apply the “waiting for” rule

• Goal is to keep track of every action you have delegated, the list of emails you are waiting for a reply.
• Some email clients allow you to use labels, in this case, create and apply a label “Waiting for”. If this is not the case, one trick is to send these emails with yourself in copy (bcc). A rule that you have previously created will take care to filter these messages, marking them as read and moving them in a special folder.

Also note the existence of the Pomodoro technique, a time management method which uses a kitchen timer to work during periods of 25 minutes. These periods are separated by short breaks (5 minutes). Goal is to speed up your productivity by keeping your concentration level at an optimal level.

What about me?

It is difficult to mix personal and professional parts of your life, we often need to use two different tools. I’m no exception to this rule.

Personal todo-list

I use a simple text file that I share on my various devices thanks to Dropbox. I have organized this file into 2 sections: the urgent things I have to do during the day or the week, and the less urgent and pending things I have to do during the month or the year.
The fact I use a simple text file is very important, it allows me to focus on the content only. Thus, I am not able to underline or put in bold sentences and that’s exactly what I want, I don’t want to waste time for that.

Professional todo-list

I use a classical notebook to write my different tasks. Actually, it is enough because I use Jira (a technical tool in relation to my job). Jira is an online bug tracker that allows you to create tasks you can assign, comment, prioritize, etc. From time to time, depending on the project and my team, I also use the famous agile task board with the three columns: todo, in progress, done. Each task corresponds to a post-it that I move from a column to another following its progress.

Professional inbox

I read my emails as soon as I received them, I did not turn off the notifications. If I’m busy, I can be very focused on my work and not so easy to disturb. Sometimes, I even no longer see the notifications on the screen.

Personal inbox

I look at it several times a day. These emails are less intrusive because I have to go to the webmail on my own to check my new incoming emails.

The last word

All these new habits are not so easy to start and some of them not very natural, but give it a try, persevere and stand firm, you will measure real progress.
Keep in mind that everyone has his/her own method, there is no standard or miracle one. A good technique for someone may not work for someone else.

What about you? How do you organize yourself?

Some tools available

• Remember the milk
• Todo.txt
• Doit.im
• Microsoft To Do
• Sandglaz
• Workflowy
• Fargo.io
• Evernote
• FreeMind
• Any.do