Čo také treba mať pripravené, nad čím treba rozmýšľať? Ak chcete webovú stránku, ale absolútne neviete, kde začať, začnite tu:
Zameranie webu a doména
V prvom rade je treba si ujasniť, o čom bude Váš web. 99% webov sa venuje prezentácií firiem. Takže pokiaľ chcete web za týmto účelom, téma webu bude rovnaká ako zameranie Vašej firmy. Najhoršie sú firmy, ktoré podnikajú asi vo všetkých možných oblastiach. Ak je možné nejakým spôsobom webstránku rozdeliť na viac súvisiacich celkov, treba to urobiť. Typický príklad- Kia. Prídete na web kia.sk a vyskočí na Vás tzv. rozcestník. Ten Vás nasmeruje buď na predaj automobilov, alebo na výrobný závod. Je to super riešenie, lebo ak niekto hľadá robotu, zaujíma ho výrobný závod, ak niekto chce kúpiť automobil, je mu jedno, že na Slovensku existuje nejaký Kia závod.
Ďalším riešením je rozdelenie na viacero nezávislých stránok. Je to, pravdaže, drahšie riešenie, ale vo väčších firmách pár stoviek eur hore-dole asi nerozhoduje.
Výber názvu domény nechávam vždy na klienta. Táto problematika je tak rozsiahla, že stačí na napísanie knihy. Na nete nájdete milión tipov a trikov ako vybrať ten správny názov domény. V prípade, že si neviete rady, alebo že navrhnete očividnú hlúposť (napr. www.najlepsieanajlacnejsiepodprsenky.sk), rovno Vám to poviem do očí. Nebojím sa. Ale! Hneď navrhnem aj riešenie.
Identita
Identita tvorí vo svete internetu Vašu nezameniteľnú stopu. Farby a štýl definujú Váš web a tým aj Vašu spoločnosť. Pokiaľ už ako firma existujete, zaiste máte nejaké vlastné firemné farby, ktoré môžu (ale aj nemusia) tematický súvisieť so zameraním firmy.
Je takmer pravidlom, že akékoľvek firmy, ktoré majú niečo spoločné s vodou (od vodárni, cez vodné filtre až po záhradné fontánky) sú modré.
Všetky rastliny, čiže záhrady, semä, kosačky, až po kombajny, sú z princípu zelené.
Píly, nábytkári, brikety a pod sú takmer vždy hnedé.
Takže zameranie Vašej firmy môže úzko súvisieť s farebnou schémou, ktorá sa na webe bude používať.
Sú však neutrálne zamerania, ktoré nemajú autentickú farbu. Napríklad psychológovia, couchi, tréneri, lektori. Takí potom môžu voliť farbu, ktorá sa im páči.
Okrem farebnej schémy je podstatné logo, ktoré jednoznačne charakterizuje konkrétnu firmu. Väčšie firmy si nechávajú vytvoriť celý dizajnmanuál, ktorý vytvára grafik. Ten určuje fonty, farebné odtiene a možnosti, ako sa logo dá použiť. Tvorba dizajnmanuálu je však nákladná činnosť, preto ju menšie firmy nevyužijú.
Tvorbu loga však využijú. Pozor, farby loga musia korešpondovať s farebnou schémou webu (inými slovami – je blbosť mať červené logo na modrom webe). Logo je najlepšie dodať vo formáte .svg, ale na zahodenie nie je ani .png, tu však musí byť priehľadné pozadie a obrázok musí byť dostatočne veľký, aby vynikol na webe. Nie vždy sa logo dá jednoducho vyrezať z pozadia.
V prípade, že nemáte nič a nehodláte platiť niekoľko stoviek za výrobu loga grafikom, ponúkam svoju službu – tvorbu loga zo šablóny. Logo dostanete vo veľkom rozlíšení, ale nie vo vektorovom formáte. Inšpirácie a grafické prvky beriem z www.freepik.com
Štruktúra
Keď sme vyriešili vyššie uvedené veci, je načase zadefinovať si štruktúru. Od štruktúry sa odvíja ako bude web vyzerať, aký bude rozsiahly, koľko bude cena za jeho vytvorenie a čas, ktorý je potrebný na jeho zhotovenie.
Na základe vlastných skúsenosti – základ pre bežnú slovenskú firmu, alebo živnostníka, ktorý podniká prioritne v jednej oblasti je asi takýto:
- Úvodná stránka
- O mne / O nás
- Služby
- Referencie
- Kontakt
Úvodná stránka
Úvodná stránka je základom každého webu. Musí byť vytvorená tak, aby návštevníka zaujala, aby hneď neušiel. Úvodná stránka by mala obsahovať súhrn podstatných informácií z iných podstránok a mala by užívateľa na dané podstránky preposielať.
Super nápadom je vytiahnuť podstatné informácie do nejakého graficky zaujímavého spracovania, napr. do slideru, CTAčka, flip boxu, carousela. Užívateľ je potom viac náchylný kliknúť práve na daný obsah, čo vlastne chceme.
Menšie weby, tzv one-page sú tvorené len úvodnou stránkou, ktorá je dostatočne dlhá, aby poňala všetky potrebné informácie. Zároveň musí byť zaujímavo spracovaná, aby užívateľa bavila scrollovať.
O mne / O nás
Podstránka, v ktorej opíšete seba, svoju profesionálnu kariéru, alebo krátku históriu Vašej firmy. Ľudia dnes už nejdú len po cene, chcú poznať človeka, o ktorého služby majú záujem, nechcú nikoho anonymného. Takže sa môžete činiť. Alebo sa inšpirovať mojou podstránkou O mne. Môžeme túto podstránku akokoľvek graficky spracovať, pridať videá, fotky, čokoľvek.
Služby
Služby sú asi najpodstatnejšou podstránkou Vášho webu, lebo opisujú zákazníkom – potenciálnym klientom, čo všetko im ponúkate. V praxi sa stretávam s dvoma možnosťami:
Všetko na jednej podstránke
Ak máte málo textu ku každej službe a celkový počet služieb nie je nejako extra veľký, môžete všetky služby vypísať na jednu podstránku. Jednoduchšie a lacnejšie riešenie
Každá služba na vlastnej podstránke
Toto riešenie funguje tak, že každá služba má svoju podstránku. Je to vhodnejšie riešenie vtedy, ak služby treba viac opísať, alebo ak obsahujú aj nejaké ďalšie informácie, ako napr. galérie, grafy, dokumenty na stiahnutie, alebo čokoľvek iné.
Služby môžeme samozrejme hierarchicky radiť podľa potreby až do nekonečno úrovni.
Referencie
Existuje asi tisíc spôsobov, ako urobiť referencie. Vyberte si teda ten, ktorý najviac vyhovuje Vašim potrebám.
Testimonials
Testimonial sú ohlasy zákazníkov. Poskytnete zákazníkovi službu, alebo mu niečo predáte a on Vám zo samej radosti napíše pár teplých slov. Testimonials sa dajú vložiť buď klasicky pod seba, alebo do carousela. Časté a relatívne jednoduché riešenie.
Galéria
Jednoduchá galéria fotiek v Lightboxe, čiže vyskakovacom okne. Po kliknutí na nejakú fotografiu vyskočí „filmový pás“ a medzi jednotlivými fotografiami sa dá prepínať pomocou šípok. Súčasťou každej foto môže byť nadpis a krátky popis (tak na riadok / dva). Najjednoduchšie a najrýchlejšie riešenie.
Multigaléria
Je to vlastne tiež galéria, v ktorej sa ale dokopy zobrazujú všetky fotografie. Hore, nad fotografiami, sa nachádza filter podľa názvu galérie. Viete si tak vyfiltrovať fotografie len z konkrétnej galérie, čiže konkrétneho projektu. Všetko ostatné je zhodné s Galériou.
CPT
Tvorba referencií cez Custom Post Type (CPT) je síce trošku zložitejšie riešenie, avšak, poskytuje najväčšie možnosti. Najprv sa založí CPT – Referencie, do ktorých budete pridávať jednotlivé projekty tak, ako keď píšete články. Každú referenciu môžeme obohatiť o nejaké metadáta (napr. cena projektu, rok realizácie, miesto realizácie), ako si len poviete. Následne pri pridávaní referencie jednoducho vyplníte predpripravené polia.
Takéto riešenie poskytuje možnosti každý jeden projekt detailne opísať, obohatiť fotkami a videami, dokonca je možné takto urobené referencie kategorizovať a označovať značkami (tagmi) pre jednoduché vyhľadávanie na front-ende.
Na front-ende sa potom zobrazí zoznam všetkých referencií s ilustračným obrázok a názvom (prípadne aj metadatami), po kliknutí na konkrétnu referenciu sa zobrazí detail referencie, kde je všetko tak, ako vypíšete.
Kontakt
Podstránka Kontakt štandardne obsahuje kontaktné a fakturačné údaje. Kontaktný formulár veľmi zjednodušuje komunikáciu klienta s Vami, a preto ho vždy a všade dávam. Užívateľ ho len vypíše a Vy dostanete od neho správu na e-mail. Nemusí tak niekde kopírovať e-mail a písať vo svojom mailovom klientovi.
Odporúčam udávať fakturačné údaje, vrátane bankového spojenia. Môže sa to pridať.
Ak má Vaša firma konkrétnu adresu, na ktorej ste zastihnuteľní, je super, ak sa pridá aj google mapa s vyznačením vašej polohy.
Ako pripraviť podklady?
Podklady sú podstatnou vecou, ktorú musíte pripraviť, aby Vaša webová stránka za niečo stála. Bez kvalitných podkladov, sa ja, na rozdiel od mnohých iných, snažím z h*vna upliesť bič, nie vždy je to však možné.
Musíte si uvedomiť, že človek, ktorý ide pre Vás tvoriť webovú stránku, je absolútne cudzí, nepozná Vás, ani Vašu firmu, ani Vaše zvyky, klientov, proste nič. Pozor, to isté však platí aj pre návštevníkov webu – Vašich potenciálnych klientov.
Ak klienti vidia, že ste podklady odflákli jak nemčinu na ZDŠke, evokuje to v nich, že rovnako flákate aj svoju skutočnú činnosť. Záujem ľudí bude teda menší, to mi verte. Ak si však dáte na podkladoch záležať, bude to lahodnejšie aj pre oko, a aj ľudí to viac osloví.
Ak nemáte od prírody vlohy na písanie slohov, zverte to nejakému odborníkovi (tzv. copywriterovi), aj jemu však musíte dať nejaké záchytné body, na základe ktorých bude ten sloh písať.
Texty
Základom podkladov sú, samozrejme, texty. Ak je to možné, snažte sa, aby boli gramaticky správne, pútavé a zaujímavé. Naozaj nik nie je povinný opravovať Vaše gramatické chyby, nie sme v škole na diktáte. Je pravda, že ja sa to snažím robiť, ak vidím niekde gramatickú chybu, tak ju opravím, ale cielene po chybách nejdem, nemám na to čas (a nie je to ani súčasťou mojej práce…).
Texty je super nejako rozdeliť, aby bolo jasné, čo kde patrí, ktorý text na ktorú podstránku. Ak na jednu podstránku patrí viacero textov (dlhších), bude super, ak ich nejako logicky oddelíte pomocou odriadkovania.
Texty na web môžete nejakým spôsobom aj komentovať, aby bolo jasné, čo máte v pláne. Použite pri tom niečo výrazné, aby developer vedel, čo je technická poznámka (napr. bold, zmenu farby, kurzivá do zátvorky a pod.).
Texty odporúčam písať v Microsoft Worde, dajú sa tak jednoduchšie skopírovať do WordPressu. Zabudnite na to, že budete posielať texty ako obrázky (.jpg), nielen ja, ale naozaj žiaden iný developer nebude manuálne prepisovať texty z obrázkov do webu.
Použitie PDF môže, ale aj nemusí byť ok. Pokiaľ sa dá z PDF text kopírovať bez toho, aby bol celý rozhádzaný, tak mne osobne to nevadí. Vo Wordre používajte čo možno najmenej wordovských štýlovaní, absolútne nie sú kompatibilné s webom. Robia viac škody ako úžitku. Na druhej strane – také zoznamy sú kopírovateľné, takže akékoľvek zoznamy môžete pokojne používať.
Obrázky
Obrázky pre web sú samostatnou kapitolou. V podstate sa odrážame od toho, či disponujete vlastnými obrázkami / fotkami, alebo budeme používať ilustračné, či kombinácia týchto dvoch aspektov.
Ilustračné obrázky
Ilustračné obrázky môžeme čerpať z www.freepik.com koľko len chceme. Platím si tam komerčnú licenciu, a čokoľvek, čo na Freepiku nájdete, vieme použiť. Pozor, pokiaľ nie ste prihlásený užívateľ, na Freepiku vyskakuje veľa reklám na iné fotobanky (väčšinou na istock), kde už prístup, ani licenciu nemám. Čiže ak si vyberiete krásny obrázok, je potrebné sa uistiť, že jeho URL začína https://www.freepik.com/blablabla…
Ďalej je možné použiť aj iné fotobanky, najmä tie, ktoré sú zdarma. Tým myslím najmä Pixabay a Unsplash.
Alebo, ak chcete, môžete si na vlastné triko zabezpečiť fotografie z inej fotobanky, to si už však riešite vo vlastnej réžií. AK mám byť úprimný, pokojne si môžete fotky aj ilegálne ukradnúť z niekadiaľ, ale je to na Vašu vlastnú zodpovednosť. Ja nie som policajt, aby som riešil, odkiaľ máte ilustračné zábery…
Reálne zábery
Pokiaľ disponujete vlastnými obrázkami / fotografiami, je to naozaj super. Použiť vlastné fotky je vždy lepšie, ako použiť ilustračné. Aby tomu tak naozaj bolo, musia byť Vaše fotografie kvalitné, dostatočne rozmerné. Nerozmazané, neroztrasené. Bohužiaľ, zatiaľ len málo klientov mi takéto fotografie poskytlo.
V prvom rade si treba uvedomiť, že veľké fotky sa vždy dajú zmenšiť, ale malé fotky sa nikdy nedajú zväčšiť. Čiže pokiaľ máte fotku v malom rozmere, proste ju použiť nemôžeme. Bohužiaľ.
Najlepším riešením sú samozrejme fotografie od profesionálneho fotografa. Nie každý ich však má. Pokiaľ sú fotografie Vaše, uistite sa, aby boli čo možno najkvalitnejšie. Čaro je v tom, že graficky krásny a vymakaný web môže byť brutálny, ak sa doplní super fotkami, ale môže sa úplne „zgrcnúť“, ak sa doplní roztrasenými, prepálenými a škaredými fotografiami.
Veľkosti
Poďme teda teraz trošku k číslam. Za štandard dnes považujeme Full HD rozlíšenie, hoci možno o pár mesiacov už bude štandardom 4k rozlíšenie. Full HD je 1980×1080 pixelov (šírka krát výška v pixeloch). Takéto rozmery obrázkov teda potrebujeme pre obrázky, ktoré majú zaberať celú veľkosť monitora (výšku, aj šírku).
Pokiaľ ide o obrázky, ktoré zaberajú síce celú šírku, ale výškovo sú menšie, rozmery sú 1920 x žiadaná výška.
Pojmom „kontajner“ (container) označujeme tú strednú časť webstránky, v ktorej sa nachádza väčšina obsahu (pár centimetrov z pravej i ľavej strany nie je nič). Tá máva rozmer maximálne 1200px, čiže ak chceme obrázok, ktorý by pokrýval celú šírku kontajneru, musí byť obrázok široký aspoň 1200px.
Pokiaľ ide o obrázky „na polovicu“, musia byť široké aspoň 600px, ja však všetky takéto polovičné obrázky orezávam na 750px šírku, „kdyby něco“.
Obrázky do fotogalérie. Pravdepodobne ich fotíte na mobil, alebo profesionálny fotoaparát, a tak sú neuveriteľne obrovské (4000px na šírku a viac). Takto veľké obrázky na webe netreba. Je potrebné ich teda orezať napr. cez www.birme.net na šírku 1200px a automatickú výšku (inak z nich bude orezávať). Ak to neurobíte Vy, tak to urobím ja.
Doteraz sme sa bavili o veľkostiach, mali sme na mysli pixelový rozsah šírky a výšky, avšak veľmi podstatná je aj veľkosť súboru obrázka. Nepísané pravidlo pre veľkosť obrázku na webe je 300kB, čo je v prípade kvalitných jpg fotiek nedosiahnuteľné (okolo 500kB budú mať, ale kľudne aj 1MB). Práve preto na web nahadzujeme súbory konvertované z jpg do webp, avif, alebo iných moderných formátov, ktoré nestrácajú na kvalite, ale strácajú na veľkosti. A to je presne to, čo chceme dosiahnuť.
Dokumenty
Pokiaľ plánujete na webe nejaké dokumenty na stiahnutie, je vždy dobré ich dodať vo vhodnom formáte. To znamená, že pokiaľ ide o nejaké statické tlačivo (užívateľ ho už nevyplňuje), tak sa ako najvhodnejší javí formát .pdf. Užívateľ si ho proste stiahne a otvorí.
Ak ide o editovateľné tlačivo (napr. reklamačný formulár), je super ho dodať vo formáte .doc, aby si ho užívateľ mohol pred vytlačením upraviť vo svojom PC a vytlačiť už „vypísané“. Samozrejme, že aj PDF sa dá pripraviť ako editovateľné, ale nie je to nič pre štandardného používateľa počítača, treba to vedieť. A vie to málokto.
Ak chcete dávať na stiahnutie rozličné iné súbory, ako napr. schémy, manuály a pod. zdá sa byť ako najlepší opäť formát PDF.
Obrázky na stiahnutie odporúčam vo formátoch, ktoré otvoria všetci, čiže jpg, png, gif. Tu nám nevadí väčšia veľkosť, pretože obrázok sa nebude priamo načítavať pri loadingu stránky, ale až na vyžiadanie po kliku užívateľa.
Iné multimédia
Na web vieme umiestniť aj iné multimédia.
Videá je vždy najlepšie hostovať externe. Najčastejšie ich umiestniť na Youtube, alebo Vimeo a do webu potom dotiahnuť len link na nich, alebo embed. Vyžaduje si to však mať vlastný účet, resp. kanál na YT, kde sa tieto videá budú nahrávať.
Je možný aj vlastný hosting, ale značne to spomalí stránku, najmä ak ide o dlhé a súborovo veľké video (napr. 40MB video, ktoré sa spustí na pozadí). Vhodné formáty sú mp4, webm, alebo ogg. Webm sa mne osobne páči najviac, ale najčastejšie sa stretávam s mp4.
Zvuky vieme na web pridať priamo, ale odporúčam tiež radšej streamovať z externého zdroja, napr. zo soundclouds. Vhodné formáty sú mp3, acc, alebo ogg. Najlepší je acc, najčastejší mp3.
