6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

Všetko sa zrýchľuje. Mnohí chcú mať najdôležitejšie informácie čo najrýchlejšie a získavať ich bez zbytočného čakania. Rýchlosť je v týchto dňoch očakávaná hlavne pri prehliadaní webových stránok. Nedostatočný výkon a pomalé načítavanie vedú k zvýšeniu miery opustenia vašej stránky. Ako dopomôcť k zrýchleniu webovej stránky vo WordPress sa dozviete v dnešnom článku. 

Prečo je rýchlosť webovej stránky dôležitá?

Google odporúča za najoptimálnejšiu rýchlosť načítania v prípade 3G pripojenia 5 a menej sekúnd. Ak čas načítania vašej stránky prejde z 1 sekundy na 3, pravdepodobnosť okamžitého odchodu sa zvyšuje o 32 %. V prípade načítania webu z 1 sekundy na 10 sa zvyšuje až o 123 %! Alarmujúce však je, že podľa Google analýzy (2018), sa mobilné weby načítavajú v priemere až 15 sekúndRýchlosť webovej stránky ovplyvňuje až takmer 70 % spotrebiteľov. Pravdepodobnosť ich nákupu s rýchlosťou webu stúpa. Pokiaľ je webová stránka pomalá, prichádzate o zákazníkov a znižujete mieru konverzieRýchlosť vašej webovej stránky je tiež veľmi výrazným SEO faktorom. Preto sa pri tvorbe webových stránok vo WordPress vždy snažíme dbať na rýchlosť a výkon webu a robíme všetko preto, aby sme ju správne optimalizovali bez použitia prílišného množstva pluginov.Objektívny prehľad o tom, či je váš web rýchly, si môžete spraviť pomocou rôznych nástrojov, odporúčame Google PageSpeed Insights, no existuje mnoho ďalších napríklad GTmetrix či WebPageTest. Poďme sa pozrieť na niektoré z možností, akými zlepšujeme výkon webových stránok a optimalizujeme ich.

1. Menej reklám

Veľké množstvo reklám môže uškodiť vášmu webu, nakoľko reklamy načítavajú JavaScript, CSS a média, čím môžu veľmi spomaliť stránku a tiež zhoršiť užívateľský zážitok. 

2. Rozdeľte dlhé stránky

Dlhé stránky spomaľujú načítavanie webu.

  • Pokiaľ má niektorá z vašich stránok na webe príliš veľa obsahu, možno by bolo vhodnejšie ju rozdeliť na niekoľko
  • Na dĺžku dbajte aj pri písaní článkov na váš blog. Niekedy je lepšie článok rozdeliť na viaceré články, čím tiež prispejete k zrýchleniu webu. 

3. Aktuálnosť WordPress, pluginov a PHP

Vo WordPress vývojári pluginov neustále pracujú na vylepšeniach a preto je dobré si ich pravidelne aktualizovať. Veľký vplyv na výkon WordPress stránky má aj verzia PHP. Cloudways zverejnili výsledky ich benchmarkingového testu, ktorý sledoval zlepšovanie výkonu stránok od verzie PHP 5.6 po 8.0. Nižšie uvedený graf ukazuje, že výkon sa neustále zlepšuje. Oproti súčasnému PHP 8.0 s najrýchlejším časom načítania 164 ms vyšiel PHP 5.6 takmer 3-krát pomalší.

Zeni team - priemerná doba odozvy
Zeni team – priemerná doba odozvy

4. Caching

Prednačíta a nachystá obsah stránky, aby sa minimalizovalo počítanie a načítavanie z databázy pri prístupe na stránku. Používateľ dostane pri načítavaní stránky predpripravenú verziu, čím sa môže až niekoľkonásobne zvýšiťnačítanie webu. Aby sa v budúcnosti mohli požiadavky na údaje vyriešiť rýchlejšie, caching si tieto údaje ukladá. Súčasťou každého produkčného webu by mal byť určite Caching plugin, vďaka ktorému získate obrovské množstvo výkonu webu. Pre našich WordPress klientov nastavujeme Redis Cache, ktoré umožňuje cachovanie pomocou in memory databázy.

5. CDN (Content Delivery Network)

  • Ide o skupinu serverov, ktoré sú geograficky bližšie k vašim návštevníkom, a tak znižujú odozvu pri načítavaní stránky. 
  • Po nastavení CDN sa váš obsah (obrázky, videá…) uloží do vyrovnávacej pamäte na proxy serveroch a načítava sa zo serverav blízkosti polohy vášho návštevníka, vďaka čomu sa zníži odozva a obsah sa načíta rýchlejšie
  • Pre našich klientov používame službu Cloudfare CDN, ktorý im nastavujeme a je štandartný pre všetky stránky, ktoré máme v správe.

