101 måder at gøre dit websted mere fantastisk

Jeg talte med en gammel klient i sidste uge, og hun sagde: "Nick, jeg ved, jeg har brug for hjælp til siden, men jeg er ikke sikker på, hvad jeg har brug for."

Så jeg spurgte rundt. Venner, familie, andre ikke-internet-y forretningsfolk. De sagde alle det samme:

”Jeg har brug for en tjekliste. Jeg ved ikke, hvordan man bygger et websted. Derfor er jeg nødt til at ansætte nogen. Men jeg vil stadig vide, hvad der er involveret. ”

Så jeg begyndte at lave en liste over alt, hvad vi har gjort på AwesomeWeb (og nogle ting, vi ikke har).

Her er mit løfte ...

... Hvis du retter alt på denne liste, har du et af de bedste websteder i din branche.

Hvordan ved du det?

På AwesomeWeb har jeg gennemgået 1.000+ af verdens bedste freelancere. Så vidt jeg ved, har jeg aldrig set et websted, der kan markere alle felter.

Som virksomhedsejer skal du bruge denne liste til at vide, hvad der skal gøres. Send det til din designer eller udvikler. Du kan endda selv ordne et par af dem.

Som freelancer skal du bruge denne liste til at gøre alt, hvad du opretter, mere fantastisk. Gå tilbage til gamle kunder og sig:

”Jeg gennemgik, hvad vi byggede, og bemærkede, at vi kan ordne dette, dette og dette. Jeg kan gøre det for $ 500, $ 1000, $ 5000, og du kan forvente disse resultater ... ”

Pointen er…

... Jeg vil hjælpe dig med at gøre Internettet mere fantastisk. Det starter her med denne liste.

