Koding av et responsivt CV i HTML5 / CSS3

Denne artikkelen er en del av vår "Web Responsive Design-serien" - bestående av verktøy, ressurser og opplæringsprogrammer for å hjelpe deg med å lage nettsteder for brukere av alle plattformer. Klikk her å se flere artikler fra samme serie.

Nesten alle i virksomhetsdelen har opprettet et CV på et tidspunkt. Når du arbeider som frilanser, kjemper du alltid for å lande nye prosjekter. På grunn av denne forbigående arbeidssyklusen bidrar det til å gi potensielle kunder en kort oversikt over tidligere erfaringer. Og hvilken bedre mulighet enn å tilby din profesjonelle CV på nettet?

Demo
Last ned kildekoden

I denne opplæringen vil jeg demonstrere hvordan vi kan bygge en responsiv resepsjonsoppsett på en side. Jeg skal kode alt i HTML5 / CSS3 for å fungere skikkelig på ulike skjermoppløsninger. CV vil også støtte microdata drevet av schema.org for mer tekniske SEO fordeler.

Bygge dokumentet

Jeg starter nettsiden med en HTML5 doktype og standard meta elementer. Men for å få denne utformingen responsiv må vi sette opp noen ekstra komponenter. De fleste av disse er typiske metakoder og støttes i alle moderne nettlesere.

     Online Responsive Resume Demo

Meta view tag er avgjørende for å få den responsive teknikken til å fungere på smarttelefoner. Vi tilbakestiller skalaen som 1: 1 slik at layoutet vises piksel-perfekt. Du vil også legge merke til at jeg har tatt med et eksternt stilark fra Google Web Fonts. Jeg bruker to egendefinerte skrifttyper “Simonetta” og “Balthazar”. Unike skrifttyper sikkert ta tak i din besøkendes oppmerksomhet og passe harmonisk inn i en enkelt-sidedesign.

Jeg har også oppsett en liten IE betinget som inkluderer noen åpen kildekode skript for eldre nettlesere. Internet Explorer 8 og eldre har problemer som gjengir HTML5-elementer og CSS3-mediesøk. Men heldigvis har noen smarte utviklere funnet ut hvordan man får disse til å fungere gjennom JavaScript.

Hovedinnholdsblokkene

Hele dokumentet er pakket inn i en div med mange forskjellige blokkavsnitt inni. Toppen

taggen inneholder bildet mitt, navn, e-postadresse og andre viktige metadata. Etterpå har jeg brutt hver blokk inn i en

element for resten av innholdet.

Når du endrer størrelsen på siden, faller disse blokkelementene under hverandre grasiøst. Jeg har satt opp noen forskjellige forekomster av medieforespørsler i et eksternt stilark. Dette gjør det lettere å holde styr på stiler når du går tilbake for å redigere noe senere.

   Jake Rocheleau
 Freelance Writer & Web Developer
  Hudson, Massachusetts, USA  [email protected] Min portefolie • @jakerocheleau

Før vi hopper inn i detaljert CSS, vil jeg forklare mer om bruken av mikrodata. Hvis du ser nøye ut, har jeg sølt attributter i mange forskjellige elementer med navnene elementtype, itemscope, og itemprop. Alt relaterer seg til Schmea-prosjektet som håper å tilby en datastruktur for nettet.

Formatering Nyttig Microdata

Alle de store søkemotorene, inkludert Google, Yahoo !, og Bing har akseptert Schema som den beste syntaxen for dataoppretting. Ved å merke informasjon om deg selv, hjelper det disse søkemotorene å vise relaterte resultater for innholdet ditt online. La oss bryte ned hvordan du setter disse opp.

Attributtattributtet blir brukt på enhver beholder som inneholder informasjon på et skjemaelement. Dette følger alltid av elementtypeattributtet, som i dette scenariet beskriver en person. Inne i denne wrapper div kan jeg merke noe innhold ved å bruke itemprop sammen med noen av detaljene som er oppført på deres dokumentasjonsside.

Den anbefalte metoden er å pakke inn innholdet ditt i en span-kode i stedet for å legge direkte til elementet. Når du merker noe som et bilde, bør du legge det til img element direkte. Men ellers får du mye renere oppslag ved å pakke inn dataene dine i strekkmerker.

Hvor mye er for mye?

Jeg vil hevde at det ikke er noen grense for hvor mye detaljer du kan gå inn på. Mikrodata er tilgjengelig for å hjelpe datamaskiner til å gjenkjenne personer, organisasjoner, produkter og andre elementer i en online-kontekst. Jo mer informasjon du kan tilby, jo bedre.

