+ 381 64 17 39 157 office@cyclopdesign.com

Kako dizajnirati UX koji je podređen brzini?

Da li je vaš sajt spor? Da li bi mogao da bude brži? Korisnici zahtevaju web sajtove koji se brzo učitavaju, bez velike vremenske pauze. Ukoliko vaš sajt ne zadovoljava ove uslove, korisnici će, nezadovoljni vašim sajtom napustiti isti.

U nastavku teksta ćemo vas upoznati sa nekim načinima ubrzanja sajta, tako da u budućnosti nemate razloga za brigu oko vremena učitavanja.

 

Testirajte sajt

Pre nego što kažete “nema šanse da je sajt spor”, istestirajte ga. Google ima odlične alate koje svako može iskoristiti za testiranje sajta, potrebno je samo prekopirati URL sajta. Dobićete izvanredan izveštaj koji će vam reći koliko je brz sajt i gde može da se poboljša. Dobra je ideja da sajt testirate periodično, kako bi ste osigurali da sve funkcioniše bez problema. Ukoliko postoji nekih problema sa performansama, dobijate predloge za poboljšanje.

Izveštaj će vam dati tri sugestije – šta je potrebno popraviti, šta bi trebalo razmotriti za popravku i šta je dobro. Elementi koji se testiraju su:

  • Keširanje u pretraživaču
  • Optimizacija slika
  • Odziv servera
  • Skripte i CSS
  • Kompresija
  • Redirekcije
  • Smanjivanje HTMLa, CSSa, i JSa
  • Prioritet vidljivog sadržaja

 

 

izrada-web-sajta-UX-Brz1

 

 

 

Izbrišite nepotrebne pluginove

Da li se na vašem sajtu nalaze pluginovi koje ste instalirali, a da vam pritom nisu neophodni i da ih ne koristite. Vreme je da se oterasite njih.

Čak i elementi koji se ne upotrebljavaju, osim što zauzimaju mesta na vašem serveru, utiču na brzinu vašeg sajta. Ovo se posebno odnosi ako radite sa sistemima kao što je WordPress.

Uklonite sve neiskorišćene dodatke. Trebalo bi uzeti u obzir i pluginove koje koristite i da li oni utiču povoljno na postojeće korisničko iskustvo, tj da li vaš sajt može ili ne može nesmetano da funkcioniše bez njih. Ukoliko postoje pluginovi koje koristite, a ne utiču na korisničko iskustvo, razmislite o brisanju njih ili o nalaženju bolje opcije.

Pored broja pluginova, kvalitet predstavlja problem. Nemojte samo dodavati pluginove na vaš sajt. Pokušajte da koristite visoko ocenjene pluginove, kao i one koji se redovno ažuriraju i za koje imate obezbeđenu tehničku podršku od strane autora plugina. Ukoliko imate stare, neažurirane pluginove, može se desiti da zastareli elementi usporavaju rad sajta.

 

izrada-web-sajta-UX-Brz2

 

 

Delite samo ono što je potrebno

Kada već razmišljamo o pluginovima i ostalim dodacima, pitanje je koliko sajtova sadrži dugmiće za deljenje na društvenim mrežama. Pitanje koje se postavlja je koliko je to stvarno neophodno?

Dobar deo ovih dugmića može zbuniti korisnike – koliko njih će stvarno poželeti da podeli vaš sadržaj na društvenim mrežama? Sve ovo usporava rad samog sajta.

 

 

Postavite jednu ili dve društvene mreže na kojima ste vi aktivni i želite da se korisnici povežu sa vašim sajtom i postavite te dugmiće.

 

Budite oprezni sa slikama

Video, ilustracije, slike, animacije.. Činjenica je da svi ovi elementi mogu učiniti vaš sajt lepšim, mogu učiniti da “izgleda skuplje”, ali takođe mogu nepovoljno uticati na brzinu učitavanja vašeg sajta. Tako da – birajte mudro.

Pre dodavanja vizuelnog elementa u dizajn vašeg sajta, razmotrite vrednost tog elementa i njegov uticaj na korisničko iskustvo. Da li taj element daje nešto korisnicima? Ukoliko daje neku informaciju korisnicima, iskoristite, ukoliko ne, onda nije potrebno koristiti te elemente.

Potrebno je da sve slike budu optimizovane za upotrebu za webu. Generalno pravilo, slike treba da budu velike onoliko koliko je neophodno. Nemojte dodavati velike slike. Sve ovo zahteva malo vremena prilikom Front End razvoja, ali je jako zgodno ukoliko vremenom sajt nastavi sa razvojem i rastom.

Iskoristite i ostale trikove. Koristite ikonične fontove, umesto ikonica. Konvertujte elemente u SVG (vektorski format) ukoliko vam ikonični fontovi nisu dovoljni. Koristite HTML i CSS trikove da bi ste kreirali elemente za koje nije neophodno koristiti slike, kao što su dugmići, strelice i ostale elemente korisničkog interfejsa.

 

Odmorite sa alatima za smanjivanje

Mali fajlovi su ključni za postizanje velike sajta. Ravnoteža je u ideji da postoje ekrani visoke rezolucije koji vam dozvoljavaju da se vaš sadržaj vidi u što većem kvalitetu. Tada postoji prostor za upotrebu alata za smanjivanje. Neki od najčešće korišćenih alata su:

  • WP Smush – smanjuje slike za WordPress korisnike
  • Kraken – smanjuje i kompresuje slike
  • TinyPNG – smanjuje veličinu i konertuje u kompatibilne formate
  • Gzip – Pakuje fajlove i kompresuju ih
  • Minify Your CSS – Redukuje suvišan kod koji je uključen u API
  • SpriteMe – dodaje pozadinske slike u CSS i smanjuje broj HTTP zahteva
  • CSS Compresor – Redukuje veličinu koda.

 

 

izrada-web-sajta-UX-Brz3

 

 

Keširajte

Uključite keširanje vašeg sajta.

Ukoliko niste uradili ovo, vaši korisnici će biti ti koji su nezadovoljni radom vašeg sajta. Vaš sajt treba da bude brz i to je ono sa čim bi se složila većina korisnika.

Keš memorija će kreirati privremene fajlove kao i stranice koje pretraživač treba da zapamti da bi se korisnik vratio na njih. Tako se redukuje propusni opseg upotrebe, vreme učitavanja i delay. Korisnici će vam biti zahvalni, pogotovo ukoliko koriste malo obimniji sajt.

 

Čistite sajt redovno

Baš kao što morate da čistite svoju kuću redovno, potrebno je čistiti i održavati web sajt, linkove i podatke. Elementi na vašem sajtu kojima je potrebno čišćenje su:

  • Optimizujte svoju bazu podataka. Vremenom će vaša baza podataka može biti pretrpana izmenama, od korišćenja fotografija do sačuvanih fotografija. Ne morate sve zadržati. Jako je bitno očistiti elemente koji nisu deo vašeg sajta.
  • Nemojte hot-linkovati slike. Povlaćenjem slike sa tuđeg web servera je loša ideja. Isto važi za bilo koji spoljni zahtev. Koristite to samo kad je baš neophodno.
  • Popravite linkove. Neispravni linkovi neće usporiti sajt, ali će usporiti vezu korisnicima da sa vašeg sajta odu na neke druge web lokacije, što može prouzrokovati njihovo nezadovoljstvo. Neka vam pređe u naviku provera i ispravljanje neispravnih linkova.
  • Neka sve na vašem sajtu bude ažurirano. Ukoliko koristite platformu kao što je WordPress, onda ažurirajte sajt često. Ukoliko koristite gotove teme, takođe ih ažurirajte. Update teme može sadržati neke dodatke koji će doprineti ubrzanju i bezbednijem funkcionisanju sajta, a ništa nije sporije od sajta koji je hakovan i zaražen malware-om.

 

