101 начина да направите уебсайта си по-страхотен

Говорих със стар клиент миналата седмица и тя каза: „Ник, знам, че имам нужда от помощ за сайта, но не съм сигурна от какво имам нужда.“

Затова попитах наоколо. Приятели, семейство, други хора, които не работят в интернет. Всички те казаха едно и също:

„Имам нужда от контролен списък. Не знам как да създам уебсайт. Ето защо трябва да наема някого. Но все пак искам да знам за какво става дума. ”

Затова започнах да правя списък на всичко, което сме направили в AwesomeWeb (и някои неща, които не сме направили).

Ето моето обещание ...

... Ако поправите всичко в този списък, ще имате един, ако не и най-добрият сайт във вашата индустрия.

Откъде знаеш?

В AwesomeWeb прегледах над 1000+ от най-добрите фрийлансъри в света. Доколкото знам, никога не съм виждал сайт, който да може да поставя отметки във всяко квадратче.

Като собственик на бизнес използвайте този списък, за да знаете какво трябва да се направи. Изпратете го на вашия дизайнер или разработчик. Дори ще можете сами да поправите няколко от тях.

Като свободна професия използвайте този списък, за да направите всичко, което създавате, по-страхотно. Върнете се при стари клиенти и кажете:

„Преглеждах изграденото и забелязах, че можем да поправим това, това и това. Мога да го направя за $ 500, $ 1000, $ 5000 и можете да очаквате тези резултати ... "

Въпросът е…

... Искам да ви помогна да направите мрежата по-страхотна. Започва тук, с този списък.

