Drugim rečima, ako vam je sajt spor potencijalni ste kandidat za gubitak velike količine posetilaca. Posetioci čine posetu na sajtu, a poseta utiče na reputaciju sajta što dalje utiče na ranking sajta. Ovo može da proizvede domino efekat ako se zanemari brzina učitavanja sajta.

Vrlo je važno da ustanovite od čega se sastoji vaš sajt pre nego što uskočite u kod pokušavajući da ga ubrzate jer to nije moguće učiniti ukolino ne znate šta je to što vaš sajt usporava. U nastavku ovog posta biće prikazana kolekcija korisnih web servisa i alata koji će vam pomoći da analizirate svoj sajt i da mu “postavite dijagnozu”, dozvoljavajući vam da razumete svoj sajt bolje.

Web servisi

Testirajte vreme koje je potrebno da se učitaju objekti na vašem sajtu (html, slike, javascript, css, iframe-ovi i ostalo). Takođe možete proveriti koliko se brzo učitava svaki element na strani i nakon toga da unapredite elemente koji se sporo učitavaju. U rezultatima testiranja videćete izveštaj o vremenu koje potrebno da se sajt učita, vremenu za svaki od elemenata, veličinu elemenata i ukupni broj elemenata.

GTmetrix

Kombinuje dva najpopularnija Firefox dodatka za proveru performansi – Yslow i Google Page Speed. Gtmetrix vam daje predloge šta biste mogli da poboljšate na svom sajtu. Iako se Yslow i Google page speed preporučuju za Firefox, takođe se rezultaiti i testovi mogu primeniti i na ostale browsere.

Light speed now

Proverite performanse svog sajta i dobićete izveštaj u svom inboxu.

Load impact

Loadimpact je veoma važan alat za sajtove koji imaju posetu od nekolilko desetina hiljada ljudi dnevno. Besplatan nalog vam dozvoljava da proverite posetu na sajt sa 50 istovremenih korisnika, ukoliko želite da probate sa više korisnika onda ćete morati da kupite premium nalog.

Site-Perf

Site-Perf simulira prirodno ponašanje browsera pri skidanju vaših strana sa slikama, CSS, JS i drugim fajlovima – kao što to radi običan posetilac. U izveštaju možete videti vreme koje je potrebno da se stranica učita, koji se fajlovi prvi učitavaju i kojom brzinom. To može biti vrlo korisno za pronalaženje elemenata koje bi trebalo unaprediti.

WebWait

Testirajte svoj websajt ili proverite svoju internet konekciju.

Gomez networks

Sprovedite test u realnom vremenu nad pojedinačnom web stranom kako bi proverili performanse.

OctaGate

Dozvoljava vam da pratite koliko je korisniku potrebno da skine jednu ili više strana na vašem web sajtu.

Webslug

Omogućava vam da uporedite brzinu svog sajta sa konkurentnim sajtovima.

WebToolHub

Daje vam mogućnost da proverite kako se vaša strana učitava na različitim konekcijama. Sa Webtoolhub servisom dobićete informacije o veličini strane, vremenu za učitavanje strane kao i informacije o CSS, Javascript i slikamakoje se koriste na toj strani.

IWebTool

Iwebtool vam daje opciju da uporedite do 10 strana u isto vreme. Možete takođe proveriti učitavanje početne strane, kategorija ili postova jednim klikom.

Searchmetrics

Prikazuje trajanje navedenog sajta. Ova vrednost može biti iskorišćena da prikaže koliko je sajtu potrebno da se učita i da li je potrebno da se optimizuje ili je bolje promeniti ISP.

BrowserMob

Dobijte informaciju o performansama bilo kog web sajta bez potrebe da instalirate skriptu za testiranje.

Aplikacije

Open source alat za testiranje performansi i skalabilnosti web servisa. Pokreće  HTTP load testiranje, koje je korisno za planiranje kapaciteta, benchmarking, analizu i poboljšanje sistema.

Google page speed

Page Speed je open-source add-on za Firefox/Firebug. Webmasteri i web developeri mogu da koriste Page Speed da provere performanse svojih web strana i da dobiju predloge kako da ih poboljšaju.

YSlow

YSlow analizira web strane i predlaže načine kojima mogu da se poboljšaju perfrmanse istih zasnovano na pravilima vezanih za web strane sa visokim performansama.

PageTest

Internet Explorer plugin koji prikazuje zahteve ostvarene od strane browsera ka serveru. Takođe daje predloge za poboljšanje performansi.

MultiMechanize

Multi-Mechanize je open source framework za web performanse i testiranje učitavanja. Dozvoljava vam da istovremeno pokrente python skripte generišući tako učitavanje nasuprot web sajta ili web servisa.

Izvor: www.hongikat.com

I upravo tu na scenu stupaju alatke koje će vam uštedeti vreme. Bilo da je to to-do lista, instalacija više programa odjednom, konverter iz Excel-a u HTML – sve ovo može da vam uštedi nekoliko minuta svakog dana. Zrno po zrno – pogača. Bilo da ste ljubitelj ovakvih listi ili ne: ovo će vam sigurno pomoći da nadjete one sitnice koje će vam pomoći da izbegnete glavobolje i stress. Ispod predstavljamo korisne alatke za uštedu vremena za web-dizajnere.

[Offtopic: Kad ste ovde, zašto se ne bi prijavili na naš newsletter, šaljemo korisne stvarčice poput ovih jednom mesečno. ]

Počnimo…

LaunchList
Ova alatka vam pomaže da pregledate bitne stavke pre nego što sajt pustite na net. Po default-u, u listi stoji 28 stavki koje treba proveriti, ali možete dodati i neke svoje stavke na listu. Svaka stavka može da se komentariše ili precrta. Kad završite, možete da pošaljete izveštaj na više mail adresa. Neke alternative Ultimate Website Launch Checklist i The Ultimate Website Prelaunch Checklist.

Pencil Project: Sketching and Prototyping with Firefox
Pencil je alatka otvorenog koda. Sadrži ugradjene forme za dijagrame i prototipove, direktno editovanje teksta sa veoma velikim izborom opcija, kao i standardne opcije za crtanje. Radi u Firefox-u 3.5 i novijima.

Zootool
Zootool je sajt za čuvanje sadržaja na koji naletite na netu kao što su slike, dokumenta, linkovi, video klipovi i slično. Omogućava vam da dodate bilo koji sadržaj brzo i jednostavno. Kasnije možete da organizujete taj sadržaj kako vi želite u admin delu. Možete ga integrisati sa Tumblr-om, Twitterom kao i mnogim drugim.

Bounce
Zabavna alatka. Sa njom možete da delite ideje po sajtovima. Moći ćete da postavite belešku, napišete neki podsetnik dok ste na sajtu, a kasnije da pogledate šta ste sve napisali.

Ninite Batch Installer
Ninite vam omogućava da izaberete vaše omiljene programe iz jedne velike liste( pretraživači, chat program, slike, dokumenta, sigurnost, kompresije i mnoge druge), a zatim kreira fajl koji možete da preuzmete i kad ga pokrenete, on instalira sve što ste izabrali automatski.

Support Details
Kada ste u nedoumici, pošaljite vaše klijente na ovu alatku. Sva njihove podešavanja i verzije programa će biti očitane, i poslate vama na email. Bilo bi lepo imati Firefox verziju, Flash verziju, operativni sistem, JavaScript status, rezoluciju i slično od klijenta.

MugTug’s Darkroom
Kad treba da sredite sliku, a nemate baš nešto vremena, kao ni omiljeni Photoshop pri ruci, možete koristiti ovu alatku. Ona je prvenstveno za fotografe. Možete podesiti osvetljenje, nivoe, količinu bele boje na slici, ekspoziciju, kontrast i saturaciju, kao i neke efekte. Na kraju, slike možete uploadovati na Flick i Picasa-u.

Visual Website Optimizer
Visual Website Optimizer je, bez sumnje, najbolji softver za testiranje vašeg sajta koji je ljudska ruka ikada napravila. Tačka.

Keyonary
Ovaj sajt je fina mala aplikacija za pronalaženje prečica u MacOS X, Photoshopu I slično.
Trenutno je dodate preko 250 prečica za Photoshop. Samo ukucajte ime programa za koji vam trebaju prečice i dobićete ogromnu listu prečica.

gridr buildrrr
Ovaj generator vam omogućava da odaberete mrežu za vaš raspored sajta, i testirate ga online.

Instant Blueprint – Alat koji pravi framework u sekundi.
Instant Blueprint vam omogućuje da kreirate HTML/xHTML I CSS framework u sekundi, kako bi vaš projekat što pre bio gotov.

Hummingbird
Ova mala aplikacija vam pruža uvid u to koliko ljudi je trenutno na vašem sajtu i pominje vaš sajt na društvenim mrežama, u realnom vremenu. Baziran je na Node.js, koja može da izdrži veliku posetu i mnogo klijenata u isto vreme.

jsFiddle
Editor za Web, sa podrškom za JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS. Možete sačuvati i pokrenuti aplikacije unutar pretraživača.

String:
Ukratko, String kontroliše lokalizaciju. Omogućava vam da upravljate fajlovima koji sadrže prevod – od PHP-a preko Rails-a do iPhone aplikacija. Možete pozvati prijatelja da prevede vaš sadržaj, i pratite promene.Možete dodati nove sekcije i jezike usput, a onda ih preuzeti i postaviti u svoju aplikaciju.

Titanpad
Sa ovom alatkom možete menjati dokumente istovremeno sa drugim korisnicima, obeležite ko je šta editovao u raznim bojama. Editovanje se radi u realnom vremenu. Super rešenje za sve koji rade istovremeno na tekst dokumentima, bilo das u u susednoj kancelariji ili drugoj strain sveta.

Pixelnovel Timeline: Version Control for Adobe Photoshop
Ovaj alat ustvari integriše Subversion klijente u Adobe Photoshop-u sa Adobe Photoshop dodatkom. Možete pregledati verziju direktno u Photoshop-u. Nije besplatan.

0to255
Jednostavan alat pomoću kog dizajneri mogu naći varijacije boja. Jednostavno izaberite boju sa kojom želite da počnemo, a alatka će vam dati varijaciju boja koje su pogodne za web stranice. Zatim samo kliknite na heksadecimalni kod koji je odmah kopiran u vaš clipboard.

Load Impact: Website load/stress test
Alat vam pomaže da otkrijete granice vašeg web sajta pre nego što vi to sami naučite na teži način. Servis simulira korisnike koji dolaze na vaš sajt i kreira grafike sa izveštajima o tome koliko korisnika vaš sajt može da podnese.

Ideone: Online IDE & Debugging Tool
Ova alatka je compiler/debugger kombinacija koja vam omogućava testiranje koda u više od 40 jezika: C++, Java, JavaScript, Perl, PHP, Python and Ruby. Fine alternative PHP Anywhere (online PHP editor) and CodeRun .

Online Dummy Image Generator
Ova alatka kreira slike za vaš sajt. Postavite dimenzije, pozadinu, tekst na slici, format i slika je gotova. Možete i praviti standardne dimenzije za reklame i banere.

HiFi RegExp Tool
Regular expression može da bude problem. Ovaj alat je 100% JavaScript koji koristi jQuery. Ovaj alat je kreiran da pomogne dizajnerima da uče, vežbaju i prave regular expression.

Tableizer
Klijenti vam često daju informacije u tabeli, i prebacivanje u HTML može da bude problem. Ovaj alat pravi HTML tabele od Excel fajlova. Jednostavno kopirajte tabele, izaberite opcije, i dobićete lepo sredjen HTML fajl.

FollowUpThen: Easy Email Reminder
Ako nemate ništa protiv da šaljete vaše mailove trećim licima, isprobajte ovaj alat kao email podsetnik. Na vašem sledećem email-u samo dodajte vremenskiperiod@followupthen.com i alatka ce vas podsetiti kad period istekne. Ne treba vam nalog.

Divine: Conversion tool from PSD to HTML
Divine je dodatak koji radi sa Photoshop-om. Kad završite u Photoshop-u, pokrenite Divine dodatak u PHotoshopu, dodajte WordPress uloge glavnim elementima i dodatak će pripremiti sve fajlove koji vam trebaju. Kada podesite FTP pristup server, alatka sama postavlja fajlove na server. Totalno besplatno.

Kaleido
Ova alatka vam omogućuje da napravite korisne sekcije koda koje kasnije možete koristiti da planirate, organizujete i koristite kod na mnogo bolji način.