Zaključak

Nadamo se da smo vam u ovom tekstu dali dovoljno instrukcija da nakon njih možete da se pozabavite povećanjem brzine vašeg sajta. Koristite Google Pagespeed Insights Tool. Nakon toga pokrenite sajt i sami probajte da uočite da li vidite razliku.

Ništa neće učiniti vašeg korisnika srećnijim i voljnijim da se ponovo vrati na vaš sajt, kao dobro korisničko iskustvo i brz sajt. Tokom svih faza vizuelnog dizajna, mislite o tome da kada dodajete elemente na vaš sajt, da li je taj element potreban korisnicima i da li će eventualno njegovo dodavanje usporiti sajt.

Kako kreirati i optimizovati slike za Retina ekrane?

Kako kreirati i optimizovati slike za Retina ekrane?

Uložili ste mnogo vremena i truda da bi vaš sajt radio savršeno? Jako je bitno da taj sajt bude vidljiv na što više uređaja, a iPhone je uređaj koji koristi veliki procenat korisnika pametnih uređaja. Budite sigurni da su slike lepe i visoko kvalitetne i da se lepo prikazuju na iPhone uređajima.

Mnogi ne shvataju da moderni pametni uređaji, posebno oni koje proizvodi Apple, koriste naprednu tehnologiju ekrana da bi svojim korisnicima obezbedili što bolji prikaz slike. Srećom, postoje trikovi koje možete koristiti prilikom optimizacije slika, pa da samim tim slike na vašem sajtu izgledaju lepo i na Apple uređajima.

U nastavku teksta ćemo vam predstaviti Retina ekrane i objasniti kako oni mogu uticati na izgled slika na vašem sajtu.

 

Objašnjenje Retina ekrana

Ekrani pametnih uređaja su nastavili da konstantno unapređuju kvalitet, poslednjih nekoliko godina, a Apple je po tom pitanju napravio korak napred, vrednim radom na tome da prikaz na njihovim ekranima bude izuzetno jasan i čitljiv. Retina displej je tip ekrana koje koriste Apple uređaji.

Retina ekrani su projektovani sa ciljem da prikazuju tekst i slike, što je oštrije moguće, bez golim okom vidljivih piksela. Izazov za dizajnere predstavlja činjenica da Retina ekrani nisu standardni, tj da prikaz na njima varira od veličine ekrana uređaja.

Kaad već govorimo o Retina ekranima, moramo misliti na gustinu piksela, gde se broj piksela uklapa u fiksnom rastojanju. Ovo nije isto kao rezolucija, pošto je broj piksela raspoređen preko cele visine i širine uređaja. Manji ekrani kao što je iPhone sa istom rezolucijom kao veći (na iPadu), će imati veću gustinu piksela.

Podela fizičke širine ekrana od broja piksela horizontalno, daje nam broj piksela po inču ekrana (dpi – dots per inch). Visoka rezolucija se koristi za sve uređaje koji imaju više od 200DPI. Ovde su uključeni svi Apple-ovi Retina ekrani, kao i neki ekrani drugih proizvođača.

Tradicionalno, web grafika je optimizovana na 72 dpi. Slika sa tom gustinom će se prikazivati na bilo kom ekranu velike rezolucije, dok će na Retina ekranu biti prikazana na jedan od dva načina:

  • Kao frakcija, veličine koja zavisi od rezolucije uređaja.
  • Prikazana u originalnim dimenzijama, sa dodatnim pikselima, koji utiču na sam kvalitet slike.

 

 

Retina-Ekrani

 

 

To znači da je za najbolji prikaz slike na Retina ekranima neophodno optimizovati slike na većoj rezoluciji. Ovo omogućava da slika bude prikazana sa gustinom piksela, odgovarajućom za modernije ekrane. U nastavku teksta ćemo vam pokazati kako da to uradite u Fotošopu.

Kako kreirati slike za Retina ekrane u Fotošopu?

Rad sa slikama dvostruke ili četvorostruke rezolucije znači da je neophodno da uveličate sliku da bi ste videli fini detalji i da, pošto te slike zauzimaju više prostora, mogu stvoriti problem sa učitavanjem slika i zauzimanjem mesta na serveru.

Rešenje za većinu dizajnera bi moglo biti kreiranje više layera i grupa i isključivanje njih po potrebi, korišćenjem comps funkcije u Fotošopu ili eksportovanje u originalnoj rezoluciji u veličini koja je potrebna, upotrebom funkcije “Retinize it”.

Izazov koji nose ove dve metode, znači da ne možete da vidite više slika u isto vreme. Ukoliko vam je potrebno da vidite razliku u prikazu slika na svim veličinama, neophofno je zameniti slike, sačuvati ih u odgovarajućoj veličini i onda proveriti opet.

Srećom, za sve ljubitelje Fotošopa, Adobe je dodao funcionalnost koja olakšava kreiranje slika. Sada se mogu napraviti više paleta uz pomoć funkcije Artboard i kreirati više veličina uz pomoć funkcije Generate. U nastavku teksta ćemo vam detaljnije objasniti.

 

Kreiranje Artboarda

 

Retina-Ekrani1

 

 

 

Alat Artboard je dodat u Fotošop 2015 i nalazi se skriveno iznad Move Tool-a. Možete kliknuti u meniju, ili koristiti prečicu Shift + V. Da bi se prikazao Artboard, kliknite i prevucite na područje. Novi Artboard će biti prikazan kao podrazumevano ime Artboard 1.

 

Podešavanje Artboarda

Možete dodati layere na artboaru i oni će biti smešteni slično kao i ostale grupe layera, sa mogućnošću da vi menjate njihovu strukturu. Predlažemo vam da dodajete raznorazne dodatke, kao što su figure i tekst.

 

Kopiranje Artboarda

Prvi Artboard je podešen da odgovara vašim potrebama. Uz pomoć menija, ga možete i duplirati. Kada kliknete desnim klikom miša na ArtBoard 1. odaberite na panelu Layers i tu odaberite opciju Duplicate Artboard. Ovako ćete kreirati novi ArtBoard iste veličine i pozicije, sa potpuno istom strukturom layera.

 

 

Retina-Ekrani2

 

 

Pozicioniranje Artboarda

Velika prednost ArtBoarda je mogućnost da se vide sve slike u isto vreme. Postoji nekoliko načina za pomeranje ArtBoarda.

  • Klikom na Properties panel, koji prikazuje koji artboard je odabran i podešavanjem X i Y koordinata za levi ugao Artboarda.
  • Prevucite selektovan artboard na bilo koju poziciju u Fotošopu. Možete postavljati više Artboardova.
  • Uz pomoć strelica na tastaturi, možete šetati Artboard po ekranu. Klikom na Shift i srelicu ćete pomerati vaše Artboardove za 10 piksela.

 

 

Promenite veličinu Artboarda

Ukoliko je potrebno menjati veličine Artboarda, imate više opcija.

  • Promenite veličinu koristeći ručke koje se pojavljuju kada odaberete ArtBoarda
  • Kliknite na Options, ispod File menij, odaberite veličinu, posavite veličine koje želite i odaberite portret ili landscare orjentaciju.
  • Upotrebom Properties panela, možete menjati veličinu.

 

 

Retina-Ekrani3

 

 

Kreiranje svog Arta