Fantastisk branding

  1. Få et professionelt logo . Det er sjældent at finde et websted eller en blog med et godt logo. Så det er en god måde at oprette øjeblikkelig troværdighed på.
  2. Upload et nethindeklar favicon (det firkantede ikon på din browserfane). De fleste websteder har 16 × 16 pixelfavicons. På nethindeskærme er de slørede. Brug X-Icon Editor til at generere et 64 × 64 pixel favicon.
  3. Brug altid billeder, der er klar til nethinden . Bare sørg for, at billedet er dobbelt så stort som det er beholder, og skaler det derefter ned.
  4. Brug maks . 2-3 farver Du skal have en baggrundsfarve, en opfordring til handling-farve og en accentfarve.
  5. Når du vælger en farvepalet, skal du starte med komplementære eller trekantede farver . Juster derfra. Gode ​​farvekombinationer giver dig et design, der fortæller en historie.
  6. Brug aldrig ægte sort (# 000000). Ren sort findes ikke, så det ser ud til at være ude af sted online. Sort er i virkeligheden altid en mørk skygge i en anden farve.
  7. Brug aldrig en neutral grå (f.eks. #Cccccc), hvis du vil have dit design til at have en personlighed. Tilføj en nuance af gul for at give varme, rød for at give energi eller blå for at skabe tillid.

Fantastisk typografi

  1. Vælg en premium skrifttype . Brug en tjeneste som Typekit. Det er blevet sagt, at 95% af internettet er typografi. At gå med en premium font er den nemmeste og billigste måde at gøre et godt indtryk på.
  2. Brug maks . 2–3 skrifttyper Mere er rodet og nedsætter belastningstiden. Vælg en overskriftskrifttype og en afsnitstype. En mere, hvis du vil have en skrifttype til specielle tilfælde.
  3. Indstil en kropsstørrelse på minimum 16 pixel . Noget mindre er vanskeligt at læse på store skærme. Skal ned til 12 px på mobile enheder.
  4. Vælg en typografisk skala som det forstørrede fjerde, perfekte femte eller gyldne forhold. Brug skalaen til at indstille skriftstørrelser til din afsnitstekst, H4, H3, H2 og H1. Baser dine liniehøjder og tekstmargener på denne skala.
  5. Design andre typografiske elementer som blockquotes, punktlister, nummererede lister, billedtekster, hjælpetekst, alarmer, fremhævet tekst, kodeeksempler, forkortelser og endda adresser.
  6. Installer en brugerdefineret ikonfont som Font Awesome i stedet for at bruge billeder til almindelige elementer som sociale medielogoer, navigationsknapper og interaktiv grafik. En ikonskrifttype indlæses hurtigere, skaleres uendeligt og giver dig friheden til at ændre farve, som du ønsker.

Awesome Layouts

  1. Brug reglen om tredjedele til et basislayout. Del dit layout i tredjedele vandret og lodret, og juster derefter nøglefokuspunkter, hvor linjerne krydser hinanden.
  2. Oprethold et lodret gitter med et gittersystem. Opdel din grænseflade i 8-, 12-, 16-kolonnelayouter med generøse tagrender mellem kolonnerne.
  3. Hold en ensartet lodret rytme med et baseline-gitter . Mellemrummet mellem tekstlinjer er lige så vigtigt som mellemrummet mellem indholdsblokke. Hver tekstlinje skal have en margenbund, der sidder på basislinjen.
  4. Hvide rum er luksuriøse. Det er der for at skabe åndedrætsrum og balance. Træk dine læsere til det, der er vigtigst.
  5. Balancér de visuelle elementer på dit websted som knapper, input, formularer, overskrifter osv. Du skal være i stand til at sløre dine øjne og spore den sti, du vil have dine brugere.

Awesome brugergrænseflader

  1. Brug store, dristige opfordringsknapper . Hver side skal have et mål. Det er næsten altid at klikke på en knap. Sørg for, at denne knap ikke kan gå glip af.
  2. Føj svæve- og aktive tilstande til dine links, knapper, input og tekstområder. Hvis du vælger at lysne dine knapper, når du holder markøren, skal du også lette linkene og kanterne på dine input.
  3. Vær konsistent med formstyling . Alle tekstområder og inputfelter skal være ens. Samme kantfarver, baggrundsfarver, på svæver, på aktiv, pladsholdertekst, aktiv tekst osv. Sørg for, at tabindex'erne er indstillet korrekt, så du kan bladre gennem dem i den rigtige rækkefølge.
  4. Skift farven på de besøgte links for at fortælle brugeren, at de har været på den side før.
  5. Når du har dit logo, farver, typografi, layout og billedstørrelser, skal du oprette en stilguide . Gode ​​brugergrænseflader er bygget med ensartede komponenter, der altid er ens.

Fantastisk brugeroplevelse

  1. Føj mikrointeraktioner til knapper og andre felter. For eksempel skal en "Upload" -knap skifte til "Uploading" eller "Processing", efter at der er klikket på den.
  2. Ingen rullejakker ! Ryd aldrig med browserens standardopførsel. Du synes måske det er rart at rulle dobbelt så hurtigt som normalt, men det er det ikke.
  3. Slip af med din startside . De mindsker konverteringer, og der er bedre måder at vise mere information på et lille rum.
  4. Brug aldrig en velkomstport . Når du besøger din startside for første gang, forventer brugeren at se din startside.
  5. Brug overskrifter, underoverskrifter, ledende afsnit, lister og billedtekster for at gøre dit indhold let scanneligt. De fleste mennesker, der besøger en webside, scanner den, før de beslutter at læse den.
  6. Føj beskrivende pladsholdertekst til alle dine formularer, input og dropdowns. Hvis du vil have nogen til at udfylde et felt på en bestemt måde, så fortæl dem det. For rullemenu eller vælg felter skal du gøre den første mulighed beskrivende. “Vælg år” er bedre end “2016”.
  7. Tilføj HTML5-validering på dine formularer for at gøre det klart, når der er en fejl i formularen, efter at en bruger forsøger at indsende den.
  8. Gør dine websteder tilgængelige for synshandicappede ved at undgå vage linknavne, reducere rod, bruge tegnsætning, holde et simpelt layout, tilføje alt-tekst til billeder, bruge større tekst og opretholde høj kontrast mellem tekst og baggrundsfarver.
  9. Tjek dit websted for ødelagte links med BrokenLinkCheck.com. Ret brudte links, så folk ikke bliver gale, når de klikker på dem.

Fantastisk udvikling

  1. Sørg for, at dit websted er mobiloptimeret til at kunne vises responsivt på enhver enhed. Korrekt mobiloptimerede websteder indlæses hurtigere, placeres højere og giver dine brugere en bedre oplevelse.
  2. Generer og vis den optimale billedstørrelse . Hvis du uploader et stort billede, som et blogindlægsfunktionsbillede, og du vil vise det andre steder på tværs af webstedet, som sidebjælken, skal du sørge for at vise miniaturevisningen af ​​billedet i stedet for billedet i fuld størrelse.
  3. Føj alt- og titelmærker til alle billeder og links . Hvis et billede af en eller anden grund ikke indlæses, viser dit websted alt-teksten på sin plads. Når du holder markøren over links, viser browseren også titelmærket for dette link.
  4. Brug et d i stedet for og til fed og kursiv tekst. De har den samme effekt, men de har en grundlæggende forskel. er en stil. er en indikation af, hvordan noget skal forstås.
  5. Ret slurvet HTML . Når du kopierer indsæt indhold til en WYSIWYG-editor (som den visuelle visning i WordPress), tilføjer det masser af unødvendige spændvidder og indbyggede stilarter. Overtid, dit websted kan ikke læses.
  6. Når vi taler om, skal du fjerne indbyggede stilarter fra din HTML. 99% af tiden skal dine stylingregler gå ind i en CSS-fil, så du kan opdatere alle forekomster af en komponent på samme tid i stedet for side for side, linje for linje.
  7. Brug Sass-variabler i stedet for CSS for at holde farver og andre komponenter ensartede på hele dit websted. Vil du ændre en farve og hver skygge af den farve? Opdater en linje i stedet for hundreder.
  8. Link til permalinks ikke URL'er , hvis du skifter domæne. For eksempel, når du linker til en bestemt side, skal din HTML læse i stedet for. Samme for billedkilder og CSS-baggrunde. Hvis du ikke gør dette og placerer webstedet på et nyt domæne, vil alle dine kilder linke til sider og filer, der ikke længere eksisterer.
  9. Udvikle et brugerdefineret plugin eller værktøj, der giver din side unik funktionalitet. Brugerdefineret software er vanskelig at vedligeholde, men vil give dig en konkurrencemæssig fordel i forhold til lignende websteder.
  10. Test for kompatibilitettværs af browsere ved at sikre dig, at dit websted vises korrekt i Chrome, Firefox, Safari, Internet Explorer og andre browsere. Ældre versioner af IE er notorisk dårlige til at vise websteder. Brug BrowserStack og kontroller manuelt.
  11. Brug W3Cs Markup Validation Service til at finde blændende fejl i din HTML. Husk, de fleste websteder har ikke helt gyldig HTML. Det er ikke topprioriteten, men giver dig en god fornemmelse, hvis der er fejl.
  12. Opret et iscenesættelsesmiljø for at foretage ændringer på dit nuværende websted. Ideelt set skal du have et produktionssted, som alle ser, og et iscenesættelsessted, hvor din udvikler foretager ændringer. Når ændringerne er klar til at blive live, skal du skubbe iscenesættelsesstedet til produktion.
  13. Vis det aktuelle år i copyrightfod . Når du ser et websted med en gammel ophavsret, antager du, at det ikke længere er aktivt. Brug et PHP eller lignende script til at vise det aktuelle år i stedet for statisk tekst (f.eks. © -).

Fantastisk søgemaskineoptimering

  1. Vælg en søgeordssætning pr. Side, som du vil have, at siden skal rangere efter. Fokuser på at optimere alle aspekter af denne side til dette søgeord. Ikke i den sætte-dette-nøgleord-i-hver-sætning forstand. Bare vær smart om, hvordan du vil have det til at rangere.
  2. Indstil nøgleordrige titeltags på hver side. Titlen vises som det blå link i Googles søgeresultater. Begræns til 55 tegn.
  3. Inkluder et og kun et H1-tag pr. Side. I de fleste tilfælde vil dette være det samme som dit titeltag.
  4. Inkluder masser af H2'er, H3'er og H4'er i indholdet af din side for at oprette underoverskrifter og visuelt hierarki.
  5. Optimer din side til et bestemt søgeord ved at medtage den i titlen, H1, underoverskrifter og i den første 1/3 af indholdet.
  6. Din metabeskrivelse vises i søgeresultaterne som beskrivelsen under linket. Sørg for at medtage det på hver side og medtage nøgleordssætningen.
  7. Dit permalink , som er URL'en efter domænet (dvs. domain.com/permalink-here/), skal indeholde nøgleordssættet adskilt af bindestreger.
  8. Google betragter domænealder i sin algoritme, fordi et domæne, der er registreret i mange år, sandsynligvis vil være en ressource af højere kvalitet. Registrer dit domæne i flere år i forvejen. Hvis du har registreret dit domæne i 10 år, er du seriøs omkring din virksomhed.
  9. I gennemsnit fører det første resultat på SERP (søgemaskinens resultatside) for et givet søgeord til en side med mere end 2000 ord pr. Side . Når du skriver et blogindlæg eller opretter en side, som du vil rangere godt, så prøv at ramme mindst 2000 ord.
  10. Opret altid et sitemap som en sitemap.xml-fil, og læg det i din rodmappe, så det vises på domain.com/sitemap.xml. Det fortæller Google, hvor alle dine sider sidder, og skal automatisk opdateres, når du tilføjer nyt indhold. Send det til Google via Webmasterværktøjer.
  11. Tilføj dit websted Google Webmasterværktøjer, så du kan se, hvordan Google indekserer dit websted, og hold dig opdateret, hvis der er kritiske problemer.
  12. For at hjælpe dine billeder med at rangere skal du altid omdøbe dine billeder og andre filer, før du uploader til dit websted (f.eks. Rank_for_this_keyword_phrase.png).
  13. Inkluder en robots.txt- fil på dit websted for at fortælle webcrawlere, hvilke sider de skal og ikke bør indeksere.
  14. Tilføj en kanonisk omdirigering for at pege den ikke-www til www-versionen af ​​dit websted eller omvendt.
  15. Undersøg og integrer LSI-nøgleord (latent semantisk indeksering) på hver side for at hjælpe sideplaceringen for det vigtigste søgeordsudtryk. Find LSI-nøgleordene ved at google din nøgleordssætning og søge efter linkene "Søgninger relateret til ...".
  16. Sørg for at aktivt forbinde dit indhold . Hver side på dit websted skal være tilgængelig via tre eller færre klik fra hjemmesiden.
  17. Tilføj strukturerede data på relevante sider for at hjælpe Google med at indeksere dit indhold korrekt. Sidetyper, der har brug for brugerdefinerede strukturerede data, inkluderer personer, produkter, begivenheder, organisationer, film, bøger og anmeldelser. Brug Schema Creator til at generere strukturerede data.
  18. Tjek Googles PageSpeed ​​Insights for at sikre dig, at du har løst alle de almindelige problemer, der nedsætter din sidehastighed. Jo hurtigere dit websted indlæses, desto højere rangeres det.

Fantastisk sidehastighed

  1. Hold sidevægt under 2 MB . Brug tools.pingdom.com til at kontrollere sidevægten for dine primære destinationssider. Noget mere end 2 MB er for tungt.
  2. Behold sideanmodninger under 50 år . Hver fil og hvert billede på en given side er en HTTP-anmodning. Jo færre antallet af anmodninger, jo hurtigere indlæses det. Den gennemsnitlige webside har 70 anmodninger. Brug GTmetrix til at se dine anmodninger.
  3. Design sideelementer med CSS i stedet for baggrundsbilleder . Brug aldrig et billede til at vise en knap, form eller anden almindelig komponent på dit websted. CSS indlæses hurtigere og er mere fleksibel i responsive layouts.
  4. Optimer billeder, før du uploader dem til dit websted. Værktøjer som TinyPNG kan reducere dine billedfilstørrelser med 80–95% uden at miste opløsning eller billedkvalitet.
  5. Opret et Content Delivery Network til at være vært for dine billeder og andre større filer flere steder rundt omkring i verden. CDN'er gemmer og leverer dine filer fra strategisk placerede servere for at maksimere indlæsningshastigheden afhængigt af den besøgendes fysiske placering.
  6. Minimer JavaScript, HTML og CSS ved hjælp af kompilerings- og komprimeringsværktøjer, inden du uploader filer til dit websted. Brug JavaScript til at lukke kompilator. Brug HTML Minifier til HTML. Brug YUI-kompressor til CSS.
  7. Flyt gengivelsesblokerende JavaScript til sidefoden . De eneste scripts, der skal placeres i overskriften, er de scripts, der straks påvirker udformningen af ​​siden (f.eks. Brugerdefinerede skrifttyper).
  8. Undgå omdirigeringer af destinationssider . Omdirigeringer udløser en yderligere HTTP-anmodning, der forsinker gengivelse af sider.
  9. Udnyt browsercaching ved at indstille udløbsdatoer for sider og sidetyper, der ikke opdateres ofte. Browsercaching instruerer browseren i at indlæse tidligere downloadede sider fra den lokale disk i stedet for via netværket.
  10. Aktivér gzip-komprimering i din serverkonfiguration. Komprimering kan reducere den overførte svartid med 90%, hvilket forbedrer tiden til først at gengive for dine sider.
  11. Aktivér Keep-Alive på dine serverindstillinger for at tillade den samme TCP-forbindelse at sende og modtage flere HTTP-anmodninger, hvilket reducerer latenstiden til efterfølgende anmodninger.
  12. Opgrader til en dedikeret server eller premium-hostingtjeneste for at forbedre serverens responstid. Når du bruger et delt hostingmiljø, er dit websted typisk et af hundreder på den samme server. Hvis et af disse hundrede websteder oplever en masse trafik, sænker det din sidehastighed.

Fantastisk grafisk design

  1. Få et tilpasset e-bogomslag til din tilmeldingsbonus. De er ikke vanskelige at oprette og kan gøre en enorm forskel i din konverteringsfrekvens.
  2. Design en brugerdefineret grafik eller illustration til din startside eller salgssider. En god illustration, der er lavet specifikt til dit websted, er en nem måde at gøre dit websted mere mindeværdigt på.
  3. Opret en brugerdefineret eller serie af brugerdefinerede billeddesign til blogindlæg . Det er det billede, der spreder sig på Facebook, Twitter, Pinterest osv. Når en bruger ser en bestemt type billede tilknyttet et blogindlæg, skal de vide, at det er skrevet af dig.
  4. Vis tilpassede avatarillustrationer eller karikaturer til dig selv og hvert medlem af dit team. Brugerdefinerede karikaturer kan være billigere end at ansætte en professionel fotograf hver gang du tilføjer nogen til dit team. Plus, det er en dejlig gave til et nyt teammedlem.
  5. Brugerdefinerede infografikker, der viser data og andet indhold på en visuel måde, har tendens til at få mere trafik end blogindlæggets ækvivalent. Folk kan lide at dele infografik på websteder som Pinterest eller genindlæg dem på deres egne websteder med et backlink tilbage til dit websted.
  6. Hvis du producerer en video eller en række videoer, skal du have en brugerdefineret videointro og / eller outro for at give det et professionelt præg. For ikke at nævne anden videografik eller animationer, der hjælper dit brand med at skille sig ud.

Fantastisk websikkerhed

  1. Installer et SSL-certifikat for at tillade en sikker forbindelse fra en webserver til en browser. De fleste betalingssoftware kræver et SSL-certifikat, hvis du accepterer kreditkort. Google har sagt, at et SSL-certifikat vil forbedre din søgerangering.
  2. Hold din software og dine plugins opdateret . Når WordPress og anden CMS-software frigiver en opdatering, er det typisk at lappe en sårbarhed. Hvis du ikke gør det, er det kun et spørgsmål om tid, før dit websted bliver hacket.
  3. Opret en dobbelt godkendelses-loginport til dine admin-sider. De fleste hacks starter med login-siden.
  4. Se efter og fjern malware . Hvis dit websted er blevet hacket før, tilføjede de sandsynligvis korrupte filer, der ikke er lette at finde. Hvis du ikke fjerner det med det samme, kan dit websted muligvis blive sortlistet af Google, som tanke din placering og advarer brugere om at forlade, når de besøger.
  5. Forlad aldrig dit admin-brugernavn som "admin". Slet standardadministratorkontoen, og opret en ny med et andet brugernavn.
  6. Sikkerhedskopier regelmæssigt dine database- og webstedsfiler . De fleste sikkerhedskopieringssoftware og plugins sikkerhedskopierer kun din database, som inkluderer data og indhold. Men hvis du mister dit websted, skal du have en sikkerhedskopi af filerne for at gendanne det.

Fantastisk indhold

  1. Opret en brugerdefineret 404-side, der vises, når som helst en bruger prøver at besøge en side, der ikke findes. Brug 404-siden til at dirigere dem tilbage til hjemmesiden eller hjælpe dem med at finde det, de leder efter.
  2. Bortset fra din startside er din om-side sandsynligvis den mest besøgte side på dit websted. Sørg for, at det repræsenterer dig og din virksomhed godt.
  3. En kontaktside hjælper folk med at kontakte dig, men det vil også skabe tillid mellem dig, dine besøgende og endda Google. Når man bestemmer, hvordan man skal rangere dit websted, finder bots din kontaktside og ser efter en e-mail, telefonnummer og adresse. Kontaktoplysninger fortæller Google, at webstedet er lidt mere troværdigt.
  4. Det er godt at have tilmeldingsformularer strøet strategisk overalt på dit websted, men det er også smart at have en presseside med intet andet end en højkonverterende opt-in. Når du vil have nogen til at abonnere, skal du linke til den side.
  5. Når nogen abonnerer på din liste, skal du sørge for at sende dem til en bekræftelsesside og bede dem om at bekræfte deres e-mail. Hvis de ikke bekræfter deres e-mail med det samme, glemmer de muligvis det og kommer aldrig tilbage.
  6. Når de har klikket på bekræftelseslinket i e-mailen, skal du sende dem til en takside, hvor de kan se, hvad der er næste. Det er en side, som hver abonnent vil se, og de vil kun se en gang, så det er en perfekt mulighed for at give dem en aftale eller opfordre dem til at foretage et køb.
  7. Dit websted eller tema skal have en destinationssideskabelon, som du kan bruge, når du har brug for dine brugere til at tage en bestemt handling.
  8. Hvis du sælger noget, skal du sørge for at have en flot salgsside . Start med en overskrift. Gør plads til din tonehøjde. Måske tilføje en salgsvideo. Og henvis folk til at købe i bunden af ​​siden.

Awesome sociale medier

  1. Begræns antallet af sociale medieknapper på dine indlæg og sider, fordi hver knap kører et script, der føjer ekstra indlæsningstid til siden. Inkluder kun knapperne 1–5, f.eks. Facebook, Twitter, LinkedIn, Pinterest, Google+ osv. Hvor dit indhold oftest bliver delt.
  2. Opret sociale mediegrafik til din Facebook-side, Twitter-konto og YouTube-kanal. Brugerdefineret grafik giver et øjeblikkeligt positivt indtryk, der tilskynder førstegangsbesøgende til at like, følge og abonnere på din side, profil eller kanal.
  3. Opret Facebook Open Graph META-tags for at sikre, at dit indhold deles korrekt på Facebook. Brug Facebook-fejlfindingsprogrammet til at kontrollere din startside, dine indlæg og andre sider for at se, hvordan de vises, når nogen deler denne URL.
  4. Opret Twitter-kort til automatisk at vedhæfte rige fotos og videoer til dine tweets, når en URL på dit websted deles. Kom godt i gang med Twitter-kort her.
  5. Konfigurer Google+ uddrag for at tilpasse, hvad folk ser, når dit websted deles på Google+. Brug kodestykket til at generere koden. Selvom dit websted ikke får meget Google+ kærlighed, ved Google, om du tilføjer metadataene korrekt, og det burde have en vis vægt.
  6. Stik de sociale medieikoner væk på dit websted, der linker tilbage til dine profiler. Gør dem små, eller vis dem kun i sidefoden. Formålet med marketing på sociale medier er at få folk tilbage til dit websted, ikke omvendt.

Okay, hvad mangler jeg? Er der noget, du gør som freelancer eller virksomhedsejer for at gøre dine websteder mere fantastiske?

Jeg vil meget gerne høre din feedback. Efterlad en kommentar eller tweet @wntart .

Hvis du mener, at flere mennesker skal se denne liste, kan du anbefale den. Lad os gøre internettet mere fantastisk!

Skål,

Nick

PS Hvis du har brug for hjælp til noget på denne liste, skal du ansætte designere her eller udviklere her. Vi har verdens bedste freelancere, og de hjælper gerne!

Hvis du vil deltage i AwesomeWeb som freelancer for at få flere kunder, kan du tilmelde dig her.