If the mobile traffic to your job pages is like Ongig’s or our clients, you’re seeing about 15% to 25% of your users using a smart phone or tablet.  And that % is about double what it was last year.

But the smaller screens mean that you’re going to have adjust the design of your job pages — one method is “responsive design“.

We were delighted to see Asana  do this, for example, with their job descriptions.

Asana Job Description on Desktop Responsive Design-1

Above is how a typical Asana job description (for UX Designer) looks if a candidate is looking at their desktop or laptop.

There’s a lot of information you can fit on desktop/laptop screens.

But this page would look really crappy on a smart phone, except that Asana did something about it — they used responsive design to change how this job description would look on mobile devices. When I view the same job on my iPhone I see it in the following way and I did not have to scroll anywhere but up and down.

Asana Job Description Responsive Design iphone 1 Asana Job Description Responsive Design iPhone 2 Asana Job Descripotion Responsive Design iPhone 3 Asana Job Description Responsive Design iphone 4 Asana Job Description Responsive Design iPhone

The “Before & After”

If Asana represents the “After in the “Before & After”, let’s examine a job description from another company (Hitachi) to see a job without (“Before”) responsive design.

Below is a  Hitachi job description for a Production Supervisor and it is most definitely not leveraging responsive design.

Hitachi job description without responsive design on smart phone

Notice how difficult it is to read the text of the Hitachi ob description compared to Asana’s.

The main reason is that Hitachi left all of their information on the screen, forcing the candidate to tilt their smart phone, zoom in out and move all around the screen to consume the content (do you really want your candidate doing that extra work?).

A simple fix would be for Hitachi to delete or move non-vital information which would then magnify.

Hitachi job description with responsive design — Inbox

If they used responsive design then they could move objects of content around so that the text would appear bigger and the less vital information could be put lower down the page or, better yet, removed completely.

Back to Asana — clearly they get design.

I’m not sure what responsive design tool Asana is using, but Ongig uses the free Twitter Bootstrap and we aim to make every page on Ongig as consumable on mobile devices as it is on desktops.

If you need help making your job pages look awesome, ping me or the Ongig team! For tips on writing job descriptions, check out How to Write a Job Description — Best Practices & Examples.

Note: If you want a simple example of responsive design, try minimizing the size of your browser when you’re looking at this blog posting (assuming you’re on a desktop) and you’ll see certain objects disappear. We’re still learning how to optimize this, but you get the point. 

by in Job Descriptions