Možete raditi sa svojim Artboardovima, menjati slike i menjati ih ukoliko je neophodno. Ukoliko ste sve lepo podesili, kada se sve završi imaćete pixel perfect slike za svoj sajt.

 

Generate tool

Generate opcija omogućava da exportujete artboardove, layere ili grupe layera, koristeći specijalnu sintaksu. Da bi ste uključili Generate alat na svom PSD fajlu, idite na File > Generate > Image Assets. 

 

Retina-Ekrani4

 

 

Promenite ime svojim Artboardovima

Generate alat radi tako što sačuva sve elemente slika, u skladu sa podešavanjima koje ste vi postavili na Artboardu. Postoji nekoliko opcija koje možete da postavite:

  • File Format – Dodati ekstenziju (jpg, png, giff) kada budete čuvali fajlove u odgovarajućem formatu. Na primer header-main.png. Fajlovi će biti sačuvani na istoj lokaciji na kojoj je PSD fajl.
  • Kompresija fajlova  – Posle ekstenzije, možete podesiti i osgovarajući nivo kompresije. Za jpg možete koristiti procente, za png možete koristiti 8, 24 ili 32. Na primer – header-main.png8
  • Skaliranje –  Možete podesiti slakiranje, dodavanjem procenata ili veličine u pikselima pre imena. Primer 100% header-main-png8.
  • Više slika – Možete eksportovati više slika sa istog artboarda, korišćenjem zareza ili plusa. Primer – 100% header-main.png8, 200% header-main.png8.

 

Kombinovanje ovih opcija vam omogućava da konstantno kreirate kompleksne slike sa vaših artboardova.

 

 

Retina-Ekrani5

 

 

Ukoliko su standardne slike potrebne za Artboardove, Generate alat će omogućiti da kreirate podrazumevane setove podešavanja za svaki od njih. Da bi ste kreirali ova podešavanja dodajte prazan layer na vrh dokumenta sa sledećim opcijama:

  • Default keyword: Ime mora počinjati ovako da bi Generate generisao kao podrazumevani
  • Output scale: Podesiti dimenzije u procentima ili pikselima (width, height).
  • Folder/suffix: Podesiti ime foldera gde će slike biti sačuvane.

Dodavanjem više mogućnosti možete automatski kreirati slike koje su vam potrebne za Retina ekrane. Na primer – default 100% end/@1x, 200% end/@2x, 300% end/@3x. Onda možete dodati proširenja za svaki board koji želite da eksportujete korišćenjem podrazumevanih opcija.

Ukoliko koristite druge dizajnerske alate kao što su Sketch, one imaju svoje načine eksportovanja. Ukoliko ste ljubitelj Fotošopa, ovaj način će vam drastično smanjiti vreme koje potrebno da se stvori više slika za Retina ekrane.

 

Kako optimizovati slike za Retina ekrane?

Veličina je bitan, ako ne i najbitniji faktor prilikom kreiranja slika na sajtu. Slike se prilikom posete očitavaju u pretraživač vaših korisnika tako da će za veće fajlove biti potrebno više vremena da se učitaju. Lepi sajtovi, kojima je potrebna večnost da se učitaju će frustrirati korisnike i oni će odlaziti sa njih.

Možete početi sa optimizacijom slika, tako što ćete koristiti adekvatne opcije prilikom čuvanja fajla. Kao što smo objasnili, format za čuvanje fajlova je jpg ili png. Jpg format je pogodan za fotografije koje imaju mnogo boja, radi redukcije veličine fajla. PNG je pogodan za dugmiće i ikonice jer je kvalitet veći i samim tim im je veća i veličina.

WordPress nudi mogućnost optimizacije, tako što daje mogućnost odabira više veličina slika, prilikom postavljanja na sajt.

 

Zaključak

Kreiranje i odabir neverovatnih, lepih slika, visoke rezolucije za vaš sajt ne deluje kao težak, ali ukoliko nisu korektno optimizovane pre objavljivanja na sajt, mogu se prikazivati drugačije od onoga kako ste vi očekivali, pogotovo na Retina ekranima.

Dakle – da ponovimo korake:

  • Kreirajte Artboardove, podesite ih, kopirajte i pozicionirajte kako treba
  • Promenite veličinu po potrebi.
  • Uključite i podesite Generate alat
  • Promenite ime svojim Artboardovima u okviru Generate alata i postavite podrazumevane opcije ukoliko je neophodno.

Gorenavedeni saveti će vam pomoći da razumete proces kreiranja slika za modernije ekrane, koje će na njima biti vidljive na najbolji mogući način.

 

 

Kako razumeti strukturu fajlova i foldera u WordPressu?

Kako razumeti strukturu fajlova i foldera u WordPressu?

Apsolutno je moguće da upravljate svojim WordPress sajtom, menjate sadržaj, izgled preko administratorskog panela. Međutim, razumevanje strukture instalacije WordPressa, funkcionisanje svakog od zasebnih fajlova u instalaciji, vam može dosta olakšati posao.

Svaka WordPress instalacija ima isto jezgro i sličan raspored fajlova. Svaki plagin koji instalirate, skripta koju dodate, se nalazi u CMSu. U nastavku tekstova ćemo vas upoznati sa strukturom fajlova u WordPressu i pomoći da bolje razumete samu strukturu.

 

 

Uvod u strukturu foldera u WordPressu

Struktura fajlova u WordPressu nije nimalo komplikovana kao što izgleda. Postoji public_html folder, gde su locirani ključni fajlovi. Čak i ukoliko prvi put instalirate WordPress, postoji šansa da ćete se lako snaći.

Da bi ste pristupili ovim folderima, neophodno je da koristite FTP (File Transfer Protocol) klijent. Najčešće se koristi FileZilla.

 

 

struktura-wordpress-fajlova2

 

 

Pre nego što nastavimo priču o folderima, osvrnućemo se na neke fajlove unutar foldera public.html. Jedan od najbitnijih je .htaccess (hypertext access). Ovaj fajl vam omogućava da kontrolišete strukturu permalinkova, fajlova, foldera i da pristupite njima u instalaciji WordPressa. Kod unutar ovog fajla izgleda ovako:

 

 

struktura-wordpress-fajlova3

 

 

Tu se nalazi i index.php fajl koji će biti prepoznat kao naslovna stranica na vašem sajtu.

 

 

struktura-wordpress-fajlova4

 

 

 

Još jedan klučni fajl je wp-config.php. On je zadužen za osnovnu konfiguraciju, podešavanja baza, MySQL podešavanja, šifre. Na donjoj slici je primer podešavanja baze u ovom fajlu.

 

 

struktura-wordpress-fajlova5

 

 

Ostali bitni fajlovi su  wp-activate.php, wp-signup.php i wp-signup.php koji zajedno služe za proces registrovanja i logovanja korisnika. Takođe imamo wp-comments-post.php u kome je funkcionalnost za komentarisanje postova i wp-settings.php koji služi za različita podešavanja.

 

 

Wp-Admin folder

 

 

struktura-wordpress-fajlova7

 

 

 

Kao što samo ime kaže ovaj folder sadrži fajlove koji su bitni za administraciju sajta. Na primer admin.php omogućava konekciju sa bazom i izvršava neke ključne funkcije kao što je na primer provera da li je određeni korisnik administrator i koja su njegova prava.

 

 

struktura-wordpress-fajlova8

 

 

Ukoliko obratite pažnju na imena fajlova u folderu videćete da većina imena fajlova odgovara sa funkcijama sa administratorskog panela. Na primer profile.php je povezan sa korisničkim profilom na administratorskom ekranu, dok  theme-install.php kontroliše funkcionisanje teme preko administratorskog panela, dok plugin-install.php obavlja istu funkciju samo sa pluginovima.

