5 kritinės pritaikymo klaidos, kurios sugadina svetainių šablonus (ir kaip jas ištaisyti)

Santrauka

Svetainių šablonai taupo laiką ir pinigus, tačiau prastas pritaikymas gali sumažinti jų efektyvumą. Daugelis verslo savininkų sugadina puikų šabloną perkraudami jį papildiniais, ignoruodami mobilųjį pritaikymą ar chaotiškai keisdami spalvas ir šriftus. Kiti sugadina išdėstymą neteisingai redaguodami kodą ar pamiršdami atnaujinti SEO metaduomenis. Šiame straipsnyje pateikiamos penkios kritinės klaidos, kurios paverčia šablonus įsipareigojimais, ir nuoseklūs kiekvienos jų taisymo žingsniai. Sužinosite, kaip planuoti pakeitimus, išlaikyti adaptyvų dizainą, užtikrinti greitą įkėlimą ir išvengti tipinių kodų konfliktų. Galų gale turėsite aiškų kontrolinį sąrašą, kaip pritaikyti bet kurį šabloną neprarandant jo profesionalumo.

5 kritinės pritaikymo klaidos, kurios sugadina svetainių šablonus (ir kaip jas ištaisyti)

Pasirinkti svetainės šabloną yra protingas žingsnis. Tai suteikia profesionalų pagrindą be brangaus individualaus vystymo. Tačiau tikrasis darbas prasideda pasirinkus. Daugelis verslo savininkų imasi pritaikymo be plano, o rezultatas – svetainė, kuri atrodo pigi, sulūžusi ar lėta.

Kaip to išvengti? Štai penkios dažniausios pritaikymo klaidos ir tikslūs veiksmai joms ištaisyti.

1. Viskas keičiama iš karto be plano

Pagaliau turite šabloną, atitinkantį jūsų pramonės šaką. Susijaudinę pradedate keisti spalvas, šriftus ir paveikslėlius. Netrukus išdėstymas atrodo nesubalansuotas, tipografija nesuderinta, o žinutė pasimeta.

Sprendimas: Prieš ką nors liesdami, apibrėžkite savo prekės ženklo vizualinį identitetą. Pasirinkite pagrindinę, antrinę ir vieną akcentinę spalvą. Pasirinkite du šriftus – vieną antraštėms, kitą pagrindiniam tekstui. Susikurkite paprastą stiliaus vadovą ir jo laikykitės. Kai keičiate demonstracinį turinį, peržiūrėkite kiekvieną pakeitimą atskirai. Tai apsaugo nuo netyčinių gedimų ir išlaiko dizaino darną.

Pavyzdys: Kepyklos savininkas pakeitė šablono herojaus paveikslėlį savo parduotuvės nuotrauka, bet pamiršo pakoreguoti perdengimo teksto spalvą. Baltas tekstas tapo nematomas ant šviesaus fono. Greitas kontrasto patikrinimas būtų išgelbėjęs nuo galvos skausmo.

2. Per didelis kodo pritaikymas ir išdėstymo sugadinimas

Šablonai turi įmontuotą CSS ir JavaScript. Tiesioginis kodo keitimas – net mažas pakeitimas – gali sugriauti stulpelį, iškreipti elementus ar išjungti navigaciją.

Sprendimas: Pirmiausia naudokite įmontuotą šablono pritaikymo skydelį arba temos nustatymus. Jei būtina pridėti pasirinktinį CSS, sukurkite antrinę temą arba atskirą pasirinktinį CSS failą. Niekada neredaguokite pagrindinių šablono failų tiesiogiai. Išbandykite pakeitimus testavimo svetainėje prieš paleisdami į viešą erdvę. Įrankiai, tokie kaip naršyklės tikrinimo funkcija, gali padėti nustatyti, kurias stiliaus taisykles perrašyti neliečiant originalių failų.

Atsargiai: Kai kurios platformos, kaip WordPress, vilioja redaguoti style.css tiesiogiai. Visada naudokite antrinę temą, kad išsaugotumėte pakeitimus, kai šablonas atnaujinamas.

3. Mobiliojo pritaikymo ignoravimas

Šablonas gali atrodyti nuostabiai 27 colių monitoriuje, bet tapti nenaudojamas telefone. Daugelis pritaikytojų pamiršta patikrinti, kaip jų pakeitimai veikia mažesniuose ekranuose.

Sprendimas: Išbandykite kiekvieną pakeitimą keliuose įrenginiuose. Naudokite naršyklės kūrėjo įrankius, kad imituotumėte telefono ir planšetės rodinius. Ypatingą dėmesį skirkite lietimo taikiniams (mygtukai turi būti bent 48×48 pikselių), šriftų dydžiams (pagrindinis tekstas turi būti bent 16 pikselių) ir horizontaliam slinkimui (venkite fiksuoto pločio elementų). Jei šablonas siūlo mobiliesiems pritaikytą išdėstymo parinktį, naudokite ją.

