Лучшие статьи категории «Веб-сайты»

Подписка

Одностраничный сайт: создание и примеры

Одностраничные сайты становятся все более и более популярны среди дизайнеров, как при создании своих собственных проектов, так и при создании сайтов для клиентов. Есть много причин, при которых одностраничный сайт смотрится красивее и эффективнее. Например, когда на сайте мало информации, или если эта информация тесно перекликается с другими частями текста на сайте, или же в тех случаях, когда конкретный сайт стилистически лучше смотрится на одной странице.

В любом случае, сейчас, на просторах интернета, такие сайты можно встретить все чаще. Загляните в рубрику «Одностраничные сайты» или в статью про портфолио дизайнеров, чтобы воочию увидеть примеры сайтов такого типа.

Но как узнать, когда использовать только одну страницу, и какой способ при создании сайтов в таком стиле наиболее удобен? Вот об этом мы и хотим поговорить в нашей статье.

Достаточно ли одной страницы для вашего сайта?

Использование одной страницы на сайте очень популярно. Но это не значит, что одна страница подойдет только для определенного вида сайтов. Есть много примеров, когда использование такого стиля благоприятно сказывается на общем виде проекта. Так как определить, что одной страницы будет достаточно для вас? Попробуйте задать себе следующие вопросы:

1. Много ли информации на вашем сайте?

Сайты с большим количеством информации — не самый лучший вариант для создания одностраничного сайта. Если у вас более десятка страниц c полноценным контентом, вам, вероятно, лучше подойдет традиционная, многостраничная структура.

2. Продаете ли вы какой-нибудь продукт?

Одностраничный сайт может стать отличным решением при продаже различных продуктов, таких как, книги, шаблоны для сайтов, программы для телефонов или КПК, и других подобных товаров.

3. Удобно ли будет использование Ajax или JavaScript?

Как правило, на одностраничных сайтах используется большое количество JS для навигации и других элементов. Такой способ является самым оптимальным, если на сайте есть достаточно большое количество информации и при этом ее обязательно надо показать пользователю.

4. Связано ли содержание сайта?

Попытка с созданием кучи не связанной между собой информации на одной странице, вероятно, только запутает посетителя. Если у вас много не связанного текста, то лучше всего расположить его на отдельных страницах или показывать его только при необходимости.

Минимум информации

При создании сайта, ограничение на количество информации очень важный фактор. Прежде всего, нужно запомнить, что весь контент необходимо загрузить за одинаковое время. Также, если вы используете переходы между областями сайта, то на этих страницах нужно четко определить количество показываемой информации т.к. при ее обилии могут возникнуть некоторые «подтормаживания», которые будут очень неприятны для пользователя.

Как правило, пять или шесть информационных областей, являются нормой при использовании такого подхода в одностраничных сайтах. В некоторых случаях, ограничиваются двумя или тремя областями. Очень редко можно увидеть ситуацию, где число внутренних страниц превышает 8-10 областей.

Одностраничный сайт
Одностраничный сайт
Одностраничный сайт
Одностраничный сайт
Одностраничный сайт

Сайты с горизонтальной прокруткой

Не все сайты с горизонтальной прокруткой можно назвать одностраничными. Но, тем не менее, это очень интересный вариант, который может идеально подойти для определенного вида сайтов.

Большой плюс при создании такого сайта — это то, что сайт с горизонтальной прокруткой будет работать лучше, если у вас много информации. Так же в сочетании с JavaScript, можно получить яркие эффекты, которые добавят сайту «жизни» и насыщенности, так необходимые для каждого посетителя.

Одностраничный сайт
Одностраничный сайт

Сайты с вертикальной прокруткой

Еще один подход при создании сайтов где используется прокрутка, но на этот раз вертикальная. Во многих случаях такой вариант намного удобнее и практичнее, чем предыдущий, с прокруткой по горизонтали. Его плюс состоит в том, что он позволяет свести к минимуму прокрутку страницы, а перемещение внутри сайта осуществляется с помощью ссылок внутри страницы, которые и прокручивают содержимое вверх или вниз.

Одностраничный сайт
Одностраничный сайт
Одностраничный сайт
Одностраничный сайт
Одностраничный сайт

Использование большого и яркого фона

Большой фон популярен во всех видах дизайна сайта, но в одностраничном дизайне он открывает новые возможности с огромным количеством сочетаний и вариантов. Многие дизайнеры используют большие фоновые изображения как способ разделения областей сайта, при этом сохраняя единый взгляд на весь сайт.

Например, некоторые сайты могут иметь фон на заднем плане, который начинается с неба, в верхней части страницы, далее он плавно переходит к сцене с земными элементами, например: дома, люди, машины и т.п., а в нижней части — фон представляет собой подводные просторы с его обитателями.