6. Kvalitný hosting

Ak si myslíte, že ste pre zrýchlenie vášho webu skúšali už všetko, no stále nedosahujete želané výsledky, je vhodné sa zamyslieť nad zmenou poskytovateľa hostingu. My v Zeni vám vieme ponúknuť hosting, ktorý zrýchli váš web. Tiež dokážeme pomôcť so zrýchlením webu a zvýšením vašej návštevnosti. Ozvite sa nám a radi vám poradíme

ODKAZY

  1. Page Speed Report
  2. New Industry Benchmarsk
  3. Mobile site speed statistics
  4. Performance Benchmarks for WordPress

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Tvorba webovej stránky pre i4comfort

Tvorba webovej stránky pre i4comfort

Aplikácia i4comfort od spoločnosti A-technology prináša komplexné a jednoduché riešenia ovládania technológií vo vašom dome na diaľku. Myšlienka úspory v oblasti vykurovania, a tým aj zmenšenia CO2 stopy pomocou inteligentného ovládania technológií, nás zaujala a bolo nám potešením podieľať sa na tvorbe webovej stránky pre túto aplikáciu.

Prečo a ako vznikla stránka

Stránky pre i4comfort sme vytvárali v CMS WordPress pre existujúceho klienta, ktorému sme už tento rok spustili kompletne nový produkčný web. Spoločnosť A-TECHNOLOGY s.r.o. má svoje prezentačné stránky a-technology.cz, preto bolo dôležité nadesignovať webovú stránku i4comfort v podobnom duchu ako tú materskú a zároveň webovej stránke vytvoriť vlastnú identitu. 

Porovnanie starej a novej stránky

Stará webová stránka i4comfort mala viaceré nedostatky:

  • Nespĺňala kritériá zabezpečenia.
  • Chýbalo vývojové prostredie v podobe stagingu
  • Logo a vzhľad boli zastaralé.
  • Web nebol responzívny.
Stará webová stránka

Nová stránka:

  • Webová stránka je plne responzívna.
  • Má na viacerých miestach CTA tlačidlo, ktoré vyzýva k akcii, vďaka čomu je väčšia pravdepodobnosť získania si zákazníka. 
  • Vytvorili sme nové logo a nadizajnovali nový vzhľad stránky.
Hlavná stránka i4comfort

Grafika webovej stránky

  • Tvorba webovej stránky vo WordPress pre i4comfort graficky nadväzovala na spomínanú materskú stránku.
  • Stránka má unikátny a zapamätateľný design.
  • Vytvorením osobitej identity stránky je samozrejmé, že ide o samostatný web.
  • Zákazník a-technology zároveň získava familiárny pocit.
  • Informácie nie sú komunikované len textovo, ale sú znázornené na mnohých miestach graficky, vďaka čomu sú viac zapamätateľné a prehľadné.

Technické funkcie

Moderný zážitok

Webová stránka disponuje mnohými vizuálnymi efektami, ktoré sú zakomponované tak, že stránku nespomaľujú. Web je tiež responzívny na akomkoľvek zariadení. 

  • Mnohé animácie a interaktívne časti využívajú čisto moderné možnosti štýlovania (css).
  • Nie je nutné donačítavať JavaScript ani kvôli niektorým rozklikateľným interaktívnym sekciám ako to býva na mnohých iných stránkach.
  • Stránka je tak rýchlejšia, zároveň poskytuje rovnako kvalitný zážitok, ako napríklad tu:
Vizuálne efekty webovej stránky

Stránka na používateľa reaguje

Symboly jednotlivých technológií sa menia podľa toho o čom používateľ momentálne číta. Podľa pozícii na stránke sa mení aj CTA tlačidlo, ikony, či navigačné prvky (horné menu, bodky vpravo). Spomenuté si môžete prezrieť na stránke ,,Jak funguje i4comfort”.

Webová stránka reaguje na užívateľa

Na stránke ,,Možnosti využití” sa tiež interaktívne menia obrázky podľa toho o čom používateľ číta. Čitateľ si tak jednoduchšie predstaví jednotlivé prvky o ktorých číta a tiež si ich lepšie zapamätá. Toto všetko vytvára unikátnu, rýchlu a interaktívnu skúsenosť, ktorá zaujme používateľa.

Výhody novej webovej stránky

Téma na sage

Ľahká konfigurovateľnosť

  • Nami naprogramovaná téma pre WordPress umožňuje ľahkú konfigurovateľnosť.
  • Pre každú stránku je osobitne nastaviteľné správanie a štýl hlavičky stránky.
  • Všetek obsah je jednoducho editovateľný bez nutného zásahu vývojára.