Sketchpad
Ova aplikacije je moćni online editor slika. Njegove opcije su organizovane u korisnim, prevlačenjem delova koji mogu biti gde god vi želite kao u standardnom editovanju slika.

Unicode code converter
Iskucajte tekst u bilo kom zelenom ili sivom polju i kliknite na dugme Convert iznad. U ostalim poljima pojavice se varijacije na tekst. Onda možete kopirati delove teksta u Vaš dokument.

Grid System Generator
Ova alatka pravi mrežu u validnom css/xhtml kodu, za brz razvoj vaših aplikacija. Sistem pravljenja mreža vam omogućava da odredite širinu, broj kolona i margine, kako bi mreža bila fleksibilnija.

ud.com namecheck
[ADRIATEK SPECIAL] Ovaj alat proverava dostupnost korisničkih imena na društvenim mrežama, imena domena I brendova.

Typograph — Scale & Rhythm
Kao što naziv servisa kaže, omogućava vam proveru vaše tipografije i da li ulazi u standard koji bi trebalo da se ispoštuju.

ColorBrewer Intro – Selecting Good Color Schemes for Maps
ColorBrewer je alatka koja je napravljena da pomogne ljudima da izaberu dobru kombinaciju boja za mape i druge slike.

CSS Inliner Tool
Ako ste ikad radili email kampanju, znate da ako niste sami pripremili CSS, on može da bude ‘ogoljen’ od strane mail servisa i onda da ne izgleda baš kao što ste zamislili. Mail Chimp je servis koji konvertuje ceo vaš CSS u inline CSS, kako bi vaši mailovi izgledali prelepo. Nije potrebno da otvarate nalog.

HTML Purifier – Filter your HTML the standards-compliant way!
HTML Purifier je biblioteka standard koji se koriste u kodiranju. On čisti vaš kod od nepotrebnog, i pravi vaše dokumente unutar standarda.

Rendera
Ovaj servis vam pomaže da naučite više o HTML5 I CSS. Ukucajte svoj HTML kod i pogledajte kako izgleda u realnom vremenu. Onda ga stilizujte u CSS-u. Možete koristiti bilo koji tag u HTML5 I CSS3 ako ga vaš browser podržava.

RegExr
Zanimljiv alat za učenje, pisanje i testiranje regular expression-a.

try ruby! (in your browser)
Ovaj alat vam pomaže da isprobate Ruby kod u komandnoj liniji. Podržava Ruby-eve metode, a sadrži i korak-po-korak tutorial za novajlije.

Google Command Line
GoogleCL je komandna linija koja pruža pristup svim Google servisima. Možete postovati na Bloggeru, dodavati dogadjaje u calendar, ili menjati dokumente u Google Docs.

Tiny Fluid Grid
Jednostavan alat koji generiše kod za sadržaj varijabilnih širina.

Fonolo.com
Ovaj alat vam omogucava da preskocite govorne automate kompanija i cini ceo postupak manje frustrirajucim. Za vlasnike kompanije, Fonolo prikazuje sve menije vašim klijentima, pre nego što vas pozovu. Predlažemo da ako vam ne radi net, SBB ili nekog drugog provajdera pozovete na ovaj način.

Producteev: Creating To-Do Lists with Emails
Prosledite bitne emailove na task@producteev.com I alatka ce vam kreirati to-do listu u hodu, obavestiti vas, a čak se može integrisati u razne aplikacije.

AddUse – User research made easy
AddUse je alat zasnovan na Webu koji Vam pomaže da kreirate, menjate i prezentujete vaša istraživanja brzo jednostavno i jeftino. To je alat koji možete koristiti u bilo kom trenutku, dok razvijate aplikaciju. Prikazuje rezultate testova korisnika, ankete  i upitnike u grafičkom okruženju, pomažući marketing i menadžment grupama da donesu pravu odluku.

bookwhen
Rezervacije za dogadjaje, radionice, razrede i kurseve. Besplatna verzija je za 150 dogadjaja i 300 rezervacija po mesecu.

Još neke zanimljivosti…

see[Mike]code: tool for remote coding interview
Ovaj alat omogućuje da pronadjete programera za svoj posao, tako što ćete mu dati da nešto iskodira na Webu. Vi to pratite u realnom vremenu.

jsdo.it
Ova alatka vam omogućava da pišete kod direktno u pretraživač, menjate i modifikujete bilo koji kod, popravljate  bug-ove i slično.

JavaScript Error Tracking
Slično kao u Netbeans-u, ovaj alat vam prikazuje greške u JavaScriptu i grupiše slične greške.

Old Version
Ovaj alat sadrži stariju verziju neke aplikacije koju korisitite. Zašto? Zato što novo nije uvek bolje.

Onbile
Preko Onbile možete da kreirate sajt za mobilnu verziju za iPhone, Android I Blackberry.

iSendr
iSendr vam omogućava da pošaljete fajlove brzo i lako, bez uploada na server.

seekWP
Pretraga dokumentacije za WordPress.

speedtracer
Ova aplikacija vam omogućava da pronadjete i popravite problem u Vašoj web prezentaciji.

the Awesome Highlighter
Omogućava da označite tekst na web stranama i daje vam mali link do označenog dela

OpenWith.org
Ova stranica vam daje uvid u aplikacije koje mogu da otvore one fajlove i ekstenzije koje vi trenutno ne možete.

I za kraj…

Kuku Klok
Alarm za one koji rade previše i zaspe pred ekranom.Odaberite vreme kad želite budjenje i ostavite prozor otvoren. Bolje nego 977.

What the Hex?
Mislite da poznajete heksadecimalni kod? Proverite na ovom sajtu koliko zapravo niste u pravu. Samo ćemo nagovestiti da možete da podešavate težinu pogadjanja od 2 do 48 mogućihodgovora.

Izvor: Smashing Magazine

Website

WordPress (Link)

WordPress

Bili bi licemeri kada ne bi koristili WP za svoj glavni web sajt zar ne? Kada smo krenuli da razvijamo i dizajniramo WooThemes web sajt, prošle godine, samo smo znali kako da koristimo WordPress, pa nismo razmatrali nijednu drugu alternativu. Gledajući unazad na veoma uspešnu godinu (i veliki porast), smatramo da je WooThemes dokaz da možete izgraditi veoma efikasan poslovni sistem u WP-u. To definitvno nije samo platforma za blogovanje…


bbPress (Link)

bbPress

Mi koristimo bbPress koji pokreće naš support forum i iako nije najbolji ili najzreliji forum koji se može naći, vrlo lepo se implementira u WP. Takođe, zajedno sa “Support plugin-om” za bbPress, forum funkcioniše kao support ticketing sistem.

aMember (Link)

aMember

aMember je odgovoran za magiju koja se dešava iza zavese. aMember se takođe implementira u WP + bbPress kombinaciju i odgovoran je za management korisnika na WooThemama. Tako da user dashboard, download tema, affiliate program i procedure kupovine su kontrolisane od strane aMember-a. Takođe koristimo 2Checkout.com kao naš payment gateway, koji se integriše u aMember kako bi omogućili funkcionalnost transakcija.

Feedburner (Link)

Feedburner

Sve više smatram da su dani RSS-a odbrojani, s obzirom da je mnogo lakše dobiti informacije sa Twitter-a (sa druge strane, sve je to prenatrpanost informacijama)… Ipak mi još uvek koristimo Feedburner kako bi pratili koliko se korisnika prijavilo za naš RSS feed i do sada, nismo naišli na neku alternativu Feedburner-u. Ako volite da pratite statistiku, Feedburner bez dalje rasprave, je sigurno jedan od elemenata vašeg sajta.

Pingdom (Link)

Pingdom

Osim ako niste online 24/7 i refreshujete WooThemes web sajt svakih 30 sekundi (kako bi proverili da li je pao ili ne), ne postoji mnogo toga što možete da uradite kako biste bili sigurni da imate 100% uptime web sajta (što je veoma važno za nas, jer mi ipak prodajemo nešto). Mi koristimo Pingdom koji nas obaveštava preko SMS-a i e-mail-a ukoliko se nešto čudno dešava na serveru.  SMS funkionalnost je odlična, jer nam omogućava da pošaljemo brzo email našoj podršci na serveru; uglavnom sa iPhone-a…

Komunikacija i project management

Gmail (Link)

Gmail

Pošto smo mi uglavnom virtuelna kompanija, naš ceo tim treba da ima pristup WooThemes email nalozima, kako bi pokrili jedni druge, ako recimo Magnus ide da peca na Aljasku na 15 dana (npr. hehe). Probali smo nekoliko mail aplikacija u prošlosti, ali smo saznali da je Gmail najlakši i najefikasnije se nosi sa gomilom mailova koje primimo u toku dana.

Basecamp (Link)

Basecamp

Basecamp je polazna tačka na kojoj gradimo svoje planove i komunikaciju. Iako verovatno ne koristimo Basecamp onoliko koliko bi trebalo, sve naše važne odluke, stvari koje treba uraditi, ideje i podaci su na Basecamp profilu. Lepa stvar kod Basecamp-a je činjenica da je uvek tu, ne smeta nam i ne prisiljava nas da ga koristimo umesto email-a ili Skype-a.

Prologue2 (Link)

P2

Ovo je nešto novo sa čim eksperimentišemo u proteklim nedeljama… P2 koristimo kao neku vrstu internog Twitter-a, pa na taj način možemo jedni druge da obaveštavamo o tome šta radimo na mnogo realniji način. Pošto ne radimo iz iste kancelarije ceo dan važno nam je da znamo šta se dešava u toku tog dana. Definitvno još uvek nastojimo da saznamo kako da izvučemo pravu vrednost iz P2, ali početni pokazatelji obećavaju u smislu povećanja produktivnosti.

Marketing

Twitter (Link)

Twitter

Pristustvo WooThema na Twitteru smo gradili polako i pošto nemamo baš jasnu strategiju u smislu kada i kako koristimo Twitter mi ga najviše koristimo da objavimo vesti iz naše kompanije, kao i dodamo interekaciju između sebe i onih koji su zainteresovani za naš rad i naše proizvode.

CoTweet (Link)

CoTweet

Pored Twittera, počeli smo da koristimo i CoTweet kako bi dozvolili celom WooTeam-u da nadgleda našTwitter account. Početna misao je bila da jeCoTweetveoma sexy aplikacija koja radi ono što je obećano veoma dobro.

Peashootapp (Link)

Peashoot

Peashoot je takođe jedna od aplikacija koje od nedavno koristimo, ali zaista uživamo u iskustvima koja imamo dok pronalazimo šta sve ovaj servis može. Trenutno ga koristimo da pratimo naše Twitter marketing kampanje (broj klikova i retweet-ova). Takođe smo dodali naš custom domen (woourl.com) kao skraćeni URL, što nam dozvoljava da koristimo Peashoot (uz naš affiliate program) da preciznije pratimo plaćene reklame (na drugim sajtovima). Iako još uvek učimo kako da koristimo Peashoot, definitvno vredi $25 mesečno!

Campaign Monitor (Link)

Campaign monitor

Koristimo Campaign Monitor još od dana Premium News Thema i nijednom se nismo pokajali. Naši mesečni newsletteri se veoma laku šalju sa Campaign Monitor-om (u smislu organizovanja liste i novih newsletter), obožavamo analizu posle slanja svakog newslettera. Sem toga, ovo je newsletter software za dizajnere, pa zašto ga ne bi koristili?

Development

Beanstalk (Link)

Beanstalk

Ovo smo već ranije pomenuli nekoliko puta. Korišćenje SVN-a je potpuno promenilo način kako razvijamo svoje teme. U stvari, promenio je toliko ceo taj proces da ne bi mogli da radimo bez njega. Beanstalk je naš repozitorijum gde držimo SVN, gde su sve naše teme smeštene. Prednosti u tome što ste negde hostovani umesto što sami hostujete? Nemam pojma koje su… Nikada nismo razmišljali o toj opciji, ali kada ste hostovani negde čini administratorski deo svega mnogo lakšim.

Lighthouse (Link)

Lighthouse

Dok koristimo bbPress kao javni support forum/ ticketing sistem, Lighthouse koristimo da ispratimo sve prijavljene greške i bagove, koje treba ispraviti u temi. Uz bagove, imamo i odvojenu listu potencijalni novih opcija koje razmetramo da li će ući u teme ili ne. Od kada smo počeli da koristimo Lighthouse, mislim da nam je promaklo samo par bagova, a takođe je ubrzao i sam proces ispravljanja istih. Verovatno bi trebalo ovo da integrišemo u naš Basecamp profil jednog dana…