Страхотна марка

  1. Вземете професионално лого . Рядко се среща уебсайт или блог със страхотно лого. Така че това е добър начин за изграждане на незабавно доверие.
  2. Качете favicon, готов за ретина (квадратната икона в раздела на браузъра ви). Повечето сайтове имат 16 × 16 пиксела. На екраните на ретината те са размазани. Използвайте X-Icon Editor, за да генерирате 64 × 64 пиксела значок.
  3. Винаги използвайте готови за ретина изображения . Просто се уверете, че изображението е два пъти по-голямо от контейнера, след което го намалете.
  4. Използвайте 2-3 цвята макс . Трябва да имате цвят на фона, цвят на подканващата фраза и цвят на акцента.
  5. Когато избирате цветова палитра, започнете с допълващи се или триадни цветове . Настройте от там. Добрите цветови комбинации ви дават дизайн, който разказва история.
  6. Никога не използвайте истински черен цвят (# 000000). Чистото черно не съществува, така че изглежда онлайн на място. Черното в действителност винаги е тъмен нюанс от друг цвят.
  7. Никога не използвайте неутрално сиво (например #cccccc), ако искате вашият дизайн да има индивидуалност. Добавете оттенък на жълто, за да осигурите топлина, червено, за да дадете енергия, или синьо, за да създадете доверие.

Страхотна типография

  1. Изберете първокласен шрифт . Използвайте услуга като Typekit. Казано е, че 95% от мрежата е типография. Използването на първокласен шрифт е най-лесният и евтин начин да направите добро впечатление.
  2. Използвайте 2-3 шрифта макс . Повече е разхвърлян и забавя времето за зареждане. Изберете заглавен шрифт и шрифт на абзац. Още един, ако искате шрифт за специални случаи.
  3. Задайте размер на основния шрифт на минимум 16 пиксела . Всичко по-малко е трудно за четене на големи дисплеи. Намалете до 12px на мобилни устройства.
  4. Изберете типографска скала като увеличеното четвърто, перфектното пето или златното сечение. Използвайте скалата, за да зададете размер на шрифта за текста на вашия абзац, H4, H3, H2 и H1. Базирайте височините на линиите и полетата на текста на тази скала.
  5. Проектирайте други типографски елементи като блокови кавички, списъци с надписи, номерирани списъци, надписи, помощен текст, предупреждения, маркиран текст, примерни кодове, съкращения и дори адреси.
  6. Инсталирайте персонализиран шрифт на икона като Font Awesome, вместо да използвате изображения за общи елементи като лога на социалните медии, бутони за навигация и интерактивна графика. Шрифтът на иконата се зарежда по-бързо, мащабира се безкрайно и ви дава свободата да променяте цвета си, както желаете.

Страхотни оформления

  1. Използвайте правилото на третините за основно оформление. Разделете оформлението си на трети хоризонтално и вертикално, след което подравнете ключовите фокусни точки там, където линиите се пресичат.
  2. Поддържайте вертикална мрежа с мрежова система. Разбийте интерфейса си на оформления с 8, 12, 16 колони с щедри улуци между колоните.
  3. Поддържайте постоянен вертикален ритъм с базова решетка . Пространството между редовете на текста е също толкова важно, колкото и пространството между съдържателните блокове. Всеки ред текст трябва да има дъно на поле, което се намира на базовата линия.
  4. Бялото пространство е луксозно. Той е там, за да създаде дихателна стая и баланс. Привлечете вниманието на читателите си към най-важното.
  5. Балансирайте визуалните елементи на вашия сайт, като бутоните, входовете, формулярите, заглавията и др. Трябва да можете да замъглявате очите си и да проследявате пътя, по който искате да преминат вашите потребители.

Страхотен потребителски интерфейс

  1. Използвайте големи, смели бутони с подканваща фраза . Всяка страница трябва да има една цел. Почти винаги е да щракнете върху бутон. Уверете се, че този бутон не може да бъде пропуснат.
  2. Добавете курсори на мишката и активни състояния към вашите връзки, бутони, входове и текстови области. Ако решите да олекотите вашите бутони при нанасяне на курсора, трябва също така да осветлите връзките и границите на вашите входове.
  3. Бъдете в съответствие със стила на формата . Всички текстови области и полета за въвеждане трябва да бъдат оформени еднакво. Едни и същи цветове на контурите, цветовете на фона, при нанасяне на курсора на мишката, върху активен текст, текст на заместител, активен текст и др. Уверете се, че табиндексите са настроени правилно, за да можете да ги прелиствате в правилния ред.
  4. Променете цвета на посетените връзки , за да уведомите потребителя, че вече е бил на тази страница.
  5. След като имате вашето лого, цветове, типография, оформление и размери на изображения, създайте ръководство за стил . Добрите потребителски интерфейси са изградени с последователни компоненти, които винаги са еднакво оформени.

Страхотен потребителски опит

  1. Добавете микровзаимодействия към бутони и други полета. Например, бутон „Качване“ трябва да се промени на „Качване“ или „Обработка“, след като бъде щракнат.
  2. Без свиване на превъртане ! Никога не се забърквайте с поведението по подразбиране на браузъра. Може би си мислите, че е хубаво да превъртате два пъти по-бързо от нормалното, но не е така.
  3. Отървете се от плъзгача на вашата начална страница . Те намаляват конверсиите и има по-добри начини за показване на повече информация в малко пространство.
  4. Никога не използвайте портал за добре дошли . Когато посещава вашата начална страница за първи път, потребителят очаква да види вашата начална страница.
  5. Използвайте заглавия, заглавия, абзаци, списъци и надписи, за да направите съдържанието лесно сканируемо. Повечето хора, които посещават уеб страница, ще я сканират, преди да решат да я прочетат.
  6. Добавете описателен текст на заместител към всички ваши формуляри, входове и падащи менюта. Ако искате някой да попълни поле по определен начин, кажете му. За падащо меню или изберете полета, направете първата опция описателна. „Избор на година“ е по-добър от „2016“.
  7. Добавете проверка на HTML5 към вашите формуляри, за да стане ясно, когато има грешка във формуляра, след като потребителят се опита да го изпрати.
  8. Направете уебсайтовете си достъпни за хора със зрителни увреждания, като избягвате неясни имена на връзки, намалявате бъркотията, използвате пунктуация, поддържате просто оформление, добавяте алтернативен текст към изображения, използвате по-голям текст и поддържате висок контраст между цветовете на текста и фона.
  9. Проверете вашия сайт за прекъснати връзки с BrokenLinkCheck.com. Поправете неработещи връзки, така че хората да не се ядосват, когато щракнат върху тях.

Страхотно развитие

  1. Уверете се, че вашият сайт е оптимизиран за мобилни устройства, за да се показва адаптивно на всяко устройство. Правилно оптимизираните за мобилни устройства сайтове се зареждат по-бързо, класират се по-високо и осигуряват на потребителите ви по-добро изживяване.
  2. Генерирайте и покажете оптималния размер на изображението . Ако качите голямо изображение, като изображение на функция на публикация в блог и искате да го покажете на други места в сайта, като страничната лента, уверете се, че показвате версията на миниатюрата на изображението вместо изображението в пълен размер.
  3. Добавете етикети alt и title към всички изображения и връзки . Ако по някаква причина изображението не се зарежда, вашият сайт ще покаже заместващия текст на негово място. Също така, когато задържите курсора на мишката върху връзките, браузърът показва заглавния маркер за тази връзка.
  4. Използване на г вместо и да смели и курсив текст. Те имат същия ефект, но имат фундаментална разлика. е стил. е индикация за това как трябва да се разбира нещо.
  5. Коригирайте помия HTML . Когато копирате съдържанието за поставяне в редактор на WYSIWYG (като визуалния изглед в WordPress), той добавя много ненужни интервали и вградени стилове. Извънредно вашият сайт ще стане нечетлив.
  6. Говорейки за това, премахнете вградените стилове от вашия HTML. В 99% от случаите вашите правила за стилизиране трябва да влизат в CSS файл, за да можете да актуализирате всички копия на компонент едновременно, вместо страница по страница, ред по ред.
  7. Използвайте променливи Sass вместо CSS, за да поддържате цветовете и другите компоненти последователни в целия си сайт. Искате ли да промените цвят и всеки нюанс на този цвят? Актуализирайте един ред вместо стотици.
  8. Връзка към постоянни връзки, а не към URL адреси, в случай че превключите домейни. Например, когато свързвате към определена страница, вашият HTML трябва да чете, вместо. Същото е за източници на изображения и CSS фонове. Ако не направите това и не поставите сайта на нов домейн, всички ваши източници ще водят към страници и файлове, които вече не съществуват.
  9. Разработете персонализиран плъгин или инструмент, за да предоставите уникална функционалност на вашия сайт. Персонализираният софтуер е труден за поддръжка, но ще ви даде конкурентно предимство пред подобни сайтове.
  10. Тествайте за съвместимост с различни браузъри, като се уверите, че сайтът ви се показва правилно в Chrome, Firefox, Safari, Internet Explorer и други браузъри. По-старите версии на IE са известни лошо при показване на уебсайтове. Използвайте BrowserStack и проверете ръчно.
  11. Използвайте услугата за проверка на маркировката на W3C, за да намерите явни грешки във вашия HTML. Имайте предвид, че повечето сайтове нямат напълно валиден HTML. Това не е най-важният приоритет, но ще ви даде добър усет, ако има грешки.
  12. Настройте променителна среда, за да направите промени в текущия си уебсайт. В идеалния случай трябва да имате производствен обект, който всички виждат, и сайт за постановка, където вашият разработчик прави промени. След като промените са готови за пускане в експлоатация, изтласкайте мястото за постановка към производството.
  13. Показване на текущата година в долния колонтитул . Когато видите сайт със стари авторски права, приемате, че той вече не е активен. Използвайте PHP или подобен скрипт, за да покажете текущата година вместо статичен текст (например © -).

Страхотна оптимизация за търсачки

  1. Изберете по една ключова фраза на страница , за която искате да се класира тази страница. Съсредоточете се върху оптимизирането на всеки аспект на тази страница за тази ключова дума. Не в смисъла на put-this-keyword-във-всяко-изречение. Просто бъдете умни как искате да се класира.
  2. Задайте на всяка страница обогатени ключови думи . Заглавието се показва като синя връзка в резултатите от търсенето с Google. Ограничете до 55 знака.
  3. Включете един и само един H1 таг на страница. В повечето случаи това ще бъде същото като маркера на заглавието.
  4. Включете много H2, H3 и H4 в съдържанието на страницата си, за да създадете подзаглавия и визуална йерархия.
  5. Оптимизирайте страницата си за конкретна ключова дума, като я включите в заглавието, H1, подзаглавия и в първата 1/3 от съдържанието.
  6. Вашето мета описание се показва в резултатите от търсенето като описание под връзката. Не забравяйте да го включите на всяка страница и да включите ключовата фраза.
  7. Вашата постоянна връзка , която е URL след домейна (т.е. domain.com/permalink-here/), трябва да включва ключовата фраза, разделена с тирета.
  8. Google разглежда възрастта на домейна в своя алгоритъм, тъй като домейн, който е регистриран в продължение на много години, вероятно ще бъде по-висококачествен ресурс. Регистрирайте домейна си за няколко години предварително. Ако сте регистрирали домейна си в продължение на 10 години, значи сериозно се занимавате с бизнеса си.
  9. Средно първият резултат на SERP (страница с резултати от търсачката) за дадена ключова дума води до страница с повече от 2000 думи на страница . Когато пишете публикация в блог или създавате страница, която искате да класирате добре, опитайте се да ударите поне 2000 думи.
  10. Винаги създавайте карта на сайта като файл sitemap.xml и я поставяйте в основната си директория, така че да се показва на domain.com/sitemap.xml. Той казва на Google къде се намират всички ваши страници и трябва автоматично да се актуализира, когато добавите ново съдържание. Изпратете го на Google чрез Инструменти за уеб администратори.
  11. Добавете своя уебсайт Google Инструменти за уеб администратори, за да видите как Google индексира вашия сайт и да бъдете актуализирани, ако има критични проблеми.
  12. За да помогнете на вашите изображения да се класират, винаги преименувайте изображенията и други файлове, преди да ги качите на уебсайта си (например rank_for_this_keyword_phrase.png).
  13. Включете файл robots.txt на вашия сайт, за да кажете на уеб роботите кои страници трябва и кои не трябва да индексират.
  14. Добавете канонично пренасочване, за да насочите не-www към www версията на вашия уебсайт или обратно.
  15. Проучете и интегрирайте LSI ключови думи (латентно семантично индексиране) на всяка страница, за да помогнете на страницата да се класира за основната ключова фраза. Намерете ключовите думи за LSI, като потърсите ключовата си фраза и потърсите връзките „Търсения, свързани с ...“.
  16. Уверете се, че активно свързвате съдържанието си . Всяка страница на вашия сайт трябва да бъде достъпна чрез три или по-малко кликвания от началната страница.
  17. Добавете структурирани данни на подходящи страници, за да помогнете на Google правилно да индексира съдържанието ви. Типовете страници, които се нуждаят от персонализирани структурирани данни, включват хора, продукти, събития, организации, филми, книги и отзиви. Използвайте Schema Creator, за да генерирате структурирани данни.
  18. Проверете PageSpeed ​​Insights на Google, за да сте сигурни, че сте отстранили всички често срещани проблеми, които забавят скоростта на вашата страница. Колкото по-бързо се зарежда вашият сайт, толкова по-високо ще се класира.

Страхотна скорост на страницата

  1. Поддържайте теглото на страницата под 2MB . Използвайте tools.pingdom.com, за да проверите теглото на основната страница. Всичко повече от 2MB е твърде тежко.
  2. Съхранявайте заявките за страници под 50 години . Всеки файл и изображение на която и да е страница е HTTP заявка. Колкото по-малко са заявките, толкова по-бързо ще се зареди. Средната уеб страница има 70 заявки. Използвайте GTmetrix, за да видите вашите заявки.
  3. Проектирайте елементи на страницата с CSS вместо фонови изображения . Никога не използвайте изображение, за да покажете бутон, формуляр или друг често срещан компонент на вашия сайт. CSS се зарежда по-бързо и е по-гъвкав при отзивчиви оформления.
  4. Оптимизирайте изображенията, преди да ги качите на вашия сайт. Инструменти като TinyPNG могат да намалят размерите на вашите графични файлове с 80–95%, без да губят резолюция или качество на изображението.
  5. Настройте мрежа за доставка на съдържание, за да хоствате вашите изображения и други по-големи файлове на няколко места по света. CDN съхраняват и доставят вашите файлове от стратегически разположени сървъри, за да увеличат максимално скоростта на зареждане в зависимост от физическото местоположение на посетителя ви.
  6. Намалете JavaScript, HTML и CSS, като използвате инструменти за компилиране и компресиране, преди да качите файлове на вашия уебсайт. За JavaScript използвайте компилатор за затваряне. За HTML използвайте HTML Minifier. За CSS използвайте YUI компресор.
  7. Преместете блокиращия визуализация JavaScript в долния колонтитул . Единствените скриптове, които трябва да бъдат поставени в заглавката, са скриптовете, които незабавно влияят върху дизайна на страницата (напр. Персонализирани шрифтове).
  8. Избягвайте пренасочванията към целевата страница . Пренасочванията задействат допълнителна HTTP заявка, която забавя изобразяването на страницата.
  9. Използвайте кеширането на браузъра, като зададете дати на изтичане за страници и типове страници, които не се актуализират често. Кеширането на браузъра инструктира браузъра да зарежда предварително изтеглени страници от локалния диск, а не през мрежата.
  10. Активирайте gzip компресия в конфигурацията на вашия сървър. Компресията може да намали прехвърленото време за реакция с 90%, което подобрява времето за първото изобразяване на вашите страници.
  11. Активирайте Keep-Alive в настройките на вашия сървър, за да позволите на една и съща TCP връзка да изпраща и получава множество HTTP заявки, като по този начин намалява латентността на следващите заявки.
  12. Надстройте до специален сървър или премиум хостинг услуга, за да подобрите времето за реакция на сървъра. Когато използвате среда за споделен хостинг, вашият сайт обикновено е един от стотиците на един и същ сървър. Ако някой от тези сто сайтове изпитва много трафик, това ще забави скоростта на вашата страница.

Страхотен графичен дизайн

  1. Вземете персонализирана корица за електронна книга за вашия бонус за включване. Те не са трудни за създаване и могат да направят огромна разлика в процента на конверсия.
  2. Създайте персонализирана графика или илюстрация за вашата начална страница или страници за продажби. Една хубава илюстрация, направена специално за вашия сайт, е лесен начин да го направите по-запомнящ се.
  3. Създайте персонализиран или поредица от персонализирани дизайни на изображения на функции за публикации в блога . Това е изображението, което се разпространява във Facebook, Twitter, Pinterest и др. Когато потребителят види определен тип изображение, свързано с публикация в блог, той трябва да знае, че е написано от вас.
  4. Показвайте персонализирани илюстрации на аватари или карикатури за себе си и за всеки член на вашия екип. Персонализираните карикатури могат да бъдат по-евтини от наемането на професионален фотограф всеки път, когато добавите някого в екипа си. Освен това е приятен подарък за нов член на екипа.
  5. Персонализираните инфографики, които показват данни и друго съдържание по визуален начин, обикновено получават повече трафик от еквивалента на публикацията в блога. Хората обичат да споделят инфографики на сайтове като Pinterest или да ги публикуват отново на собствените си сайтове с обратна връзка към вашия сайт.
  6. Ако създавате видеоклип или поредица от видеоклипове, трябва да имате персонализирано въвеждане и / или извеждане на видеоклипове, за да му придадете професионален щрих. Да не говорим за други видео графики или анимации, които ще помогнат на вашата марка да стърчи.

Страхотна уеб сигурност

  1. Инсталирайте SSL сертификат, за да разрешите сигурна връзка от уеб сървър към браузър. Повечето софтуери за плащане изискват SSL сертификат, ако приемате кредитни карти. Google заяви, че SSL сертификатът ще подобри класирането ви при търсене.
  2. Поддържайте актуализирания софтуер и приставки . Когато WordPress и друг софтуер за управление на съдържанието пуснат актуализация, обикновено е да се коригира уязвимост. Ако не го направите, въпрос на време е вашият сайт да бъде хакнат.
  3. Настройте двойна порта за удостоверяване за вход за вашите администраторски страници. Повечето хакове започват със страницата за вход.
  4. Проверете и премахнете зловреден софтуер . Ако сайтът ви е бил хакнат преди, те вероятно са добавили повредени файлове, които не е лесно да се намерят. Ако не го премахнете незабавно, вашият сайт може да бъде включен в черния списък от Google, който събира класирането ви и предупреждава потребителите да напуснат, когато посетят.
  5. Никога не оставяйте потребителското си име на администратор като „администратор“. Изтрийте администраторския акаунт по подразбиране и създайте нов с друго потребителско име.
  6. Редовно архивирайте вашата база данни и файлове на уебсайтове . Повечето софтуер и добавки за архивиране архивират само вашата база данни, която включва данните и съдържанието. Но ако загубите сайта си, ще трябва да имате резервно копие на файловете, за да го възстановите.

Страхотно съдържание

  1. Създайте персонализирана страница за грешка 404, която ще се показва всеки път, когато потребител се опита да посети страница, която не съществува. Използвайте страницата 404, за да ги насочите обратно към началната страница или да им помогнете да намерят това, което търсят.
  2. Освен вашата начална страница, вашата страница за информация вероятно е най-посещаваната страница на вашия сайт. Уверете се, че представя добре вас и вашата компания.
  3. А страница контакт ще помогне на хората да се свързват с вас, но тя също така ще изгради доверие между вас, посетителите си и дори Google. Когато определят как да класират вашия сайт, ботовете ще намерят страницата ви с контакти и ще потърсят имейл, телефонен номер и адрес. Информацията за контакт казва на Google, че сайтът е малко по-надежден.
  4. Добре е да имате формуляри за включване, които да бъдат стратегически поръсени в целия ви сайт, но също така е умно да имате страница за изстискване с нищо, освен с висока конверсия. Когато искате някой да се абонира, направете връзка към тази страница.
  5. Когато някой се абонира за вашия списък, не забравяйте да го изпратите на страница за потвърждение с молба да потвърди имейла си. Ако не потвърдят имейла си веднага, може да забравят за него и никога да не се върнат.
  6. След като щракнат върху връзката за потвърждение в имейла, изпратете ги на благодарствена страница, където да видят какво следва. Това е страница, която всеки абонат ще види и ще види само веднъж, така че е идеална възможност да им дадете сделка или да ги насърчите да направят покупка.
  7. Вашият уебсайт или тема трябва да имат шаблон за целева страница , който можете да използвате, когато имате нужда от вашите потребители да предприемат конкретно действие.
  8. Ако продавате нещо, уверете се, че имате хубава страница за продажби . Започнете със заглавие. Направете място за вашия терен. Може да добавите видео за продажби. И насочвайте хората да купуват в долната част на страницата.

Страхотни социални медии

  1. Ограничете броя на бутоните за социални медии на вашите публикации и страници, защото всеки бутон изпълнява скрипт, който добавя допълнително време за зареждане на страницата. Включете само бутоните 1–5, например Facebook, Twitter, LinkedIn, Pinterest, Google+ и др., Където съдържанието ви най-често се споделя.
  2. Създайте графики в социалните медии за вашата страница във Facebook, акаунт в Twitter и канал в YouTube. Персонализираните графики правят незабавно положително впечатление, което ще насърчи посетителите за първи път да харесат, следят и да се абонират за вашата страница, профил или канал.
  3. Настройте Facebook Open Graph META тагове, за да сте сигурни, че съдържанието ви се споделя правилно във Facebook. Използвайте Facebook Debugger, за да проверите вашата начална страница, публикации и други страници, за да видите как се показват, когато някой сподели този URL адрес.
  4. Настройте Twitter Cards за автоматично прикачване на богати снимки и видеоклипове към вашите туитове, когато се споделя URL адрес на вашия сайт. Започнете с Twitter Cards тук.
  5. Настройте фрагменти от Google+, за да персонализирате това, което хората виждат, когато сайтът ви се споделя в Google+. Използвайте ръководството за фрагмент, за да генерирате кода. Дори ако вашият сайт не получава много любов от Google+, Google ще знае дали правилно добавяте метаданните и това трябва да носи някаква тежест.
  6. Приберете иконите на социалните медии на вашия сайт, които връщат обратно към вашите профили. Направете ги малки или ги покажете само в долния колонтитул. Целта на маркетинга в социалните медии е да върне хората към вашия сайт, а не обратното.

Добре, какво ми липсва? Има ли нещо, което правите на свободна практика или като собственик на бизнес, за да направите сайтовете си по-страхотни?

Ще се радвам да чуя отзивите ви. Оставете коментар или туит @wntart .

Ако смятате, че повече хора трябва да видят този списък, моля, препоръчайте го. Нека направим мрежата по-страхотна!

Наздраве,

Ник

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

Ако искате да се присъедините към AwesomeWeb като фрийлансър, за да привлечете повече клиенти, регистрирайте се тук.

Original text