Použiteľnosť z hľadiska mobil/desktop

Desktopové prostredie nie je ani zďaleka len zväčšeným mobilným prostredím. Myslíme na dobrú skúsenosť pre každého užívateľa.

  • Na desktope je využívaný všetok priestor, vďaka čomu je na obrazovke poskytnutých čo najviac informácií a ani na veľkej obrazovke web nepôsobí prázdny
  • Používateľská skúsenosť na mobile je zároveň prispôsobená používaniu pomocou prsta a menšej obrazovke. 
  • Na mobile je všetko jednoducho klikateľné, ľahko a rýchlo dostupné. 
  • Mnohé sekcie vyzerajú v porovnaní mobilu a desktopu výrazne odlišne
  • Pre lepší zážitok boli pre mobil mnohé časti zjednodušené, niektoré vizuálne aspekty používané pre desktop vynechané, nakoľko nemali pre mobilného používateľa pridanú hodnotu
Webová stránka je responzívna

Pre i4comfort sme vytvorili nový web s množstvom vychytávok, ktorý je zároveň rýchly a prehľadný. Pokiaľ potrebujete pomôcť s tvorbou webovej stránky a chcete poskytnúť svojim zákazníkom kvalitný zážitok, neváhajte sa na nás obrátiť, radi vám pomôžeme.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Formulár na webe – dobrý pomocník

Formulár na webe – dobrý pomocník

Dnes sa budeme zaoberať otázkou “Prečo mať na webe formulár?”. Ak robíte webové stránky pre akéhokoľvek klienta, vždy je dobré mať na stránkach formulár. Existujú totiž klienti, ktorí neradi volajú, ale radšej si službu požiadajú práve cez formulár. Ak im túto službu neponúknete, strácate ich.

Aké formuláre môžeme mať

1. Jednoduchý dopytovací formulár

Jedná sa o formulár, v ktorom spravidla býva len:

  • Meno a Priezvisko
  • Adresa
  • Telefón
  • E-mail
  • Informácie pre nás

Tento formulár spravidla nájdeme na stránkach živnostníkov alebo firiem, ktoré ponúkajú väčšinou len jednu službu.

Jednoduchý dopytovací formulár

2. Zložitejší dopytovací formulár

Tento druh formulára väčšinou použijeme pri klientovi, ktorý sa zaoberá viac ako jedným druhom služieb, alebo predáva viac druhov výrobkov, ale ešte nemá záujem svoje služby a výrobky predávať cez e-shop. Tento druh formulára môže obsahovať napríklad tieto informácie:

  • Meno a Priezvisko
  • Adresa
  • Telefón
  • E-mail
  • Služba/výrobok – výber z 2 až X  
  • Informácie pre nás

Formulár väčšinou využívajú tí, ktorí chcú od klienta už pri vstupe viac informácií, aby ho nezahlcovali „zbytočným“ telefonátom.

Zložitejší dopytovací formulár

3. Viacstupňový dopytovací formulár

Pri tomto formulári je potrebné si s klientom sadnúť a podrobne si vyšpecifikovať štruktúru.  Čím lepšie bude špecifikácia spísaná, o to kvalitnejšie budeme dostávať žiadosti o služby, ktoré budú priradené priamo danému pracovníkovi.

Tento druh formulárov sa používa v spoločnostiach, ktoré sa zaoberajú výrobou viac ako dvoch rôznych výrobkov, majú viac segmentov výroby a tieto výrobky/segmenty môžu mať viac druhov. Tieto výrobky majú svojich zákazníkov v B2B aj B2C sfére. 

Do formulára je teda potrebné vtesnať čo najviac otázok pre návštevníka webu, ale zároveň je nutné ich nastaviť tak, aby ho zrozumiteľne viedli k cieľu. Formulár môže obsahovať mnoho informácií, ktoré môžu mať rôzne podmienky. Keď vyberiete niektorý druh segmentu, objaví sa vám už len výber výrobkov určených pre tento segment. Od návštevníka tak dostanete presnú špecifikáciu toho, čo žiada a tieto informácie tak môžete poslať priamo na daného pracovníka, ktorý sa mu môže ihneď venovať. Skrátite tak procesne reakčnú dobu, čo návštevník určite ocení.

Viacstupňový dopytovací formulár
Viacstupňový dopytovací formulár
Viacstupňový dopytovací formulár
Viacstupňový dopytovací formulár

4. Formulár napojený na systém

Niektoré formuláre chcú klienti napojiť priamo na ich interný systém. Nielen, že to zjednoduší prácu, ale predovšetkým ju zefektívni a vyhneme sa tak chybovosti ľudského faktoru. Všetky informácie, ktoré nám návštevník webu odovzdá, putujú rovno do interného systému a priamo na danú osobu. Na príklad sa môžete pozrieť tu: 