Ostalo

Vimeo (Link)

Vimeo

Verovatno ćete pitati, zašto ne YouTube? Pa,nijedan drugi video servis na netu nije toliko cool i zabavan kao Vimeo. Trenutno ga ne koristimo tako često, ali svi naši promo materijali, tutorijali & support video su smešteni na naš Vimeo nalog. Shvatili smo da je Vimeo prilično brz i radi baš ono što nama treba. U stvari ništa specijalno; dozvoljava nam da se fokusiramo na sadržaj i nakon toga da ga na najlakši mogući našin stavimo online.

Eto naše liste… Nemojte misliti da smo nešto izostavili, ali i ako jesmo, onda je to verovatno zato što nam i nije toliko bitan servis da spomenemo. S toga pitajte nas bilo šta što želite, kako/ zašto koristimo ove aplikacije ili servise koje smo naveli, takođe podelite sa nama stvari kojevi smatrate korisnim za svoj biznis ili projekte.

Izvor: www.woothemes.com

ColorCombos

Kada dizajnirate izgled web sajta jedan od prvih (i najvažnijih) koraka u procesu je biranje šeme boja koju ćete primeniti. Color Combos vam omogućuje da pretražite hiljade kombinacija boja kako bi vas inspirisao za vaš budući dizajn. Šeme boja se mogu pretražiti po bojama.

Posetite ColorCombos

LIpsum

Da li ima neko ko ne zna veoma popularni Lorem Ipsum tekst? Ovaj tekst se koristi od strane web dizajnera u celom svetu kako bi simulirali renderovanje stvarnog teksta u okviru svog dizajna. Lipsum.com vam omogućava da kreirate željeni broj paragrafa pomenutog teksta lako i brzo.

Posetite LIpsum

What the font?

Definitivno jedan od mojih omiljenih. Upravo ste videli logo ili website koji koristi određeni font i jako vam se svideo. Naravno voleli biste baš isti takav na svom sajtu…ali ne znate kako se zove. U ovoj situaciji imate dve opcije: pretraživati internet za istim ili bar sličnim fontom ili da koristite What the font servis. What the font vam dozvoljava da uploadujete logo ili sliku koja sadrži font i reći će vam koji je to font. Rezultati su neverovatni.

Posetite WhatTheFont

ConvertIcon

Favicon je obavezan detalj svakog web sajta, uglavnom zato što u modernim browserima kao što je Firefox npr. može biti prikazan pored naslova sajta u tabu. Takođe se pojavljuje i u bookmarks meniju. Favicon može biti u različitim formatima uključujući popularni .png. Jedini problem je što Internet explorer neće prikazati favicon koji je u .png formatu. Na sreću postoji ConvertIcon, besplatan online servis na kojem možete uploadovati fotografiju i dobiti .ico fajl, kako bi podržali sve browsere.

Posetite ConvertIcon

BgPatterns

Pozadine sa paternima su definitivno jedan od trendova danas u web dizajnu. Na BgPatterns.com, možete pretražiti veliku selekciju paterna koje možete besplatno upotrebiti u svom dizajnu.

Posetite BgPatterns

HTML encoder

Da li prikazujete kod na svom web sajtu? Ako je odgovor potvrdan onda verovatno znate kako to dosadno može da bude. Morate da otkucate &lt; da biste prikazali <. Ako morate da prikažete 50 linija koda to može da potraje. HTML Converter uzima kod i vraća vam isti samo konvertovan u HTML entitete.

Posetite HTML encoder

Xenocode Browsers

Xenocode Browsers je verovatno jedan od najvažnijih alata kojim možete proveriti rad svog web sajta u različitim browserima. Xenocode Browsers vam dozvoljava da pokrenete IE6, IE7, IE8, Firefox 2, Firefox 3, Google Chrome i Operu direktno sa weba. Jedina slaba tačka servisa: Ne radi na Mac-u i GNU/Linux PC računarima.

Posetite Xenocode Browsers

Test Everything

Da li ste nekad poželeli da testirate svoj dizajn u mnogo različitih browsera, da proverite PageRank, čak i da proverite svoj kod sve na jednom mestu? Ako imate potrebu za tim, Test Everything je mesto za vas. U njemu je uključeno više od 100 različitih alata koji testiraju skoro sve na web strani.

Posetite Test Everything

Sprite Generator

CSS Sprites je tehnika koja je definitvno jako korisna, pre svega smanjuje broj HTTP request-a. Mada, CSS sprites zahteva vreme i posebno znanje, što je, čini se, po malo teško za primeniti, naročito za početnike. Fantastičan Sprite generator vam omogućava da pošaljete zip fajl koji sadrži vaše slike. Servis će vam vratiti slike ali kombinovane u sprite i još bolje CSS kod koji ćete samo prekopirati u svoj glavni CSS fajl.

Posetite Sprite Generator

Buttonator

Lepi dugmići su jedan od obaveznih delova svakog sajta ili bloga. Ako nemate dovoljno veštine ili vremena da kreirate kul dugmiće evo adrese za vas: Buttonator je napredan generator dugmića koji možete koristiti potpuno besplatno.

Load Impact

Postoji jako puno slučajeva da sajtovi padnu kada se objavi link ka njemu na front page-u popularnih sajtova kao što je Digg ili StumbleUpon. Besplatan Load Impact servis će vam dozvoliti da testirate kako će vaš web sajt podneti iznenadnu eksploziju poseta. Rezultati na sajtovima hostovanim na Adriahost-u su bili odlični.

Posetite Load Impact

IconFinder

Naravno jedan od obaveznih stvari na web sajtu su dobre ikonice.Postoji pregršt besplatnih ikonica koje se mogu pronaći na webu, pa su ljudi sa sajta IconFinder odlučili da naprave kolekciju besplatnih ikonica koje možete upotrebiti u svom dizajnu. Definitvno je lako pronaći ono što vam treba.

Posetite Icon Finder

Type Tester

Testiranje kako će se fontovi renderovati na vašoj web strani može ponekad  biti osetljiva operacija. TypeTester vam omogućava da testirate kako će fontovi i njihovi atributi izgledati. Definitivna ušteda vremena.

Posetite Type Tester

CSS Tidy

Čak i napredni developeri moraju ponekad da optimizuju svoj CSS kod. CSS Tidy je besplatna, online aplikacija koja će ispraviti greške i optimizovati vaš CSS. Na primer, može automatski detektovati redudantne stilove, veoma čest problem CSS kodova. Postoji dosta podešavanja koje će se postarati da budete zadovoljni rezultatima.

Posetite CSS tidy

Contact forms generators

Forme su veoma važan deo bilo kog web sajta, jer dozvoljavaju vašim korisnicima ili klijentima da interaguju sa vama. Korišćenjem Contact Forms Generator-a, uštedećete vreme koje vam je potrebno za kreiranje formi, uključujući PHP, ASP ili Perl kodove koji su vam potrebni za slanje emailova sa sajta u vaš inbox. Contact Forms Generator čak ne zahteva ni neko posebno programersko znanje.

Posetite Contact form generators

Izvor: catswhocode.com

Rich Internet Application tehnologija nam je dala moć da kreiramo čudesne aplikacije koje zadivljuju njihove korisnike. Najbolje RI aplikacije na webu danas se oslanjaju na diskretni set kontrolera korisničkog interfejsa kako bi omogućile real time uživanje svojim korisnicima. Ako prelazite sa web dizajna na dizajn web aplikacija, najbolju informaciju koju možete imati na raspolaganju jeste razumevanje ovih ključnih kontrola.

Popularne RIA biblioteke, alati i frejmvorci

Većina ovih biblioteka, alata i frejmvorka imaju online galeriju kontrola (takođe nazvane komponentama, vidžetima, UI kontrolama) koje biste mogli da pregledate. Zašto? Kako ne biste bili jedan od onih dizajnera koji će napraviti gomilu lepih sličica u Photoshop-u ili Illustrator-u koje se ne mogu implementirati ili čija implementacija je previše skupa da bi se kodirala onako kako je dizajnirana.

• Ext JS
• Adobe Flex/AIR
• JQuery UI
• Dojo
• OpenLaszlo
• MooTools (plugins), JXLib for MooTools,Mocha UI
• Vaadin
• Telerik for ASP.net,Telerik for Silverlight
• ZK
• Google Web Toolkit ,GWT Ext
• YUI 2 , YUI 3
• LivePipe
• Backbase
• SmartClient
• Prototype, Prototype UI and Scriptaculous
• RichFaces
• ICEFaces

43 ključne kontrole

Mnogi proizvodi su smešteni u okvir RIA frejmvorka koji koriste, pa dizajneri kreiraju nove komponente kada frejmvork nema ono što im je potrebno. Ovo može umanjiti upotrebljivost proivoda, a povećati trud dizajniranja, testiranja upotrebe, tehničku specifikaciju i vreme razvoja. Pre nego što podlegnete dizajniranju novih kontrola proučite šta je to što već postoji.

1. Auto popunjavanje / Auto predlaganje

Auto-popunjavanje koristeći Vaadin.

Omogućite automatsko popunjavanje polja ili automatsko predlaganje korisniku kako bi mu pomogli povećanjem efikasnosti i smanjili greške. Možete čak i formirati grupni i formatirani set predloga kao što to Apple radi.

2. Carousel/Coverflow

Carousel by Moving Boxes

Kontrole za pokretni sadržaj uključuju i takozvane carousel-e, coverflow-ove, slider-e i slideshow-ove i one su dostupne u skoro svim frejmvorcima.  JQuery ima ceo set pluginova za mnogo različitih varijacija jednostavnog carousel-a. Sve ove varijacije pružaju fino rešenje za pretraživanje i pregledavanje vizuelnog sadržaja. Zapamtite da dodate stop dugme i dugme za pauzu ukoliko planirate da implementirate auto-play.

3. Planer

Telerik RadScheduler za Silverlight

Potreban vam je dobar planer? Ne želite da pitate svoj razvojni tim da kodira ovakvu životinju.

Postoji dobar broj Ajax planera koji su dostupni online, a mogu da odrade posao uz malo CSS ljubavi. Flex, OpenLaszlo i Telerik Rad kontrole za Silverlight sada imaju i ovu kontrolu u sebi.

4. Grafikoni

Flash grafikoni na Discover Spend Analyzer-u

Neki frejmvorci uključuju grafikone kao npr. Ext JS, Flex, Telerik, i SmartClient. Ali postoje i Flash biblioteke koje se koriste upravo za ovaj vid prikaza statističkih podataka. Popularne biblioteke su AnyChart, Dundas, JFreeChart, amCharts, Visifire for Silverlight. Liste ovakvih biblioteka su dostupne online: 28 on InsideRIA i 70+ on TripWire.

5. Padajući paneli

Click here to view the embedded video.

6. Combobox: Multiselect

asmSelect, JQuery plugin

Umesto da prikazujete more checkbox-eva ili dosadan ctrl+shift+click list box, koristite kontrolu koja dozvoljava korisniku da vidi šta je izabrao. Ova kontrola funkcioniše i uklapa se odlično na stranama sa kriterijumima na levoj strani i rezultatima na desnoj. Nijedan frejmvork nema još uvek ovu kontrolu, ali postoji ovaj jQuery plugin.

7. Kalendar

MooTools plugin

Može vam se desiti situacija kada standardan kalendar nije dovoljan. Većina pomenutih frejmvorka podržavaju jednu ili više naprednih opcija vezaznih za kalendar: izbor perioda, datum i vreme, pregled više meseci uporedo, i datume koje treba isključiti.

8. Dijagramer

<

KapIT dijagramer

Napredna kontrola koja omogućava korišćenje dijagrama, flow chart-ova, organizacionih mapa, dijagrama procesa itd. yFiles ima verziju za Flex, .Net i Ajax. KapITLabs ima Flex/Flash veriju koja je dostupna.

9. Dijalog

Picnik Modeless Dialog

Postoji puno varijacija dijalog kontrole: lightbox, modal dijalozi, modeless dijalozi i hover dijalozi. Svi frejmvorci nude bar jednu verziju dijaloga.

10. Skraćeni paneli i paleti sa alatima

Click here to view the embedded video.

Skraćeni paneli i palete sa alatima su nezamenljive kontrole za maksimizovanje ili podešavanje radnog okruženja gde prostor nije toliko veliki.

11. Drag and drop menadžer

