Alison Dwyer
by Alison Dwyer
Recruitment website design

Mobile-first recruitment websites; the ultimate conversion tool?

Kipras Streimikis 00 Julu Dek5w Unsplash

Write "yes" on the following text-area to display the CTA section

Google says you have to go mobile-first. So that parks any argument is you’re still not convinced that this is a business critical decision.  And don’t confuse mobile responsive with mobile first - there is a big difference, particularly when it comes to results.


Ok, so back to the argument (for those not yet convinced) about designing your recruitment website for a smartphone rather than a desktop. Take a look at what the digital landscape looks like courtesy of Hootesuite and the amazing We Are Social. Now Focus on the 5.1 billion mobile users, and the fact that up to 70% of web traffic happens on a mobile device.(CIODive, 2018). According to Indeed, mobile devices account for the majority of job search across most occupations.

Key statistical indicators for the world's internet, mobile and social media users

Mobile is not the right response

Now let’s talk mobile responsive vs mobile first. Mobile responsive means that CSS is used to shrink your desktop website to fit into your smartphone screen. So it is designed to accommodate the needs of desktop first and those users. Sure, the website will adjust effectively, but it’s a bit like an afterthought and does not provide the optimal experience that mobile users take for granted in all other aspects of their lives. Recruitment agencies have to take a step back and think carefully about their users - including the physical needs of using a desktop compared to a phone.

Thumbs up to mobile-first

The most important part of the body when using a mobile is the thumb. It’s all in the thumb action so designers need to think carefully where to position the most important content and CTAs; in the thumb zone. The outer edges of the screen - particularly as phones get bigger and bigger, are dead zones. The very clever Neil Patel says that designers need to organise content in a way that puts primary interactions front and centre, saving secondary and tertiary function for the top and bottom screen edges.

Neil Patel content organising diagram

Teeny, tiny real estate

At Volcanic, we’ve always said that a recruitment agencies most important real estate is their website. Well this has just shrunk dramatically on smartphones - so you have to make pixel on that screen add value. Starting with the nav bar. Get rid of it, that’s what hamburger menus are for. If you’re unclear as to what that is, it is those little horizontal lines at the top of a website that when clicked, will reveal the full menu selection.

Making the best use of the space insists on less is more; clear concise content, single sentences, short paragraphs, simple font and white space. We’ve outlined many of these design elements in our Jarvis Cole case study, because they underpin great UX. And as much as we say to make use of the teeny tiny area you have on a smartphone, please remember the good use of white space, because the brain still needs to breathe and white space remains a great way to highlight the big event; job search, the big message or an important CTA.

Mobile menu example

Get your A into G

Speaking of CTAs of mobile - don’t forget that wherever this link leads to, it has to follow the same rules of engagement relative to mobile-first. Quick and instant, landing pages equally need to be built for speed. This is probably why chatbots are becoming very popular because of the easy and instant engagement they offer - a more pragmatic example and one that can be implemented immediately are links that allow your phone number to automatically dial when clicked or for Google maps and directions to reveal themselves when your address is engaged.

Faster is better

Gone in three seconds is not the name of a movie, but rather that moment a user abandons your website on  mobile if it does not load fast enough.

There are myriad reasons why a page is slow but let’s consider the main culprits and some tips to mitigate the issues related to these.

Size matters - From JavaScript to style sheets, fonts to images, how much data that is being served will affect speed. Images need to be compressed in such a way as to balance the quality and the small size and there are tools that can you this. Try either TinyJpg or ImageOptim both are easy-to-use. Simplify the design so that not only smaller files are fetched, but fewer. Bespoke or multiple fonts should be limited to one, video is not ideal nor are things like pop-ups.

Content Distribution Network (CDN)  - It’s not just the data size that impacts load speed, it’s important that it is served through CDN. This is the network of servers distributed around the world that work together to provide fast delivery of content to load your recruitment website.

Trust through design

This is a theme that is invariably associated with compliance and Volcanic’s strong stance on ‘Security by Design’ more of which you’ll find on our resources pages. But did you know that consumers consider well-designed websites more trustworthy? So it’s essential in your quest to a mobile-first recruitment website faster that you don’t forget a human’s need for beautiful design. The key trends that have been identified or 2019 absolutely apply to great mobile design:

  • The use of vivid colours and bold typographical patterns  (make your words pop)

  • Abstract patterns - take a look at our website we are loving our amorphous blobs!

  • Gradients and duo tones extending into light and dark contrasting

  • Original and/ or hand-drawn  illustrations

  • Bright minimalisation - and remember white is bright.



Screenshot 2019 07 18 At 21
Recruitment website design

Jarvis Cole: How to improve candidate experience

Prev story
Recruitment website design

Jarvis Cole: How to improve candidate experience

Next story
Screenshot 2019 07 18 At 21