Kao i kod ostalih važnih foldera u okviru wp-admin, images sadrži slike koje se koriste na administratorskog panela, css i js sadrže CSS kod i JavaScript kodove, dok network sadrži PHP kodove neophodne za funkcionisanje WordPress multisajta.

 

WP – Content Folder

Ovo je sekcija u koju ćemo posvetiti najviše vremena u ovom tekstu. Dve najvažnije funkcije se nalaze ovde – naravno pričamo o temama i plaginovima.

 

 

struktura-wordpress-fajlova9

 

 

Plugins – Folder

struktura-wordpress-fajlova10

 

 

Svaki plugin koji dodate na vaš WordPress sajt će imati svoj subfolder u kome se nalaze pluginovi, poput primera na donjoj slici. Sadržaj svakog od ovih varira od plugina od plugina. Na primeru dole je kratak pogled na folder sa Aksimet pluginom.

 

 

struktura-wordpress-fajlova11

 

 

Kao što smo već naglasili u nekoliko prethodnih članaka koji se odnose na rešavanje problema sa greškom 403 ili popravljanjem greške 500 isključivanje pluginova je jedan od koraka koji može pomoći u otkrivanju uzroka tih problema.

 

 

Themes – Folder

struktura-wordpress-fajlova12

 

 

Kao sa pluginovima, svaka tema koju instalirate na vašem WordPress sajtu ima svoj folder u instalaciji WordPressa, što možda niste primetili ukoliko instalirate temu uz pomoć administratorskog panela, a ne uz pomoć FTPa.

Prvo što ćete zapaziti kada otvorite folder sa temama je gomila PHP fajlova, koji zajedno sačinjavaju blokove. Na primer, kod Divi teme, u glavnom folderu možete naći fajlove kao što su 404.php,  functions.php, sidebar.php, style.css i mnoge druge fajlove. Takođe su tu folderi sa slikama (images), skriptama (js), koji su standardni i kod drugih tema.

 

struktura-wordpress-fajlova13

WP – Includes Folder

struktura-wordpress-fajlova14

 

 

Poslednji folder u WordPressovom folderu je wp-includes i radi se o velikom folderu. Dok wp-admin uključuje fajlove za administratorske funkcije, wp-content sadrži teme i pluginove, dok je sadržaj foldera wp-includes je ono što čini da vaš sajt radi kao sat.

Folder je važan koliko i većina foldera u jezgru WordPressa. Instalacija WordPressa uključuje oko 140 različitih fajlova u glavnom folderu i 14 različitih foldera, među kojima su certificates, fonts, js, theme-compat, i widgets.

Ovi podfolderi nisu toliko važni kao ovi koje smo naveli u tekstu, kao na primer functions.php. Na donjoj slici su prikazane linije koda koje ćete prvo videti kada otvorite ovaj fajl u tekst editoru, a radi se o regularnoj funkciji koja pretvara datume u različite formate.

 

struktura-wordpress-fajlova15

 

 

Ostali ključni fajlovi su cache.php (koji služi za dodavanje i brisanje podataka iz keš memorije), links.php (uključuje dodatke za linkove), version.php (u kome piše verzija WordPressa).

 

Zaključak

Iako udubljivanje u WordPress instalaciju deluje zbunjujuće, uz malo vežbe i prakse možete videti koji su fajlovi bitni za funkcionisanje vašeg sajta. Ove informacije će vam biti korisne svakako, bez obzira na to da li želite da rešite neki problem, implementirate neku funkciju ili jednostavno želite da na napredniji način upravljate sadržajem vašeg sajta.

Prvi koraci kroz koje morate da se upoznate su:

  • Upoznajte se sa najosnovnijom strukturom –  wp-admin, wp-contentwp-includes foldere.
  • Upoznajte se sa jezgrom WordPressa, sa fajlovima kao što su  wp-config.php, functions.php i.htaccess.

Ukoliko imate pitanja vezano za ove savete, na raspolaganju smo vam.

Kako odabrati dobre UI (User Interface) boje za vaš WordPress sajt?

Kako odabrati dobre UI (User Interface) boje za vaš WordPress sajt?

Koliko česti čujete o UI bojama. Ukoliko niste UI dizajner, onda verovatno ne razmišljate o tome često. Otvorite neki uspešan WordPress sajt, pa ćete videti boje koje su u skladu sa porukom brenda i korporativnim identitetom i uklapaju se u strukturu web sajta.

Odabir dobrih boja je važan za stvaranje vizuelnog identiteta i konzistentnosti sajta. Na primer, upotreba svetlih boja u navigaciji i korišćenje drečavih boja u sadržaju će učiniti opcije u navigacionom meniju teškim za čitanje. Takođe boje sa malim kontrastima mogu predstavljati problem osobama koje imaju problem sa vidom ili su slepi za boje.

Istraživanja su pokazala da i muškarci i žene vole sajtove sa svetlim ili tamnim bojama. Istraživanja su takođe pokazala da su sajtovi bez bele boje među onima sa najmanjim rejtingom.

 

 

 

izrada-web-sajtova-UIBoje2

 

 

 

Istraživanja su takođe pokazala da pravilan odabir boja povećava prepoznatljivost sajta za čak 80%. Sajtovi sa svetlijim bojama povećavaju prepoznatljivost za 1.3%, dok sajtovi sa tamnijim bojama su prepoznatljiviji za 2.0%.

 

 

Odabir ispravnih UI boja za sajt

Kada WordPress korisnici pokrenu sajt, boje su prvo što će videti i prvo što će ostaviti utisak na njih. Evo kako da odaberemo prave boje za korisnički interfejs sajta.

 

 

1.Upoznavanje demografske strukture

Upoznavanje demografske strukture ciljne grupe posetilaca  je bitan deo odabira UI dizajn boja. Na primer skup boja na sajtu će biti drugačiji ukoliko je ciljna grupa ženskog pola ili ukoliko je ciljna grupa muškog pola.

Razumevanje psihologije boja će vam pomoći da odaberete boju ili dve koje su relevantne ciljnoj grupi i strukturi i svrsi web sajta. Na primer ukoliko WordPress sajt ima za ciljnu grupu muški auditorijum, boje UI dizajna mogu biti siva, bela, crna ili plava. Izbegavajte boje kao što su žuta, ljubičasta, narandžasta i roze.

 

 

 

izrada-web-sajtova-UIBoje3

 

 

 

 

Na Primerovom websajtu je recimo izostavljena crna boja, dok je primarna boja na pozadini siva.

 

 

 

 

 

izrada-web-sajtova-UIBoje4

 

 

 

 

Ako uporedimo Global First Spouses koristi plavu boju zbog toga što su ciljna grupa žene. Plava je boja koja odgovara i jednom i drugom polu. Prema istraživanjima i anketama plava je najomiljenija boja kod žena (35%), ispred ljubičaste (23%) i zelena (14%).

 

2.Razumevanje teorije boja radi odabira pravih boja

Teorija boja nam pomaže da upoznamo uticaj različitih boja kada se one uklope u jednu celinu. Drugim rečima, predstavlja interakciju boja sa slikovitošću i kontrastom. Jedna od ovih kategorija je color wheel  – paleta boja koja omogućava odabir boja za korisnički interfejs sajta. Evo nekoliko opcija koje su nam dostupne.

 

 

 

