När vi utformar webbplatser och planerar hur innehållet på dessa webbplatser kommer att visas, gör vi det ofta med en idealisk situation i åtanke. Rubriker och textområden är tänkt att ha vissa längder, medan bilderna som följer med den texten är avsedda att visas i dimensioner som gör det möjligt för dem att fungera enligt den övergripande designen. Även om dessa element är något flytande som en del av en responsiv webbplats bygga (vilket de borde vara) kommer det att finnas en gräns för hur flexibla de kan vara.
Om du distribuerar en webbplats på ett CMS (content management system) och tillåter att klienter hanterar den webbplatsen och lägger till nytt innehåll över tid, kommer de gränser du har utformat absolut att provas. Lita på det faktum att dina kunder kommer att hitta sätt att ändra webbplatsen som du aldrig drömde att de skulle göra. Om du inte har redogjort för situationer som ligger långt utanför de ideala som du arbetat med i din designprocess, kan webbplatsens layout vara i allvarlig fara. Därför är det särskilt viktigt att du stressar hela webbplatsens innehåll och aspekterna av webbplatsens layout innan du startar den webbplatsen. Här är några tips för hur du kan göra detta.
Testa bildstorlekar
Utan tvekan är den vanligaste sätten att människor bryter upp layouten på deras hemsida, genom att lägga till olämpliga bilder (det här är också sättet att de negativt påverkar en webbplatss övergripande prestanda och orsakar långsamma nedladdningshastigheter). Detta inkluderar bilder som är för stora, liksom de som är för små för att fungera som avsedda på din webbplats.
Även om du använder CSS för att tvinga storleken på dessa bilder i din layout, kommer bilder som är väldigt out of scale med dina ursprungliga specifikationer för webbplatsen att orsaka problem. Om dimensionerna 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 vara snedvridna. Det kommer säkert att ha en negativ inverkan på din webbplats ser ut som en bild som är för liten kommer att blåsas upp och kommer att förlora kvalitet. En bild som är för stor som görs mindre med CSS gör att du ser bra ut och behåller sin kvalitet, men filstorleken kan vara orimlig stor för hur den används.
När du testa ditt webbplatsarbete, var noga med att lägga till bilder som faller utanför ditt avsedda räckvidd. Lägg till i CSS och lyhörda bildtekniker som hanterar dessa utmaningar genom att ändra storlek på bilden enligt eller, om det gäller ett felaktigt bildförhållande, också överväga att använda något som CSS-klippegenskapen för att beskära bilden efter behov.
Testning av annan media
Förutom bilder, testa även andra medier som videoklipp på din webbplats och se hur dessa element kommer att visas i din layout med olika storlek och bildförhållande värden. Återigen, överväga den svåra naturen på din webbplats och hur den ska fungera för olika enheter och skärmstorlekar.
Testa textrubriker
Efter bilder är nästa webbplatsområde som orsakar mest problem med levande webbplatser som hanteras av icke-webbenprofessorer, textrubriker. Det här är de (förmodligen) korta raderna av text som ofta börjar innehållet på en sida eller en sektion på den sidan. Texten ovanför denna punkt 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 så här:
"Testa textrubriker på en mängd webbsidor alla med olika storlekar och användarbehov"
Då kan det hända att din layout inte kan rymma all den extra texten. Precis som du borde stressa, testa dina bilder och media genom att lägga till poster som faller bra utöver de storlekar du ursprungligen designade för, så ska du göra det med textrubriker för att se till att de är tillräckligt flexibla för att effektivt visa lika långa linjer som en ovanför.
Testa textlängder
När du håller på med text, vill du också testa olika textlängder för huvudinnehållet på sidorna. Det här inkluderar text som är väldigt, mycket lång och text som är väldigt, väldigt kort - vilket faktiskt kan vara problemet som dömer många sidlayouter.
Eftersom webbsidor, av naturen, växer i storlek för att rymma höjden på texten som de innehåller, kommer sidor med mycket text oftast bara att skala i höjd efter behov. Om du inte har begränsat sidans höjd (som du borde inte gör om du vill att din sida ska vara flexibel), bör extra text inte utgöra ett problem. För liten text är ett annat problem - och det är ett som många designers glömmer att testa för i sin designprocess.
För liten text kan göra att en sida ser ofullständig eller till och med sönder, så var noga med att skala in sidinnehållet för att se vad som händer i de här fallen och göra nödvändiga justeringar av webbplatsens CSS för att hantera dessa situationer.
Testsökningszoom
Personer med synproblem kan använda Sidzoxt-funktionen i en webbläsare för att öka storleken på din webbsida. Om någon zoomar i betydande grad kan din layout bryta ner. Detta är en av anledningarna till att du kanske vill använda EMs som måttenhet för dina webbstorstorlekar, liksom dina mediafrågor. Eftersom EMs är en relativ måttenhet (baserat på webbläsarens standardtextstorlek), bidrar de till flytande, flexibla webbsidor.
Testa din hemsida för sidzoom och stanna inte bara på en eller två nivåer av zoom.Zooma din webbplats upp och ner på olika nivåer för att se till att dina sidor reagerar som avsedda.
Glöm inte om nedladdningshastighet och prestanda
När du testar för layoutkonsekvenserna av kundbeslut, glöm inte att också uppmärksamma vilken inverkan dessa beslut har på en webbplatss prestanda. Bilderna och innehållet som de här klienterna lägger till kan hindra en nedladdningshastighet för en webbplats och allvarligt förstöra webbplatsens övergripande 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 man testar en webbsida för prestandametri. 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 de gör kan påverka webbplatsen som helhet. Ta dig tid att träna dem hur du håller sajten på jobbet och ser bra ut. När det gäller utbildning …
Klientutbildning är viktigt
Det är viktigt att stressa testa webbplatsens bilder, text och andra sidelement och skapa stilar som kommer att ta hänsyn till extrema instanser, men det är aldrig en ersättning för kundutbildning. Ditt arbete bulletproofing en webbplats bör vara förutom den tid du spenderar träna dina kunder hur man effektivt sköter och hanterar deras webbplats. I slutändan kommer en välutbildad kund som förstår sitt ansvar och konsekvenserna av de beslut som de gör på en webbplats att vara ovärderliga för dina ansträngningar för att hålla den webbplatsen som fungerar och ser sitt bästa ut.