Formulár napojený na systém

Objednávka servisu sa prepíše do systému Orion a informácia putuje k servisnému technikovi priamo do mobilnej aplikácie. Servisný technik má relevantné informácie o tom, čo má opraviť a podľa bodu na mape môže naplánovať trasu a vybaviť tak viac servisných požiadaviek za deň.

Čo nám formuláre prinášajú

Cenný kontakt

Keď už nič iné, tak nám formulár prinesie cenný kontakt, s ktorým môžeme následne pracovať. V prípade, že nám potencionálny klient zanechá kontakt v podobe e-mailu a v lepšom prípade telefónu, môže ho obchodné oddelenie kontaktovať a pracovať s ním.

Podrobnejšie informácie

Čím podrobnejší je formulár, tým viac a presnejších informácií z neho dostaneme. Vždy však dbáme na to, aby sa z formulára nestala dedinská klebetnica s miliónom zbytočných otázok.

Segmentáciu žiadostí

Väčšie spoločnosti majú pre každý druh výrobku špeciálneho obchodníka. V prípade, že asistentka, alebo ešte lepšie formulár vie, na koho má žiadosť poslať, pošle ju tam. Skráti sa tak reakčná doba a špecialista môže veľmi rýchlo zareagovať.

Aké formuláre najlepšie vytvoriť

Jednoduché

Každý formulár by mal obsahovať len najdôležitejšie body, na ktoré potrebujeme od klienta odpoveď.

Zrozumiteľné

Vo formulároch uprednostňujeme radšej bežné názvy pred profesijnými. Nie každý, kto navštívi náš web musí byť z našej brandže, a preto by nemusel rozumieť niektorým profesijným, profesionálnym názvom.

Aké nástroje, pluginy použiť k tvorbe formulárov

Free

Je ich pre WordPress nevyčerpateľné množstvo. Spomeniem len pár:

Contact form 7

Gravity Forms + Custom Post Types

Caldera Forms

Platené

Pri niektorých free pluginoch si môžete zakúpiť ich rozšírené verzie. Ja odporúčam pre prácu tieto:

Caldera Forms

Gravity Forms

Zhrnutie

  1. Pred tvorbou formulára sa veľa pýtajte klienta.
  2. Dohodnite sa, ktoré informácieod návštevníka naozaj nevyhnutné získať.
  3. Menej je niekedy viac. Do formulára dávajte naozaj len nevyhnutne nutné.
  4. Vyberte dobrý a osvedčený plugin. Niektoré pluginy už majú kontaktný formulár zabudovaný v sebe.
  5. Čím viac návštevníkov cez kontaktný formulár získate, tým máte väčšiu šancu predaja vášho výrobku.

Ak vás akýkoľvek formulár zaujal a chcete pomôcť s jeho tvorbou, kontaktujte nás.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

5 vecí, na ktoré nesmieme zabúdať pri tvorbe webových stránok

5 vecí, na ktoré nesmieme zabúdať pri tvorbe webových stránok

Pri tvorbe webových stránok ide o komplexný proces, ktorý tvoria viaceré činnosti. Od prieskumu trhu, cez grafický dizajn,  programovanie webu, tvorbu textov až po samotné spustenie webovej stránky. Prečítajte si nasledovných 5 vecí, ktoré sú pri tvorbe webovej stránky pre nás veľmi dôležité, a preto na ne vždy prihliadame.

Analýza kľúčových slov a stanovenie cieľov

Ľudia hľadajú cez vyhľadávače rôzne výrazy, ktoré im pomáhajú nájsť to, čo hľadajú. Pomocou analýzy kľúčových slov nájdeme frázy, ktoré sú opakovane vyhľadávané a súvisia s vašim zameraním, vďaka čomu zistíme, cez ktoré kľúčové slová sa návštevníci dostanú na vašu webovú stránku

Pred samotnou tvorbou webu je najdôležitejšie ujasniť si princípy a hodnoty spoločnosti, ktoré pomôžu k analýze kľúčových slov. Je nutné zameriať sa na to, aké má firma vízie do budúcnosti a tiež aký je jej príbeh. Následne je potrebné určiť ciele, na základe ktorých budeme tvoriť váš web pre kvalitnú sortu klientov. 

Analýza kľúčových slov je dôležitou prioritou pre úspech webu od ktorej sa následne odvíja optimalizácia pre vyhľadávače.

Optimalizácia pre vyhľadávače (SEO)

