Один -сторінковий сайти: усі плюси і мінуси
- Дата:28.08.2013
- Автор:Юлия Солнцева
Одностраничники – так називають сайти, які складаються тільки з однією сторінки, а перехід по меню здійснюється скроллом. На сьогодні створення інтернет-ресурсів, складаються з однією сторінки, є поширеною практикою в інтернет-маркетингу, яка виправдовує себе в визначених ситуаціях.
Побутує думка, що одностраничные сайти не здатні повноцінно уявити діяльність фірми в Інтернеті. В дійсності це не зовсім вірно. При правильному підході, створивши одностраничный сайт, ви отримаєте максимум переваг даної технології.
В цієї статті ми дізнаємося більше про інтернет-ресурсах, складаються з однією сторінки, розглянемо специфіку їх використання і кращі приклади реалізації. Також спробуємо відповісти на питання, в яких випадках одностраничный сайт може бути ефективніше багатосторінкового.
Одна сторінка – один сайт: як це працює?
Одностраничный сайт побудований в одному вікні і не включає в себе посилання на інші сторінки. Принцип такого сайту заснований на прокрутке, а не натисканні і переході. Хоча натискання ніхто не відміняв: воно скроллом приведе вас на ділянку сторінки з відповідним контентом. Цей досить простий і цікавий спосіб піднесення інформації, більше чіткий і легкий для розуміння. Використання одностраничного сайту вам дає, як мінімум, простоту і цілісність ресурсу. Такий сайт виробляє тільки одне враження. Варто відзначити, що одностраничники відвідувач вивчає більше уважно, переглядаючи усi розділи, роблячи це як б “на одному дыхании”.
Коли досить однією сторінки?
Багато компанії створюють багатосторінкові сайти, кожна сторінка якого займає два абзацу. Можливо це робиться по причини імітації активної діяльності компанії або з-за стереотипного уявлення про сайті. На самому справі, якщо ваш сайт не володіє обширним контентом, як це часто буває з сайтами-візитками, ви можете легко помістити всю інформацію на одну сторінку. Такі сайти особливо добре показують себе в як промо-сторінки який-або послуги, продукту або події, а також як допоміжні платформи для популяризації інших ресурсів. Так як подібні ресурси працюють з невеликим об'ємом текстової інформації, їх конструкції найчастіше графічні:
- Night contact — цікавий приклад одностраничного сайту, присвяченого одному події:
- Одностраничный сайт студії дизайну Milk and Pixels milkandpixels.com відмінно представляє всю інформацію і спектр послуг компанії:
- Prestashop.com — яскравий приклад одностраничного сайту рунета, присвяченого однією послузі:
- Одностраничный сайт компанії Chris Сonnolly chrisconnolly.com виглядає як персональна сторінка, але виглядає оригінально і повністю справляється зі своєї завданням.
Рекомендації по розробці дизайну
Перед початком розробки одностраничного сайту чітко сформулюйте мета проекту. Визначитеся, буде це інформаційний проект або, навпаки, закликає до дії інтернет-ресурс. Добре проаналізуйте, який контент ви будете викладати, на яку аудиторію буде орієнтований сайт. Ось перелік цілей, котрий значно спростить вам задачу пошуку ідеї для дизайну:
1. Створити враження. Важливо, щоб перший враження, яке складеться у відвідувачів про сайті, було сприятливим. Тоді ви зможете втримати користувачів на своєму інтернет-ресурсі. Пам'ятайте, у вас всього один шанс провести перший враження, і не так багато часу, щоб захопити і зацікавити відвідувача.
2. Сайт повинен бути візуально привабливим для вашої цільової аудиторії і “з перших слов” вводити відвідувачів в курс справи.
3. Дизайн інтернет-ресурсу повинен з кращих сторін візуалізувати його контент і специфіку діяльності компанії.
4. Керуйте візуальними ефектами, щоб залучити увага до послузі, товару або певної інформації. Використовуйте часткову анімацію, расставляйте колірні акценти, иллюстрируйте контент.
Відмінна робота дизайнера відчувається в оформленні сайту artemjuliawedding.com, присвяченого одному події. Ресурс тематично ілюстрований, невеликі анімаційні ефекти привертають увага до графіку і тексту. Відмінний одностраничный сайт, котрий хочеться додивитися до кінця.
Сloud.mail.ru - одностраничный сайт рунета. Хороша робота дизайнера і тематичні ілюстрації створили один концепт сприйняття дизайну і послуги.
Давайте подивимося на інші приклади тематично оформлених сайтів:
Сайт minimalmonkey.com містить велике кількість категорій і масу контенту. Дизайнерське рішення було прийнято в користь візуального акценту з допомогою кольори, а горизонтальний скролл відмінно поєднується з компоновкой макета.
Сайт креативного агентства todaythe12.com зустрічає яскравою анімацією. Даний ресурс тематично ілюстрований, а компактно розміщена інформація сприяє тому, що ви менше ніж за хвилину зможете ознайомитися зі усіма розділами сайту.
На сайті frismedia.nl використано два прийому залучення уваги: перший – часткова анімація логотипу, другий — тематичне поділ кольором блоків контенту.
На односторінковому сайті української фірми vintage.com.ua часткова анімація привертає увага до ключовим аспектам дизайну і навігації.
Паралакс-скролінг
Це щодо новий ефект в веб-дизайні, котрий заслуговує цілої статті. Паралакс-скролінг — відмінний спосіб поліпшення взаємодії з користувачем. Створюючи відчуття тривимірності, він підвищує візуальний інтерес до сайту. Цей метод знайшов широке застосування в одностраничных сайтах. Паралакс-скролінг був розроблений і вперше застосований в сфері веб-дизайну компанією Weiden and Kennedy, однією з найбільших маркетингових фірм, при розробці сайту Nike Better World, присвяченому енергетичним напоям. І хоча з тих пір багато елементи дизайну даного ресурсу були модернизированы, паралакс-скролінг по-як і раніше залишається його головним дизайнерским концептом. Принцип параллакса полягає в тому, що різні шари зображень накладаються один на друга і рухаються з різної швидкістю, що і створює тривимірний ефект.
Паралакс – це той візуальний ефект, котрий здатний втримати увага відвідувача, виділити ваш сайт з загального інформаційного і графічного шуму.
Давайте розглянемо його на прикладі ресурсу activatedrinks.com:
Подивіться, як розмиті і чіткі кола рухаються в процесі скролінгу, зверніть особливе увага на то, як накладені зображення напоїв. Це відмінний приклад не тільки паралакс-скролінгу, але і одностраничного сайту, присвяченого одному продукту.
Відмінний скролінг від ok-studios.de:
Навігація по одностраничному сайту
Незаперечним перевагою одностраничного сайту, з точки зору навігації, є спосіб його побудови. Розробляючи навігацію, дизайнер бажає домогтися того, щоб користувач захотів і, що не менш важливо, зміг подивитися усi розділи сайту або, по вкрай міру, самі важливі з них. В зв'язку з цим прагненням виникає поняття юзабіліті, то є зручності користування ресурсом. Крім того, проводяться різні експерименти з нестандартної навігацією, що дозволяє ненав'язливо спонукати користувача до відвідування визначених розділів ресурсу.
Одностраничный сайт скомпонован таким чином, що не вимагає переходу на різні сторінки. Додивитися його до кінця, використовуючи прокрутку, набагато швидше і простіше. Ресурс, що складається з однією сторінки, не вимагає додаткових дій і перенесення уваги. Завдяки невеликому обсягом контенту користувач встигає переглянути усi розділи до того, як почне відчувати нудьгу.
Ось приклади грамотної навігації одностраничного сайту:
Зверніть увага на то, як на даному ресурсі виконаний паралакс-скролінг.
Присутність анімаційних ефектів і графіки високого якості компенсує мінімальне кількість текстового контенту.
Коли контенту багато, або якщо він складний
Коли на односторінковому сайті багато графічного або текстового контенту, або він розташований нестандартно, виникає необхідність в створенні допоміжної навігації. Відвідувач може втомитися перегортати сторінку, загубитися в навігації, або йому не захочеться витрачати час на пошуки необхідної інформації. Тоді він попросту піде з сайту. Вирішити проблему орієнтування на односторінковому сайті допоможе додаткова навігація. Зазвичай кнопки меню розташовуються в хедере сайту, наприклад, як на цьому ресурсі:
Але специфіка побудови одностраничника зі складним контентом вимагає додаткової бічний навігації.
Можна поекспериментувати і створити спливаючу навігацію або підказки, заощадивши таким чином місце на сайті. Або ж можна розробити нестандартну навігацію, яка стане родзинкою ресурсу. Давайте подивимося, як усi це реалізовано, на наступних прикладах:
- the-rapid-labs.com — хороший одностраничный сайт, з великим кількістю текстового контенту, для кращої интеракции з відвідувачем були використані коментарі і тематичні ілюстрації.
- Чудовий приклад оформлення навігації — одностраничный інтерактивний сайт по споживання енергії evoenergy.co.uk.
Скролл тут є не єдиним способом переміщення по сайту. Передбачається, що велику частина інформації відвідувач буде отримувати від интеракции з ресурсом. До наприклад, кожен гурток дерева надає собою дані про споживанні палива за певний рік, а колір кружка позначає вид палива. Зручна навігація і тематичні ілюстрації зробили цей сайт одним з кращих прикладів одностраничных ресурсів.
Кажучи про ефективності сайтів, складаються з однією сторінки, варто відзначити, що в ряді випадків, вони дійсно краще многостраничников. Сайти компаній, надають невелике кількість послуг або товарів, промо-сторінки подій або продуктів, сайти-візитки, персональні портфоліо — ось основні види інтернет-проектів, для яких одностраничник буде оптимальним варіантом.
Підбиваючи підсумки, хотілося б виділити ключові моменти в розробці одностраничного сайту:
1) Тематично иллюстрируйте сайт;
2) Використовуйте додаткові ефекти;
3) Створюйте візуальні акценти і якоря;
4) Прорабатывайте відповідну навігацію в залежно від контенту;
5) Надавайте додаткову навігацію і підказки, якщо це необхідно;
6) Експериментуйте з вашим сайтом, але обов'язково тестируйте юзабіліті ресурсу.
Фахівці Turboseo про створенні і просуванні одностраничных сайтів:
Илья Варешнюк, SEO Team Lead:
"В першу чергу хотілося б відзначити, що представлений тут підхід дійсно заслуговує уваги і міцно займає почесне місце в еволюції веб-дизайну.
Проте, повинен сказати, що далеко не усi наведені в як прикладів сайти є "одностраничниками" в буквальному сенсі цього слова. Да, дійсно, основне дійство відбувається на головною сторінці і безпосередній екшен досягається завдяки скроллу, проте більшість сайтів мають також і внутрішні сторінки, тому з технічної точки зору це не одностраничные сайти (без претензій до авто ру, просто уточнюю технічні деталі в міру своєї занудності ;))
На самому справі тенденція до довгим сторінках, на яких завдяки скроллу відкриваються нові подробиці в концептуальної графічної оболонці, простежується вже давно. Більше того багато сайти, від самого початку сповідували зовсім інші канони, беруть на озброєння цей підхід. Взяти хоча б той ж moz.com.
Що ж стосується безпосередньо просування таких сайтів в пошукових системах, особисто мені поки не доводилося з ними працювати, але провівши побіжний аналіз деяких наведених автором ресурсів, повинен сказати, що багато з них мають досить непогану видимість в пошукових системах. Проте це стосується тільки "псевдоодностраничников", т.е. сайтів, які по фактом мають досить багато внутрішніх сторінок. Справжні ж одностраничники з огляду на технічних особливостей внутрішньої оптимізації і загальних вимог, пропонованих пошуковими системами до сайтам, буде вельми проблематично "рухати" в органічному пошуку, особливо по різним напрямками. Тому якщо Ви усi-так і захочете собі такий "одностраничник", подумайте над тим, щоб лаконічно наведену на головною сторінці інформацію більше детально розкрити на внутрішніх сторінках."
Ольга Николаенко, менеджер проектів:
"На дане час одностраничные сайти – це нововведення. Їх розробку замовляють ті, хто хоче тримати хвилю. Проте приймаючи подібне рішення, необхідно розуміти саме важливе. Такий сайт не буде зручний в роботі для SEO-фахівців. Одностраничник не зможе заробляти гроші для компанії, яка ще не закріпила свої позиції на ринку. Одностраничный сайт призначений для добре відомих фірм з вже сформованим іміджем і досить великий аудиторією постійних клієнтів.
Одностраничник — це круто! Хоча і не завжди зручно для роботи в інтернет-просторі."
Сподіваємося, дані поради допоможуть вам створити зручний і запам'ятовується одностраничный сайт, котрий буде користуватися популярністю у користувачів. Успіхів!