Делаем сайт фиксированной ширины удобным для мобильных устройств
Опубликовано: 2017-06-21Последнее обновление: 22 мая 2020 г.
Создание мобильных устройств. Было время, когда больше всего меня как графического дизайнера и веб-разработчика беспокоило то, как реализовать функцию CSS в Internet Explorer. Мало того, что IE по-прежнему является головной болью в тылу, теперь нам приходится беспокоиться о многочисленных размерах экрана и операционных системах.
Придет время, когда мобильные устройства превзойдут настольные компьютеры. Поскольку мобильные устройства стали настолько заметными в нашей повседневной жизни, бывают случаи, когда веб-дизайнерам нужны немедленные результаты. Если вы один из тех дизайнеров или программистов, у которых просто нет времени на преобразование статического веб-сайта в тему WordPress, удобную для мобильных устройств, у вас есть надежда, друг мой. Когда дело доходит до просмотра всего вашего контента на мобильных устройствах, вы можете добиться этого с помощью небольшой оптимизации CSS и HTML.
http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png
Что! Компания предоставляет привлекательные и эффективные услуги веб-дизайна для агентств по всему миру. Узнайте больше о наших услугах веб-дизайна White Label и о том, как мы можем помочь вам и вашим клиентам создать или улучшить свое присутствие в Интернете. Начните сегодня!
По данным comScore, во всем мире на мобильные устройства приходится более половины минут, проведенных в сети.
Удобные для мобильных устройств или адаптивные веб-сайты имеют возможность автоматически настраивать ширину вашего веб-сайта в соответствии с устройством зрителя. Горизонтальные полосы прокрутки недопустимы в адаптивном дизайне. Если вы просматриваете свой текущий веб-сайт на мобильном устройстве и видите полосу прокрутки в нижней части телефона или планшета, скорее всего, ваш веб-сайт (или элементы вашего сайта) не оптимизирован для мобильных устройств. Эти горизонтальные полосы прокрутки портят впечатление пользователя и, скорее всего, нажмут кнопку «Назад». Люди настолько привыкли к вертикальной прокрутке на своих устройствах, что когда пользователи обнаруживают, что им приходится прокручивать как вертикально, так и горизонтально для просмотра контента, они чувствуют себя некомфортно и покидают сайт.
С этого момента все включено, веб-сайты дизайна имеют классы CSS и идентификаторы для всего, и я имею в виду все.
От элементов заголовка и меню до тегов <p> в нижнем колонтитуле. Вы захотите настроить размер всех этих вещей в зависимости от ширины экрана. Перемещение, изменение размера и масштабирование становятся намного проще, когда на элемент можно настроить таргетинг с помощью CSS.
CSS Media Queries проще в использовании, чем вы думаете.
Когда я впервые обратил внимание на медиа-запросы, я подумал, что это часть языка программирования, а не форма CSS. Меня охватило чувство облегчения, когда я узнал, что это такое на самом деле, и с тех пор я использую его во ВСЕХ своих веб-проектах.
Медиа-запросы — это, по сути, правила CSS. Если ваш экран такой ширины, примените этот CSS только к этим элементам. Посмотрите ниже.
Только экран @media и (минимальная ширина: 100 пикселей) и (максимальная ширина: 699 пикселей) {
тело { цвет фона : синий}
}
Таким образом, приведенный выше код просто говорит, что если ширина экрана пользователя составляет от 100 до 699 пикселей, измените цвет фона тела на синий. Именно здесь маркировка каждого div и span на вашем сайте становится решающей. Манипулирование этими элементами для экранов разной ширины становится проще благодаря правильной маркировке.
Css-tricks.com перечисляет для нас множество вариантов ширины для мобильных устройств в качестве краткого справочника.
/* ———— Galaxy S5 ———— */
/* Портрет и пейзаж */
@медиа экран
и (ширина устройства: 360 пикселей)
и (высота устройства: 640 пикселей)
и (-webkit-device-pixel-ratio: 3) {
/*****ВАШ КОД ЗДЕСЬ*****/
}
/* ---- HTC One ---- */
/* Портрет и пейзаж */
@медиа экран
и (ширина устройства: 360 пикселей)
и (высота устройства: 640 пикселей)
и (-webkit-device-pixel-ratio: 3) {
/*****ВАШ КОД ЗДЕСЬ*****/
}
/* ———— iPhone 5 и 5S ———— */
/* Портрет и пейзаж */
@медиа только экран
и (минимальная ширина устройства: 320 пикселей)
и (максимальная ширина устройства: 568 пикселей)
и (-webkit-min-device-pixel-ratio: 2) {
/*****ВАШ КОД ЗДЕСЬ*****/
}
/* ---- Айфон 6 ---- */
/* Портрет и пейзаж */
@медиа только экран
и (минимальная ширина устройства: 375 пикселей)
и (максимальная ширина устройства: 667 пикселей)
и (-webkit-min-device-pixel-ratio: 2) {
/*****ВАШ КОД ЗДЕСЬ*****/
}
Для телефонов Galaxy, HTC и Apple существует гораздо больше кода медиа-запроса. Кроме того, указана ширина планшетов Ipad, Galaxy и Nexus. Все, что вам нужно сделать, это ввести этот код в файл CSS вашего сайта и заполнить пустые скобки CSS своим собственным кодом! Сделанный!
Ваш сайт адаптивный, но он все еще не совсем правильный
Вы можете начать замечать, что некоторые элементы вашего сайта занимают довольно много места на мобильных устройствах, например, ваше главное меню. Делая его адаптивным, вы, скорее всего, применили «float: none» к тегам <li> в вашем меню. Но теперь меню занимает огромное место в верхней части вашего сайта. Вам нужно будет преобразовать ваше главное меню в раскрывающееся меню с медиа-запросами jQuery и CSS. Css-tricks.com также объясняет, как это сделать.
Вы также можете считать некоторые элементы незначительными, которые можно найти как на настольных, так и на мобильных устройствах. . Вы можете избавиться от них с помощью CSS:
#main-content .sidebar img { display : none}
}
Эти настройки сайта имеют тенденцию делать веб-сайты очень длинными, заставляя пользователей много прокручивать. Именно здесь якорный текст (для зрячих пользователей) или ссылки для пропуска (для программ чтения с экрана) становятся вашими друзьями.
Якорный текст — это интерактивная ссылка, которая позволяет пользователям переходить к определенному разделу вашей веб-страницы без прокрутки. Это удобный метод для мобильных сайтов. Приведенный ниже код является примером якорной текстовой ссылки.
<a href="#skip">Нажмите здесь, чтобы перейти к основному содержанию</a>
<a id="skip"></a>Основной контент начинается здесь
Пропустить ссылки в основном используются для чтения с экрана и позволяют пользователям с ограниченными возможностями обходить или пропускать повторяющийся веб-контент, например навигацию по меню, и получать доступ к интересующей их информации.
Если ссылки для пропуска имеют правило CSS «display:none», программы чтения с экрана делают ссылку «недоступной». Таким образом, способ обойти это — расположить ссылки за пределами экрана, чтобы программы чтения с экрана все еще могли распознавать ваши ссылки и позволять им пропускать ваш новый мобильный сайт.
.скип-ссылка {
позиция: абсолютная !важно;
сверху: -9999px !важно;
слева: -9999px !важно;
}
Итак, это быстрый и простой способ превратить ваш веб-сайт фиксированной ширины в удобный для мобильных устройств. Кроме того, не забудьте установить для всех ваших изображений ширину: 100%; высота: авто». Любые изображения, элементы div или диапазоны, которые имеют заданную ширину в пикселях, будут создаваться на горизонтальной полосе прокрутки на мобильных устройствах, поэтому не забудьте установить для них либо проценты, либо разную ширину для различных устройств с помощью медиазапросов.
Это может занять немного времени, но поверьте мне, однажды изучив его, вы будете использовать его вечно. Вы будете использовать этот метод на каждом веб-сайте, который когда-либо будете создавать, потому что даже новейшие адаптивные темы и шаблоны WordPress или Joomla требуют небольшой доработки, чтобы заставить их выглядеть так, как вы хотите. Это особенно верно в условиях постоянно меняющегося рынка мобильных устройств.
Это может занять немного времени, но поверьте мне, однажды изучив его, вы будете использовать его вечно. Нажмите, чтобы твитнуть-Иззак Хейл, старший графический дизайнер