izrada-web-sajtova-UIBoje5

 

  •  Analogna šema – Boje koje prijaju očima i koje su dostupne u prirodi moraju biti uključene u sajt po ovoj šemi boja. Paleta boja pogodna za vaš WordPress sajt ukoliko želite mirnije boje i mirniji imidž sajta. Dodavanje ovakvih kontrasta može poboljšati vaše korisničko iskustvo.
  • Monohromatska šema – Ova šema uključuje osnovne boje i ostale boje. Ovakve boje mogu pojednostavniji sadržaj na vašem sajtu.

 

 

 

izrada-web-sajtova-UIBoje6

 

 

Boje korisničkog interfejsa sajta su tamnije pozadine sa narandžastim akcentima. Monohromatska šema je dobar izbor za prikazivanje atleticizma i osećaja adrenalina.

 

  • Trijadna šema – Ova šema ima cilj da obezbedi čistu estetiku i kontrast za web dizajn. Dominantne su tri boje i velika količina suprotnih nijansi. Cilj ove šeme je dinamičan izgled web sajta.

 

 

3.Proverite kako izgleda kontrast

Jako je bitno da korisnici mogu da se intuitivno kreću kroz vaš websajt, tako da je bitno da upotrebite dobar kontrast u vašem korisničkom interfejsu, pogotovo između pozadine i elemenata. Možete mešati sadržaj sa bojama vašeg interfejsa i obratite pažnju na rezultate. Daćemo vam nekoliko saveta kako da to uradite.

 

Zasićenje i kontrast:

Zasićenje boja je povezano sa intenzitetom boja. Boja koja ima 100% zasićenje je sjajnija, čistija. Spajanje ovakvih boja može biti sjajan način za dizajniranje slabog kontrasta na sajtu. Ovakve boje privlače i odrćavaju pažnju korisnika.

 

 

izrada-web-sajtova-UIBoje7

 

Dizajn sajta na gornjoj slici sadrži dobar nivo zasićenja slika. Boje su iskombinovane, zasićenje je prigušeno i kreiran je mekan i diskretan izgled sajta, gde korisnički utisak dodatno pojačavaju boje i slike vode.

 

 

Vrednost i kontrast:

Vrednost boje predstavlja zapravo jasnoću boja. Ukoliko imate 100% belu i 100% crnu boju, imaćete dobar kontrast. Svakako se možete igrati sa tamnijim i svetlijim bojama sa ciljem da naglasite određene elemente.

 

 

 

izrada-web-sajtova-UIBoje8

 

 

Dizajn sajta sa gornje slike ima tamniju pozadinu i svetliji tekst. Kontrast između ljubičaste i bele boje čini sadržaj čitljivim i uočljivim.

 

 

Temperatura boje i kontrast

Boje se mogu kategorizovati na neutralne, tople i hladne. Plava i zelena su hladne, narandžasta, crvena i žuta su tople. Braon, siva, bela i crna spadaju u neutralnu kategoriju. Možete lako kreirati kontrast sa mešanjem boja različitih temperatura.

 

 

 

izrada-web-sajtova-UIBoje9

 

 

 

Dexcom-ovoj sajt ima veliki kontrast boja u kombinaciji zelene i crne. Glavna slika i CTA dugme su lako uočljivi. Pošto je glavna boja u grupi hladnih, kombinacijom crne i sjajne pozadine se dobija kohezivan izgled.

Zavisno od nivoa zasićenosti, vrednosti ili temperature boja koje se koriste na vašem sajtu, možete napraviti dobar kontrast i time poboljšati izgled vašeg sajta.

 

 

4.Pomoćni alati

Kombinovanje boja sa senkama, nijansama će izazvati jak utisak kod korisnika. Najbolji način pravilnog odabira boja je da odaberete više kombinacija i među njima odaberete onu koja se najviše slaže sa korporativnim identitetom vaše kompanije. U nastavku teksta ćemo vas upoznati sa različitim šemama i sa alatima koji će vam pomoći u njihovom odabiru.

  • COLOURlovers: Ovaj alat će vam dati više od opcija za pravilan odabir boja. Na sajtu možete pročitati dosta o bojama i priključiti se diskusijama o bojama i kombinacijama boja sa drugim ljudima. Na osnovu slika ovaj alat vam može generisati skup boja koji se uklapa sa tim bojama.
  • Material Palette: Ovaj online generator skupa boja, kreiran od strane Google-a će vam pomoći da na osnovu dve boje koje odaberete, dobijete čitav niz boja koji se uklapaju sa njima. Boje su definisane kao primarne, svetle primarne, tamne primarne, primarne za tekst, sekundarne za tekst i ikonice.
  • Adobe Color CC: Prethodno nazvan Adobe Kuler, Adobe je svojim korisnicima ponudio mogućnost eksperimentisanja sa paletama boja. Sve šeme sadrže 5 boja. Korisnik može koristiti istu šemu da bi kreirao razne kombinacije, upoređivao šeme i birao koja se najviše uklapa u UI dizajn.
  • Color Explorer: Alat koji vam daje širok spektar opcija za kreiranje, dizajn i prilagođavanje paleta boja. Na primer daje mogućnost korisnicima da provere WCAG vidljivost svoje selekcije boja.

Ovi alati će ispuniti različite potrebe korisnika. Namenjeni su svima, od početnika do eksperta.

 

 

WordPress pluginovi za boje korisničkog interfejsa

Dodaci mogu biti odlična pomoć za one korisnike koji nemaju mnogo iskustva u dizajnu. Oni vam pomažu prilikom odabira boja za vašu temu, biraju boje koje su čitljive i daju vam mogućnost da vidite izgled teme.

Dok neke teme imaju opcije menjanja boja u okviru administratorskog panela, uz pomoć pluginova se menja i prilagođava izgled WordPress sajta. Evo nekoliko pluginova koji vam mogu pomoći.

 

 

 

izrada-web-sajtova-UIBoje10

 

 

Ovaj plugin pokazuje trenutne boje na vašoj WordPress temi i predstavlja alat uz pomoć koga možete odabrati boje sa kojima možete da zamenite boje sa vaše teme. Korisnici mogu videti preliminarni izgled, sa opcijama menjanja boja. Ovaj plugin takođe generiše child teme, tako da ne morate menjati originalnu temu. Moguće je da sačuvate vaš izgled i plugin će čuvati vaše izmene neograničeni broj puta. Pro verzija daje još više mogućnosti, a jedna od njih je mogućnost unapređenja stilova child teme, kao i glavne teme.

 

 

izrada-web-sajtova-UIBoje11

 

 

Radi se o pluginu koji može uštedeti dosta vremena i truda svojim korisnicma. On sadrži dva color – pickera, koji omogućavaju korisnicima da biraju boje:

  • Footer/Header/Sidebar
  • Boje Hover-Efekata na navigacionom meniju
  • Boje za tekst
  • Boje za polje za pretragu
  • Boje linkova
  • Odgovarajuće pozadine
  • Boje za video i audio plejere
  • Još mnogo toga

Ovaj plugin će vam dati mogućnost da automatski odaberete minimalni kontrast na osnovu kog će vaš sajt biti vidljiv

 

 

 

izrada-web-sajtova-UIBoje12

 

Plugin koji služi za odabir boja i fontova. Styles takođe obezbeđuje besplatne teme čije su demo verzije dostupne korisnicima za isprobavanje.  Prilagođavanje tema je dostupno za razne stilove i daje mogućnost menjanja podrazumevane boje teksta, linkova, headera, pozadine i ostalih elemenata na sajtu. Nakon promena se dobija feedback, tako da možete videti efekte promena pre objavljivanja.

 

 

Zaključak

