Posledné posty

Je december, no my začneme s Októbrom.

J

Keď som nastúpil do novej práce, rozhodovali sme sa, aký framework, alebo hotové CMS riešenie použiť na tvorbu a vývoj webových stránok. Pri prechádzaní všetkých možných aj nemožných riešení sme narazili aj na CMS, ktoré je postavené na PHP frameworku Laravel – October CMS. Rozhodol som sa, že budem postupne písať sériu článkov o tom, ako sa s týmto CMS systémom pracuje a dnes teda predstavenie. Poďme do toho…

(viac…)

Klient nevie, čo chce: A keď to urobíte, klient zrazu vie, čo chce – niečo iné

K

Vo svojej praxi sa často stretávam s tým, že mi klienti nechávajú voľné ruky vo všetkom, čo by mal ich web obsahovať, ako by mal vyzerať a zároveň aj v tom, ako by mal v konečnom dôsledku aj fungovať. Ešte častejšie sa potom stretávam s tým, že ten web nakoniec prerábam aj dva – tri krát, pretože si klient uvedomí, že chce vlastne niečo úplne iné.Hovorím asi za väčšinu developerov, keď si dovolím tvrdiť, že je iba mizivé množstvo klientov, ktorí skutočne vedia, čo chcú na svojom novom webe mať. Tu prichádza na lámanie chleba a treba získať od klienta čo najviac informácií o tom, aké sú jeho predstavy, aké weby, sa mu páčili či po obsahovej stránke, po designovej alebo funkčnej stránke, prípadne priamo weby, ktoré ho niečím upútali.

Návrh štruktúry vs. požiadavky na bode mrazu

Vedieť správne navrhnúť štruktúru webu tak, aby bol celý výsledok prehľadný, ľahko zapamätateľný a v neposlednej rade aj dobre zindexovaný je oriešok, ktorý je asi mátohou, ktorá vo finále vyzerá ako diagram preškrtaný skrz naskrz. Či je to malá spoločnosť, alebo veľký klient či korporácia, obsah je číslo jedna. Obsah a štruktúra hovoria aj o tej firme, či je jej práca organizovaná a či je ich štýl rovnako priehľadný a transparentný ako aj obsah.
Ako si teda zachovať transparentnosť a čistotu obsahu a štruktúry?

V prvom rade sa treba zamyslieť nad tým, že web si neprezerajú iba užívatelia, čo sa na internete hrabú deň čo deň. Ide aj o užívateľov, čo prídu na web raz za rok ak nie aj menej frekventovane a nevedia ako sa menia všetky tieto technické veci. Z tohto dôvodu treba myslieť na hlavnú navigáciu stránok, ktorá by nemala mať viac ako 5 položiek, pričom ak ide o web, ktorý má predávať a ponúka určité služby, je treba myslieť aj na položku akou je cenník či kontakt. Veľmi dôležitou linkou je aj link na hlavnú stránku. Tu treba myslieť na fakt, že v dnešnej dobe ľudia nechodia na Váš web ani na web Vášho klienta zadaním konkrétnej adresy. Držiac sa štatistík väčších webov, viacmenej polovica ich štartovacích stránok (tzv. landing page) sú stránky, na ktoré sa užívatelia dostali z výsledkov vyhľadávania, čo znamená, že INDEX stránok v podstate nikdy ani nevideli.
Ďalšími prvkami, ktoré sa na weboch stále viac využívajú sú takzvané EYE CATCHeri. Ide o plochy, ktoré majú upútať Vašu pozornosť. Sú im vždy vyčlenené dve tretiny zo zobrazovanej časti webu. Je to plocha, určená na prezentáciu najnovších projektov, prípadne niečoho podobného. Keď už som sa rozpísal o dvoch tretinách plochy, treba si uvedomiť, ako už spomínal Peter Druska na Zajtra.sk – webový design nie je print, že web by mal mať tiež svoju štruktúru a nemali by jeho texty pretekať ako sa im zachce. V budúcich článkoch, v ktorých sa budem venovať tvorbe webu a jeho základnej štruktúre a podrobnejšie budem rozoberať jednotlivé veci ako napr. aj štruktúru.

Aké veci máme zo svojich klientov pri tvorbe či redesigne ich webu „vypáčiť“?
Obsah a jeho kvalita – viac bodov a vyššia pozícia vo vyhľadávačoch

Skúste zistiť, čo Váš klient chce návštevníkom webu ponúknuť. Snažte sa ho dotlačiť, čo možno k najdetailnejším informáciám a zároveň ho pripraviť aj na to, že čím viac textov, ktoré dodá, tým lepšie pre jeho ďalšiu existenciu. Originalita obsahu je prvoradou vecou pri tvorbe dokonalého SEO a teda aj optimalizácie webu. Čím viac textov dostanete, tým lepšie pre Vás, aj čo sa týka vymýšľania celkovej štruktúry. Keď už budete mať všetok obsah, bude sa Vám lepšie rozdeľovať do skupín z ktorých potom môžete vytvoriť základné sekcie webu pre hlavnú navigáciu.

Príklad. Máte klienta, ktorý predáva čistiace prostriedky, no zároveň poskytuje aj služby v oblasti dodávania chyžných, či prenájmu zariadení na čistenie. Všetko by ste to mohli zoskupiť do jedného odkazu ako služby, no zároveň viete, že nie sú to len služby, ale aj produkty. Tým pádom sa Vám už tu rozdeľuje navigácia na „Hlavná stránka“, „Služby“, „Produkty“, „Cenník“ a „Kontakty“ … Splnili sme však úplne požiadavku klienta, keď vieme, že poskytuje aj prenájom prístrojov? Z môjho hľadiska áno, lebo prenájom je tiež len služba avšak klient si môže povedať, že to chce mať ako ďalšiu položku navigácie.