Click here to view the embedded video.

Ako vaš dizajn zahteva drag and drop, pogledajte Interaction Matrix Billa Scotta. Onda probajte Ext JS organizer demo, dizajn im je zakon. Jedina stvar koja fali je ruka preko slike.

12. Dinamički filter

Click here to view the embedded video.

Dinamički filter može raditi dobro sa listama, mrežama i kolonama u okviru mreže. Saznali smo da filtering u okviru kolone u tabeli može da obezbedi moćne opcije za korisnike koji rade sa velikom količinom podataka. Idealno bi trebalo da postoji clear dugme u okviru polja za unos kako bi se očistio uneti tekst. Ova kontrola se može dodati u okviru frejmvorka i u slučaju kada ta opcija po default-u ne postoji.

13. Feedback

Click here to view the embedded video.

U svakom trenutku morate imati feedback: greške, info, statusne poruke i saveti. Stavite feedback na vrh svoje strane ili u blizini akcije. Izbegavajte da koristite status bar u web browser-u jer ga mnogi ljudi sakriju. Ako u feedback-u koristite fade-in ili fade-out ispratite pravilo od dve sekunde.

14. Fisheye

Click here to view the embedded video.

Ovo je jedan pravi primer fisheye efekta koji se može naći na web-u. Elegantna opcija koja omogućava pogled iz bliza. Vrlo upotrebljiva za mape ili veoma velike grafike. Alternative ovoj opciji su Zoom, Pan i Magnify.

15. Potanjajući footer

Footer na Facebook-u

Potanjajući footer (ili header kao thesixtyone) moglo bi da bude dobro rešenje za prikaz opcija u akciji. Većina pomenutih frejmvorka imaju način kako ovaj efekat može da se kodira. Asp.net Ajax ima demo koji prikazuje ovu kontrolu.

16. Gantogram

Gantt na Tour de Flex-u

Povremeno se javlja potreba za upotrebom gantograma, uglavnom za planiranje aktivnosti. EyeBlaster Campaign Manager je pronašao način kako da napravi kontrolnu tablu na kojoj se može pratiti kampanja koristeći gantogram. Kao i kod ranijih primera i kod ove kontrole su najbolji oni primeri koji su već kodirani. ILog Elixir ima jedan za Flex, a postoji i jedan broj ranijih verzija pisanih u Ajax-u.

17. Uvećavajuće tekstualno polje

Click here to view the embedded video.

Ne znate koliko će korisnik da otkuca teksta? Počnite sa nekom razumnom veličinom i dalje neka prostor raste sam. Obratite se Facebook-u za još jedan live primer.

18. Hotkeys/prečice na tastaturi

Prečice na tastaturi na Noteflight-u

Noteflight čini rad lakšim omogućavajući prečice na tastaturi.

Zar ne želite da i vaši korisnici kažu to isto i za vas? Ono što je još važnije. da li želite da čujete šta imaju da kažu kad im ne omogućite prečice na tastauri? Ne bi bilo prijatno…

19. Hover akcije

MockLinkr koristi hover da linkuje, komentariše ili da obriše hotspot

Hover je odlična alternativa ponavljanju jednog istog dugmeta nebrojeno puta. Svi frejmvorci podržavaju mogućnost da se kodira hover akcija koristeći CSS. Zapamtite da naznačite da ova akcija postoji.

20. Hover detalji

Click here to view the embedded video.

Prikazivanje dodatnih detalja na hoveru je odličan način da se ostane na strani. Izbegavajte anti patern hover and cover (ne prikazujte detalje preko primarne akcije).

Radi najbolje sa read-only podacima. Ako imate polja za unos, tabove ili neke druge heavy interakcije koristite dijalog, inlay panel ili overlay panel. Ako morate da prikažete link u svojim hover detaljima podesite timer tako da korisniku date dovoljno vremena da na isti klikne pre nego što sve nestane.

21. Inline editovanje

Inline editovanje na FLickr-u

Razmislite o aplikaciji koju dizajnirate – da li je optimizujete za unos ili za čitanje podataka? Ako aplikaciju optimizujete za čitanje, inline editovanje može da vam pomogne da otklonite svo vizuelno ometanje od strane polja za unos. Neki od frejmvorka podržavaju ovu mogućnost po defaultu – pogledajte njihov CSS i JS. Ovo je neprocenjiva kontrola koja povećava efikasnost i održava tok korisnika kroz aplikaciju. Za napredno razvijanje aplikacije – ako već imate događaje koji su vezani za polja, imitirajte inline editovanje koje se dešava na vašem desktopu – klik jednom za izbor objekta, kada se klikne još jednom na isti objekat ulazi se u edit mod. (imajte na umu da je ovo drugačije od duplog klika).

22. Liste: Napredno

Drag and drop na Tick-u

Kao što očekujemo više od tabela i drveta od onoga što su ti objekti radili u Web 1.0, liste moraju da se takođe ponašaju naprednije. Drag and drop, jednostavno pravljenje liste, custom formatiranje i dinamički filteri su opcije koje mogu da učine vašu listu lakšom za korišćenje.

23. Uvećanje

jQZoom uvećava deo slike

Odlična alternativa otvaranju dijaloga, kontrola za uvećavanje prikazuje uvećanu verziju oblasti u kojoj se nalazi miš. Par frejmvorka nudi ovu opciju po defaultu, ali ona može biti naknadno dodata. Pogledajte ‘Fisheye’ i ‘Zoom i Pan’ za neke ideje.

24. Mapiranje

GWT- Ext Maps Showcase

Mnoge aplikacije imaju potrebu da integrišu mape, kao što to radi Google ili Yahoo maps, Google Web Toolkit -Ext Showcase ima veći broj dobro dizajniranih varijacija na ovu temu koje vredi pogledati, sa druge strane ima ih i  Flex – tražite “maps” u  Tour de Flex-u.

25. Interfejs sa više dokumenata

Click here to view the embedded video.

Neke aplikacije su pogodne za MDI (Interfejs sa više dokumenata). MochaUI frejmvork, kao i par drugih, omogućava ovu kontrolu. Pre nego što krenete ovim putem procenite funkcionalnost tabova u svom browseru.

26. Portali

Portal demo na GWT-Ext Showcase-u

Portal layout može biti dobro rešenje za dizajn landing strane, gde korisnik želi da vidi sadržaj u određenom formatu i konfiguraciji. Ali zapamtite, omogućavanje visokog stepena customizacije nije zamena za korisnikovu pretragu i testiranje.

BBC i Netvibes imaju jako dobro dizajnirane portale sa kojima se možete igrati.

27. Bar za učitavanje

Bar za učitavanje na Discover Spend Analyzer-u

Indikator progresa može biti bilo šta od bara za učitavanje, preko ikonica koje se okreću do zauzetih kursora. Najbolje je da pogledate kako druge dobre RI i desktop aplikacije prikazuju progres pri učitavanju u situacijama koje su slične vašem.

28. Ocenjivanje

Ajax ocenjivanje

Ocenjivanje je slično inline editovanju, dozvoljava korisniku da brzo i efikasno unese informacije bez napuštanja strane ili prelaska na drugi sadržaj.

Ocenjivanje ne treba mešati sa redosledom koja bi koristila naprednu listu gde bi korisniku bilo omogućeno da redosled objekata u listi menjaju prevlačenjem istih.

29. Lociranje rekorda/Paginacija

Paginacija na Ext JS-u

Većina tabela i layout-a bi trebalo da koriste live/virtuelno skrolovanje za navigaciju. Međutim postoji dosta mesta gde bi paginacija bila jako korisna, pa je možete i iskoristiti. Na primer otvaranje nekog rekorda bi moglo da uključi i paginaciju kojom bi korisnik mogao da pređe i na druge rekorde.

30. Bilder pravila

Napredni filter sa SmartClient-a

Ovo je za svaku aplikaciju uvek predstavljalo prenatrpanost, medjutim ako dizajnirate naprednu analizu podataka, alate za pretragu i izveštavanje najverovatnije će vam ova opcija biti neophodna. SmartClient Ajax RIA sistem ima upravo tako nešto i očekuje da ostali frejmvorci uključe ovu kontrolu u svoj paket sada kada je iTunes predstavio sličnu opciju.

31. Slajder

Primer slajdera

Slajder je pogodna kontrola kada ljudi biraju okvirne vrednosti npr. glasnije ili tiše, više ili niže vrednosti ili opsege. Ova kontrola nije najbolje rešenje kada se biraju određene vrednosti, kako npr. 37% ili 211 dinara. Ako koristite slajder izaberite onaj kojim se može upravljati preko tastature i koji ima pored sebe polje za unos kako bi korisnik mogao da unese željenu vrednost.

32. Pretraživanje po oblastima

Primer pretrage po oblastima

Omogućite svojim korisnicima da lakše dođu do sadržaja koji žele koristeći pretragu po oblastima. Postarajte se da je to opcija koja ne smeta kucanju u okviru polja za unos. namestite default vrednost “Sve” npr. i dozvolite im da izaberu neku drugu oblast u okviru koje se sadržaj može nalaziti. Janko je predstavio fin tutorijal implementiranje ove opcije koristeći CSS.

33. Sparklines

Sparklines na Google Analytics-u

Sparklines su odličan način prikazivanja trenda ili oblika podata na malom prostoru. Kreirane su od strane maga za vizuelno prikazivanje podataka, Edward-a Tufte-a.

Postoji veliki broj biblioteka koje podržavaju ovu kontrolu u Ajax-u, Flex-u, Silverlight-u.

34. Spliter

Click here to view the embedded video.

Spliter omogućava korisniku da podesi layout. Zapamtite da prikžete odgovarajuće kursore pri hoveru ili prevlačenju. Drugi dobri primeri su Google Reader i desktop aplikacije kao npr. Windows Explorer ili iTunes.

35. Tabovi: Napredno

Click here to view the embedded video.

Pre nego što se odlučite za implementaciju tabova pročitajte članak Tabs Used Right koji je napisao Jakob Nielsen. Tabovi se koriste za promenu sadržaja istog konteksta.

36. Tabela/Mreža: Napredno

Mreže na ExtJS-u

Kada dizajnirate mrežu držite se standarda. Uglavnom sve što vašim korisnicima treba je već dizajnirano. ExtJS ima jako dobaro dizajniranu mrežu sa dosta naprednih funkcija, kao npr.: live skrol, promena veličine hedera ili promena mesta hederima, sortiranje, sakrivanje i prikaz kolona, grupisanje redova, inline editovanje i izbor reda. Nemojte praviti svoju mrežu – trebaće vam stotine sati da kodirate i testirate kako bi radio u svim browserima.

37. Stablo: Napredno

Click here to view the embedded video.

Ako vaš dizajn zahteva stablo, koristite ono koje je napredno. ExtJS i Flex imaju najbolja stabla sa kompletnim funkcionalnostima za dodavanje čvorova, inline editovanje i prevlačenje čvorova kako bi ih reorganizovali. Pogledajte takođe ‘Vertikalno pretraživanje’ kao opciju za navigaciju kroz hijerarhiju stabla iz bilo kojeg čvora.

38. Toolbar

Kontekstualni toolbar u Buzzword-u

Toolbar je obavezan deo u skoro svakom dizajnu koja se zasniva na mreži podataka. Bulk akcije mogu biti smeštene u toolbar, kao i globalne akcije, npr. Print, Export itd. Izbegavajte toolbar i meni sa padajućim menijima. Eksperimentičite umesto toga sa naprenijim kontrolama kao što su “Hover akcije” ili “Inleni editing” Probajte da ponudite direktnije interakcije, a manje navigacije.

Kontekstualni toolbar-ovi su još jedna naprednija kontrola. Oni prikazuju opcije u zavisnosti od od konteksta strane na kojoj se pojavljuju, umesto da prikazuju sve odjednom. Picnik ima najbolje kontekstualne toolbarove koje sam do sada video.

39. Saveti: Napredno

MooTools plugin

Napredni saveti mogu da imaju u sebi širok spektar opcija za formatiranje. Pogledajte ‘Hover detalje’ za više informacija o hoveru.

40. Vertikalni browser

Vertikalni browser za Apple Dashboard Widget-e

Koncizna kontrola koje omogućava korisniku da odabere polaznu tačku iz koje će dalje ići kroz hijerarhiju. Može biti napravljena povezivanjem lista u većini frejmvorka. Imajte u vidu da uvek prikažete putanju do izabranog objekta u listi.

41. Promena izgleda

