ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Свой первый сайт я создал в 2008 году, тогда же впервые познакомился с языком разметки HTML4. В то время в Интернете уже появились подробные инструкции, как создать простейший сайт, используя стандарт HTML4. Речь о верстке сайта с использованием CSS тогда не шла. Обходились средствами HTML и применяли табличный дизайн.

Пройдя в течение года, самостоятельно, курс JavaScript, освоив серверные технологии создания сайтов PHP и MySQL, в 2009 году появился настоящий сайт. Это был далеко не тот сайт, на котором вы сейчас находитесь, но это уже был большой прогресс, по сравнению с тем, что было год назад. Сайт имел систему управления контентом (CMS), регистрации пользователей, гостевую книгу, форум и другие функции, свойственные продвинутым сайтам. Дизайн сайта не выдерживал всяческой критики и поэтому выглядел довольно таки примитивно. Чтобы как-то исправить положение, пришлось последовательно заниматься изучением вопросов верстки, научиться пользоваться графическими редакторами Adobe Fireworks, Adobe Flash и Adobe Photoshop, для того чтобы создавать простейшие рисунки, иконки, анимацию.

Время шло, сайт постепенно наполнялся контентом, появлялись новые блоки и разделы. Менялся и внешний облик веб-страниц. Вы спросите, для чего я это все рассказываю? Схема построения сайта, изначально заложенная несколько лет назад, дала о себе знать сегодня. Год назад, стало ясно, что требует замены не только дизайнерское оформление, но функциональность всего сайта. Косметический "ремонт" здесь уже исчерпал себя. Тем более что уже на протяжении ряда лет сайтостроители стали пользоваться новыми стандартами, появились веб-браузеры, в которых эти стандарты нашли воплощение. Рисовать сайт стало намного легче, благодаря появлению CSS3. Кроме этого все больше и больше пользователей стали заходить на сайт с мобильных устройств. Старая версия уже не могла удовлетворять новым потребностям.

Решение пришло само. Исчерпавший свои возможности сайт надо было создавать заново. Стандартом сайта, однозначно, должен стать стандарт HTML5. На первый взгляд, когда знаешь что делать, кажется все просто. С функциональностью сайта, здесь вроде все понятно. Найден способ отсечения спамеров, добавлены новые функции. С кодировкой сайта тоже все ясно, это должна быть UTF-8. При создании веб-страниц использовать шаблоны и функции. Структура сайта также не вызывает сомнения. Дизайн сайта нарисован в Photoshop. Самое время приступать к работе.

Но это еще не все. Забыли определиться, в каких браузерах должен смотреться сайт. Заходим и смотрим статистику: больше всего пользователей используют браузер Firefox, затем идет Chrome, Opera и на последнем месте Internet Explorer — около 5%. Все последние версии этих веб браузеров поддерживают HTML5 и CSS3. 95% пользователей пользуются операционной системой Windows. Штатным веб браузером этой системы является IE. Современный веб-браузер установлен на последней версии Windows — седьмой. Более ранние версии больше не поддерживаются. Значит кроме последних версий веб-браузеров, сайт должен тестироваться и в IE7 и IE8. Браузер IE6 принято решение сайтом не поддерживать.

А как будет смотреться сайт на экранах с различным разрешением, например в мобильных устройствах, планшетниках? Кто пользуется веб-редактором Dreamveawer CS5, может это сделать прямо на месте. Ну, а как сайт будет смотреться в мобильных устройствах, можно протестировать на одном из сервисов GOOGLE GoMoMeter.

И так, прежде чем приступить к разработке сайта, устанавливаем все выше упомянутые браузеры на компьютер, а также для тестирования старых версий IE, устанавливаем программу IETester. Хотя, если у вас установлен браузер IE9, то протестировать сайт в версиях IE7 и IE8 можно промо в нем.

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

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