Det er verdt å holde og åpne sinnet og se hvordan du kan bruke denne mikrodata i aspekter av ditt eget nettsted. Hvis du bruker 10-15 minutter gjennom Schema dokumentasjonen, er det mye enklere enn du tror. Vi kan se på to solide eksempler fra CV-demoen:

  skillset
  Utvikling
  HTML5 / CSS3
 JavaScript og jQuery
 PHP Backend
 SQL Databaser
 Wordpress
 Pligg CMS
 Noen mål-C
 
 
  programvare
  Adobe Photoshop
 Adobe Dreamweaver
 MS Office 2007-2010
 cPanel & phpMyAdmin
 Xcode 4

Når jeg noterer mine forskjellige ferdigheter, har jeg satt opp en ny container som definerer ItemList-skjemaet. Det var ikke noen type ferdigheter eller erfaring å liste under en person, så dette er et trygt alternativ. Verdien her er at Google kan forstå hver itemListElement er relatert til hverandre. I dette tilfellet har vi en liste over språk og programvare jeg vet hvordan jeg skal jobbe med.

  Nylige artikler
   10 Nyttige fallback metoder for CSS og Javascript • Publisert i Juli 2012
   Skriv om nettadresser i WordPress: Tips og plugins • Publisert i Juli 2012
   JPEG-optimalisering for Internett - Ultimate Guide • Publisert i Juli 2012
   9 triks for å designe den perfekte HTML-nyhetsbrevet • Publisert i Mai 2012
   Guide til A / B-testing med Google Website Optimizer • Publisert i Mars 2012

Et annet godt eksempel er artikellisten som finnes nederst i bunnen. Det er et skjemaoppsett for artikler og blogginnlegg, alt relatert til innhold funnet på nettet. Jeg har angitt artikkelen URL og publiseringsdato som er mer enn nok info for disse søkemotor robotsøkeprogrammer.

Bare husk at mikrodata handler om formatering av innhold som skal organiseres av datamaskiner. Denne enkeltsidige CV er et perfekt eksempel for å definere egenskaper for en bestemt person. Disse skal ikke være nyttige på alle nettsider, men det er en spennende metodikk å forstå.

Relative CSS-stiler

I denne siste delen får vi se på hvordan du kan stile hele denne nettsiden. Mot toppen av stilarket definerer jeg noen innledende tilbakestillinger og grunnleggende elementegenskaper. Disse inkluderer topptekster, listeposter og ankerlink-hovereffekter.

* margin: 0; polstring: 0;  html høyde: 101%;  kropp bakgrunn: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); skriftstørrelse: 62,5%; polstring-bunn: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; farge: # 454545; skriftstørrelse: 3.6em; margin-bunn: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; farge: # 484848; fontstørrelse: 2.5em; margin-bunn: 10px; tekst-dekorasjon: understreke;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; farge: # 777; font-weight: normal; fontstørrelse: 1.8em; margin-bunn: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; farge: # 656565; font-weight: bold; fontstørrelse: 1,75em; margin-bunn: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; farge: # 565656; fontstørrelse: 1.8em; linjehøyde: 1.4em; margin-bunn: 15px; polstring-venstre: 35px;  liten font-family: "Balthazar", serif; farge: # 656565; skriftstørrelse: 1.6em; skjerm: blokk; margin-bunn: 6px;  ul display: block; listestil: none;  ul li padding-left: 45px; liste-stil-type: none; vertikaljustering: topp; bakgrunn: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bunn: 5px; font-familie: "Balthazar", serif; farge: # 666; skriftstørrelse: 1.6em; linjehøyde: 2,3em;  img grense: 0; maksimal bredde: 100%;  en farge: # 5582d6; tekst-dekorasjon: ingen;  a: svever tekst-dekorasjon: understreke;

Ingenting er for interessant, bortsett fra noen av de egendefinerte skrifttypestablene. Jeg tok også et unikt punktikon i stedet for å bruke standard “plate”. Du kan prøve å søke gjennom en katalog som Icon Finder når du prøver å finne en lignende design.