Vďaka SEO optimalizácií dostaneme vašu webovú stránku jednoduchšie medzi vrchné výsledky vyhľadávania. Pri súčasnej miere konkurencie vo vyhľadávaní je čo najlepšia optimalizácia pre vyhľadávače nutnosťou. 

Pre SEO optimalizáciu „vylaďujeme“ nie len texty na stránkach. Ide o komplexnejší proces. Čo je pre optimalizáciu dôležité a na čo sa zameriavame?

  • Rýchlosť načítania;
  • bezpečnosť stránok;
  • popisy fotiek a produktov;
  • obrázky;
  • optimalizácia textov;
  • správne nadpisy, titulky;
  • technické nastavenie SEO;
  • a mnoho ďalšieho…

—> O tvorbe optimalizovaného obsahu sa dozviete viac v článku Správna tvorba optimalizovaného obsahu webovej stránky

—> Ako písať články pre SEO, a robíme to tak aj my, si môžete prečítať tu: SEO – Ako písať články, aby boli čitateľné, a optimalizované pre vyhľadávače

Copywriting

Správna tvorba textov na webovej stránke je základom spomínanej optimalizácie pre vyhľadávače a tiež samotnej tvorby webovej stránky. Preto je dôležité písať texty nie len zaujímavé, ale aj gramaticky správne spolu s využitím vhodných kľúčových slov. Súčasťou copywritingu je príprava textov v súlade s analýzou vašej cieľovky a ich optimalizácia pre vyhľadávače pomocou kľúčových slov, či správnej hierarchie nadpisov atď. 

Viac o tom, čo všetko by mal obsahovať každý článok si prečítajte v článku Náležitosti, ktoré by mal obsahovať každý článok.

Prístupnosť webovej stránky

Nezabúdajte, že na vašej webovej stránke sa čitateľ musí čo najjednoduchšie orientovať. Navyše, dnes už vyše 67 % užívateľov prehliada internet z mobilu alebo tabletu. Pokiaľ užívateľ nenájde to, čo hľadá, stránka je pre neho príliš komplikovaná, vyskakujú na neho rôzne okná, či je prehltená reklamou, okamžite odchádza a vám tak zvyšuje mieru opustenia stránky, čím sa tiež zhoršuje SEO. 

Preto tvoríme stránky tak, aby spĺňali potrebné kritériá. Je pre nás dôležité, aby vaša webová stránka bola rezponzívna a čo najviac prístupná pre všetkých užívateľov. 

Čo sú to prístupné stránky a najčastejšie problémy webov spísala naša kolegyňa Mishka v článku Prístupný web je výhodný pre všetkých

Ako sme v prístupnosti pomohli? Prečítajte si naše prípadové štúdie:

—> Aj veľká škola s množstvom aktivít môže mať prehľadný web

—> Prístupný web pre ZŠ a MŠ Otnice

—> Web pre MŠ Hrušovany pri Brne na prístupnej šablóne

Marketing

Pokiaľ chcete naozaj výkonnú webovú stránku, ktorá prináša výsledky, samotná optimalizácia SEO nestačí. Pri tvorbe webovej stránky si premyslite, akým spôsobom budete vašu stránku prezentovať ostatným. Budete písať blog? Ponúkať rôzne akcie, či výhody? Akým spôsobom zakomponujete na stránke recenzie? Tomu následne prispôsobíme aj tvorbu a design stránky. Po jej spustení je tiež dôležité investovať do samotného marketingu, ako napríklad PPC kampane, či prezentácia na sociálnych sieťach, s čím vám tiež radi pomôžeme.

Ako sa pripraviť na marketing si môžete prečítať v článku Pripravte sa poriadne na marketing.

Ak chcete aby vaša webová stránka bola výkonná a prinášala vám zákazníkov, neváhajte nás kontaktovať, radi vám pomôžeme. 

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Serial Killer – Prečo je dobré mať webovú stránku vytvorenú na Sage?

Serial Killer Prečo je dobré mať webovú stránku vytvorenú na Sage? 

Aj Zeni team mal možnosť podieľať sa na medzinárodnom festivale TV a web seriálov – Serial Killer. Vytvorili sme preň webovú stránku, ktorej téma je postavená na Sage. Ako sme pri tvorbe webovej stránky postupovali a tiež výhody stránky vytvorenej na téme v Sage sa dozviete v článku. 

Čo je Serial Killer?

Určite už tušíte, že festival Serial Killer poteší všetkých nadšencov seriálovej kultúry. Tvorcovia najlepších seriálových noviniek zo strednej a východnej Európy sa každoročne stretávajú na medzinárodnom súťažnom festivale televíznych a webových seriálov. Na veľkom plátne si môžu pozrieť premiéry, ktoré inde nemajú možnosť vidieť. Navyše, v sekcii Fokus sa festival každým rokom zameria na inú krajinu a predstaví jej seriálovú tvorbu. 