Представляете какие открываются возможности? (: Они практически безграничны.

Одностраничный сайт
Одностраничный сайт

Использование JavaScript и Ajax для внутренней организации

Если у вас достаточно много информации которой вы хотите поделиться с пользователем, но при этом хотите сделать все в рамках одной страницы, то идеальный вариант — это воплотить задуманное с использованием JS и Ajax.

На сегодняшний день, самым популярным методом является использование слайдов и всплывающих окон.

Одностраничный сайт
Одностраничный сайт

Заключение

Несомненно, одностраничных сайтов гораздо больше, чем мы смогли сегодня показать вам, поэтому, еще одна большая подборка красивых примеров уже ждет вас в следующей статье.



Комментарии (46)

Minigamer / 24 Апрель 2010 в 09:14

Одностраничные сайты обычно для рекламы используются.

Александр / 24 Апрель 2010 в 13:05

А какова вероятность и скорость продвижения сайта-одностраничника в топ 10. По идее, бюджет продвижения будет больше, чем многостраничного сайта.

Илья Федотов / 25 Апрель 2010 в 12:44

Александр, я наоборот считаю, что продвигать такой сайт проще, чем многостраничный, например, блог со статьями.

Laym / 25 Апрель 2010 в 16:46

А мне не нравятся одностраничный сайты. Это для рекламы, а для пользователя они никакой ценной информации не предоставляют.

Иван / 25 Апрель 2010 в 18:44

Одностраничная коммерция все больше и больше набирает обороты. Плюсы я бы сказал такие: хорошая индексация поисковиками, удобно продавать, если товар в единственном наименовании.

Jvn / 25 Апрель 2010 в 19:13

Однажды решил сделать одностраничный сайт каталог фотографий: photo.jvn.ru
Индексируется поисковиками — песня!

Александр / 26 Апрель 2010 в 12:16

Одностраничники хороши только для продажи одной услуги или одного товара. Их хорошо можно заточить под это дело и получать неплохой конверт, главное чтобы тексты были убедительные, да и трафик «теплый» (например свои подписчики).

Кубачев Евгений / 26 Апрель 2010 в 12:27

Обладая таким одностраничником, использую его именно как визитку-портфолио. В планах преобразовать в многостраничник, но пока все держит дописывание своей CMS.

Ahmetoff / 26 Апрель 2010 в 18:01

Исключительно для рекламы. Больше не вижу смысла.

Guz / 26 Апрель 2010 в 19:46

Довольно симпатичная галерея, очень понравилась.

Yurick / 26 Апрель 2010 в 20:07

Одностраничник можно использовать и для визитки.

Владимир / 27 Апрель 2010 в 09:46

Меня в основном привлекают одностраничные «интернет-магазины». Если понаблюдать за тем, как продвигаются продукты зарубежом, можно встретить кучу одностраничных сайтов, посвященных продукту, например пищевой добавке или книге, программе или вообще перфомансу, где можно купить товар, продукт или, скажем, забронировать или купить билет.

В России это не станет трендом в ближайшие 2-3 года, т.к. обычно одностраничные сайты ассоциируются с каким-то лохотроном. Посмотрите сами: «Увеличь член на 10 см», «Увеличь грудь на 2 размера», … — пример чистого лохотрона, с которым у пользователей будут ещё долгое время ассоциироваться одностраничные сайты.

В целом, привлекательны одностраничные сайты своей юзабельностью и меньшими трудозатратами при проектировании. Одностраничный сайт, на котором я могу купить 1 товар гораздо удобнее, чем портал, на котором есть всё, но это надо искать.

Про продвижение могу отметить, что сайт на котором много контента и страниц будет лучше проиндексирован. Но если у тебя уникальный продукт, то релевантность даже одностраничного сайта будет всегда высокой в сравнении с многостраничными. Это уже вопрос нейминга, брендинга, копирайтинга.

Мне кажется, что у одностраничных сайтов выше конверсия, т.к. минимизирован риск пользователя покинуть страницу, даже при изначальной лояльности, что является частой ситуацией на сайтах со сложной навигацией, невнятной типографикой и текстом, с сайтами перегруженными баннерной рекламой и прочим.

У меня есть также желание и предложение создание CMF для построения одностраничных или «малостраничных» сайтов. Если кому это интересно, прошу обращаться на erss_vlad[at]mail.ru.

Alex / 27 Апрель 2010 в 21:48

Идея интересная. Хотелось бы научиться создавать такие сайты на конкретном примере (заметьте, все примеры забугорные). А «наших» нету, да?

Илья Федотов / 28 Апрель 2010 в 10:26

Alex, ну почему же нету? А как же CreativePeople.

Alex / 28 Апрель 2010 в 14:33

Спасибо за пример. Красивый, но не очень удобный или, может не привычный. Прям «пропитан» ориентацией на буржуинет. Только непонятна идея: меню на англ-ом, а текст на русском («ни себе, ни людям»). Возникает чувство, что шаблон где-то одолжили, и свой контент добавили.

Seomarka / 28 Апрель 2010 в 20:02

Вообще одностраничные сайты — это то самое простое и гениальное. Но для создания успешного сайта нужно выложиться так, чтобы эта единственная страница поражала круче, чем огромные площадки. Меньше техники — больше креатива.

Ян / 29 Апрель 2010 в 01:00

Такой сайт без ссылок на другой, более серьёзный по объёму ресурс, смысла не имеет. А иначе такие сайты дорвеями называют.

Заработок в интернете / 29 Апрель 2010 в 20:50

Одностраничные сайты работали, работают и продолжают приносить хорошую прибыль. Все дело в грамотном оформлении и правильной оптимизации страницы.

Jvn / 30 Апрель 2010 в 08:44

Ян, Вы меня пугаете! По-моему, если на сайте представлена суть, то до лампады — есть с него ссылки на другие ресурсы или нет. Смысл — в публикуемой на сайте информации, а делать сайты ради ссылок на другие такие же — вот это точно бессмысленное занятие!

Федор / 30 Апрель 2010 в 20:52

Думаю, что каждый сайт имеет право на жизнь, каждый автор делает сайт для разных целей, так что каждому решать какой будет сайт.

Максим / 1 Май 2010 в 15:29

Как по мне, если скажем делать контактный сайт со своим портфолио, то одностраничный сайт вполне подойдет.

Веб аналитик / 2 Май 2010 в 21:27

Согласен с Владимиром, в России мода на одностраничные сайты появиться через несколько лет, сейчас еще очень много негатива относительно одностраничных сайтов остается — из-за дорвеев и сателитов.

Андрей Микуленков / 4 Май 2010 в 14:43

Рекламировать события (семинары, конференции) такими сайтами можно очень эффективно. В таких случаях действительно достаточно одной емкой, убедительной страницы.

Pihto / 20 Май 2010 в 19:17

Классные примеры. Как правильно говорит Seomarka: меньше страниц — больше креатива. Просто все зависит от информации — если информации много (особенно текстовой), то ее лучше разбить на несколько страниц — для удобства просмотра. Если инфы мало (например сайт-визитка), то конечно можно обойтись одной страницей.

Владимир / 13 Июнь 2010 в 10:35

Вот про креатив, кстати.

Посмотрите на Студию Артемия Лебедева. Чем примечателен их дизайн? Да тем, что в нём ничего лишнего, неплохое юзабилити, есть интрига для пользователей, но самое главное — это контент. Благодаря сочиненным текстам, в большинстве случаев кажется, что ты ходишь по одностраничным сайтам, т.к. текст вписывается в общую концепцию сайта, в тоже время охватывая широкий круг посетителей. А не как принято в интернетах: «Наша компания существует с одна тысяча девятьсот девяносто третьего года и достигла успеха благодаря уникальному продукту — изопропиловому гидробутилтриптамину.»

Некоторые сайты Студии можно читать и слева направо и сверху вниз и справа налево и по диагонали — везде прослеживается логика представления информации, ясность мысли. Текст «цепляет» посетителя. Ссылки и навигация являются продолжением этой мысли.

Не секрет, что наибольшая часть пользователей это недалёкие в вебе люди: им обычно тяжело оценить качество сайта по красоте иллюстраций, плотности и гармоничности сетки. Однако, они любят именно читать сайты. Как газеты. И если в газете пишут однообразно, неинформативно, очевидно, то она уходит в туалет или в прихожку под грязную обувь. Если сайт как-то странно выглядит на мониторе пользователя, то конечно же плох сайт, а не монитор (он у меня так давно, я за него прилично заплатил, да мне друг из ОАЭ привёз) и не браузер (чё эта такое-та?). Поэтому ещё плюсы получают резиновые (зарубежом различают «эластичные» и «жидкие») сайты. Далее получают плюсы те сайты, на которых легко найти официальные контакты. Если информация скрыта (как, например на депозитах), то это понижает лояльность пользователя. Поэтому, хотя может быть это и дурной пример, пошла мода вывешивать на главной номер телефона для связи.

Так в чём же соль одностраничных сайтов? В том, что в них есть всё вышеуказанное, однако юзабилити выше, сайт понятнее и доступнее.

Вот пример эффектного, но плохого одностраничного сайта — nile.

Всё классно сделано, но этот сайт работает только на молодых и развитых людей. Возможно, эта цель (по сути имиджевая) и преследовалась. Как пользоваться такой навигацией?! У меня нет колеса на ноутбуке! Где «Портфолио»? Что я должен делать на сайте? Куда я попал?

Jvn / 20 Июнь 2010 в 20:50

Владимир, с чего вы взяли что этот сайт из одной страницы? По-моему, ничего общего.

Pirat / 23 Июнь 2010 в 17:52

Веб аналитик пишет:

Согласен с Владимиром, в России мода на одностраничные сайты появиться через несколько лет, сейчас еще очень много негатива относительно одностраничных сайтов остается — из-за дорвеев и сателитов.

Да, но в западном сегменте, одностраничные сайт прогрессируют. Я обратил внимание, в основном для продажи какого-либо товара.

Дмитрий / 30 Август 2010 в 07:55

Одностраничный сервис — замечательно индексируется.

Skforussia / 23 Ноябрь 2010 в 14:41

Визитка и есть визитка.

Евгений / 15 Декабрь 2010 в 00:01

Одностраничник хорошо использовать для рекламы своего основного сайта, для привлечения целевой аудитории. Хотя и с одностраничника можно не плохо заработать.

Александр / 19 Апрель 2011 в 20:23

Думаю тоже сделать одностраничник, есть одна идея посмотрим, что получится.

Александр / 20 Апрель 2011 в 18:42

Лично я доволен своим одностраничником, очень удобно для портфолио и небольшого количества информации! Правда слышал, что для продвижения в топ10 такой сайт не очень удачный вариант, а тут пишут, что наоборот. Где же правда?

Илья Федотов / 20 Апрель 2011 в 18:57

Александр, если сайт грамотно спроектирован и верно сделана оптимизация (в целом эти пункты относятся к любому сайту), то его продвижение не намного сложнее многостраничника.

Александр / 20 Апрель 2011 в 19:59

Илья, а в чём заключается сложность его продвижения? С малым количеством информации поисковики хуже индексируют такие сайты?

Илья Федотов / 20 Апрель 2011 в 20:42

Александр, продвижение сайта с одной страницей практически ничем не отличается от продвижения, например, главной страницы блога. Информации на одностраничном сайте может быть сколько угодно, все зависит от того, что необходимо сделать.

Если вас интересуют нюансы и тонкости, я посоветовал бы найти статьи на эту тему на seo блогах, в том числе и на англоязычных.

Александр / 20 Апрель 2011 в 20:54

Спасибо за ответ. Буду изучать.

Леонид / 8 Май 2011 в 22:43

Да не сочтите за рекламу плиз — lzolotarev.ru (одностраничный).

Алексей / 20 Май 2011 в 09:09

Понравилось! Добавил в закладки!

Аноним / 1 Июнь 2011 в 10:42

Клева!

Иван / 14 Июнь 2011 в 10:16

Спасибо. Особенно для сайтов с программами отлично подходит.

КупиКупон / 17 Сентябрь 2011 в 22:55

Здравствуйте! Не сочтите за рекламу, но вот я решил попробовать создать одностраничник на тему скидок и купонов (salebuyshop.ru), кому интересно о результатах продвижения одностраничника, могу поделится инфой.

Dafad / 3 Декабрь 2011 в 04:24

Актуально для сайтов визиток.

Alanz / 28 Февраль 2012 в 08:36

Поддерживаю, клевые одностраничные сайты.

Lila / 15 Май 2012 в 20:00

Очень хорошая статья, особенно вдохновила подборка сайтов. Кстати, я нашла еще однустатью на эту тему, уж очень интересно (:

Георгий / 23 Май 2012 в 15:11

Отличные одностраничники.

Мария / 1 Июль 2012 в 20:59

Подскажите, какие плагины существуют для WP для создания одностраничного продающего сайта?

Добавить новый комментарий

* — поля обязательные для заполнения XHTML: Вы также можете использовать эти тэги: <a href="" title=""> <pre lang=""> <blockquote> Перейти наверх

Поиск

Популярные статьи

Комментарии

  • Кек: Ни один из сервисов не работает.
  • Alex: На самом деле все конечно правильно написано, но для России...
  • Анна: Несколько советов о том, как самому придумать логотип есть...
  • Agen Sabung: Great web site you have here. It’s hard to find excellent writing like yours these days. I really...
  • Павел Тимощенко: Аналогично скриню картинки для некоторых...
  • Зенков Андрей: Учитывая, что иконки служат для подсказки тем,...
  • Зенков Андрей: Дизайнер должен ответственно подойти к...
  • Оля: DizGraf, вот отличный русскоязычный бесплатный фотобанк.

Друзья

Нашли ошибку?

Если вы нашли грамматическую ошибку на сайте, выделите ее и нажмите сочетание клавиш Ctrl+Enter.

Система Orphus