Izbor broja ikona po strani na Icon Finder-u

Ova kontrola predstavlja mogućnost izbora izgleda, recimo tabela ili grafik ili predstavljanje opcija kao što je 10, 20 ili 50 rezultata po strani. Može biti kreirana u bilo kom od pomenutih frejmvorka. Postarajte se da se izabrana opcija vizuelno razlikuje od ostalih.

42. WYSIWYG / Text editor

YUI 2 Text Editor

Za sastavljanje ili izmenu velike količine teksta WYSIWYG editor nudi alate koje ljudi očekuju. Većina frejmvorka uključuju ovu kontrolu sa opcijama koje se mogu prilagođavati. CMS-ovi su sada jako aktuelni i oni su integrisali ove text editore, pogledajte InContext i Drupal redesign.

43. Zoom i Pan

Click here to view the embedded video.

Ne morate da znate kako da kodirate ove kontrole – dovoljno je da znate da ova kontrola postoji i kako je najbolje iskoristiti je. Možete zamisliti scenario gde umesto da detaljno sve objašnjavate samo kažete “To je isto kao što BBC koristi opciju za prilagođavanje home strane svog portala” i “JQuery ima odličan plugin za to”. Razmislite o vremenu koje ćete uštedeti i kredibilitet koji ćete dobiti od strane svog tima.

U slučaju mapa ili fotografija panning može zameniti skrolovanje i ponuditi prirodniji utisak prelaženja po informacijama. Pogledajte takođe ‘Uvećavanje’ i ‘Fisheye’ za druge tehnike.

Izvor: www.uxbooth.com

Joomla, nekada pod nazivom Mambo, je jedan od najpopularnijih open-source Content Management Sistema (CMS). Kao što je to slučaj sa većinom open-source rešenja, postoji i gomila besplatnih alata koje možete koristiti. Napravili smo izbor od preko 30 korisnih ekstenzija i drugih alata koji će vaš Joomla život učiniti jednostavnijim. Uživajte.

Ne zaboravite da nakon ovog pogledate i ostale interesantne članke na našem blogu. 

Ekstenzije

iJoomla.com – Nudi miks besplatnih i komercijalnih ekstenzija za vaš sajt

Joomla-Addons.org – Veliki izbor besplatnih addon-ova z Joomlu

JoomlaHacks.com – Velika kolekcija besplatnih modula i templejta

JoomlaShowroom.com – Dizajniranje ekstenzija za poslovne sajtove koji su rađeni u Joomli

JoomlaSpan.com – Izbor komercijalnih ekstenzija i monitoring servis

Resursi

HowToJoomla.net – blog koji je posvećen Joomli i svemu što ona nudi. Postoji dosta saveta i trikova za napredne korisnike.

Joomla.org – Home page open source sistema sa arhivom od 2,200 ekstenzija, forumom i delom za developere

JoomlaBased.com – Postavite svoj sajt i dobijte ocene i komentare

JoomlaCode.org – Sajt koji je pogodan za developere koji žele da razviju projekat zasnovan na Joomla kodu

JoomLancers.com – Sajt za ljude kojima je potreban freelancer za rad u Joomli

JoomlaSpots.com – Upišite svoj sajt zasnovan na Joomli u ovaj direktorijum da bi bio primećeniji

JoomlaTribune.com – Zbir vesti i resursa iz cele Joomla zajednice

JoomlaTutorials.com – Kao što samo ime kaže, velika količina tutorijala za Joomlu

JoomlaZone.net – Sajt sa ciljem da skupi sve Joomla sajtove na jedno umesto u jedinstveni direktorijum

Templejti

CompassDesigns.net – Profesionalni dizajneri templejta sa gotovim rešenjima. Sajt takođe ima i besplatne tutorijale

Gavick.com – Dizajner na području Evrope koji radi profesionalne templejte sa malim izborom onih koji su besplatni

IbolDesign.com – Kolekcija besplatnih Joomla templejta

Joomla-Themes.co.uk – Vesti i ocene svih najnovijih tema u Joomla svetu

Joomlart.com – Templejt klub gde dobijate odmah 40 templejta i 2 mesečno u narednih godinu dana

JoomlaJunkie.com – Kompanija za izradu profesionalnih templejta za Joomlu koja voli da se fokusira na boju. Nudi i mali izbor besplatnih templejta.

JoomlaShack.com – Nudi mali izbor besplatnih templejta i još dosta onih koji su komercijalni.  Takođe poseduje tutorijale i forum.

PixelParadise.com – Nudi preko 60 komercijalnih templejta.

RocketTheme.com – Još jedan templejt klub koji vam nudi 45 templejta nakon učlanjenja, a nakon toga 1 mesečno narednih godinu dana. Nudi i mali izbor besplatnih templejta.

Shape5.com – Nudi mešavinu komercijalnih i besplatnih templejta i modula

Izvor: www.mashable.com

Nazad u 2005. godini postavili ste svoj biznis online koristeći najnovije i najmodernije eCommerce tehnologije. Danas, skoro pola decenije kasnije, vaš web sajt se još uvek provlači, ali taj lejer digitalne farbe polako počinje da pokazuje znake starenja.

Da li vam ova priča zvuči poznato?

Standardi, stilovi i najbolja praktična rešenja se na web-u menjaju svetlosnom brzinom i iako vaš sajt jeste i dalje potpuno funkcionalan vaši klijenti i potencijalni saradnici odlaze sa njega, a vi nemate pravi razlog zašto se to dešava. Evo 5 pitanja koje treba da postavite sebi da biste saznali da li je vašem sajtu potreban redizajn.

Pitanje 1: Po pitanju brzine, koliko se brzo učitava vaš sajt? Naporno ste radili kako bi svoje posetioce doveli do vrata svog web sajta – nemojte ih uspavati beskonačnim učitavanjem. Bezbroj studija je sprovedeno i svi su pokazali jedan zajednički rezultat: Više vremena za učitavanje = Manje posetilaca = Manje posla.

Studija koju je sproveo Akamai 2006-te godine pokazuje da ako je vašem sajtu potrebno duže od 4 sekunde da se učita 33% posetilaca odnosno jedna trećina će napustiti sajt. Amazon je otkrio da 100ms dodatnog vremena potrebnog za učitavanje strane smanjuje prodaju za 1%, dok Google smatra da povećanje vremena za učitavanje od 500ms rezultira opadanjem posete za oko 20%.

Kako god da proučavate ove brojeve jedno je sigurno, vaš sajt mora da se učita brzo. Pokušajte da optimizujete svoj sajt tako što ćete pre svega optimizovati svoje slike za web, agregirajte i prečistite svoj CSS i otklonite nepotrebni sadržaj kako biste smanjili nepotrebne HTTP zahteve. Možete i da pokušate da promenite hosting kompaniju ukoliko problem sa učitavanjem nastavi da se pojavljuje.

Pitanje 2: Da li vašem sajtu nedostaje doslednost? Iako se čini da nije tako, doslednost u ključnim elementima na vašem sajtu je neophodna.  Elementi kao što je navigacija, font i boja fonta, URL format moraju da budu u skladu i istom stilu kroz ceo sajt, jer to pokazuje vašu profesionalnost i privrženost detaljima kada vodite posao.

Ako je vaš sajt prepun grešaka u kucanju, različitih veličina fonta, slika koje se ne učitavaju ne samo da će to umanjiti kredibilitet vašeg sajta već može da ima i negativan uticaj na SEO strategiju, što će na kraju dovesti do manje prodaje.

Sajtovi kao što su Yahoo, eBay i BBC imaju na stotine, ako ne i hiljade strana online u svakom trenutku, a opet sve te strane imaju isti izgled, dizajn i stil. Prođite sajt, hvatajte beleške, proučite da li vaš sajt ima svoju konzistentnost kao što to imaju prvoligaši.

Pitanje 3: Da li je vaš web sajt natrpan informacijama? Nemojte da pokušavate da odjednom bacate tekst, slike, ikonice, dugmiće, reklame ili šta god na vašeg posetioca. Prenatrpanost informacijama će vas sprečiti da iznesete na površinu najvažnije informacije, a vaš posetilac će morati da se probije kroz gomilu đubeta da bi došao do njih. Bićete zapanjeni koliko oko može da zanemari informacije koje su bitne ukoliko nisu jasno prikazane. Pogledajte ovaj haos

Da se ne bi držali samo negativnih primera evo jednog korisnog linka kako biste shvatili različite hijerarhije podataka koje se u današnje vreme koriste. Dok čitate pokušajte da razmislite kako su informacije organizovane na vašem sajtu. Rapoređivanjem informacija po nekom od ovih arhitektura ne samo da će vam dovesti više posetilaca već i više kupaca.

Pitanje 4: Da li je vaš sajt old school? Nisu samo tehnologije deo weba koji napreduje jako brzo, stil takođe evoluira. Koji god da je stil bio fancy u ’05 danas više nije.

Kao i frizura, web sajtovi stare. Ono što je bilo cool pre par godina danas se tretira kao passe. Ponekad je ovo posledica trendova u dizajnu – npr. 3D dugmići i interfejsi koji su bili tako popularni pre par godina kada su grafički alati omogućili laku izradu takvih efekata. Drugi razlog je sazrevanje web-a i činjenice da web dizajneri bolje shvataju šta posetioci žele. Na primer Flash intro je bio tako cool dok web dizajneri nisu shvatili da ljudi to ne vole već žele da idu odmah na glavni sadržaj. Ispotavilo se da je flash intro na web sajtu nepotreban i da nema svrhe stavljati ga.

Pitanje 5: Da li se vaš sajt renderuje perfektno? Pod perfektnim, mislim na stvarno perfektno, u svim browser-ima, na svim operativnim sistemima i na svim platformama bez teksta koji prelaze jedan pre drugog, dodatnih skrolova itd. Vi svakako ne želite da degradirate svog korisnika na osnovu izbora browser-a, bez obzira da li se radi o Internet Exploreru na Windows-u, Firefoxu na MAC-u ili  Safariju na iPhone-u.

Naravno ovo ne znači da morate da instalirate sve moguće browser-e ikad proizvedene. Evo jednog korisnog linka sa alatima koji bi vam mogli biti od koristi. Koristeći neki od ovih alata možete da bacite pogled na to kako vaš sajt izgleda „u cipelama“ vašeg korisnika – bićete zapanjeni rezultatima.

Kako je vaš sajt prošao ovo kratko ispitivanje i testiranje? Nemojte se plašiti, bez obzira da li se radi o manjim, većim promenama ili pak o promeni hostinga, kod nas možete naći sve što vam treba.  Adriatek vam je uvek na raspolaganju. Mi smo tu zbog vas.

Izvor: www.elance.com

Jako je važno za svakog web dizajnera da ima osnovno znanje o SE optimizaciji. Koliko web dizajnera kada radi na layout-u strane razmišlja o SE optimizaciji? Koliko web dizajnera zaista zna važnost page ranking-a? Koliko njih zna da veliko korišćenje Ajax-a može negativno da utiče na ranking jedne web strane?

Svaki web dizajner ili web developer bi trebalo da zna SE optimizaciju. Ok, ne mora da zna sve tajne koje se nalaze iza search engine optimizacije, ali posedovanje nekih osnovnih znanja Vam može mnogo pomoći u poslu, kao i da povećate zadovoljstvo svojih klijenata.

Objasniti SEO u jednom postu je nemoguće, ali postoji par saveta, alata i predloga za dobru optimizaciju jedne web strane koje svko može da primeni.

Koristite Google web master tools

Ovo spada pod obavezno! Google web master central poseduje najbolje alate koji će Vam pomoći da poboljšate posetu na svom web sajtu. Možete da uploadujete mapu sajta (xml), da uradite monitoring svog sajta, keyworda, rankinga i mnogih drugih faktora koji utiču na posetu web strane. Ako razvijate web sajt toplo preporučujem registrovanje google naloga i korišćenje istog.

Pronađite prave keyworde

Pronalazak pravih keyworda koji opisuju šta u stvari sadrži Vaša strana je jedan od glavnih delova SEO toka. Obično od korisnika dolaze najbolji predlozi šta staviti kao keyword, ali na internetu postoji puno alata koji mogu da Vam pomognu da pronađete prave keyworde za Vaš sajt, jedan od njih je i AdWords keywords tool.

Ovaj alat se jako puno koristi, da biste ga iskoristili za svoj sajt neophodno je da imate Google AdWords nalog (možete koristiti i webmaster tools nalog).

