Boris Domain » Kак да създадете съвременно изглеждащ и ефективно работещ Web 2.0 сайт?

Kак да създадете съвременно изглеждащ и ефективно работещ Web 2.0 сайт?

by Boris Loukanov on September 17, 2012

in Blog, Design & Creative, Marketing

Kак да създадете съвременно изглеждащ и ефективно работещ Web 2.0 сайт?, 4.4 out of 5 based on 7 ratings
GD Star Rating
loading...

Няколко простички уеб маркетинг съвета, които със сигурност ще помогнат на вашия бизнес

Преди десетина години, в ерата на Web 1.0, уебсайтовете изпълняваха основно функцията на презентационен инструмент. Постепенно, с мощното навлизане на интернет в живота ни, техните функции започнаха да се разширяват. Днес, в 2.0 епохата, те са много повече от една виртуална визитка. Уебсайтовете вече са комуникационен, маркетингов, бизнес инструмент, без който успешното ви представяне и изграждането на познаваемост и авторитет на бранда ви, и онлайн, а и офлайн, е просто невъзможно.

Какво е важно за да знаете, за да създадете съвременен и ефективен за бизнеса ви Web 2.0 сайт?

Ще се опитам да синтезирам накратко основните и най-ценни правила, които е горещо препоръчително да спазвате при изграждането и развитието на своя уебсайт днес, през 2012 г.

Дизайн и Програмиране

Тенденциите в уебдизайна също се развиват и променят с времето, напоследък все по-бързо, което пък е причина у нас почти винаги да вървим с няколко години назад от това, което е актуално по света. Най-обща представа за последните трендове в тази сфера, може да добиете тук  и тук.

Разбира се дизайнът не трябва да се абсолютизира за сметка на другите елементи в изграждането на уебсайта, но все пак, той е първото, което дава представа за вашето онлайн присъствие. Така че не го подценявайте. Обърнете внимание на модерните тенденции по отношение на гридове, шрифтове, цветове, графични елементи, хедърите и футърите. Стремете се към по-семпла структура, с повече „въздух” и интуитивен интерфейс.

По отношение на програмирането, обърнете внимание на HTML 5 и CSS 3 стандартите, избягвайте използването на flash и мултимедия, изискваща задължителни плъгини за разглеждането й. Забравете за използването на splash pages, pop-up windows, frames, анимации или хоризонтално скролиране…Размерът на всяка страница е добре да не надхвърля 50-80 К.Фавиконите са все така актуални, не ги пренебрегвайте.

responsive-design

От Mobile version към Responsive Design

До скоро повечето собственици на сайтове, които искаха да са в крак с новите тенденции и бумът на мобилните технологии правеха паралелни мобилни версии, които увеличаваха цялостния бюджет, а и създаваха известни проблеми – свързани с все по-голямото разнообразие от екрани на мобилните устройства, така и с дублирано съдържание – от гледна точка на SEO.

От около година и повече обаче навлезе нова концепция в уеб дизайна, която решава тези проблеми – концепцията за Responsive Design , наричан още „адаптивен” или „отзивчив дизайн”, създадена от Итън Маркот. Казано накратко, уеб сайтът „разбира” какво устройство иска да го зареди и съобразява показвания на неговия екран дизайн с браузъра, размерите и специфичните характеристики на устройството.

Ето някои примери.  Обърнете внимание и на съвсем скорошния редизайн на сайта на USA Today , според мен това е насоката за развитие на информационните сайтове в близките 2-3 години.

Така че, ако сега започвате да изграждате своя уебсайт, горещо ви препоръчвам да използвате Responsive Design.

Уеб дизайнът дори да е прекрасен от естетична гледна точка, ако посетителите на сайта ви не могат да се ориентират и се „губят”, като влязат в него, той не струва за нищо:

Архитектурата и Usability на сайта

website testingОще през 2005 г. Стийв Круг  беше написал една велика книга по темата, чието заглавие продължава да е все така актуално: „Не ме карай да мисля!” . Лесна навигация, логично и йерархично структурирана информация, плоска, а не дълбока и комплицирана архитектура, прости менюта, използване на “breadcrumbs” – всичко това е само в полза на usability-то на сайта ви.

Изключително важно е и как е разположено съдържанието – да има ясни и открояващи се заглавия, подзаглавия, кратки параграфи, „въздух” между редовете, текстовете да не са на площ по-широка от 500 – 520 пиксела, цветовите комбинации – текст, фон, допълнителни графични елементи, да не натоварват и изморяват зрението. Линковете да са с различен цвят, мейлите и телефоните в контактите – да са „clickable”.