Dobili ste instrukcije vezane za UI dizajn, odabir boja tako da možete krenuti sa dizajnom. Saveti koje smo vam dali u tekstu imaju za cilj da vam olakšaju odabir boja, na osnovu kojih ćete imati kvalitetan, čitljiv i pregledan sajt, a dodaci i alati sa kojima smo vam upoznali će vam dati mogućnost da pre objavljivanja sadržaja vidite kako izgleda sajt nakon vašeg odabira boja.

 

 

 

 

 

 

 

 

 

 

Kako rešiti problem neprikazivanja slika usled SSLa?

Kako rešiti problem neprikazivanja slika usled SSLa?

 

Pre nego što započnemo priču o SSLu, koji može da prouzrokuje neprikazivanje slika, napravićemo mali uvod. Kada dođe do konekcije između ljudskih čula i marketinga, čulo vida je najizraženije.

Kada ljudi dobio informaciju putem slušanja, oni zapamte 10% informacija koje su im rečene posle nekoliko dana, dok sa druge strane kada ljudi dobiju informaciju u vidu pisanog traga ili slike, oni zapamte 65% informacija koje su dobili, nakon tri dana.

Istraživanja su pokazala da se korisnicima povećava volja za čitanjem za čak 80%, ukoliko tekst sadrži slike u boji. Kao marketar, jako je bitno da imate korisnike koji će zapamtiti ono što su videli, ali i oni koji će naći vremena i pročitati sadržaj.

Visoko kvalitetni i višebojni vizuali na sajtu su bitan deo marketing strategije. Slike čine sadržaj razumljivijim, daju vam mogućnost da budete krativniji po pitanju sastavljanja sadržaja i pomažu vam u održavanju pažnje posetioca.

Nameće se zaključak da su slike bitan deo sadržaja na webu, tako da je veliki problem kada slike prestanu da budu vidljive na sajtu. Ukoliko ste nadogradili svoj WordPress na 4.4, moguće je da ste se susreli sa ovim problemom.

 

 

SSL kao uzrok slika koje se ne prikazuju

Navešćemo vam nekoliko primera problema koji se mogu javiti sa slikama na sajtu:

  • Sve slike na sajtu se ne vide – Posle nadogradnje WordPressa, slike se ne učitavaju.
  • Ne vide se slike u biblioteci – Posle nadogradnje WordPressa nedostaje Media Library.
  • Ne vide se slike na admin panelu – Posle nadogradnje WordPressa, slike na sajtu se vide, ali sličice na proizvodima se ne vide.
  • Izlazi nekoliko upozorenja vezana za sardžaj – Nakon instaliranja SSL sertifikata, izlaze sigurnosna upozorenja.

 

Sta je zajedničko svim ovim problemima? Odgovor je – WordPress 4.4. Da se razumemo – Nije da se ne vide slike zbog WordPressa 4.4, već zbog SSL koji prouzrokuje nevidljivost ovih slika.

Mnogi eksperimentišu sa deaktiviranjem dodataka, ponovnog dodavanja slika, menjanjem tema, ali ništa od ovoga ne rešava problem. Uzrok problema je dobro poznat bug koji uključuje mešani sadržaj u kombinaciji SSLa i WordPressa 4.4.

 

 

Važnost sigurnosti sajta.

Sigurnost je jako bitna tema u poslednjih nekoliko godina. Postoji mnogo sigurnosnih problema koji takođe uključuju krađu i zloupotrebu korisničkih imena, lozinki, kreditnih kartica i identiteta sa raznoraznih sajtova. Sigurnost ličnih podataka nije nešto što sto bi trebalo olako shvatiti.

Mnogo je kompanija koje danas pribegavaju poslovanju uz pomoć online prodavnica. Na tim prodavnicama se svakodnevno obavljaju transakcije, plaćanja i sve te kompanije moraju korisnicima garantovati da će njihovi podaci biti bezbedni. Mislite o ovome na sledeći način:

 

izrada web sajta - SSL2

 

 

Šta se dešava u sredini? Ko je zadužen za konekciju između dva dela?

 

 

SSL: Spasilac

Način za poboljšavanja sigurnosti je aktivacija SSL sertifikata (Secure Socket Layers). Ovaj sertifikat pomaže posetiocima u proceni bezbednosti određenih stranica (kada je bezbedno da se poseti neka stranica a kada nije). Ukoliko je sajt procenjen kao nebezbedan zbog različitog sadržaja korisnici će dobiti upozorenje i pitanje da li žele da posete tu stranicu bez obzira na bezbedonosni rizik.

Tako bi SSL trebalo da radi. Predstavlja neku vrstu čuvara između konekcije i servera, tako što koristi set brojnih stringova. Ti stringovi se šalju pretraživačima i vaš sajt prihvata taj string. Taj string se zove session key i on kriptuje podatke koji se prenose.

Na donjoj slici ćemo vam prikazati kako to funkcioniše.

 

 

izrada web sajta - SSL3

 

 

 

Bez obzira da li je vaš sajt bezbedan ili ne, izbacivanje ovih pop up poruka nije uvek dovoljno. Korisnici koji unose podatke, bili oprezni ili ne, će biti svesni rizika. Ali korisnici koji se uplaše rizika, oni će otići sa vašeg sajta i to je gubitak za vas. Ukoliko dobijete ovo upozorenje, shvatite to kao znak da je nešto potrebno menjati.

 

HTTPS: Link koji nedostaje

Sada kada smo postavili SSL sertifikat, ostale komponente sigurnosti sajta dolaze u formi HTTPS protokola – sigurnija verzija HTTPa. HTTPs je odgovoran za prenos podataka između dve tačke, uz pomoć SSLa.

Za sajtove koji ne rade sa poverljivim korisničkim informacijama, HTTP je sasvim dovoljan. Za one sajtove koji zahtevaju dodatan nivo sigurnosti, HTTPS je neophodan. Ukoliko vam bezbednost kao razlog nije dovoljan, onda ćemo vam i reći da Google daje veći rejting HTTPS sajtovima.

 

 

 

izrada web sajta - SSL4

 

Kada vaš sajt bude bio obezbeđen SSL sertifikatom i HTTPS protokolom, onda ćete definitivno shvatiti suštinu. Sada imate pouzdan sajt za vaše korisnike. Onda se može desiti da SSL sertifikat bude uzrok neprikazivanja vaših slika i to može imati posledicu gubitak poverenja korisnika u vaš sajt ili brend. Sta uraditi u toj situaciji?

 

 

 

Kako rešiti ovaj problem?

Kada shvatite da se nešto dešava sa vašim sajtom zbog SSL sertifikata, HTTPSa i nadograđivanja WordPressa. Jako je bitno uočiti razlog problema, nakon toga rešavanje istog ne bi trebalo da vam oduzme mnogo vremena.

 

 

 

Šta je miksovani sadržaj (mixed content)?

 

 

izrada web sajta - SSL5

 

 

Postoje dva tipa ovog sadržaja. Jedan je poznat kao miksovani aktivni sadržaj i dešava se kada HTTPS očita skriptu na vrh HTTPa (što ne preporučujemo nikako). To nije razlog ovog problema.

Drugi tip mešanog sadržaja je poznat kao miksovani sadržaj koji se prikazuje (mixed display content). Poznato? Dešava se kada sadržaj koristi HTTP protokol prilikom očitavanja sajta. Dok se nisu očitale slike na sajtu uz pomoć HTTPa, postoji nešto u WordPressu što čini da se slike učitaju kao nebezbedne. Da pojednostavimo:

