×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Адаптация → Подготавливаем сайт к адаптации под мобильные устройства


Автор: / Дата:

Подготавливаем сайт к адаптации под мобильные устройства

Здравствуйте уважаемый посетитель!

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

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

В связи с тем, что объем данного материала не позволяет рассмотреть его одной статье, эта тема разбита на 3 части:

  • Подготовка сайта к адаптации под мобильные устройства.
  • Формирование медиа-запросов для разных разрешений экранов.
  • Создание выпадающего меню для работы с малым разрешением экранов (смартфоны).

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

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

Содержание


  • Как имитировать просмотр сайта с мобильного устройства на обычном компьютере
  • Составляем адаптивный макет (прототип)
  • Определяем контрольные точки в медиа-запросах
  • Определяем способ адаптация
  • Изменяем масштабирование веб-страниц
  • Исходные файлы сайта

Как имитировать просмотр сайта с мобильного устройства на обычном компьютере


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

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

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

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

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

Для того, чтобы открыть панель разработчика возможно использовать кнопку F12, либо это можно сделать через меню браузера. Порядок открытия панели разработчика аналогичен, практически, для всех браузеров. Ниже приводится вариант открытия панели через меню браузера на примере Google Crome.

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

Рис.1

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

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

Рис.2

Как видно, при разрешении смартфона 320px страница неадаптивного сайта открыта на всю ее ширину. И таким образом, в связи с малым размером экрана, текст в этом случае настолько мал, что совершенно не читаем. Это получается из-за того, что в обычном режиме страница масштабируется таким образом, чтобы ее ширина была равной ширине экрана.

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

Составляем адаптивный макет (прототип)


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

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

К примеру, при ширине экрана в 320px на область контента у нашего сайта практически ничего не остается. В этом случае все место будет съедаться сайдбаром, который имеет фиксированную ширину 240px. Да, и Главное меню в шапке и в футере при такой ширине явно не поместится на странице.

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

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

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

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

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

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

Рис.3 Существующий вариант

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

Рис.4 Адаптивный вариант

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

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

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

Определяем контрольные точки в медиа-запросах


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

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

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

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

При том, что у нас сайдбар имеет фиксированную величину в 240px, то одним из вариантов такой контрольной точки может быть ширина в пределах 600рх.

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

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

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

Определяем способ адаптация


Существует различные варианты разработки адаптивного сайта под мобильные устройства, например с использованием медиа-запросов, фреймворков и скриптов. Бывают варианты, когда для этого добавляются отдельные таблицы CSS. Встречаются и такие сайты, у которых для обеспечения работы на мобильных устройствах создаются отдельные шаблоны, размещаемые как на основном домене, так и поддоменах.

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

На мой взгляд такое сочетание является довольно удобным способом реализации адаптивного веб-дизайна, так как это предусматривает применения инструментов (медиа-запросов), которые специально и были созданы для этих целей. И отказываться от этого, наверное, будет нелогично. А использования библиотеки jQuery в скрипте для управления выпадающего меню позволит сделать это меню достаточно удобными и хорошо воспринимаемым пользователями.

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

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

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

Для этого будем использовать медиа-запросы "width" вместо "device-width". В дальнейшем, при непосредственном их формировании рассмотрим это более подробно.

Изменяем масштабирование веб-страниц


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

Как отмечалось ранее в обычном режиме страница масштабируется на всю ширину экрана (это наглядно видно из рис.2).

Для того, чтобы страница отображалась в соответствии с размером экрана устройства существует метатег "viewport", который сообщает браузеру, как следует обрабатывать размеры страницы и изменять ее масштаб. В этом случае для метатега устанавливается значение width=device-width.

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

Данный метатег необходимо добавлять в заголовок <head/> на всех страницах (в нашем случае в файлы "index.php", "article.php", "righting.php", "action.php" и "contacts.php").

Ниже показано как будет выглядеть фрагмент файла "index.php" с добавленным метатегом "viewport" в заголовок <head/> .

  1. <head>

  2. <meta charset="utf-8">

  3. <title>Главная</title>

  4. <meta name="viewport" content"=width=device-width, initial-scale=1.0">

  5. <meta name="Description" content=""Краткое описание содержания страницы">

  6. </head>

Рис.5

Ниже, на скриншоте можно увидеть, как теперь стала отображаться страница на смартфоне iphone 5.

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

Рис.6

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

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

Исходные файлы сайта


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

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments