Сайты состоящие из одной страницы в последнее время становятся очень популярными. Создание одностраничных сайтов конечно же подойдет не всем пользователям и организациям. Одностраничные сайты вызывают большой интерес, из-за своей популярности, и в том случае если они сделаны правильно, то ваш сайт может стать весьма успешным. Самое главное, понять то, что вашему проекту это подходит.
Подходящий вариант для одностраничного сайта не будет иметь большого количества и объёма контента. Ваша задача с помощью одной страницы донести суть и смысл, в виду этого у вас вы ограниченны количеством различных трюков и анимации, которые вы можете воплотить в таком сайте, прежде чем посетитель потеряет интерес к сайту. Еще проблема в том что большинство таких одностраничных веб-сайтов имеют нестандартную разметку. Нужно попытаться разместить большое количество контента на одной странице, да еще чтобы все это не выглядело как нагромождение, что все нормально читалось и пользователь не устал от скроллирования длинной "колбасы информации.
Область использования одностраничных сайтов разнообразная, но наиболее подходящими, вариантами для использования таких сайтов будут личные портфолио и сайты организаций и компаний, которые предлагают небольшое количество товаров или услуг. Если Вы решили что такой сайт подходит, нужно убедиться в том, что выбранный сайт подходит для вашего бизнеса и деятельности. Принципами, которыми вы должны руководствоваться, создавая любой сайт мы изложили ниже, но эти принципы особенно критичны для одностраничных веб-сайтов.
1. Удерживайте внимание посетителей в нужном месте
Необходимо для посетителей сайта сделать всё как можно проще, конечно же насколько это возможно. Рассматривая одностраничный сайт как вариант для своего сайта, скорее всего, у вас нет большого объёма контента для размещения на сайте. Это уже хорошо. Зачастую мы размещаем на сайтах определенное количество ненужной информации. На одностраничным сайте не должно быть ничего лишнего, т.к. его единственная задача – донести до посетителя свою суть. Если вы предположим фотограф, создающий свой одностраничный сайт-портфолио, то разместите только ваши лучшие работы; и даже не вздумайте размещать посредственные фотографии.
Избавьте ваш сайт от всего лишнего и используйте только нужную информацию, имеющую смысл и значение. Это хорошо для любого сайта, большинство многостраничных сайтов могут иметь некоторое количество лишней информации, т.к. посетитель всегда знает, где находится нужная ему информация. Но вот в случае с одностраничными сайтами у вас есть, только один шанс: если посетитель не найдёт нужной ему информации, он просто уйдет с такого сайта.
У нас не должно возникать вопроса о том, что этот веб-сайт что то продаёт или портфолио должно отражать все, самую суть.
2. Создайте иерархию сайта
Одностраничные сайты имеют своей задачей не только сфокусировать внимание пользователя, но и представить ваш продукт или услугу. Если какой-то одностраничный сайты произвел на вас впечатление, то у него, возможно, имеется одна единственная цель: представить дизайн-работы какого либо агентства либо же привлечь внимание к событию которое произойдет..
Хороший дизайн и визуальная иерархия могут помочь определить цели вашего сайта. Вы, как создатель сайта, имеете возможность направлять взгляд посетителя туда, куда вы хотите чтобы он перешёл. Для посетителя будет естественно замечать в первую очередь крупные объекты, а объекты мелкие – в последнюю. Главные, целевые объекты не должны быть располагаться в низу страницы и быть меленькими.
Главные параграфы с крупным шрифтом, стали столь популярными именно потому, что они бьют точно в цель и привлекают внимание. Меньше всего, вы хотели бы видеть на сайте фотографа – это в какой школе он учился. Но вам очень важно знать какие фотографии он делает и на чем специализируется.
В том случае если вы поняли, что у вас слишком много информации, чтобы вы могли достигнуть цель на одностраничном сайте, то создавайте лучше многостраничный.
3. Понятная простая навигация
Есть одностраничные сайты которые по сути являются обычными статичными страницами, задача которых перенаправлять посетителей на другие веб-сайты. Например, музыкант на своей странице может поставить кнопку «Видео», которая перенаправит посетителя на его страницу в YouTube. В этом нет абсолютно ничего плохого, и так даже проще (особенно, в плане кодировки). Единственное, что посетитель должен знать – это то, что он будет перенаправлен на внешнюю страницу.
Если ваш одностраничный сайт создавался для продажи продукта, а ссылка «Купить» отправляет покупателя на внешнюю платёжную платформу без предупреждения, вы можете потерять некоторых своих покупателей.
Ваша цель – сделать всё максимально просто. Редирект пользователя на внешние сайты без предварительного уведомления может вызывать у пользователя недоумение. Он может подумать, что ссылка не работает, либо, что ссылка указана неверно. Старайтесь использовать специальные иконки (огромное количество бесплатных вариантов можно найти в интернете) или заголовки, чтобы пользователь знал, куда он будет перенаправлен.
4. Эксперименты с дизайном
Теперь мы дошли до весёлой части: использование одностраничного веб-сайта, чтобы показать себя и свои навыки. Вы не хотите, чтобы ваш веб-сайт был скучным или был похож на другие веб-сайты – так будьте смелее, экспериментируйте. Переведите дизайн на новый уровень – мыслите нестандартно. Необычный дизайн привлекает внимание к Вашему продукту и делает его запоминающимся.
Одностраничные сайты становятся синонимами великолепного дизайна, поскольку работа с большим «полотном» открывает для вас большие возможности. Вы можете не использовать один и тот же фон везде; Вы можете менять его для разных разделов. Зачастую посещение одностраничных сайтов напоминает просмотр журналов или хорошо составленных презентаций. Пользуйтесь этими возможностями.
Создайте потрясающий дизайн: используйте большие картинки, который заполняют всё окно браузера, или шикарный иллюстрированный фон. Это не только даст вам преимущество перед другими веб-сайтами – в итоге ваш сайт может попасть в один из обзоров о веб-дизайне.
5. Эксперименты с кодом
Если вы хотите показать не только свои навыки в дизайне, но и навыки в написании кода, то одностраничные сайты позволяют это сделать. Наличие опыта в разработке кода в данном случае критично, поэтому уделите внимание деталям. Код может поднять ваш сайт на новый уровень.
Вот несколько моментов, которым стоит уделить внимание: цвет и поведение ссылок (особенно, в режиме выбора); внешний вид и поведение форм (подогнка форм под дизайн сайта с использованием AJAX и JavaScript); отправка данных и сообщения об ошибках (здесь используются формы и AJAX скрипт); таблица и местоположение контента (в том числе, поведение контента в окне браузера). Все это должно соответствовать дизайну и работать заодно с дизайном.
6. Про анимацию
В дополнение к тому, что сказано выше (забота о деталях при написании кода), вы можете использовать код для создания анимации на странице. И старайтесь не быть скучным. Добавьте в вашу страницу ощущение жизни и движения; заставьте её выглядеть так, словно она движется вместе с посетителем. Добавьте забавную анимацию и интересные переходы, чтобы ваш сайт действительно выделялся среди других.
Языки jQuery и AJAX стали общепринятыми для создания анимации на сайте. Неважно, что вы делаете: заставляете контент появляться с разных сторон или создаёте фон в виде слайд-шоу – сохраняйте вовлечённость аудитории в процесс просмотра сайта.