Pavyzdys: Nekilnojamojo turto agentas padidino šrifto dydį atsiliepimų skyriuje, bet pamiršo pakoreguoti konteinerio maksimalų plotį. Mobiliajame telefone tekstas išlindo ir sugadino išdėstymą. Nustačius max-width: 100% problema buvo išspręsta.

4. SEO pagrindų nepaisymas pritaikymo metu

Kai pakeičiate demonstracinį turinį savuoju, dažnai pakeičiate paveikslėlius, antraštes ir aprašymus. Lengva pamiršti atnaujinti alt tekstą, meta aprašymus ir antraščių struktūrą.

Sprendimas: Susikurkite kontrolinį sąrašą: kiekvienam įdėtam paveikslėliui parašykite aprašomąjį alt atributą; atnaujinkite puslapio pavadinimą ir meta aprašymą; išlaikykite logišką antraščių hierarchiją (H1 pavadinimui, H2 skyriams ir t.t.). Naudokite SEO papildinius, jei jūsų platforma juos palaiko, bet nepasikliaukite jais viskuo.

Atsargiai: Kai kurie šablonai automatiškai generuoja antraštes iš pasirinktinių laukų. Patikrinkite, ar jūsų naujas turinys nesukuria dublikatų H1 žymų ar našlaičių antraščių.

5. Per daug papildinių ar pasirinktinių scenarijų diegimas

Šablonai yra liesi. Pridėjus dešimtis papildinių mažoms funkcijoms – slankikliui, iššokančiam langui, socialiniam kanalui – sulėtėja įkėlimo laikas ir gali kilti JavaScript konfliktų.

Sprendimas: Pasilikite tik būtiniausius papildinius. Ieškokite lengvų alternatyvų arba įmontuotų šablono funkcijų. Pavyzdžiui, daugelis šablonų turi įmontuotą slankiklio funkcionalumą; naudokite jį vietoj trečiosios šalies slankiklio papildinio. Kas ketvirtį atlikite papildinių auditą ir pašalinkite nenaudojamus. Įrankiai, tokie kaip GTmetrix, gali padėti pamatyti, kurie scenarijai lėtina jūsų svetainę.

Pavyzdys: Fotografijos studija į portfelio šabloną įdėjo penkis skirtingus vaizdo šviesdėžės papildinius. Puslapis užsikrovė per 8 sekundes, o lankytojai išėjo. Pašalinus visus, išskyrus vieną, įkėlimo laikas sumažėjo iki 2 sekundžių.

Praktiniai žingsniai, kuriuos galite pritaikyti iš karto

1. Ištirkite šablono įmontuotas funkcijas prieš diegdami bet kokį papildinį.
2. Sukurkite testavimo aplinką (daugelis hosterių siūlo vieno paspaudimo testavimą).
3. Atlikite vieną pakeitimą vienu metu ir išbandykite kompiuteryje, planšetėje ir mobiliajame.
4. Pasidarykite failų atsarginę kopiją prieš bet kokį kodo redagavimą.
5. Naudokite našumo įrankį po kiekvieno didelio pritaikymo etapo.

Atsargiai ir kada pradėti iš naujo

Ne kiekvieną šabloną galima išgelbėti. Jei šablono kodas yra perkrautas, pasenęs ar kūrėjas jo nebepalaiko, apsvarstykite galimybę pakeisti. Taip pat venkite šablonų, kurie užrakina jus prie konkretaus puslapio kūrėjo – migracija tampa skausminga. Jei nuolat kovojate su šablono numatytaisiais nustatymais, gali būti geriau pradėti nuo kito pagrindo, labiau atitinkančio jūsų poreikius.

Išvada: pritaikykite užtikrintai

Gerai pritaikytas šablonas gali atrodyti taip pat gerai, kaip individualiai sukurta svetainė. Svarbiausia dirbti su šablono stiprybėmis, o ne prieš jas. Planuokite pakeitimus, gerbkite adaptyvų dizainą, išlaikykite SEO ir venkite nereikalingų papildinių. Naudokite aukščiau pateiktą kontrolinį sąrašą savo procesui vadovauti, ir gausite svetainę, kuri veikia greitai, atrodo profesionaliai ir konvertuoja lankytojus.

Norėdami giliau pažvelgti į šablono konkurencinio pranašumo išlaikymą pritaikymo metu, žr. kaip pritaikyti pramonės specifikos svetainės šabloną neprarandant jo pranašumo. O jei vis dar renkatės šabloną, mūsų vadovas, kaip pasirinkti ir pritaikyti šabloną, kuris konvertuoja jūsų pramonėje, padės jums pradėti teisingai.

Atminkite, tikslas yra ne išrasti dviratį iš naujo, o priversti jį sklandžiai riedėti jūsų verslui. Su šiais pataisymais galite pritaikyti bet kurį šabloną nesugadindami jo pagrindinės vertės.