Tvorba webovej stránky 

Festival nás zaujal a aj preto sme sa rozhodli zapojiť do tvorby ich webovej stránky

HTML štruktúru najprv vytvoril grafik Martin Pecina, následne bolo nutné rozdeliť ju na menšie časti a vytvoriť za ňou celý web.

Z celkového zadania a grafiky sme si rozdelili stránku na sekcie:

  • seriály;
  • panely;
  • videá;
  • prednášajúci;
  • členovia tímu.

Pri každej zo spomenutých sekcií sme identifikovali, ktoré dáta bude potrebné vypĺňať a pridali sme možnosť ich editácie do administrácie. Dáta bolo tiež potrebné napasovať do pripravenej grafiky a pomocou nich tak oživiť obsah

Aké funkcionality sme robili pre Serial Killer?

Hromadné stiahnutie fotiek z jednotlivých dní z presskit 

Klient nám zadal, aby bolo možné stiahnuť všetky fotky z jednotlivých dní z presskit a to v zip súbore. Pripravili sme funkcionalitu, ktorá všetky dané fotky zazipuje a užívateľ si ich môže stiahnúť.

Predplatiteľská sekcia

Klient potreboval pridať na web možnosť kúpiť si predplatné do internej sekcie webu. Pripravili sme prepojenie s Woocommerce a Gravity Forms, ktoré zaisťujú nákup prístupov a tiež prihlásenie a obmedzenie prístupov na určité stránky.

Archivácia starého ročníka

Toto je jedna z nových features, ktoré stránka obsahuje. Klient požadoval, aby bolo možné nastaviť jednotlivé seriály, seriálové sekcie, panely a prednášajúcich ako archivované. Tie sa potom nebudú zobrazovať na štandartných miestach a klient si ich bude môcť pridať na vlastné stránky.

Prečo je dobré mať tému stránky vytvorenú na Sage?

  • Najlepší nástroj na tvorbu WordPress šablón

Dáva programátorovi skvelé možnosti, ako udržať svoj kód prehľadný a čitateľný. Či už sa jedná o písanie CSS s SASS, Blade templaty, Javascript routing alebo Controlery, v ktorých je možné špecifikovať funkcionalitu pre presne danú šablónu. S takýmto nástrojom je práca omnoho zábavnejšia.

  • Obsahuje Laravel blade templating

Veľmi uľahčuje prácu s vytváraním jednoduchých a prehľadných šablón. My sme si k nemu navyše doinštalovali ACF Sage directives, čo nám značne uľahčiloa sprehľadnilo prácu s ACF fieldmi. 

  • Pretože JavaScript routing 

Sage už v základe obsahuje funkcionalitu, ktorá umožňuje rozdeliť JavaScript do súborov a potom ho načítať na stránkach podľa vášho určenia. JavaScript je vďaka tomu prehľadnejší a nemusíte sa obávať, že sa na niektorej stránke spustí niečo nechceného.

Výkonnosť webovej stránky

Či na vašej stránke čitateľ ostane záleží hlavne od toho, či ho dokážete čo najskôr zaujať. Ako ho ale zaujmete, ak sa vaša stránka bude načítavať nekonečné hodiny? Preto je pre vašu webovú stránku veľmi dôležitá jej výkonnosť, spoľahlivosť a rýchlosť

Splnenie týchto požiadaviek vám samotný Sage nezaručí. Avšak dobrý programátor v spojení s tak dobrým nástrojom ako je Sage môže spraviť zázraky. Výkonnosť a rýchlosť totiž vždy záleží na samotnom programátorovi.

Tak, ako aj pri ďalších našich projektoch sme sa snažili načítať vždy len všetko potrebné a pripravili sme stránku na čo najrýchlejšie načítanie. Napríklad sme odstránili nepotrebné CSS a JS súbory, nastavili lazyload obrázkov a mnoho iného.

Ak by ste aj vy chceli vytvoriť vašu webovú stránku na tak kvalitnom nástroji ako je Sage a priniesť vašej stránke výkonnosť a rýchlosť, neváhajte sa na nás obrátiť. Napíšte nám a my sa vám ozveme v čo najkratšom čase.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Sedem dôvodov prečo používať staging pre Váš projekt vo WordPress

Sedem dôvodov prečo používať staging pre Váš projekt vo WordPress 

alebo sedem spôsobov ako ho pokaziť bez stagingu.

Čo je staging?