Keyword-i ili key fraze?

SEO svet se konstantno menja ili bolje reći evoluira, sa definitvnim umiranjem značaja keyword-a u meta tagu i evoluiranjem korisnika interneta, key fraze (keyphrases) imaju sve veću upotrebu pored keyword-a. Više reči na ovu temu možete naći na ovom linku.

Izaberite pravi domen

Izbor domena je jako bitna stvar ili bolje rečeno bitno je da u domenu imate bar jedan keyword. Ovo će povećati rank za taj keyword. Probajte da izaberete ime domena razmišljajući o keyword-ima koje ćete koristiti za promociju svog sajta.  Možete pročitati par saveta na ovom linku. Ukoliko Vam sve ovo deluje preteško, mi smo tu za Vas, naši stručnjaci će Vam pomoći da pri registraciji kod nas izaberete pravi domen za sebe i svog novog Web ljubimca.

Google trends

Google trends je još jedan alat koji predstavlja dobar način praćenja trendova pretrage u okviru zemlje gde Vaš sajt ima primenu.

Title tag

Title tag je definitivno najvažniji tag, keyword-i i key fraze bi trebalo da budu u ovom tagu. Title ne bi trebalo da sadrži više od 60 karatkera i treba da opisuje web stranu, relevantnost keyword-a u title-u je jako važna za većinu najčešće korišćenih preraživača.

Napišite kratak, ali dobar opis, za svaku stranu, pri tome pokušajte da objasnite šta je svrha te strane. Ovo nije toliko važno za ranking, ali je sigurno tag koji treba uzeti u obzir jer može povećati broj poseta i privući više posetilaca.

Layout i SEO

Da li može layout da utiče na ranking? Da, s toga obratite pažnju kada kreirate layout i zapamtite prvo pravilo SE optimizacije: Sadržaj je car.

Klasični layout sa dve kolone je savršen za SEO! Daje sadržaju prioritet, u source kodu takođe i sidebar ide posle sadržaja. Ovo je jedan od razloga zašto je WordPress postao search engine friendly blog.

Pišite kod koji je ispravan i semantički tačan

Ispravan i semantički tačan kod pomaže google crawleru da bolje čita i interpretira stranu. Iz svega toga proizilazi veći ranking za Vaš sajt.

Imena za id ili klasu u okviru DIV-a su jako važni i relevantni, pokušajte da uvek koristite pravo ime za ovo. Na primer:

<div id="header"></div> je mnogo bolje nego <div id="head"></div>

Za navigacioni meni mnogo je bolje koristiti:

<div id="nav"></div> nego <div id="meni"></div>

Koristite alt opciju za slike, unesite kratak opis ili bar ime slike, a za meni uvek koristite <ul> tag:

<ul>

<li><a href=”#”>text link</a></li>

<li><a href=”#”>text link</a></li>

<li><a href=”#”>text link</a></li>

</ul>

Koristite header, h1, h2, h3, em(emphasis) i bold za keyword-e. Ovo ne znači da treba da primenite bold na svaku reč u sadržaju, već da jednostavnom iskucanom tekstu date odgovarajući stil. Na primer h1 koristite za naslov, ne bi trebalo koristiti taj stil za ceo paragraf ili ne bi trebalod akoristite span tag listu u meniju kao što je primer iznad.

Napravite dobru internu strukturu linkova, linkovanja strana i koristite anchor text (vidljivi deo linka na strani) kao keyword.

<a href="about" title="Adriatek premium servisi za medije">Adriatek</a>

Anchor text je jako važan, kao i title, pa se zato trudite kad god je to moguće da u njima koristite keyword-e.

Možete pogledati i interesantan članak pod nazivom Fast paper koji će Vam dati neke interesantne HTML  savete.

Brzina

Brzo učitavanje strane pomaže bot-u u procesu indeksiranja strane u njegovoj bazi. Čist kod, kompresija slika i eksterni zahtevi ka strani mogu uticati na brzinu web strane i na indeksiranje od strane bot-a.

Izbegnite splash stranu

Ukoliko nije neophodna izbegnite splash stranu.

Flash i Ajax

Prevelika upotreba Flash-a ili Ajaxa može dovesti do pada rankinga. Obratite pažnju da ne ikoristite pogrešno ove tehnologije.

Zaključak

Ovaj post je samo pregled onoga što se zove SEO. On nije dovoljan da se objasni multidimenzionalnost tog „sveta“, šta on predstavlja i kako ga implementirati na web stranu. Smisao ovog posta je da čitaoca navede da pri startovanju prvog sledećeg projekta obrati pažnju i na deo koji se zove search engine optimizacija.

Preuzeto u potpunosti sa http://woorkup.com

Istraživač koji koristi većinu svog vremena da sistematično analizira, upoređuje i predlaže šta bi, web izdavači i tradicionalne kompanije koje imaju svje prisustvo na web-u, mogli da urade da unaprede online komunikaciju je svetski priznati guru korisnosti Jakob Nielsen.

Evo šta gospodin Nielsen predlaže i kojih su to 10 Internet taktika za postizanje maksimalnog rezultata sa vašim uloženim novcem u trenutnu online komunikacijsku taktiku:

1. Newsletteri

Email newsletter vam dozvoljava da održite odnos sa vašim posetiocima tj. kupcima koja traje izvan regularne posete sajtu. Newsletter je savršen priključak websajtu, jer odgovara na jednu drugačiju potrebu korisnika: newsletter čini korisnika informisanim i u kontaktu sa kompanijom; websajt daje korisnicima detaljne informacije i pušta njih da izvrše poslovne transakcije.

Newsletter je dosta jeftin. Zahtevaju malu količinu tehnologije i ne smeju biti objavljivani prečesto. Ako nemate newsletter onda je kreiranje i objavljivanje jednog siguran korak ka profitu i poboljšanju vašeg prisustva na Internetu. Ako imate newsletter, onda bi unapređenje istog prema otkrićima istraživanja učinilo da on bude mnogo vredniji vašoj organizaciji.

Newsletter-i imaju još jednu prednost: oni su primarni način da oslobodite svoj sajt zavisnosti od pretraživača. Na duže staze ovo oslobođenje predstavlja jedan od najvažnijih strateških izazova sa kojima se Internet menadžeri sretnu.

2. Informativne strane sa proizvodima

Strane sa proizvodima na sajtovima online kupovine, marketing sajtovima i B2B sajtovima, oni svi pate od nedostatka informacija. Retko je videti opis nekog proizvoda koji budućem kupcu daje sve što mu je potrebno da napravi konačnu odluku o kupovini.

Nešto detaljnije o tome kako nedostatak informacija utiče na korisnost web sajta možete pročitati u našem članku (link ka prethodnom članku). Dizajniranje strana sa proizvodima prema potrebama korisnika je siguran način da se poveća prodaja u trenutku kada je korisnik dolaskom na sajt već izrazio interesovanje za kupovinu tog proizvoda.

Vama treba detaljni opis i podaci o proizvodu, ali napisano na način koji će biti razumljiv korisniku koji nije ekspert u vašoj oblasti. Na primer, ako prodajete laptop, ne budite kao Dell, pa da kažete ljudima ekran je „WSXGA+“. Umesto toga recite im da je 1680×1050 piksela. (Budite iskreni: Da li ste znali šta znači ova oznaka? A verovatno ste 5 puta veći geek od normalne osobe.) Ili još bolje, budite kao Apple, pokažite različite rezolucije tako da korisnici mogu da vide koliko je podataka vidljivo na svakoj od njih.

3. Fotografije visokog kvaliteta

Jedan od najjednostavnijih načina da poboljšate vašu stranu sa proizvodima jeste da postavite bolje fotografije. Kao glavnu sliku na vrhu strane pokažite najreprezentatvniju sliku u maloj veličini. Ispod toga ponudite nekoliko fotografija koje pokazuju proizvod iz različitih uglova koje prikazuju detalje. Takođe imajte u vidu i jednu od najčešćih grešaka u web dizajnu, a to je linkovanje sa male slike na sliku koja je malo veća od nje. Umesto toga linkujte ka slici koja je šo bliža full screen veličini.

Korišćenje velikih fotografija je možda kontradiktorno pravilu brzog odgovora pri skidanju web strane.  Ali postoji razlika izmedju web strane sa gomilom nebitnih slika koje se presporo učitavaju i prikazivanja velike slike pošto je korisnik tražio istu. U prvom slučaju se otežava rad, a u drugom čekanje je očekivano. Čekanje nikada nije dobordošlo, ali to je manji problem ukoliko je neophodno da se ostvari korisnički zahtev.

Velika mana online mediuma je što korisnik ne može da dodirne i oseti vaš proizvod. Ali dobra fotografija, uveličani delovi i detalji daju korisniku približnu sliku kvaliteta proizvoda koji nudite i to je ključno pri omogućavanju ljudima da se osećaju dobro dok kupuju online.

Ukoliko se radi o softveru ili online servisu prikažite screenshot u punoj rezoluciji umesto klasičnih fotografija.

4. Razlike u proizvodima i upoređivanja

Morate umanjiti strah korisnika da će kupiti pogrešan proizvod, ili će odložiti kupovinu i verovatno nikada neće kupiti na vašem sajtu.  Ako imate više poizvoda u istoj kategoriji, morate objasniti razlike između ponuđenih proizvoda tako da kupcu, koji nema nikakvo industrijsko predznanje, bude jasno zašto treba da kupi baš taj proizvod pored svih drugih u toj kategoriji.

Razlikovanje proizvoda je lakše kompanijama koje od početka nastoje da pojednostave svoju liniju proizvoda. Zašto ponuditi toliko puno različitih proizvoda sa praktično nikakvim razlikama? Na primer, Dell ima četiri različita modela laptop-ova: Inspiron, Latitude, Precision i XPS, od kojih je nekoliko dostupno u 6 različitih odvojenih linija. Ukoliko postoji jasna razlika između modela, na sajtu ona nije jasno objašnjena.

Čak iako imate malu i jasno definisanu liniju proizvoda morate njihove međusobne razlike da prikažete jasno na sajtu.

Alati za upoređivanje takođe mogu da pomognu korisnicima da se izaberu, s toga da prebrode paralizu pri odlučivanju i da pospeše prodaju. Ali ovakvi alati rade dobro samo kada prikazuju ključne razlike na koncizan i nedvosmislen način. Jako često web sajtovi izbace ogromen tabele sa specifikacijama pri čemu ne naznače mesta na kojima se dva proizvoda međusobno razlikuju.

5. Podrška ponovnoj porudžbini

Već je pomenuto da je najbolji način da se ostvari ponovni biznis newsletter, koji će naterati kupce da misle na vas čak i kad nisu spremni da kupuju. Kada budu spremni da potroše novac, znaće kome treba da se obrate.

Teranje ljudi da troše još novca, dovodi to lake pojave ponovne porudžbine. Ljudima često trebaju iste stvari iznova i iznova. Zašto ih u tom slučaju pustiti da idu 5 nivoa na dole na vašem sajtu da bi došli do iste stvari? U B2B, kupci obično žele da naruče roben zalihe, rezervne delove ili dodatke za opremu koju su već kupili, tako da biste trebali da olakšate takvu vrstu porudžbine.

Jedno manje istraživanje koje je sprovedeno u marketu koji je omogućavao kupcima da kupuju namirnice online pokazalo se da su kupci bili naročito oduševljeni činjenicom da mogu da se vrate na sajt i da kupe istu listu namirnica kao prošli put.

Ponovna porudžbina je stvar totalnog korisničkog doživljaja koji ide izvan korisničkog interfejsa web sajta.  Sklopite svoju liniju proizvoda razmišljajući ka ponovnim porudžbinama. Nastavite sa klasičnim proizvodima, tako dal judi mogu ponovo da naruče nove kopije stvari koje vole. Ako želite da lansirate novi proizvod postarajte se da bude istih veličina i parametara koji su slični.

Na primer, kupac koji je prošle godine kupio džemper bi trebalo da kupi isti model i ove godine u istoj veličini i da bude siguran da će mu isto tako dobro stajati. Držanje indentičnih veličina je mnogo važnije za veleprodaju nego za maloprodaju gde kupac može da proba ono što kupuje.

6. Pojednostavljen tekst