Za sajtove na HTTPSu, tokom nadogradnje, postoje podešavanja koja čine da se sukobe HTTP i HTTPS. To čini slike da se učitavaju HTTP protokolom, dok su, prilikom učitavanja pomoću HTTPS protokola, potpuno beskorisne.

 

 

 

Kako izbrisati miksovani sadržaj?

SSL sertifikat je uzrok nevidljivosti slika na sajtu, ali moramo biti sigurni da je uzrok nadogradnja WordPressa. Vraćanje na stariju verzuju WordPressa nije rešenje. U nastavku teksta ćemo vam dati nekoliko rešenja:

Zapamtite – Bez obzira na to kako ćete popravljati, bitno je pronaći linkove miksovanog sadržaja u kodu i promeniti u validne HTTPS linkove.

 

 

Rešenje 1 – Instalacija WordPress HTTPS (SSL) plugina

 

 

izrada web sajta - SSL6

 

 

Ukoliko nemate ovaj plugin, instalirajte ga za početak. Vidite da li će rešiti problem. Instrukcije za ovaj plugin možete pročitati ovde

 

 

Rešenje 2  – Proverite URL podešavanja na admin panelu

 

 

izrada web sajta - SSL7

 

 

Kliknite na Settings > General na vašem administratorskom panelu. Ukoliko WordPress URL pokazuje “http://”, zamenite ga sa “https://”

 

 

Rešenje 3 – Proverite kod

 

 

izrada web sajta - SSL8

 

  • Otvorite sajt
  • Otvorite izvorni kod na stranici gde se ne vide slike
  • Kliknite na Ctrl + F da bi ste dobili pretragu.
  • Ukucajte “src=http” u polje za pretragu
  • Zamenite http sa https om.
  • Idite na WordPress i pronažite instance koje zahtevaju nadogradnju.

 

 

Rešenje 4 – Proverite temu.

Ukoliko koristite temu na vačem sajtu, ona može koristiti apsolutne URLove, umesto relativnih URLova. Proverite PHP fajlove u okviru teme i proverite podešavanja. Ukoliko imate apsolutne, URLove, neophodno je zameniti ih u kodu ili u pluginovima.

 

 

 

Rešenje 5 – Proverite pluginove

Ukoliko koristite pluginove, mogu takođe i oni imati podešavanja koja se sudaraju sa HTTPS-om koji je podešen. Pogledajte podešavanja plugina, radi identifikacije da li postoji neko takozvano “force HTTPS” pravilo, koje se može sudarati sa kodom na stranici ili instanci. Ukoliko postoji, izbacite ta podešavanja i pokušajte ponovo.

 

 

Rešenje 6 – Proverite da li ima neispravnih linkova

 

 

izrada web sajta - SSL9

 

 

Postoji mnogo varijanta alata koji vam mogu pomoći da brzo i efikasno proverite linkove na sajtu. Probajte Google Webmaster Tools, Screaming Frog Seo Spider ili Search Reg Ex.

Neki od njih će vam omogućiti da brzo zamenite HTTP sa HTTPSom, dok će vam neki nadograditi relativne putanje tako da nećete imati problema sa linkovima u budućnosti.

 

 

Zaključak

Kada ih dodate, slike igraju bitnu ulogu na vašem sajtu. One drže pažnju korisnicima i čine vaš tekstualni sadržaj zanimljivijim i razumljivijim i čine sajt lepšim i ozbiljnijim, tako da je jako bitno prikazati slike na siguran način.

Potrošili ste dosta vremena na podešavanje i izradu web sajta, instalirali SSL sertifikat i najnoviji WordPress. Vaši korisnici zaslužuju bezbedan sajt, zabavno korisničko iskustvo, tako da se potrudite da im ponudite što bolje iskustvo po pitanju vašeg sajta.

Facebook instant Articles: Sve što bi korisnici WordPressa trebalo da znaju?

Facebook instant Articles: Sve što bi korisnici WordPressa trebalo da znaju?

Često se dešava da je tehnologija uzrok promena u procesima kompanije, komunikaciji, zadacima poslova i uopštenog modela poslovanja, tako da je često postavljeno pitanje, da li tehnološke promene diktiraju promene u poslovanju.

U današnjem tekstu ćemo pisati o Facebook Instant Articles-u. Prvo da se osvrnemo na rezultate nekih istraživanja:

  • 68% punoletnih Amerikanaca koristi pametni telefon, a 45% koristi tablet računar.
  • 47% punoletnih Amerikanaca koristi jedino mobilni telefon.
  • Do 2020 kompanija CISCO je predvidela da će preko 5.4 milijarde ljudi širom sveta koristiti mobilni uređaj, što će prouzrokovati oko 366.b EB mobilnog saobraćaja.

Sve veći porast upotrebe mobilnih uređaja, kako u privatne tako i u profesionalne svrhe, nije neočekivan. Takođe je taj porast doveo do promena u elektronskom poslovanju. Na primer BYOD je povećao daljinsku radnu snagu, politiku poslovanja povezanu sa mobilnim uređajima i implementirala nove modove komunikacije.

Treba imati u vidu na sledeće:

  • Facebook ima trenutno oko 1.5 milijardu aktivnih korisnika godišnje.
  • 655 miliona korisnika pristupa Facebooku sa mobilnih uređaja.
  • U Februaru ove godine, kreirani su Facebook instant članci, sa ciljem testiranja auditorijuma koji koristi mobilne uređaje. Od 12.4 Instant članci su dostupni svima.

Još uvek niste čuli za Facebook Instant Articles? Ukoliko imate dosta sadržaja i ukoliko želite da doprete do većeg broja ljudi uz pomoć društvenih mreža, nastavite da čitate.

 

Šta je Facebook Instant Articles?

Prošlog leta Parse.ly je uz pomoć istraživanja došao do rezultata da je Facebooku lider u prenošenju vesti, ispred Google-a. Ta objava je naterala ljude da spekulišu šta je sledeće. Pošto je Facebook kompanija koja gleda unapred i drži do pozitivnog korisničkog iskustva, nije iznenađenje što su razvili rešenje koje će poboljšati iskustvo korisnika mobilnih uređaja. Eto potrebe za Facebook Instant Articles-om

Facebook Instant Articles su HTML5 dokumenti, koji kada se podele u tom formatu postanu optimizovani za mobilne uređaje i samim tim poboljšavaju iskustvo korisnika koji koriste mobilne uređaje. Najlakši način da vam objasnimo je da vam pokažemo kako to funkcioniše.

Na slici ispod možete da vidite kako izgleda članak na mobilnim uređajima.

 

 

izrada-web-sajtova-clanci2

 

 

Ovako izgleda očitavanje stranice, kada se klikne na članak.

 

 

izrada-web-sajtova-članci3

 

 

Ovako izgleda članak koji je u potpunosti očitan.

 

 

izrada-web-sajtova-članci4

 

 

Kao što smo već spomenuli, tokom test faze određeni broj medija, dobili su pristup Facebook Instant Articles-u. Jedan od njih je bio New York Times. Na donjoj slici ćemo prikazati kako je njihov članak izgledao na mobilnoj stranici. Izgleda slično kao članak Bustle-a, zar ne?

 

 

izrada-web-sajtova-članci5

 

 

Na donjoj slici je prikazano kako se on odmah prikazuje nakon klika na link. Može se primetiti razlika između prikazivanja u pretraživaču (Bustle) i Instant članka New York Timesa.

 

 

izrada-web-sajtova-članci6

 

 

 

