Huvud webbdesign & dev Hur man stressar Testa webbplatsens innehåll
webbdesign & dev

Hur man stressar Testa webbplatsens innehåll

Hur man stressar Testa webbplatsens innehåll
Anonim

Använd dessa tips för att se till att din webbplats är redo för trafik

  • html
  • CSS
  • av Jeremy Girard

    Författare, pedagog och chef för marknadsföring / chef för webbdesign och utveckling hos Envision Technology Advisors.

    När vi utformar webbplatser och planerar hur innehållet på dessa webbplatser ska visas, gör vi det ofta med en idealisk situation i åtanke. Rubriker och textområden kan föreställas ha vissa längder, medan bilderna som följer med texten är utformade för att visas i dimensioner som gör att de kan fungera som avsedda i den övergripande designen. Även om dessa element är något flytande som en del av en responsiv webbplatsbyggnad (som de borde vara) kommer det att finnas en gräns för hur flexibla de kan vara.

    Tips för stresstestning av din webbplats

    Om du distribuerar en webbplats på ett CMS (content management system) och tillåter klienter att hantera den webbplatsen och lägga till nytt innehåll över tid, kommer gränserna som du har utformat för absolut att prövas. Lita på att dina kunder kommer att hitta sätt att ändra webbplatsen som du aldrig drömt om att de skulle göra. Om du inte har redogjort för situationer långt utanför de ideala som du arbetat med i din designprocess, kan webbplatsens layout vara i allvarlig fara. Det är därför det är särskilt viktigt att du stresstestar allt webbplatsinnehåll och aspekterna av webbplatsens layout innan du startar webbplatsen. Här är några tips för hur du kan göra det.

    Bildstorlekar

    Utan tvekan är det vanligaste sättet att människor bryter layouten på sin webbplats genom att lägga till bilder som är otillräckliga storlekar (detta är också sättet att de negativt påverkar webbplatsens totala prestanda och orsakar långsam nedladdningshastigheter). Detta inkluderar bilder som är för stora, såväl som bilder som är för små för att fungera som avsett på din webbplats.

    Även om du använder CSS för att tvinga storleken på dessa bilder i din layout, kommer bilder som inte är i skala med dina ursprungliga specifikationer för webbplatsen att orsaka problem. Om måtten på en bild är felaktiga kan din CSS tvinga den bilden att visas med lämplig bredd och höjd, men själva bilden och dess bildförhållande kan förvrängas. Det kommer säkert att ha en negativ inverkan på din webbplats utseende eftersom en bild som är för liten kommer att "sprängas" och kommer att förlora kvaliteten. En bild som är för stor och som görs mindre med CSS ser bra ut och behåller dess kvalitet, men filstorleken kan vara orimligt stor för hur den används.

    När du testar ditt webbplatsarbete ska du lägga till bilder som faller utanför det avsedda området. Lägg till CSS och lyhörda bildtekniker som hanterar dessa utmaningar genom att ändra storlek på bilden enligt, eller i fallet med ett felaktigt bildförhållande, också överväga att använda något som CSS-klippegenskapen för att beskära bilden efter behov.

    Andra medier

    Utöver bilder kan du också testa andra medier som videor på din webbplats och se hur dessa element kommer att visas i din layout med olika storlek och storleksförhållande. Överväg än en gång hur din webbplats reagerar och hur den fungerar för olika enheter och skärmstorlekar.

    Textrubriker

    Efter bilder är det nästa webbplatsområdet som orsakar de flesta problem med livewebbplatser som hanteras av icke-webbpersonal, textrubriker. Det här är de (förment) korta textraderna som ofta kommer att starta innehållet på en sida eller ett avsnitt på den sidan. Texten ovanför detta stycke som läser "Testa textrubriker" är ett exempel på detta.

    Om du har utformat en webbplats för att rymma en rubrik som den här:

    Testa textrubriker

    Men din klient använder CMS för att lägga till en artikel med en rubrik som denna:

    " Testa textrubriker på en mängd olika webbsidor alla med olika storlekskrav och användarnas behov"

    Då kan din layout kanske inte rymma all den extra texten. Precis som om du bör stresstesta dina bilder och media genom att lägga till poster som faller långt utanför de storlekar du ursprungligen designade för, så bör du göra det med textrubriker för att se till att de är tillräckligt flexibla för att effektivt visa även ultralängda rader som den ovan.

    Textlängder

    Du vill också testa olika textlängder för huvudinnehållet på sidor. Detta inkluderar text som är väldigt, väldigt lång såväl som text som är väldigt, väldigt kort - vilket faktiskt kan vara frågan som dömer många sidlayouter.

    Eftersom webbsidor till sin natur växer i storlek för att passa höjden på texten som de innehåller kommer sidor med mycket text vanligtvis bara att skala i höjd efter behov. Om du inte har begränsat sidans höjd (vilket du inte bör göra om du vill att din sida ska vara flexibel) bör extra text inte utgöra något problem. För lite text är en annan fråga - och det är en som många designers glömmer att testa för i sin designprocess.

    För lite text kan göra att en sida ser ofullständig ut eller till och med trasig, så se till att skala innehållet på sidan för att se vad som händer i dessa fall och göra nödvändiga justeringar av din webbplats CSS för att hantera dessa situationer.

    Sidzoom

    Personer med synproblem kan använda funktionen Sidzoom i en webbläsare för att öka storleken på din webbsida. Om någon zoomar in ett betydande belopp kan din layout brytas ner. Detta är en av orsakerna till att du kanske vill använda EM: er som måleenhet för din webbplatsstorlekstorlek såväl som dina mediefrågor. Eftersom EM är en relativ måttenhet (baserad på den webbläsarens standardtextstorlek) är de mer gynnsamma för flytande, flexibla webbplatslayout.

    Testa din webbplats för sidzoom och stoppa inte bara vid en eller två zoomnivåer. Zooma din webbplats upp och ner på olika nivåer för att säkerställa att dina sidor reagerar som avsett.

    Ladda ner hastighet och prestanda

    När du testar för layoutkonsekvenserna av kundbeslut, glöm inte att också uppmärksamma påverkan som dessa beslut har på webbplatsens resultat. Bilder och innehåll som dessa kunder lägger till kan hämma en webbplats nedladdningshastighet och allvarligt förstöra webbplatsens allmänna användbarhet. Planera för effekterna av dessa tillägg och gör din del i utvecklingsprocessen för att minimera dessa effekter.

    Om din webbplats byggs med en prestationsbudget, dela den här informationen med dina kunder och visa dem hur du testar en webbsida för prestandamätningar. Förklara för dem vikten av att upprätthålla dessa fastställda trösklar för sidstorlek och nedladdningshastighet och visa dem hur de tillägg som de gör kan påverka webbplatsen som helhet. Ta dig tid att utbilda dem i hur du får webbplatsen att fungera och se bra ut. När det gäller utbildning

    .

    Klientutbildning är avgörande

    Det är viktigt att stresstesta webbplatsens bilder, text och andra sidelement och skapa stilar som kommer att stå för extrema fall, men det ersätter aldrig klientutbildning. Din arbetsskyddssäkerhet på en webbplats bör vara tillägg till den tid du spenderar dina klienter på hur man effektivt kan ta hand om och hantera sin webbplats. I slutändan kommer en välutbildad klient som förstår sitt ansvar och påverkan av de beslut de fattar på en webbplats vara ovärderlig för dina ansträngningar att hålla den webbplatsen fungerar och se bäst ut.