Možete udvostručiti korisnost web sajta tako što ćete jednostavno prekucati tekst u glavnom sadržaju. Bolje pisanje je verovatno drugo najvažnije poboljšanje koje možete da sprovedete na svom sajtu, ali se nalazi tako nisko na listi od 10 stvari jer to nije popravka koja se radi samo jednom. Morate angažovati dobre pisce za svaki svoj projekat, trenirati ih za pisanje za web, a onda sav njihov sadržaj dati još boljim urednicima koji imaju još više znanja o upotrebljivosti sadržaja.

Iako mogu biti skupi, urednici se uvek isplate.

7. Dostavljanje starijim osobama

Stariji ljudi čine segment Internet korisnika koji najbrže raste. U stvari, oni su jedini deo tržišta koji raste u bogatim zemljama. Mladi ljudi ukoliko žele nešto da dobiju online u glavnom već imaju online račune.

Mnogo starijih ljudi su bogati i imaju vremena. Kada im postane teško da se kreću okolo za raznoraznim proizvodima Internet postaje mesto gde oni troše svoje gomile ušteđenog novca. Stariji ljudi su takođe jako malo naklonjeni pirateriji i vrlo su lojalni.

Najbolje od svega je to što je na većini sajtova prisutna velika diskriminacija starijih osoba. Čak i sajtovi raznih Vlada koje bi trebalo da dotaknu i stariju grupu građana su dizajnirani više za ljude srednjih godina. Pošto je jako puno sajtova isuviše komplikovano za njih oni će pohrliti u posao sa vama ukoliko vi razumete i u popunosti ispunite njihove potrebe. (Te potrebe, ispostavilo da i nisu toliko strašne. Lakše je napraviti sajt za starije nego za osobe sa posebnim potrebama i ograničenjima plus ima mnogo više starijih ljudi i oni su uglavnom bogatiji.)

8. Davanje poklona

Lista sa željama i potvrda o poklonu su karakteristike koje su jeftine, a daju dobro uvećanje prodaje i privlače nove kupce.

9. Pretraga

Možda pretraga ne bi trebala da bude na ovoj listi; iako su koristi unapređivanja iste ogromni, investicije su jako velike, mnogo veće od drugih stvari koje su izlistane ovde. S toga cost/benefit razlika nije baš izvanredna kao za ostale preporuke koje su navedene ovde. Ali ipak je poželjna i treba poraditi na tome.

Korisnici generalno jako puno zavise od pretrage kao glavnog interfejsa na web-u. Dok pretraga radi poprilično dobro na nivou celog Interneta, na pojedinačnim sajtovima funkcioniše poprilično jadno.

Popravljanje pretrage na sajtu zahteva da kupite novi, bolji softver za pretragu, a onda i da ga prilagodite sadržaju sajta i upitima korisnika. Još gore, morate da ispravljate sadržaj tako da uopšte može biti pronađen. Na primer morate napisati smislene naslove strana tako da je korisnicima jasno šta će dobiti na toj strani kada kliknu na rezultat pretrage. Takođe morate pisati koristeći rečnik korisnika.

Ceo postupak je skup, ali sa druge strane poboljšava i vaš položaj prema eksternim pretraživačima. SEO je takođe jedna od jako uspešnih marketinških taktika na internetu. Ovoj e mnogo isplativije od ad-ova koje mnogi koriste i ne vide zbog „slepila prema banerima“.

10. Korisničko testiranje

Korisničko testiranje bi trebalo da bude na mestu broj 1 ove liste jer vam omogućava da svoj projekat postavite na pravo mesto bez skoro ikakvih investicija.

Iako je ovo jako nepopularno preporučljivo je uradite svoj korisnički test. Uvek postoje neki aspekti koji su jedinstveni za vašu industriju i ne mogu se rešiti čitanjem rezultata generalnih istraživanja. I zapamtite testiranje upotrebljivosti može biti prilično jeftino pogotovu ako koristite low cost projekat i on je u ranoj fazi svog razvoja.

Bonus taktika: Program lojalnosti

Program lojalnosti je nešto što nije široko prihvaćeno  i ne može se sa sigurnosti reći da je dokazano kao prava taktika na internetu. Zato je dodata kao bonus i nije u prvih 10. Program lojalnosti možete uzeti kao bonus ideju i način da Inernet uzvrati udarac serach engine mogulima i vrati vrednost web sajtovima koji su i napravili Internet u formi koju imamo danas.

Po nekim poslednjim istraživanjima primećeno je da sve više ljudi kada npr. kupuje online izabere sajtove ili samo jedan sajt na kojem kupuje i da će pre zabeležiti adresu tog sajta i vratiti se na njega nego pri svakoj kupovini ići ponovo na pretraživač.

Kako biste povećali lojalnost svojih kupaca, nagrađujte one koji su regularni kupci kod vas. Popusti i besplatna isporuka su standardne i očigledne ideje, ali web sajt je kompjuter i možemo ići izvan ovih standardnih pristupa. Na primer postoje proizvodi za koje uvek imamo ograničene zalihe i prodaju se samo kada su neki praznici u pitanju; dajte svojim standardnim korisnicima priliku da prvi dođu do tih proizvoda ili im pružite priliku da kupe taj proizvod pre nego što izađe u širu prodaju.

Usluživanje kupaca, a ne trčanje za slavom

Sve ideje koje su prezentovane ovde imaju jednu zajedničku stvar: one dodaju vrednost vašem sajtu tako što povećavaju vrednost za korisnika koji dolazi da ga poseti. Drugim rečima daju korisniku ono što želi i šta mu treba. Ove ideje nisu nove, u suštini predstavljaju osnovu svega. Korisnici žele da se vratite na osnove i uložite u jednostavne stvari koje im stvarno znače.

Dizajn interfejsa je zarađivanje para kompaniji.  Delovanje i znanje je ono što vam je neophodno, a ne dodatne fensi opcije. Uradite osnove i uradite ih dobro.

Izvor: www.masternewmedia.org

1. Naslov forma je najbolje postaviti iznad polja

Studija sajta UX matters pokazala je da je najbolja pozicija labele u formi iznad polja koje objašnjava. Na većini formi labele su smeštene levo od polja. Iako ovo izgleda dobro, ovo nije layout koji je najlakši za korišćenje. Zašto? Zato što su forme generalno vertikalno orijentisane; npr. korisnici popunjavaju formu od vrha ka dnu. S obzirom da korisnici popunjavaju formu idući na dole mnogo je lakše naći polje koje je ispod naslova nego polje koje se nalazi desno od istog.

Slika 1. - Primer dobre forme

Smeštanje labela na levu stranu takođe dovodi do još jednog problema: Da li ravnate labelu na levu ili desnu stranu? Ravnanje labele na levo čini formu preglednijom, ali je teško povezati koja labela se odnosi na koje polje. Ravnanje desno radi suprotno, forma je manje pregledna, ali bolje povezuje te elemente. Labele iznad polja su najbolje rešenje u oba slučaja. Studije takođe pokazuju da labele ne bi trebalo da budu boldovane, mada to je još uvek predmet dalje rasprave.

2. Korisnici se fokusiraju na lica

Ljudi instinktivno primete lica drugih ljudi kada ona uđu u vidokrug. Na Web stranama nastojimo da se fokusiramo na lica i oči ljudi, što marketerima daje dobru tehniku za privlačenje pažnje. Ali naša privučenost licem ili očima čoveka je samo početak, ispostavlja se da se naša pažnja preusmerava u pravcu u kojem gleda osoba na slici.

Slika 2. - Toplotna mapa privlačenja pogledom - beba gleda pravo u nas (UsableWorld study)

Slika 3. - Toplotna mapa privlačenja pogledom - beba gleda na sadržaj (UsableWorld study)

Evo jedne studije koja se bavila aspetkom lica i koliko ono privlači korisnike. Korisnik će biti privučen licem, ali primetićete da je pažnja u većoj meri dodata sadržaju onda kada lice gleda u tom smeru tj. u smeru sadržaja koji treba da bude primećen.

3. Kvalitet dizajna je indikator kredibiliteta

Različite studije su sprovedene kako bi se saznalo šta tačno utiče na ljudsku percepciju kredibiliteta jednog Web sajta.

Slika 4. - Ne znamo da li je Fever aplikacija dobra, ali uglađen korisnički interfejs i sajt daje dobar prvi utisak

Jedan interesantan zaključak ovih studija je da ljudi zapravo procenjuju knjigu po njenim koricama tj. u našem slučaj web sajt po njegovom dizajnu. Elementi kao što su layout, konzistentnost, tipografija, boja i stil utiču na to kako posetilac vidi vaš sajt i kakvu sliku projektujete. Vaš sajt ne treba samo da projektuje dobru sliku, već i onu koja je prava za vašeg posetioca.

Drugi faktori koji utiču na kredibilitet su: kvalitet sadržaja, količina grešaka, učestalost update-a, lakoća upotrebe i pouzdanost autora.

4. Većina korisnika NE skroluje

Studija koju sproveo Jakob Nielsen na temu koliko ljudi skroluju na web sajtu (Prioritizing Web Usability) otkrila je da samo 23% ljudi skroluje pri svojoj prvoj poseti web sajtu. Drugim rečima 77% posetilaca neće skrolovati, oni će samo pogledati sadržaj koji je vidljiv na stranici bez skrolovanja. Pored toga, procenat korisnika koji skroluju se smanjuje sa svakom sledećom posetom, pa tako imamo samo 16% njih koji skroluju pri drugoj poseti sajtu. Ovaj podatak je jako bitan i govori o tome koliko je važno da one podatke koji su ključni stavite na istaknutu poziciju, ovo je naročito bitno za landing page.

Ovo ne znači da treba sve da strpate na gornju polovinu strane već da treba taj prostor da iskoristite najpametnije moguće. Trpanje sadržaja na jedno mesto će učiniti da je isti nedostupan, jer kada korisnik vidi gomilu informacija neće znati odakle da počne.

Slika 5. - Primer dobro iskorišćenog prostora. Visina je 768 px, ima veliki screenshot, tag liniju, poziv na akciju, listu klijenata i malu listu sa slikama

Ovo je najvažnije za home page, gde će najveći broj novih korisnika doći. Dakle postavite sledeće neophodne elemente:

1. Ime sajta
2. Šta korisnik dobija od korišćenja istog
3. Navigaciju ka glavnom delu sajta koja je relevantna za korisnika

Međutim navike korisnika se menjaju vremenom. Studije koje su najnovije pokazuju da korisnici u nekim slučajevima hoće da skroluju ka dnu strane. Čak se pokazalo da im više odgovara da skroluju nego paginacija. Jednom dobrom delu korisnika nije najvažniji sadržaj a gornjem delu strane. Tako da je dobro stranicu podeliti u sekcije koje će biti lako uočljive i odvojene međusobno sa dosta belog prostora.

5. Plava je najbolja boja za linkove

Davanje sajtu jedinstven dizajn je odlično, ali kada govorimo o upotrebljivosti, raditi ono što svi ostali rade je uvek najbolje. Pratite konvencije, jer kada korisnik dođe na nov sajt prvo mesto gde će ražiti neki element je upravo ono mesto na kojem je video isti taj element, ali na većini drugih sajtova. Ovo je poznato kao korisnički paterni. Ljudi očekuju da određeni elementi budu isti, kao što je boja linkova, lokacija logoa sajta, ponašanje navigacije uz pomoć tagova itd.

Slika 6. - Google sa razlogom boji svoje linkove u plavo. Prepoznatljiva je većini korisnika i lako je uočljiva

Koje boje trebaju da budu vaši linkovi? U razmatranje prvo dolazi kontrast: linkovi trebaju da budu tamni ili svetli dovoljno da budu u kontrastu sa bojom pozadine. Drugo linkovi treba da budu izuzeti od boje ostatka teksta tj. bez crnih linkova sa crnim tekstom. I konačno istraživanja pokazuju da, ako vam je korisnost na prvom mestu, plava boja za linkove je najbolja. Default boja za linkove u browseru je plava, pa je s toga ljudi i očekuju. Staviti link u dugoj boji nije ni u kom slučaju problem, ali može da utiče na brzinu kojom će korisnik da ih pronađe na stranici.

6. Idealno polje za pretragu je široko 27 karaktera

Koja je idealna širina polja za pretragu? Da li tako nešto postoji? Po ispitivanjima koja su sprovedena ispostavilo se da je većina polja za pretragu previše kratka. Problem sa kratkim poljem je u tome što iako će Vam biti dozvoljeno da kucate dugačak upit samo jedan njegov deo će biti vidljiv u datom trenutku, pa je teško da pregledate šta ste otkucali ili da editujete upit.