Postoji nekoliko ključnih razlika između običnog responsive članka i članka koji se prikazuje uz pomoć Facebook Instant Articles-a. Prednost je sledeća:

  • Sadržaj se otvara direktno u okviru mobilne aplikacije
  • Vreme očitavanja ne prelazi 300 milisekundi (za razliku od 3.66 sekundi koliko je potrebno za učitavanje standardnih članaka)
  • Sadržaj je optimizovan, tako da nudi impresivno korisničko iskustvo, slike su visoke rezolucije, interaktivne mape, video sadržaj, natpisi.

Istraživanja sprovedena tokom februara i marta su pokazala da članci otvoreni uz pomoć Instant Articles-a:

  • Imaju 20% više klikova
  • 70% manje korisnika odlazi sa ovih članaka
  • 30% više deljenja imaju ovakvi članci.

Iz Facebooka su shvatili da njihovi čitaoci žele što bolje iskustvo prilikom čitanja članaka, bez obzira na to koji uređaj koriste. Facebook nije samo dao akcenat na vizuelnom pristupu, već su se potrudili da korisnicima obezbede slike visoke rezolucije koje će se brže otvarati, zatim brz i efikasan interaktivni pristup uz pomoć društvenih mreža.

I to nije sve.

Facebook Instant Arcticles ne zahtevaju od vas nikakvo dodatno objavljivanje na Facebooku. Postoji i dodatna mogućnost sinhronizacije sa CMS sistemom. Uz pomoć ovoga, članci koje objavite na svom WordPress sajtu mogu biti automatski dodati i podešeni za Facebook, bez ikakvog dodatnog troška vremena, truda i energije.

Za više od 25% populacije koja koristi WordPress, ovo su dobre vesti. Dok izdavači koji koriste druge platforme moraju da podešavaju ceo sistem ili takozvani RSS Feed u APIju, da bi Instant Articles funkcionisao. Sa druge strane Facebook je, u saradnji sa Automattic-om (kompanija koja sarađuje sa WordPressom), kreirao besplatan plugin koji će odraditi veći deo posla. Više o tome u nastavku teksta.

 

Za koga su Facebook Instant Articles?

Između Februara i Aprila ove godine, Instant Articles su koristili veliki mediji kao što su New York Times, Buzzfeed, National Geographic. Sve u svemu posle 12. Aprila je ova platforma dostupna svima.

Dok je većina korisnika WordPressa uzbuđena zbog prednosti deljenja optimizovanog sadržaja sa čitaocima, bitno je shvatiti da ovaj alat nije namenjen svakom. Facebook je definisao minimalne zahteve za korišćenje ovog alata. Morate imati minimum 50 članaka u svom CMSu da bi ste mogli da se regustrujete.

Sa sve većim rastom tehnologije i većim brojem korisnika na Facebooku, stvara se potreba za brzim učitavanjem i sve većim i boljim korisničkim iskustvom. Ukoliko ispunjavate uslove, objavljujete članke i vesti često, prisutni ste na Facebooku, Instant Articles je alatka koja će vaše marketinške aktivnosti podići na viši nivo.

 

 

Zašto Facebook Instant Articles?

Nema te inovacije i novog rešenja, koje pre nego što je zaživelo nije prošlo kroz određen vremenski period prilagođavanja i odobravanja. Bez obzira na to koliko je oglašavanje na Facebooku lako i koliko plugin olakšava stvari, potrebno je malo rada i truda, ali to svakako nije razlog da se ne pređe na Facebook Instant Articles.

Kada potrošite mnogo vremena u kreiranju sadržaja, vesti, morate biti svesni da taj sadržaj ne kreirate za sebe, već za korisnike. Morate im dati nešto vredno čitanja i morate im dati najbolje iskustvo u čitanju sadržaja, u šta spada i brzo učitavanje i bolje vizuelno iskustvo.

Ma koliko iskustvo krajnjeg korisnika bilo vaš cilj, postoji veliki broj objavljenih članaka, tako da je jako bitno ponuditi korisnicima nešto novo, inovativno. Prednosti Instant Articlesa su:

  • Više angažuje korisnike – Prema Facebook, već su počeli da uočavaju razliku između Instant Articlesa i standardnih članaka.
  • Više pročitanog sadržaja – Pretpostavka je da bolje korisničko iskustvo može povećati lojalnost korisnika i svest o brendu, što može imati za posledicu više sadržaja od strane korisnika.
  • Povećani prihodi – Ukoliko oni koji objavljuju žele da prodaju prostor za reklame u svojim člancima, to će im dati priliku za dodatnu zaradu. Ukoliko se koristi Facebook Audience Network, 30% zarade zadržava Facebook.
  • Više prilika za marketing – Instant Articles nemaju za cilj jedino da poboljšaju pristup člancima i vestima. Oni su tu da unaprede način deljenja priča, a uz interaktivne vizuale visoke rezolucje imaju odličnu komunikaciju sa korisnicima.
  • Veća kontrola nad korisničkim iskustvom – Najbolji deo Instant Articlesa je da se ne gubi kreativna kontrola. Postovi mogu biti podešeni, od običnog izgleda layouta, podešavanja boja, logotipa, dugmića, sve u cilju stvaranja konzistentnog izgleda.

 

 

Kako početi sa korišćenjem Facebook Instant Articles-a?

Rad u WordPressu vam može dati prednost nad korisnicima ostalih CMS platformi. Postoji niz podešavanja, proces odobravanja koji je neophodno preći, pre objavljivanja članaka. Evo šta je potrebno uraditi:

 

 

izrada-web-sajtova-članci9

 

 

 

  • Prijavite se na Instant Articles i povežite sa vašom stranicom.
  • Proverite da imate podešen Facebook Business Manager nalog. Ovim ćete imati dozvolu da upravljate nalogom i da upravljate timom koji radi na Instant Articles

 

 

 

izrada-web-sajtova-članci7

 

 

  • Preuzmite Facebook Pages Manager aplikaciju. Uz pomoć nje možete testirati Instant Articles članke.

 

 

izrada-web-sajtova-članci8

 

 

  • Preuzmite WordPress Instant Articles plugin i instalirajte ga.
  • Povežite vaš novi RSS Feed na Facebooku u podešavanjima Instant Articlesa.
  • Nakon toga će Facebook proveriti da li je sve podešeno kako treba.
  • Kreirajte svoje šablone, tako da bi sadržaj bio povezan sa vašim brendom.
  • Proverite uputstva za formatiranje i kreiranje dokumenta koji će biti kompatibilan sa HTML5. Plugin će uraditi veći deo posla, ali je neke ozbiljnije implementacije (npr mape) neophodno uraditi samostalno.
  • Upoznajte se sa bibliotekom Instant Articlesa u okviru Publishing Toolsa. Možete upravljati sadržajem direktno ili možete menjati preko WordPressa.
  • Ukoliko želite da dodate reklame, praćenje, analitiku, onda obavezno to podesite pre samog objavljivanja.
  • Osvrnite se na Submission Checklist i onda počnite da učitavate vaših prvih 50 članaka. Facebook će odraditi reviziju pre nego što odobri vaše članke.
  • Kada vaši članci budu bili prihvaćeni, proverite da li Instant Articles radi. Ukoliko niste korisnik iPhonea ili Androida vi i vaši korisnici će dobijati običan, direktan lik za pretraživač. Ukoliko imate jedan od ovih uređaja, onda ćete dobiti optimizovan sadžaj.

 

Zaključak

Sada kada je sve podešeno, možete objavljivati sadržaj. Korisnici čekaju na vas i vaš sadržaj kako na Facebooku, tako i na svojim mobilnim uređajima i dajte im iskustvo onakvo kakvo zaslužuju.

 

Pin It on Pinterest