Staging alebo testovacie prostredie je prostredie podobné produkčnému, v ktorom môžete testovať nové funkcie v zmysle integračného testovania a testovania užívateľskej prijateľnosti. Inak povedané, ide o 1:1 kópiu vašej živej stránky, ktorá je prístupná všetkým užívateľom. Na stagingu máte možnosť aplikovať novinky v testovacom prostredí bez toho, aby ste niečo pre vašich klientov alebo návštevníkov stránky viditeľne pokazili. 

1. Aktualizácie jadra WordPress

Samotný WordPress sa neustále vyvíja. Jeho aktualizácie sú rozdelené do dvoch skupín: major (hlavné) a minor (menšie). Tie hlavné (označované X.Y) sú plánované a vopred si môžete prečítať čo prinesú nové funkcie, naproti tomu menšie aktualizácie (označované X.Y.Z) sú väčšinou zamerané na opravu chýb alebo bezpečnostných záplat a vychádzajú viac neočakávane.Oba typy však môžu niečo pokaziť. Problémy môžu nastať so spätnou kompatibilitou tém, pluginov, vášho kódu, mazaním/aktualizáciou treťostranných knižníc, alebo sa môže zmeniť správanie Gutenberg blokov atď. Sú všetky pluginy a témy, ktoré používate pripravené pre nové vydanie jadra WordPress? Tým si nemôžete byť nikdy istý. Väčšinou však testovanie tejto skutočnosti na vašej živej stránke nie je práve najlepším nápadom. Použite staging!

2. Aktualizácie pluginov a/alebo tém

Aj keď sú hlavné aktualizácie WordPress jadra dosť predvídateľné a majú pevný rozpis, pre pluginy a témy to platí zriedka. To znamená, že s WordPress stránkou, ktorá je strednej veľkosti (z hľadiska počtu pluginov) dostanete prekvapivú aktualizáciu minimálne raz za týždeň. Mnoho platených pluginov často nemá transparentný zoznam zmien, čím sa predpovedanie potenciálnych chýb alebo konfliktov stáva takmer nemožné. Jediný spôsob, ktorým udržíte vašu internetovú stránku stabilnú je „vždy ju aktualizovať najprv na stagingu.“

3. Miesto na otestovanie toho úžasného nového pluginu

Poďme implementovať tú integráciu sociálnych médií pomocou tohto pluginu!Ale čo! Zdá sa, že to spôsobilo nefunkčnosť nahrávania obrázkov a posledných desaťtisíc článkov, ktoré boli včera v noci importované nemá úvodný obrázok. Skvelé, ďalšia noc s opravovaním. Toto by sa nestalo, keby sa tento plugin najskôr testoval na stagingu.

Keď Vám padne vaša živá stránka a Vy musíte celú noc opravovať chyby
Keď Vám padne vaša živá stránka a Vy musíte celú noc opravovať chyby

4. Miesto na testovanie aktualizácií serverových aplikácií

Takže váš web stále beží na PHP 5.6, je to tak? Vyskúšajte PHP 7.4 a zrýchlite ho! Tak si na svojom živom webe aktualizujete PHP a jediné, čo teraz môžete vidieť je kopa správ o závažných chybách spolu s 2 hodinovým výpadkom e-shopu, počas ktorých váš klient stratil niekoľko tisíc. Dobrá práca! Nevyskúšate to nabudúce najskôr cez staging? 

5. Miesto pre testovanie Vášho kódu

Bude môj kód dobre fungovať s kódom ostatných členov tímu? Nezabudnite, že Váš „tím“ nie je len vnútri vašej spoločnosti, ale tiež zahŕňa všetkých vývojárov, ktorí prispeli do akejkoľvek časti webu (WP jadro, pluginy…). Pred tým, ako presuniete Váš kód na akékoľvek iné prostredie, vždy by ste ho mali otestovať lokálne, avšak zvyčajne potrebujete aby sa na to pozrel klient, projektový manažér a testovací tím. Alebo potrebujete funkcionalitu testovať na bežných užívateľoch? V tomto prípade Vám staging uľahčí Váš život.

6. Experimentujte s CMS

„Čo ak presunieme tento widget z ľavého panelu do pätičky a zmeníme jeho názov?“ Každá väčšia zmena v CMS by mala byť najprv testovaná na stagingu. Podľa skúseností, keď klienti uvidia svoj vynikajúci nápad v praxi na webe, tak môžu veľmi rýchlo zmeniť názor.  Používate pre svoj frontend nejaký druh nástroja pre tvorbu stránok (page builder)? Ukážky (Previews) sú výbornou funkciou, ale zvyčajne musíte vidieť celý kontext vrátane menu, zmien v nastaveniach pluginov atď. V tomto prípade sa staging prostredie ukáže ako veľmi užitočné. Taktiež určite nechcete, aby Vaši návštevníci videli ako preskakujú widgety a menu položky na produkcii, že?