Studija je pokazala da je prosečna širina polja za pretragu 18 karaktera. Isto tako se pokazalo da je 27% upita bilo predugačko da bi stalo u takvo polje. Proširenje polja za pretragu na 27 karaktera bi moglo da opsluži 90% upita. Zapamtite, širinu možete podesiti i pomoću em-ova, ne samo uz pomoć pixela i pointa. Jedan em je širina i dužina jednog slova „m“ bez obzira o kojem se fontu ili sajtu radi. S toga koristite ovu meru kako biste odredili širinu polja na 27 karaktera.

Slika 7. - Google-ovo polje za pretragu je dovoljno dugačko da primi ceo upit

Slika 8. - Sa druge strane Apple nije bio tako darežljiv

Uopšteno govoreći bolje je imati duže polje za pretragu nego prekratko. Ovo uputstvo je zaista jednostavno, ali na nesreću jako često se zaobilazi. Takođe malo padding-a može dosta da doprinese izgledu.

7. Beo prostor čini da je sajt jasniji

Većina dizajnera zna vrednost belog prostora tj. praznog prostora između paragrafa, slika, dugmića u drugih elemenata na strani. Beo prostor daje elementima na strani mogućnost „da dišu“. Takođe možemo grupisati elemente zajedno tako što ćemo smanjiti međusobni beo prostor, a povećati beo prostor između grupe i ostalih elemenata na strani. Ovo je važno zbog pokazivanja veze između elemenata, kao i zbog određivanja hijerarhije elemenata na jednoj Web strani.

Slika 9. - Primetite margine, padding i spacing u centralnom sadržaju na strani. Sav taj prostor ga čini lako čitljivim.

Linova studija sprovedena 2004-te godina je pokazala da dobra upotreba belog prostora u paragrafu kao i u levoj i desnoj margini može da poboljša rezonovanje za 20%. Čitaocu je lakše da se fokusira na sadržaj sa lepim razmakom.

Beo prostor ne mora da poboljša performance sajta, ali će u svakom slučaju uticati na korisnikov doživljaj i užitak dok je na sajtu.

8. Efikasno korisničko testiranje ne mora da bude obimno

Studija Jakoba Nielsena o idealnom broju korisnika koje treba uključiti u testiranje upotrebljivosti je pokazala da test sa samo 5 korisnika može da otkrije 85% problema koje imate na sajtu. Rešenje će biti podjedanko ako u testiranje uključite 15 ljudi.

Slika 10. - Jakob Nielsen test grafik

Najveći problemi su obično otkriveni od strane prva dva korisnika, a preostali testeri potvrde navode prvih i pronađu manje probleme. Samo dva korisnika bi pronašla polovinu problema na sajtu. Ovo znači da testiranje ne mora da bude veliko ili preskupo da bi imalo dobre rezultate. Najveći dobitak se ostvaruje prelaskom sa 0 test korisnika na jednog tako da se nemojte plašiti da idete na malu količinu. Bilo kakvo testiranje je bolje od nikakvog.

9. Informativne strane sa proizvodima će vam pomoći da se izdvojite

Ako vaš Web sajt ima strane sa proizvodima, ljudi koji kupuju online će sigurno da ih pregledaju. Mnogim stranama sa proizvodima nedostaju neophodne informacije, čak i za posetioce koji rade brzi pregled strane. Ovo je jako ozbiljan problem, jer informacija o proizvodu pomaže ljudima da donesu odluku o kupovini. Istraživanja pokazuju da loša informacija o proizvodu dovodi do 8% problema pri korišćenju  i 10% gubitka korisnika (npr. korisnik digne ruke od svega i napusti sajt).

Slika 11. - Apple odvaja tehničke specifikacije proizvoda od jednostavnih marketinških strana, ali opet ostavlja i lak način da se do specifikacija dođe.

Omogućite korisnicima da dobiju detaljne informacije o proizvodu, ali ne dozvolite sebi da upadnete u zamku bombardovanja korisnika sa prevelikim brojem informacija. Učinite informaciju laku za „svariti“. Napravite stranu da bude pregledna sa dovoljno manjih segmenata teksta. Dodajte dosta slika proizvoda jer jedna slika je bolja i od 1000 reči, a ako već više volite reči od slika onda koristite jezik koji je razumljiv svima. Ne koristite žargon koji je nerazumljiv vašim kupcima.

10. Većina korisnika je slepo za advertising

Nakon obilnih istraživanja pokazalo se da je većina korisnika slepo za ad banere. Ako traže neku konkretnu informaciju na strani ili su preokupirani sadržajem neće im odvući pažnju reklama sa strane.

Rezultat ove pojave je ne samo da će korisnik da ignoriše reklamu već će ignorisati i sve što liči na reklamu. Neka jako stilizovana navigacija može da liči na reklamu, budite oprezni sa ovim.

Slika 12. - Četvrtasti baneri sa leve strane u stvari nisu reklame već linkovi ka stranama. Oni jako liče na banere i to može dovesti do toga da ih korisnici previde.

Drugačije rečeno, ad koji liči na sadržaj će navesti korisnika da pogleda i klikne. Ovo može da dovede do povećanja zarade na osnovu reklama, ali sa druge strane možete se suočiti sa gubitkom poverenja korisnika jer su umesto sadržaja dobili sajt koji se reklamira. Pre nego što odete ovom stazom razmislite dobro: kratkoročna zarada ili dugoročno poverenje vaših korisnika?

Izvor: www.smashingmagazine.com

U daljem tekstu biće predstavljeno 20 najvećih promena koje dolaze, ali sve zajedno do sada je napravljeno oko 400 promena na programu.  Ima tu za svakoga po nešto.  Pogledajte i sigurno ćete naći nešto što odgovara vama.

Komentari

Zatvoriti komentare na starim postovima - Po nekad nema smisla puštati da se pojavljuju komentari na starom postu, a i to je i onako omiljeni trik spamera. WordPress 2.7 će vam dozvoliti da zatvorite komentare na starim postovima, eliminišući tako potrebu za još jednim plugin-om.

Komentari na više strana – Komentari sada mogu da se prelamaju na više strana umesto da budu završetak vašeg posta kome nikako da dodje kraj.

Odgovori na komentare iz admin dela – Opcija koja je dugo čekana jeste mogućnost da se odgovori na komentare iz admin dela bez potrebe da se ide na front deo vašeg bloga.

XMLRPC API -Podrška za XML-RPC protokol, pojednostavljeni API koji enkodira vaše komentare u XML i transportuje ih kroz HTTP.

Prečice na tastaturi za komentare -Kada udjete u deo sa komentarima, možete koristiti  j and k za navigaciju kroz komentare. Kada selektujete komentar možete koristiti  “a” za potvrdu (approve), “s” da označite komentar kao spam i “d” da izbrišete komentar.

Teme i plugin-ovi

Instalacija plugin-ova jednim klikom – Još jedan omiljeni plugin ide u istoriju sa predstavljanjem mogućnosti da instalirate plugin iz dashboard-a.

Plugin Browser – Potraga za plugin-om, jedna od omiljenih razonoda blogera, biće olakšana opcijom da to uradite bez napuštanja WordPress install strane.

Lepljivi postovi -U proteklih par godina pojavio se veliki broj WordPress plugin-ova koji omogućavaju da postavite “lepljivi” post tako da on ostaje na vrhu front page-a bez obzira koliko postova stavite posle njega. Ova opcija je sada uključena u program.

Ažuriranje WordPress core-a – Još jedan WordPress plugin nalazi svoj put ka core-u WordPress-a. Za one korisnike koji nisu koristili nešto kao Fantastico ili Simple Scripts da instaliraju svoj blog, sada postoji više automatizovan način da budete u toku sa onim groznim sigurnosnim ažuiranjima.

Obaveštenje o ažuriranju teme – Dobićete obaveštenje kada je vaša tema ažurirana kao što sada WordPress to radi sa plugin-ovima.

Veća kontrola

Grupno editovanje za postove – Da li ste nekada želeli da editujete tagove za više postova, ali niste mogli to da uradite zbog posla u toku? Grupno editovanje će vam dozvoliti veće editovanje postova tako da možete praviti koliko god hoćete promene na vašem blogu bez obzira koliko je star.

Kontrola kolona – Na svakoj menadžment strani koja prikazuje kolone, sada ćete moći da izaberete koje kolone se vide i na koji način.

QuickPress – Da li ste ikada želeli da postavite brzi post bez učitavanja cele strane?  Sada i to možete direktno iz Dashboard-a uz pomoć QuickPress opcije.

Skorašnji Draftovi – Sada će biti modul na vašem dashboard-u koji će prikazivati skorašnje draftove tako da možete brzo da dodjete do postova koji su u izradi.

Ostali detalji

Prepravke na dashboard-u i stranama za pisanje – Primetan je i značajan redizajn navigacije i generalnog izgleda dashbord-a kao i stranica za pisanje.

PHPXref – Da li ste ikada uhvatili sebe kako se vrtite u krug pri pokušaju da shvatite PHP fajlove? PHPXref će vam pomoći tako što će PHP staviti u lako formulisane dokumente koje možete pročitati. Sve ovo će biti hostovano na WordPress.org.

Veličina slike – Thumbnail i Medium komande će ostati iste, ali Large će sada biti ograničena na 1024 piksela, ili na veličinu vaše teme. Ako ne želite nikakva ograničenja i želite da postavljate ludački velike slike, sada će vam biti omogućeno da izaberete “Full Size” opciju koja će postaviti vašu sliku u originalnoj veličini. Takodje ćete videti veličinu slike pored radio dugmadi.

Izvor: www.mashable.com

1. Bolju rangiranost na pretraživaču Google
2. Češće indeksiranje od strane googla
3. Veću cenu klika od AdSense reklama, što povećava vašu zaradu
4. Veći cenu plaćenih reklama (TextLinkAds)
5. I još mnogo toga…

Može biti od 0 do 10, s’tim što broj 10 nosi samo nekoliko web sajtova na planeti od ukupno 102 miliona registrovanih domena na internetu . U Srbiji najveći PR koliko ja znam nosi B92 (7) i još nekoliko sajtova. A ukoliko je PR između 5 i 7 u Srbiji – taj se sajt smatra konkurentnim na našem tržištu!

Korišćenjem google toolbara stičete mogućnost uvećanja PR sajtova koje posećujete, ali pak google nije želeo da iznese činjenice i definicije na osnovu čega i kako on to definiše PR.

Ukoliko želite detaljno da se informišete o GPR, kliknite na sledeći link: http://en.wikipedia.org/wiki/PageRank

Ukoliko želite da uvećate PR vaše web stranice, obratite se stručnim ljudima iz AdriaHost tima na sledećoj adresi: http://www.adriahost.com

Dođem pre 2 dana naposao, pijem kafu, gledam mail i rekoh da bacim pogled na naš novi blog. Sve lepo, uredno i baš mi je super taj “Tag oblak”, jeste malo lamerski ali fensi izgleda. Bacim malo bolje pogled, kad u tagu precizno piše “KORISNIKA PODRKA”!?#!  Bože, šta je ovo? Naravno, dignem frku odmah. Pitanja naviru:

• Odkud ovo? Kako niko nije primetio?
• Da nije neki hackerski napad? Provaljena šifra admin naloga?
• Maliciozni zaposleni? Hoće da nas obruka?

E, sad zamislite šta se desilo. U principu ništa. Instalirali smo novi lepi fensi plugin i niko nije skapirao da ne podržava naša slova. Mi smo navikli da obično iskoče “kuke i kvake” u takvom slučaju, ali ovde ne! Inteligentan mali plugin, jednostavno izbaci naša slova iz reči “KORISNIČKA PODRŠKA”. Eto gde je bio problem.

Najveća novost u verziji 2.7 je potpuno novi interfejs. WordPress 2.7 je puno brži od svih starijih verzija, i naravno, broj klikova je još više smanjen. U novom dashboard-u sada razmještamo delove po volji sistemom drag & drop. Dodan je stinky post, bitno je poboljšan rad s komentarima, mogućnost instalacije plugina direktno s WordPress stranice.

Od sada možete pisati post odmah direktno iz dashboarda, sve ovo i još puno, puno više donosi nam nova verzija 2.7 Coltrane. Nemojte sada odmah stavljati ovu novu verziju, jer neki pluginovi jednostavno neće raditi, pričekajte malo. Tj, nemojte to raditi kao mi!

Evo i video s službenog bloga:

Članak je preuzet sa sajta kolege Davora koji preporučujem svima da pogledaju ovde.