Un esempio di CV responsive

È semplice trovare un lavoro. Tutto ciò di cui avete bisogno quando cercate un lavoro è il vostro curriculum vitae in formato .pdf. Creare un semplice résumé (CV) in HTML5/CSS3 che si adatti bene alle varie dimensioni della viewport è un esercizio futile.

Tutte menzogne! Ecco quattro ragioni per cui è un’ottima idea creare il proprio CV in HTML:

1. I CV statici diventano presto obsoleti. Un unico URL assicura al recruiter o all’agenzia che il vostro résumé sia sempre aggiornato.
2. Un potenziale datore di lavoro potrebbe guardare il vostro CV su uno smartphone. Legare i nostri CV al formato .pdf fuori moda. Volete davvero che sia un rigido .pdf non responsive a rappresentarvi?
3. Modificare i files .pdf può essere un’esperienza dolorosa.
4. Un CV in formato HTML fai-da-te potrebbe mostrare ai potenziali datori di lavoro quanto vi piaccia quel che fate, il che non è mai un male.

Diamo un’occhiata ai requisiti per il nostro CV responsive.

• Deve essere semplice da mantenere.
• Deve apparire elegante.
• Deve adattarsi bene ai device più piccoli.

Deve essere semplice da mantenere#section1

Valutare la manutenibilità di un documento si riduce a questo: quanto efficientemente possiamo individuare e aggiornare le varie parti del documento? Il modo più semplice per ottenere facilità di mantenimento è quello di creare un markup minimale e chiaro. Quindi, questo è esattamente quel che faremo.

Esaminando il codice sorgente non vedrete nulla di sconvolgente: do un semplice header, abbiamo impostato due colonne e ciascuna colonna ospita diversi elementi article. Il nostro markup è completo in poche righe di HTML.

Deve apparire elegante#section2

Il vostro CV deve apparire meraviglioso come lo siete voi, così chiamiamo in aiuto la cavalleria CSS. Usando l’approccio mobile-first, definiamo delle regole responsive per le viewport più piccole (con larghezza inferiore ai 520px). Perché ho scelto 520 pixel come media query del punto di rottura? Questo design in particolare appare un po’ troppo condensato a dimensioni più piccole di 520px. Il numero è totalmente arbitrario e specifico per questo design.

Un po’ di stile non guasta, così ho aggiunto una semplice transition CSS verso la fine della nostra media query, la quale aggiunge un tocco gradevole nel supportare i browser. I browser che non supportano le transitions le ignoreranno. Allargate il vostro browser webkit da piccolo (meno di 520px) a grande per vedere la transition.

.date-ranges {
		width: 15.4639%;
    transition:all .3s ease;
    -o-transition:all .3s ease; 
    -moz-transition:all .3s ease;
    -webkit-transition:all .3s ease;    
}

Deve adattarsi bene ai device più piccoli#section3

Ridimensionate la demo e fate tutti i test che volete: il nostro design è mobile-friendly ma conserva anche il suo bell’aspetto.

Dove posso usarlo?#section4

Se avete spazio su un server, potete metterci il vostro résumé, così che potete dare il vostro url sempre aggiornato a un recruiter o a un’agenzia. Gli utenti di LinkedIn lo sanno: mentre scrivo, non c’è alcun campo nel profilo utente per aggiungere un résumé o un URL a un CV. PEr ora, siamo fermi al vecchio caricamento del documento. Tristemente, questa è la situazione attuale su molti altri siti di job hunting ed è esattamente per questo motivo che ho scritto questo articolo, per cambiare l’aria stagnante che stiamo respirando.

Come molti veterani brizzolati del lavoro sanno bene, un forte résumé e un colloquio quasi perfetto possono ancora lasciarvi senza il lavoro dei vostri sogni. La competizione è feroce e non diminuisce mai, ma trovare nuovi modi per distinguerci nell’attuale difficile economia è vitale per la sopravvivenza di noi sviluppatori.

Illustrazioni: {carlok}