В пятой части серии мы увидели правила, которые мы должны применять, чтобы сделать наш веб-сайт отзывчивым и обеспечить хороший макет на планшетах. В этой последней части мы закончим его кодом для мобильных устройств и некоторыми заключительными соображениями и советами.
Прежде чем показывать вам код CSS с правилами, присущими мобильной версии, нам нужно добавить небольшой фрагмент кода HTML для создания мобильной версии нашего меню. Как видно из скриншота, меню мобильной версии представляет собой выпадающий список (элемент <select> ).
Вскоре мы увидим, почему и как позволить веб-сайту отображать другой стиль меню в соответствии с используемым устройством, но в качестве первого шага давайте добавим эти несколько строк после тега nav , использованного для создания нашего списка меню.
<select id="menu-select"> <option selected="selected" value="">Go to...</option> <option value="/">Homepage</option> <option value="/news">News</option> <option value="/graphics">Graphics</option> <option value="/mobile">Mobile</option> <option value="/web-design">Web Design</option> </select>
Ну, очевидно, приведенный выше HTML-код, если он используется сам по себе, не вызывает никаких изменений. Вот почему нам также нужно добавить несколько строк кода JavaScript. Вот они:
$("#menu-select").change(function(){ window.location.href = $(this).children("option:selected").val(); });
Структура кода очень проста для понимания. Мы слушаем событие change для элемента с идентификатором menu-select и прикрепляем его к анонимной функции, которая запускается сразу после запуска события. После этого мы будем использовать значение элемента option чтобы изменить URL адресной строки и перенаправить пользователя на выбранную страницу.
С помощью этой небольшой функции (в условиях, которые мы вскоре углубим) у нас будет возможность без каких-либо проблем посещать другие страницы нашего веб-сайта, независимо от того, используем ли мы ПК или планшет / смартфон.
В этом небольшом введении давайте посмотрим на медиазапросы CSS, применяемые на всех тех устройствах, максимальная ширина которых не превышает 480 пикселей. Первое, что вы заметите, это то, что шрифты и изображения изменились. Для маленьких экранов первое правило, которое нужно помнить, это то, что все должно быть: ясно, быстро и понятно.
Таким образом, слишком тяжелые изображения или настроенные шрифты могут сделать загрузку страниц слишком медленной, и это повлияет на успех веб-сайта и, следовательно, на достижение ваших целей.
Вот код для этой части:
@media screen and (max-width: 480px) { body { font-family: Calibri,Arial,Helvetica,sans-serif; } #banner { background-image: url("../images/mobile-banner.png"); } .menu { display: none; } #wrapper { width: inherit; } a.menu-item-link { font-family: Calibri,Arial,Helvetica,sans-serif; } #menu-select { display: block; margin: 0.5em auto; width: 90%; font-size: 1em; } #newsletter-box { display: none; } #mobile-newsletter-box { display: block; } #mobile-newsletter-box * { width: 90%; margin: 0em auto 0.5em auto; } #mobile-newsletter-box > form > * { display: block; } input#mobile-newsletter-email { font-size: 1em; } #mobile-newsletter-box p { padding: 0; text-align: center; } #mobile-newsletter-box a { font-size: 1.2em; font-weight: bold; color: #FFFFFF; } .long-box, .small-box, #banner { box-shadow: none; } #team-logo-bar { text-decoration: none; width: 100%; display: inline-block; text-align: center; } }
Прежде чем сосредоточиться на наиболее важных частях кода, давайте вернемся к теме стиля меню, которая заслуживает основного рассмотрения. Вы видите, что мы показали раскрывающееся меню, в то время как скрывали список меню, который был виден на настольных ПК и планшетах. Мы применили к menu классов display: none; правила display: none; ,
С другим правилом, которое display: block; мы применили к элементу с идентификатором menu-select , после чего мы открыли выпадающее меню (более понятное и читаемое для мобильной версии).
Сказав это, мы должны рассмотреть проблему, которую должен иметь в виду хороший веб-дизайнер: что, если JavaScript отключен? Если у пользователя включен JavaScript, у него не будет проблем с использованием этого нового меню; если JavaScript отключен, событие change будет запущено, но обработчик — нет. Поэтому, если JavaScript отключен, пользователи не могут заходить на страницы, отличные от текущих. Большая проблема!
Возможных решений этой проблемы несколько, но, поскольку обсуждение выходит за рамки данной статьи, я дам вам лишь пример для размышления, оставив углубленное изучение проблемы до следующей статьи. Потенциальное решение может заключаться в использовании функции JavaScript, связанной с событием «изменить размер», которая вносит изменения, о которых говорилось ранее, а также отвечает за управление скрытием списка меню и отображением раскрывающегося меню.
Действуя так, если JavaScript отключен и пользователь находится на мобильном устройстве, раскрывающееся меню не будет отображаться, но вместо этого он найдет ранее упомянутый список меню, который все еще можно использовать, поскольку он состоит из обычных ссылок. , Таким образом, пользователь может получить доступ к дополнительному контенту по ссылке, предоставленной в меню. Дискуссия интересна и заслуживает внимания, но, как уже было сказано, она станет темой будущей статьи.
Теперь, когда мы обсудили проблему меню, пришло время сосредоточиться на других темах, таких как: шрифты и изображения, расположение полей и тени. Давайте перейдем на шрифты, во-первых. Необходимо учитывать две вещи: его размер и стиль, который должен соответствовать устройству. Как нетрудно догадаться, размер шрифта должен быть пропорционален используемой среде: больше для настольных ПК и меньше для планшетов и смартфонов.
Кроме того, помните, что, особенно для содержимого и чистого текста, вы должны придерживаться наиболее распространенных и «стандартных» шрифтов, потому что это гарантирует, что все, кто посещает ваш сайт, увидят его так, как вы его собираетесь видеть, и с большей легкостью чтение.
Как видите, я установил один из самых распространенных шрифтов, Calibri. Почему этот выбор? Ответ прост: пользовательские шрифты подразумевают дополнительный запрос, и файл обычно не очень маленький. Вы согласитесь, что для мобильных устройств симпатичный шрифт не так важен, как удобочитаемость, потому что экраны меньше. Кроме того, вы должны иметь в виду, что соединение также медленнее и производительность очень важна. Поэтому, чем меньше кб будет загружено, тем лучше будет пользователь, просматривающий наши страницы.
На настольном компьютере использование симпатичного шрифта не влияет на его эффективность, потому что обычно оно подразумевает быстрое соединение, в то время как на мобильных устройствах изменения всегда следует применять для достижения наилучших результатов. Однако даже в этом случае пользовательский шрифт, указанный в правилах, загружается. Но почему? Это действительно необходимо? Ответ заключается в том, что можно легко избежать загрузки шрифтов.
Более правильным вариантом может быть удаление правил шрифта из общей таблицы стилей и создание новой точки останова. При этом, когда сайт отображается на мобильном устройстве, правила, применяемые к этому конкретному устройству, перезаписываются, в то время как пользовательский шрифт (ранее видимый в версиях для планшетов и настольных компьютеров) просто не загружается, что приводит к большей скорости содержание и стиль.
Фактически, если устройство больше, чем размеры, указанные в диапазоне, это означает, что человек использует по меньшей мере планшет, поэтому шрифт может быть показан во всей его красоте и особенности; в противном случае этот отрывок будет удален, поскольку он не будет ни полезным, ни эффективным.
Итак, давайте напишем еще один медиа-запрос (где мы установим диапазон значений):
@media only screen and (min-width : 481px) { a.menu-item-link { font-family: Bebas Neue, Calibri,Arial,Helvetica,sans-serif; } }
Есть еще одна вещь, такая как шрифт, который можно перемещать в диапазоне, который мы ранее создали, и это баннер; действительно, то же самое можно сделать для изображения баннера.
Мы оптимизируем под мобильные телефоны и пока нам было все равно, потому что мы говорили о планшете, но сейчас уместно даже коснуться этой темы. Мы делаем речь, чтобы улучшить производительность, так зачем скачивать два изображения, когда мы всегда будем просматривать одно из них одновременно? Даже в этом случае строки кода, относящиеся к баннеру, должны быть перемещены из общей таблицы стилей и помещены в диапазон следующим образом:
@media only screen and (min-width : 481px) { #banner { background-image: url("../images/banner.png"); } }
И последнее, для тени ящиков мы сделаем то же самое, что и для транзакций; На маленьком экране тени являются фундаментальными? Фактически это эффект, особенность которого очевидна на ПК и не имеет такой же эффективности на других устройствах.
Выводы
Эта серия статей о том, как создать адаптивный, удобный для мобильных устройств веб-сайт с нуля, закончилась. Я надеюсь, вам понравилось!
Если есть какой-то совет, который я могу вам дать, это продолжать «практиковаться с этим», не только в практической реализации веб-сайта, но и на этапе проектирования, который имеет фундаментальное значение, потому что чрезвычайно важно, чтобы все планируется подробно; Только в этом случае вы избежите напрасной траты времени и исчерпывающих исправлений, и вы прекрасно поймете, как организовать ваш контент и улучшить конечный результат.