/ ** @group kjernelayout ** / #w margin: 0px 50px; polstring: 20px 40px; polstringstopp: 35px; bakgrunn: #fff; min bredde: 260px; maksimal bredde: 900px; grense bunn-høyre-radius: 8px; Grensebunn-venstre-radius: 8px; -webkit-grense-bunn-venstre-radius: 8px; -webkit-grense-bunn-høyre-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header bredde: 100%;  / ** @group personlige innstillinger ** / #info float: left; margin-bunn: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-grense-radius: 3px; border-radius: 3px; -webkit-boks-skygge: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-boks-skygge: 0 2px 4px rgba (0, 0, 0, 0.2); boksskygge: 0 2px 4px rgba (0, 0, 0, 0.2); bakgrunnsfarge: #fff; grense: 1px solid #ccc; polstring: 5px;

Det er bare noen få viktige blokkområder på siden som krever oppmerksomhet. Selvfølgelig er wrapper div oppsett med ekstra marginer og polstring. Også maksimal bredde er begrenset til 900px fordi en større størrelse føles som siden har for mye hvite plass. Jeg har også brukt avrundede hjørner nederst på siden for en jevnere effekt på øynene.

Responsiv utforming

Muligens er det mest avgjørende aspektet av dette online-CV det responsive funksjonalitet. Jeg har fem forskjellige brytpunkter oppsett for å oppnå ulike effekter når du endrer størrelsen på nettleservinduet.

@media bare skjerm og (maksimal bredde: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; tekstjustering: center;  # info float: none; skjerm: blokk; tekstjustering: center;  #photo float: none; skjerm: blokk; tekstjustering: center;  #w polstring: 20px 15px;  p polstring: 0;

Den første 740px er rett rundt der bildet vil kollidere med vår headertekst. I stedet for å la bildet falle ned på høyre side, fjerner vi begge elementene og senterer hele oppsettet. Jeg har også økt teksttekst for header for å gi en mer solid innvirkning.

Da vinduet blir mindre har jeg fjernet litt ekstra polstring fra wrapper div og avsnitt. Det neste problemet vi løper inn etter at overskriften er fra ferdighetene UL notering. Jeg bryter ned to-kolonne-tilnærmingen og har i stedet listedobber som flyter ved siden av hverandre.

@media bare skjerm og (maksimal bredde: 570px) ul li display: inline-block; polstring-venstre: 15px; bredde: 140px; bakgrunnsposisjon: -5px 0px; margin-høyre: 6px; linjehøyde: 1,7em;  # ferdigheter-venstre, ferdigheter-høyre margin-bunn: 15px;

Dette krever også omplassering av mange av standard tekstegenskaper. Vi må oppdatere linjens høyde og plassere hvert punktelementets punktikon. Jeg har satt en fast bredde slik at rutenettet virker mer organisert til neste brytepunkt.

Koding for smarttelefoner

De tre siste mediene er små, men svært viktige. Når du bytter mellom landskap og portrettmodus, vil iPhone endre størrelsen på hvilken som helst mobil nettleser. Dette er også tilfelle med de fleste Android-enheter og Windows Mobile-telefoner.

@media bare skjerm og (maksimal bredde: 480px) ul li bredde: 120px;  #w margin: 0 20px;  @media bare skjerm og (maksimal bredde: 320px) #w margin: 0 10px;  / ** iPhone kun ** / @media skjerm og (maksimal enhet bredde: 480px) ul li bredde: 150px;

Når vi først treffer 480px eller mindre, fjerner vi litt mer polstring fra omslaget og re-størrelse listen gjenstander på nytt. Deretter ved 320px har jeg fjernet noe av margarommet utenfor dokumentet. Du kan fortsatt se den teksturerte bakgrunnen, men det er ikke veldig viktig på en så slank vertikal visningsport.

Til slutt bruker jeg max-enhet bredde å målrette mot iPhone-enheten selv, eller en annen mobil skjerm med en maksimal bredde på 480px. I dette tilfellet vil jeg oppdatere listepostene litt bredere slik at de fyller ut hele skjermen. Det vil kun påvirke ferdighetsoppføringene i landskapsvisning siden portrett er for tynt for å legge merke til eventuelle forskjeller.

Demo
Last ned kildekoden

Siste tanker

Å jobbe over Internett krever ofte minst en slags portefølje på nettet. Når du kan lenke til en enkelt side gjenoppta med alle dine detaljer organisert sammen, viser det at du mener bedrift. Alvorlige arbeidsgivere og potensielle kunder vil falle hodet over hælene for en slik karismatisk visning av profesjonalitet i webdesign.

Jeg håper du kan ta noen viktige poeng vekk fra denne opplæringen. Frilansere på et hvilket som helst sted rundt om i verden kan markedsføre seg med bare litt teknisk innsats. Du er velkommen til å laste ned min demo kildekoden ovenfor, og dele dine tanker om denne artikkelen i vårt kommentarområde.