Ako druhý príklad si vezmime osobnú stránku fotografa. V prvom rade chce prezentovať svoje fotopráce, no v druhej rade by rád poskytol vlastný ateliér na prenájom. Ako riešiť takúto navigáciu? Rozdeliť hlavnú navigáciu na jednotlivé kategórie fotografií (Glamour, Portrét, Art) alebo rozdeliť navigáciu na „Fotografie“ a „Ateliér“? Tu treba tiež vedieť, čo je pre klienta prvoradé. Ak skôr prezentácia prác, navrhol by som mu, aby si zvolil jednotlivé galérie. Ak mu ide skôr o prenájom a zárobok z prenájmu, dal by som mu možnosť č. 2.
Otázky pre klienta (malý web)

Čo chcete dosiahnúť tvorbou/prestavbou webu? (predaj týchto vecí, služieb cez internet; posilnenie značky; zvýšiť podiel na trhu; zmodernizovať stránku)
Sú nejaké weby, ktoré sú pre vás vzorom, resp. páčia sa vám, že chcete “niečo na tento štýl”? (design, funkčnosť, nápad)
Naopak je niečo, čo sa vám výslovne na webe nepáči? (design, funkčnosť, nápad)
Mali ste nejakú negatívnu skúsenosť s nejakou stránkou/resp. máte s existujúcou stránkou?
Komu je stránka primárne určená? (napr. web reštaurácie s vyberanými talianskými jedlami je určený asi niekomu inému, ako club, kde hráva Puding Pani Elvisovej, niekedy je to jasné zo zadania, niekedy nie)
Aké sú plány do budúcnosti? (rozvoj na ďalšie trhy, iné jazykové mutácie, horizontálny/vertikálny rast)
Aká farba sa vám páčia a nepáčia?

A tak ďalej. Otázok nie je nikdy dosť. Pýtajte sa a zapisujte si (ak teda nemáte vynikajúcu pamäť na všetko, čo počujete). A čo sa pýtate vy? Napíšte do diskusie pod článok otázky, ktoré sa pýtate svojich klientov, pomôžme si tak navzájom…
Spokojnosť na oboch stranách

Treba vždy myslieť na fakt, že klient je ten, kto Vám Vašu prácu zaplatí, takže nech sú veci ako chcú, majte na vedomí to, že vy v tomto projekte pôsobíte len ako konzultant, nie ako človek, čo rozhoduje o tom, ako veci budú. Je len na Vašom ume, či dokážete klienta dostať do pozície, kedy Vám povie, že to, čo ste navrhli je skutočne správne riešenie ich problému, alebo nie. Takže hor sa do zisťovania toho, čo klient nechce a do lovenia hlavnej myšlienky, ktorá poväčšinou býva vždy tou prvou, ktorú Vám klient povie.
P.S. Ak sa vám článok páči, dajte nám hlas na vybrali.sme.sk.

Tvoríme UI: Čo pomáha pri tvorbe User Interface?

T

Po úspešnosti článku „Tipy pre moderného web developera“ som sa rozhodol, že prinesiem opäť niečo, čo by Vám mohlo pomôcť, hlavne ak stojíte pred úlohou tvorby UI.
Asi každý dnes používa veľmi populárne frameworky, ktoré nám uľahčujú prácu, no všetci (na slovensku a v čechách) sa držia hesla, „Nevymýšlaj koleso“ a preto s pomocou niečoho, čo už niekto dávno vymyslel si programátorské cestičky skracujú. Pár skratiek skúsim hodiť aj do tejto časti.

jQuery

www.jquery.com, videocasty na zajtra.sk
Písať či nepísať o čom je toto slovo? Asi len stručne. Javascriptová knižnica umožňujúca manipuláciu s DOM objektmi, tvorbu xhttp requestov a mnoho iného. V spojení jQuery UI (www.jqueryui.com) neskutočne silný nástroj na tvorbu. Asi používame všetci, či?

jQTOUCH

www.jqtouch.com
Rozšírenie vyššie uvedenej knižnice pre developing na mobilné zariadenia.

Reveal

www.zurb.com/playground/reveal-modal-plugin
Plugin pre jQuery, pomocou ktorého budete robiť modálne okná, z ktorých Vás zamrazí! Ako sme si už zvykli, aj tento plugin má množstvo nastavení, ktoré dokážu určiť, či sa má modálne okno zatvoriť po kliknutí na pozadie a pod.

Awkward Showcase

www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin
Keď potrebujete vytvoriť featured slider, prípadne iný slider s akýmkoľvek obsahom, ja osobne vrele odporúčam použitie práve Awkward-u. Je to veľmi rýchly a prepracovaný plugin založený na jQuery.

Zoomy

redeyeoperations.com/plugins/zoomy
Zväčšovať obrázky do modálneho okna, či ich radšej zväčšovať priamo s efektom alá „lupa“? Práve táto „lupa“ je efekt, ktorý Vás možno zaujme. Nastaviteľný je parameter veľkosti „lupy“, efektu skla či napríklad aj to, či je zväčšovacie „sklo“ oblé, alebo hranaté.

Používateľom PhotoShop-u – Shortcut-y ako Wallpaper

A možno úplne trošku „od veci“, ale našiel som pri prezeraní rôznych cheatsheetov aj celkom zaujímavý nápad. Shortcut kódy pre photoshop v podobe pozadia na pracovnú plochu – www.graphicjunkies.com/photoshop-keyboard-shortcuts.