Не забравяйте, че сайтът трябва да се зарежда бързо и да изглежда еднакво добре във всички основни браузъри. Това са два полезни онлайн инструмента за browser compatibility testing.  A за по-цялостен одит на сайта, препоръчвам WebSiteOptimization.com  и Pingdom.

И не на последно място: 

Сигурността на уебсайта ви и на посетителите ви в него, особено ако го използвате за онлайн бизнес и парични транзакции. Задължително е поне тези страници да са с криптирана връзка, с използване на https с валиден, удостоверен SSL сертификат. Също така уважавайте privacy-то на потребителите, давайте им опции да изключат кукитата, никога не искайте от тях повече лична информация от необходимата за осъществаване на дадената конверсия.

Уебсайтът ви може да има отличен дизайн и перфектно usability, но ако не е намиран лесно и не излиза на предни позиции в интернет търсачките, ефективността му ще е твърде ниска и няма да донесе особена полза за вас или вашия бизнес. Затова може би сред най-важните, задължителни неща, на които трябва да обърнете внимание е неговата оптимизация:

SEO / Social SEO

По тази тема може да се пише много, а и ситуацията в сферата на Search Engine Optimization се мени дори не с години, а с месеци. Затова е препоръчително да разполагате, освен добри уеб дизайнери и програмисти, така също и със SEO специалист на високо професионално ниво, на когото да се доверите. Все пак добре е да знаете някои основни правила, които са задължителния минимум, за да бъде уебсайтът ви SEO-friendly.

Започнете с избор на подходящ домейн и надежден хостинг, както и с идентификацията на най-важните за вас и бизнеса ви ключови думи. След това – уникални, съдържащи ключови думи заглавия (title tags) и meta descriptions, дескриптивни, по възможност съдържащи ключови думи URL, правилнно използване на Heading tags (H1-H6) и Alt tags за изображенията, подходящо поставяне на Follow, No follow атрибутите за различните линкове, задължително XML и HTML Sitemap, релевантни Anchor текстове, релевантни вътрешни и външни линкове, имената на файловете да са изчистени от долни тирета и специални символи.

Не забравяйте за дублираното съдържание, всяка уеб страница трябва да бъде свързвана само с 1 URL – за да го избегнете, използвайте 301 redirect или rel=”canonical”. Проверявайте редовно за “счупени” линкове, създайте собствена „error 404” страница. И не прекалявайте с използването на ключовите думи в текста и в мета описанията. А aко имате локален бизнес, не пропускайте да включите сайта в Google Local.

social-seoИ особено важно – от около година голямо значение за по-доброто позициониране страниците от сайта ви в SERP и визуализиране на линковете от него в различните социални мрежи, придобиха 2 елемента, които всеки съвременен Уеб 2.0 сайт трябва да притежава: Микроформати и Facebook Open Graph Protocol.

Идeятa нa Микроформатите (най-използаният стандарт е Microdata на schema.org ) e външният вид нa пpeдcтaвянeтo нa eдин дoĸyмeнт дa ce зaпaзи, ĸaтo в cъщoтo вpeмe тoй нocи мнoгo пoвeчe ceмaнтичнa инфopмaция. Благодарение на нея резултатите в търсачките се визуализират чрез така наречените „Rich snippets”, които привличат повече вниманието на потребителите и увеличават многократно шанса за клик върху вашия линк. За информация, относно използването на микроформатите – тук.  А в Google Webmaster Tools ще намерите изключително полезен инструмент за тестване, дали сте интегрирали правилно микроформатите в сайта ви – Rich snippets testing tool .

rich-snippets

Вторият препоръчителен елемент, който е важно от гледна точка на Social SEO да бъде интегриран в уебсайта ви е Facebook Open Graph Protocol . Подробно по темата може да прочетете в блога на Иво Илиев.

open-graph-protocolИнтегрирането на FB OG в сайта ви не само помага за по-добрата и по-богатата визуализация на линковете при споделяне във Фейсбук и другите социални мрежи, но също така прави всяка страница от сайта част от т.нар. Social Graph и ще ви даде възможност да използвате ефективно всички настоящи и бъдещи социални плъгини, разработвани от Фейсбук, което пък ще ви донесе значително повишаване на трафика към вашия сайт.
Много полезен инструмент, който ви показва дали правилно сте интегрирали FB Open Graph протокола е FB debugger.

Като стана дума за интеграцията с Фейсбук и Social Graph, стигаме до следващите важни функционалности, задължителни за всеки съвременен уебсайт, тип 2.0:

Shareability and Sociability