7. Výstavné miesto pre vášho klienta

Priniesť svoj notebook do klientovej kancelárie (vzhľadom na globálny trh a pandémiu) aby ste mu ukázali najnovšie funkcie, nie je v dnešnej dobe práve najlepším nápadom. Počuli ste niekedy o wow efekte? Prosím, nerobte to. Ukážte klientovi nové funkcie postupne na Vašom stagingu. Obaja budete o dosť lepšie spať, verte mi!

Keď nájdeme viac chýb ako naši zákazníci
Keď nájdeme viac chýb ako naši zákazníci

V nasledujúcom článku sa pozrieme na to, ako vytvoriť staging prostredie.

Pokiaľ máte záujem o vlastnú kvalitnú stránku a potrebujete pomoc, napíšte nám a radi Vám s ňou pomôžeme.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.

Prípadová štúdia: prístupný web pre ZŠ a MŠ Otnice

Prístupný web pre ZŠ a MŠ Otnice

Od septembra tohto roku musia všetky weby základných škôl v Českej republike spĺňať tzv. pravidlá o prístupnosti. Ide o to, aby bol web použiteľný a prístupný aj pre osoby so zdravotným znevýhodnením, napr. nevidiacich a slabozrakých alebo nepočujúcich.

Naše riešenie pre školy založené na platforme WordPress sme v nedávnej dobe implementovali na web základnej a materskej školy v Otniciach www.zsotnice.cz.

Pri doterajších stránkach sme identifikovali z hľadiska prístupnosti ale aj bežnej užívateľskej prívetivosti tieto problémy:

  • Komplikovaná navigácia webu:
    • web obsahoval 2 navigácie (menu), ktoré sa obsahom prekrývali,
    • jedno z menu malo 3 úrovne.
  • Úvodný karusel(automaticky rotujúci obsah stránok), ktorý strhával pozornosť od ostatných informácií (tento prvok sa berie ako neprístupný obsah).
  • Zložitosť webu:
    • v prehľade príspevkov bol vypísaný celý obsah príspevku, kvôli niektorým príspevkom musel užívateľ odrolovať aj niekoľko stránok.
    • web obsahoval stránky, ktoré nemali žiadny obsah (neboli naplnené),
    • na stránkach boli informácie, ktoré na web nepatria – osobné informácie, napr. zoznam žiakov, ktorí zaplatili za lyžiarsky kurz, atď.,
    • podobné informácie boli rozdelené do niekoľkých stránok – užívateľ musel zbytočne preklikávať web, kým sa dostal k požadovanej informácií.
  • Nepriehľadnosť webu:
    • dôležité informácie boli na webe len v PDF súboroch, nie v textovej podobe priamo na webe, napr. Krúžky, Organizácia školského roku, Pladby stravného, Školkovné,
    • niektoré odkazy na stránkach boli uvedené len URL adresou odkazu, nebolo presne jasné, na aký obsah sa užívateľ dostane, napr. Dôležité zdroje pri voľbe povolania,
    • položky menu mali niekoľko farieb bez evidentného účelu.
  • Neprístupný obsah:
    • chýbali preskakovacie odkazy,
    • menu webu nebolo ovládateľné z klávesnice,
    • web nespĺňal požiadavku kontrastných farieb,
    • malé písmo webu,
    • web nebol responzivný – na mobile bol prakticky nepoužiteľný,
    • pri prechádzaní webu z klávesnice nebolo jasné na ktorom odkaze sa užívateľ nachádza,
    • súbory na stiahnutie boli uvedené názvom súboru a nie popisom obsahu.

Čo teda nový web z našej produkcie škole v Otniciach priniesol?

  1. Zjednodušenie navigácie webu – len 1 menu s 2 úrovňami a jednotnou farbou.
  2. Zjednodušenie webu:
    • stránky s podobným obsahom zlúčené do jednej,
    • maximum informácií bolo vložených na web priamo v textoch,
    • informácie na webe sú vždy na jednom mieste – lepšie dohľadateľné a lepšie sa udržujú,
    • odstránené prázdne stránky.
  3. Zrýchlenie webu.
  4. Responzívny web.
  5. Kontakty na školu priamo v záhlaví a zápätí každej stránky.
  6. Jednoduché vkladanie obsahu na web.
  7. Web je v súlade s pravidlami prístupnosti.

Radi sme pomohli s riešením požiadaviek prístupnosti webových stránok Základnej a materskej školy v Otniciach. Ďakujeme vedeniu školy za spoluprácu a želáme, aby nové stránky www.zsotnice.cz slúžili k spokojnosti školy, rodičov a žiakov.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.