Една от основните характеристики на Web 2.0 e свободното създаване и споделяне на съдържание от потребителите. Хората обичат да откриват, да споделят, да коментират, да създават свои микро общества на базата на интереси, социална принадлежност и най-различни други признаци. Вашият уебсайт (евентуално и вашата Фейсбук страница, интегрирана към сайта ви) трябва да даде на посетителите му тeзи възможности, да ги улесни, да ги стимулира да го правят. Затова и сред задължителните елементи в него са т.нар. социални бутони за споделяне и коментиране и социални уиджети.

Според повечето изследвания в последните 1-2 години, социалните мрежи са най-важният източник за увеличаване на трафика към уебсайтовете и в повечето случаи само трафикът, идващ в резултат от търсене в Google и другите търсачки е с по-голяма значимост. Отделно от това, присъствието на линкове от даден уебсайт в популярните социални мрежи е един от факторите, който се отразява положително и на класирането на сайта в Google.

social-networksНе искам да кажа, че трябва да накачите сайтовете си като коледни елхи с десетки бутони отгоре, отдолу, отляво и отдясно. Просто е важно да проучите, кои социални мрежи са най-релевантни на спецификата на сайта ви и са с най-голям принос за трафика към него, и да използвате точно тях. Лично аз бих препоръчал социални бутони към Facebook – Like и Send, Twitter, Google+, LinkedIn, Pinterest (ако разчитате особено на изображенията в сайта ви), Stumble Upon и Digg (ако имате англоезично съдържание), и за България, поради липса на реална конкуренция – Свежо (с известни резерви).

Не забравяйте да предоставите възможност на потребителите ви и за лесен абонамент към сайта – чрез мейл или чрез RSS Feeds. Все още много хора предпочитат тези опции.

Естествено, за да има какво да споделят, коментират или за какво да се абонират вашите посетители, е необходимо сайтът ви редовно да публикува ново, интересно и уникално съдържание:

Content is the King

Въпреки че съм го оставил в края, този елемент никак не бива да се пренебрегва. Много често се случва, имаме професионално направен уебсайт, отговарящ до голяма степен на горните изисквания, но когато се стигне до въпроса, какво да публикуваме и как да го напишем така, че да получим по-голям feedback и трафик, често пъти отговор липсва. А контент-стратегията ви би трябвало да е готова още преди да се започне с изграждането на сайта.

Това само по себе си е голяма тема, на която няма да се спирам сега, понеже целта на тази статия е да представи важните неща в техническата им страна най-вече, т.е. в случая фокусът трябва да е не толкова към какво, а как да пишем за уеб сайт. Затова ще завърша с препратка към една моя друга статия “За структурата на уеб текста – как да ви харесват и читателите и търсачките?” Надявам се, че ще ви е полезна.

И в заключение – убеден съм, че днес, през 2012 г. уебсайтът е ядрото на всеки онлайн (а до голяма степен и офлайн) бизнес. Но не забравяйте, че той не е завършекът, а началото на маркетинг процеса!

 

Related Posts with Thumbnails
  • http://www.facebook.com/lyubo.stoyanov Lyubomir Stoyanov

    Страхотна статия Борис! Много полезно!

  • http://twitter.com/eSalebg eSale.bg

    Уникална стария. Много ми харесва. Поздравявам авторът й, като няма съмнения, че добре се е справил както с подредбата (по важност), така и с доброто представяне на всяка една точка.

  • http://www.borisloukanov.com/ Boris Loukanov

    Мерси, написах я с надеждата, че ще е полезна:-)

  • Бойко Николов

    Браво за статията. Наистина е много полезна.

  • http://www.facebook.com/rainmakertom Tomislav Savov

    Браво Борка! Синтезирано и полезно.

  • http://www.facebook.com/stefan1rusev Stefan Rusev

    да, полезни съвети и то мо много въпроси на едно място

  • http://www.facebook.com/dzhavatushev Dzhavat Ushev

    На мен също много ми хареса. Информацията е добре подредена и се чете с лекота :)

  • Pingback: Open Graph VS. Schema.org – трафик от социалните мрежи или трафик от търсачките? / Блог на Иво Илиев

  • http://gregg.mine.nu/ Димитър Цонев (Dimitar Tsonev)

    дребна забележка. Има разлика между adaptive & responsive design

    * adaptive = multiple fixed width layouts
    * responsive = multiple fluid grid layouts

  • http://www.borisloukanov.com/ Boris Loukanov

    да, има малки разлики в техническите детайли, но крайният резултат е сходен

  • Pingback: Kак да създадете съвременно изглеждащ и ефективно работещ Web 2.0 сайт? | Информ@ЛИЧНО

Previous post:

Next post: