Сайт

Как сделать адаптивный сайт: Адаптивная вёрстка сайта на примере создания главной страницы

20.10.2017

Содержание

Как построить адаптивный сайт при помощи CSS?!

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

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

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

Разочарование пользователей

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

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

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

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

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

Пошаговое руководство

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

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:


<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8"/>
        <title>Респонсивный сайт Демо</title>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0" />
        <link href="styles/main.css" type="text/css" rel="stylesheet">
        <!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type='text/javascript' src='scripts/respond.min.js'></script>
</head>
<body>

        <div>

            <header>

                <nav>
                    <ul>
                        <li>
                            <a href="#main" title="к главному контенту">Скролл к контенту</a>
                        </li>
                    </ul>
                </nav>

                <h2>Logo</h2>

                <nav>
                    <ul>
                        <li><a href="#" title="Home">Главная</a></li>
                        <li><a href="#" title="About">Купить</a></li>
                        <li><a href="#" title="Work">Сервис</a></li>
                        <li><a href="#" title="Contact">Контакты</a></li>
                    </ul>
                </nav>

                <div>
                    <img src="images/merc.jpg" alt="banner" />
                </div>

            </header>    

            <section>
                <h2>Технические данные</h2>
                <p>Открытый автомобиль Mercedes 190 SL называли кабриолетом из-за трёхместной компоновки салона.
Двигатель ставили один — новый четырёхцилиндровый агрегат рабочим объёмом 1,9 л. «Четвёрка» получилась путём
отсечения двух цилиндров от рядного мотора родстера 300 SL Gullwing. У двух двигателей одинаковый диаметр
цилиндра (85 мм), но ход поршня уменьшился с 88 до 83,6 мм. На «сто девяностом» мотор, оснащённый двумя
карбюраторами Solex, выдавал 105 сил и 142 Н•м. Кабриолет (сухая масса — 1160 кг) комплектовался полностью
синхронизированной «механикой» с четырьмя ступенями и мог разгоняться до 171 км/ч. Покупателям были доступны машины как с мягким верхом (цена — $3998), так и с демонтируемым жёстким ($4295). 
Производство в Штутгарте шло с 1955 по 1963 год, а всего был сделан 25 881 автомобиль. </p>
            </section>

            <aside>
                <h2>История</h2>
                <p>История модели Mercedes SL уходит корнями в 1954 год — именно тогда на автосалоне
в Нью-Йорке немцы представили двухдверку Mercedes 190 SL. Можете себе представить уровень эстетического шока посетителей тогдашнего мотор-шоу. Под кузовом пленительной красоты скрывалась 
укороченная платформа от седана Mercedes W120 Ponton и стальной монокок. Подвеска была полностью независимая — с двухрычажкой спереди и качающимися полуосями сзади. Длина — 4290 мм,
расстояние между осями — 2400 мм. </p>
            </aside>

        </div>

    </body>
</html>

CSS

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:


/* Макет */
#wrapper {
    width: 96%;    
    max-width: 920px;
    margin: auto;
    padding: 2%;
    } 

    #main {
        width: 60%;
        margin-right: 5%;
        float: left;
        }        

    aside {
        width: 35%;
        float: right;
        }

/* Logo  h2 */
header h2 {
    height: 98px;
    width: 216px;
    float: left;
    display: block;
    background: url(images/sllogo.png) 0 0 no-repeat;
    text-indent: -9999px;
    }

/* Навигация */
header nav {
    float: right;
    margin-top: 40px; 
    }

    header nav li {
        display: inline;
        margin-left: 15px;
        }
header nav ul li a {
    text-decoration:none;
        color:#333;}

#skipTo {
    display: none;
    }
    #skipTo li {
        background: #ccc;
        }

/* Главная картинка*/            
#banner {
    float: left;
    margin-bottom: 15px;
    width: 100%;
    }

    #banner img {
        width: 100%;
        height: auto;
        }

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

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

Переключение главной навигации

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


/* Медиа-запросы */
@media screen and (max-width: 480px) {

    #skipTo {
        display: block;
        }

    header nav, #main, aside {
        float: left;
        clear: left;
        margin: 0 0 10px; 
        width: 100%;
        }    
        header nav li {
            margin: 0;
            background: #ccc;
            display: block;
            margin-bottom: 3px;
            }
            header nav a {
                display: block;
                padding: 10px;
                text-align: center;
                }

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

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


<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Cвойство width, отвечает за размер области просмотра. Он может быть установлено на определенное число пикселей, width=960, или на device-width значение, что является шириной экрана в пикселях в масштабе 100%. initial-scale свойство управляет масштабом при первой загрузке страницы. maximum-scale, minimum-scale, и user-scalable свойства, контролируют то, как пользователи могут масштабировать страницу (больше/меньше).

Высоких конверсий!

10-03-2016

Как превратить обычные сайты в адаптивные? / Блог компании UXDepot / ХабрНа данный момент около 11-12% из 100 000 самых посещаемых сайтов — адаптивны, и нет сомнений, что в ближайшие несколько лет их количество возрастёт.

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

Адаптивная модернизация


Адаптивная модернизация — это процесс, при котором берется существующий сайт, предназначенный только для настольных компьютеров, и «переделывается в адаптивный» по факту.

Что касается готовых сайтов (в частности коммерческих), у команд не всегда есть возможность всё отбросить и построить заново.
Дэн Седерхольм

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

Преимущества

  • Относительно быстро.
    Способов сделать адаптивную модернизацию довольно много, эта стратегия может заключаться в добавлении файла small-screens.css на сайт. Несмотря на этот довольно грубый пример, адаптивная модернизация — привлекательный вариант для большого числа организаций, так как не требует перестройки всего с нуля.
  • Знакомо.
    Не сбивает с толку пользователей. Люди годами привыкают к интерфейсу и делая модернизацию существующего, организации сохраняют знакомый подход, при этом улучшая жизнь людям с мобильными устройствами.
  • Организационно быстрее.
    Говоря политическим языком, модернизировать интерфейс более безопасно, чем начинать всё с нуля. Меньше споров о том, какой оттенок зеленого выбрать, какие банальные стоковые фотографии использовать, а управлению не придётся выворачивать руки. Это позволяет командам быстрее запускать адаптивные сайты.
Недостатки

  • Затрагивает только малую часть.
    Опять же, есть множество вариантов выполнения модернизации, но цель большинства из них — «сделать симпатично». Фокусируясь на переделке макета, модернизация часто упускает огромное количество других факторов, которые нужно учитывать при создании успешного проекта для различных устройств.
  • 10 литров воды в трёхлитровой банке.
    Так как сайты для настольных компьютеров рассчитаны только для них (и, часто, существуют на протяжении длительного времени), они могут содержать много хлама. А так как модернизация, в основном, заключается в переплавке макета, большинство проблем с контентом, не учитываются полностью.
  • Производительность.
    Есть что-то странное в написании кода для лучшей поддержки небольших устройств. Удаление лишнего может зайти слишком далеко, но без концентрации на производительности она сама по себе не вырастет.
  • Худшая поддержка.
    Медиа-запросы, изначально разработанные для настольных компьютеров, плохо поддерживаются большинством мобильных устройств.
  • Временные исправления.
    Мне хочется умереть, когда я слышу от людей просьбу «сделать адаптивным» что-либо, как будто это просто чекбокс в плане проекта (который иногда на самом деле существует). Такой тип ограниченного мышления упускает реальные возможности, которые предлагает адаптивный дизайн.


Адаптивные мобильные сайты


Адаптивные мобильные сайты, или как я их называю «семена для адаптивного будущего», представляют собой практику создания отдельного сайта формата «m.yourdomain.ru» с использованием техник адаптивного дизайна. Эту стратегию используют такие сайты, как The BBC, The Guardian и Entertainment Weekly (над которым работал я).


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


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

Преимущества

  • Ниже риск.
    Большинство организаций до сих пор замечают, что трафик с мобильных устройств составляет меньшинство. Поэтому запуск мобильного адаптивного сайта позволяет таким организациям протестировать обстановку без необходимости бросаться в эту тему с головой.
  • Возможность научиться быть гибким.
    Дизайнеры могут научиться думать более гибко. Разработчики узнают мириады хитростей устройств на Android. Менеджеры могут понять, как отойти от совершенствования пикселей. Адаптивный мобильный сайт может стать отличной песочницей для обучения.
  • Инфраструктура.
    Команды могут научиться как, раз и навсегда решить проблемы с управлением содержимым, например, с созданием изображений
  • Удалить лишнее.
    Этот подход предлагает отличную возможность для команд спросить себя: «а действительно ли нам это нужно», а также сфокусироваться на производительности. Почему? Потому что в первую очередь они заняты улучшением взаимодействия пользователей с их сайтом на мобильных устройствах.
  • Будущее за изначально мобильными сайтами.
    Несмотря на первоначально неполноценный контент или функционал, при достаточном количестве времени и усилий эти мобильные сайты, в конце концов, могут заменить своих полноформатных предков.
Недостатки

  • Это всё равно мобильный сайт.
    Будь он адаптивным или нет, этот подход всё равно сохраняет большое количество минусов мобильных сайтов: проблемы с перенаправлением URL, управлением содержимым, одинаковым контентом, последовательностью, SEO-оптимизацией и прочих.
  • Временные исправления.
    Множество мобильных сайтов созданы как пластырь — чтобы остановить кровь. Такие сайты создаются с целью разгрузить растущий трафик, поступающий с мобильных устройств. Эти решения всё же могут удовлетворить существующие потребности, но учитывая будущие тенденции, это вряд ли спасёт вас в долгосрочной перспективе.
  • Вероятность зачахнуть на корню.
    Некоторые организации могут начать такие проекты, пройти полпути, а потом бросить всё это дело, пока не будет принят бюджет на следующий год.
  • Дизайн для маленьких экранов.
    Так как изначально акцент ставится на маленькие экраны, последующий перенос интерфейса на большие дисплеи без потери качества может оказаться проблемой.


Адаптивный дизайн изначально для мобильных устройств


«Сначала мобильные» — это принцип, подразумевающий разработку интерфейса, который будет учитывать ограничения мобильной среды (маленький экран, низкая пропускная способность и прочее), однако использующий все преимущества бОльших экранов.

Преимущества

  • Начало с новыми силами.
    СНачала мобильные — начало с чистого листа. Дизайнеры с восторгом берутся за работу для целевой аудитории для достижения бизнес-цели. Разработчики фокусируются на компактной и эффективной разметке. Оставляя в стороне (или полностью изменяя) существующую базу кода, команды могут погрузиться в реальность разнообразных устройств без необходимости беспокоиться о расходах на устаревающие технологии.
  • Лучшая поддержка.
    Создавая по принципу «сначала мобильные», разработчики способны обеспечить поддержку большего количества мобильных устройств, особенно более старых, которые не поддерживают медиа-запросы.
  • Производительность.
    Несмотря на то, что производительность сайта в первую очередь зависит от его реализации, адаптивные проекты для мобильной среды дают командам возможность с самого начала акцентировать внимание на производительности.
  • С учётом всего и сразу.
    Дизайн «сначала мобильные» (несмотря на его название) может учитывать большое количество разрешений, а не только ориентироваться на один класс устройств.
  • Дизайн, ориентированный на будущее.
    Интерфейс, в первую очередь разработанный для мобильных устройств, создаёт прочный фундамент, способный перенести проверку временем и служить в качестве платформы для будущего роста и изменений.
Недостатки

  • Занимает много времени.
    Давайте смотреть правде в глаза, «сначала мобильные» — это далеко не самый быстрый принцип. Он занимает много времени и сил на построение всего с нуля. Нужно сделать всё так, чтобы это стоило потраченных ресурсов.
  • Сдвиг в сознании.
    Довольно сложно заставить организации думать обо всём другим образом. Мышление, направленное на разработку изначально для мобильных устройств, переворачивает всё с ног на голову, что усложняет использование подходов, к которым люди привыкли за много лет. Для этого требуется забыть их (к счастью, об этом есть книга) и постоянно напоминать людям не возвращаться к старым методам.
  • Организационно сложно.
    Большой редизайн обычно усложняется различными видами организационной бюрократии. Президент компании хочет высказать свое мнение по поводу дизайна, несмотря на то, что его не было ни на одном предварительном собрании о том, что вообще такое адаптивный дизайн. На пути создания интерфейса, который будет отлично выглядеть и функционировать на любом устройстве, могут также встать амбиции других людей и политика.
  • Незнакомо.
    Любой редизайн делает интерфейс незнакомым для пользователей. Но чтобы сохранить знакомый подход, особенно если вы собрались всё кардинально менять, нужно быть предельно осторожным.


Стратегия поэтапности


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

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

  • Заметно.
    Запуск адаптивных версий самых просматриваемых страниц (например, главной), направляет усилия туда, где большинство пользователей заметят обновлённый дизайн.
  • Возможность научиться быть гибким.
    Организации часто используют такие проекты в качестве проводников к более обширным идеям. Фокусируя внимание на нескольких основных страницах, можно научиться всему, что касается создания адаптивных интерфейсов, а потом использовать эти знания для остальной части сайта.
  • Более высокие шансы запуска.
    Фокусировка на одной странице или одной функции — это отличный способ увидеть результат. Если делать редизайн всего и сразу, это может стать чудовищно сложным делом, которое может никогда не увидеть свет.
Недостатки

  • Отсутствие целостности.
    Пользователь переходит от блестящего нового дизайна к старому уродливому всего за один клик. Это плохо с точки зрения однородности, так как пользователи воспринимают компанию как одну торговую марку, а не мешанину из разных отделов и приоритетов.
  • Недальновидность.
    Большинство редизайнов, основанных на страницах, сфокусированы на «запуске к третьему кварталу», но довольно часто, на более крупных сайтах, план развёртывания проекта отсутствует.
  • Вероятность зачахнуть на корню.
    В первую очередь необходимо определиться со стратегией и рисками, иначе ваш сайт рискует стать Франкенштейном.
Компонент за компонентом

Я работал с несколькими организациями, которые выбрали довольно интересный подход к адаптивному дизайну. Вместо того, чтобы в первую очередь переоснащать главную страницу, а потом двигаться к внутренним, часть компаний делают адаптивными некоторые компоненты (например, заголовок или подвал), а потом постепенно переходят к другим. Они переключают мета-тег просмотра только когда весь интерфейс становится адаптивным.
Преимущества

  • Постепенное ознакомление пользователей с новым интерфейсом.
    Вместо того, чтобы сваливать пользователям на голову полностью новый, на 100% изумительный адаптивный дизайн (!), этот поэтапный подход показывает пользователям новый интерфейс на протяжении некоторого времени. Изменения оказываются не такими стремительными, чтобы разозлить людей, но продвигают дизайн в нужном направлении.
  • Разбивка процесса.
    Команды учатся решать модульные проблемы (на уровне блоков), а не фокусироваться на целой странице.
  • Равномерный уровень усилий.
    Разбивка процесса на модули позволяет лучше понять рамки проекта.
Недостатки

  • 50 оттенков несовершенства.
    Этот подход может оказаться неудачным, так как пользователям придётся иметь дело с таким себе интерфейсом Франкенштейна, который одновременно и старый и новый.
  • Возможность зачахнуть на корню.
    Такие типы проектов нуждаются в чётких конечных целях, иначе они могут навсегда застрять в чистилище.
  • Техническое сосуществование.
    Что происходит, когда один модуль, использующий новейшие технологии и техники, сталкивается лбом с устаревшим модулем? В этом подходе есть множество сложностей, связанных с архитектурой.



«Я Чеви Чейз, а ты нет»


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

Это перевод статьи под названием «Responsive Strategy» от Brad Frost. Перевели в компании UXDepot с одобрением автора.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу [email protected], пожалуйста 🙂

Основы адаптивного дизайна / Песочница / Хабр

В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.
Что такое адаптивный дизайн?

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

Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).
max-width и width

Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.

С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.

Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.

Было

width: 1000px;

Стало
width: 100%;
max-width: 1000px;
min-width и width

Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).
Практика

Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).
  • Шапка — #headerInner
  • Основной контент — #colLeft
  • Боковая колонка — #colRight

Проверить адаптивность шаблона можно с помощью масштабирования окна (см. скриншот).

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Адаптивный шаблон</title>
</head>
<body>
<div>
  <div>
     <a href="http://bifot.ru/blog/">Логотип</a>
  </div>
</div>
<!-- начало wrapper -->
<div>
   <div>
       <div>
          <div>
              <div>
                   <h2>Основной контент</h2>
                   <p>Здесь будет находится основной контент страницы</p>
              </div>
          </div><!-- конец colLeft -->
          <!-- начало colRight -->
          <div>
              <div>
                   <h2>Текст сайтбара</h2>
                   <p>Содержимое сайтбара</p>
              </div>
          </div><!-- конец colRight -->
       </div><!-- конец content -->
   </div><!-- конец middle -->
</div><!-- конец wrapper -->
</body>
</html>

CSS

* {
 margin: 0;
 padding: 0;
}
 
body {
 width: 100%;
 height: 100%;
 color:#333;
 background: url(images/body.png) 0px 0px repeat;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.94em;
 line-height:135%;
}
 
h2 {
 font-size:30px;
 font-weight:normal;
 padding:0px 0 0px;
 line-height:100%;
 font-style:italic;
}
 
a {
 color: #cd5252;
 text-decoration:none;
}
 
a:hover {
 color:#963c3c;
 text-decoration: none;
}
 
/* -------------------------------
 Структура
 ----------------------------------*/
 
/* -------------------------------
 Ширина сайта в 1000px
 ----------------------------------*/
 
#wrapper {
 margin-top:40px;
 border:0px solid #000;
 width: 100%;
 max-width:1000px;
 margin: 0 auto;
 height: auto !important;
}
 
/* -------------------------------
 Шапка сайта
 ----------------------------------*/
 
#headerInner {
 border: 0px solid #000;
 background: #d04942;
 position:relative;
 width:100%;
 max-width:1000px;
 height:100px;
 margin:0 auto;
 margin-top:0px;
}
 
.text {
 margin:15px;
 
}
 
/* -------------------------------
 Главный контент
 ----------------------------------*/
 
#content #colLeft {
 
border: 0px solid #000;
 float:left;
 width:67%;
 margin-right:0px;
 background: #85c9cf;
}
 
/* -------------------------------
 Сайтбар сайта
 ----------------------------------*/
 
#content #colRight {
 position:relative;
 margin-left:30px;
 float:left;
 width:30%;
 border: 0px solid #1FA2E1;
 background: #7a9e0e;
}
 
#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}
 
/*----------------------------
 Логотип
 ------------------------------*/
 
.logo {
 position:absolute;
 left:0px;
 top:40px;
}
 
.logo a {
 margin-left:30px;
 font-size:30px;
 color:#96b551;
}

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

У шапки ширина все таже — 1000 пикселей. У основного контента (#colLeft) ширина 67%, а у правой колонки — 30%. Отступ между ними 30 пикселей (3%).

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

@media screen and (min-width:200px) and (max-width:1024px) {
}

Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.

1024 пикселя

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

Вот, что необходимо прописать в CSS

@media screen and (min-width:100px) and (max-width:1024px) {
/* размер блока, где находятся главный контент и сайтбар*/
body #wrapper {
 margin-top:40px;
 width: 90%;
 margin: 0 auto;
}

/* размер шапки сайта*/

body #headerInner {
 width:90%;
 margin:0 auto;
}
 
/* размер главного контента*/

#wrapper #content #colLeft {
 width:67%;
}
 
/* размер сайтбара*/
 
#wrapper #content #colRight {
 margin-left:3%;
 width:30%;
}

} /* скобка, закрывающая тег @media screen

Шапка сайта (#headerInner) имеет новый размер в 90%. Стоит отметить, что для шапки мы не используем max-width, ибо он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90%. Ширина и сайтбара, и основного контента остаются неизменными, изменился лишь отступ у сайтбара (3%). Это используется для того, чтобы при уменьшение окна сайтбар не «падал» вниз.

768px

Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.

@media screen and (min-width:100px) and (max-width:768px) {
 #wrapper #colLeft {
  float:none;
  width:100%;
  margin-right:0px;
 }

 #wrapper #colRight {
  margin-left:0px;
  margin-top:25px;
  float:none;
  width:100%;
 }
}

Для блока основного контента (#colLeft) мы указали ширину 100%, чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

Для того, чтобы картинки также сужались нужно использовать этот код

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* для ie8 */
}
Как сделать один сайт для всех устройств (Responsive Web Design) / ХабрВчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление

Почему это глупо

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

Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

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

Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):

Все это называется «Responsive Web Design»

Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)

Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}
 
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}

Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:

.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}

На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».

Резиновые изображения (fluid images)

Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.

Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.

Подробная оригинальная статья «Fluid Images».

Media queries

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

Например, так:

/* начало css */
 
Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).
 
@media only screen and (min-width: 480px) {
 
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone  и так далее.
 
}
 
@media only screen and (min-width: 768px) {
 
Планшеты в режиме portrait.
 
}
 
@media only screen and (min-width: 992px) {
 
Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.
 
}
 
@media only screen and (min-width: 1382px) {
 
Десктоп с большими разрешениями, телевизоры.
 
}
 
 
/* конец css */

media queries понимают все разумные браузеры. Для ie же есть Respond.js

Mobile first

Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.

Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.

Подробнее о Mobile first

Ссылки

1. Русскоязычный блог о Responsive Web Design

2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.

Самые простые техники адаптивной верстки / Хабр

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


1. Видео (демо)

Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:
<div>
	<iframe src="http://player.vimeo.com/video/6929537"frameborder="0"></iframe>
</div>
.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.video iframe,  
.video object,  
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
2. Максимальная и минимальная ширина (демо)

Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div’а — 800 пикселей при возможности, но не более 90% ширины:
.container {
	width: 800px;
	max-width: 90%;
}

Так же можно масштабировать изображение:

img {
	max-width: 100%;
	height: auto;
}

Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

@media \0screen {
  img { 
  	width: auto; /* for ie 8 */
  }
}

Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:

3. Относительные значения (демо)

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

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

Относительный размер шрифта

При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:

Относительный padding

На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:

4. Трюк с overflow:hidden (демо)

Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке. Наглядно — в демо.
5. Перенос слов (демо)

При помощи CSS можно переносить непереносимые текстовые конструкции:
.break-word {
		word-wrap: break-word;
}

Адаптивный дизайн или отзывчевый дизайн сайта

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

Что такое адаптивный дизайн сайта

Адаптивный веб-дизайн — это английский термин «responsive web design», определяющийся как стиль интернет-страницы, который имеет особенность в виде возможности загружаться на различных устройствах, имеющих выход в интернет.

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

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

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

Суть адаптивного дизайна

Суть адаптивного дизайна

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

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

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

Примеры адаптивного и не адаптивного дизайна

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

адаптивный и не адаптивный дизайн

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

Стоит отметить, что оригинальный сайт будет немного отличаться от того, что можно увидеть на экране смартфона.

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

Размеры экранов

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

Ноутбуки и мониторыПланшетыСмартфоны
От 10 до 31 дюймаОт 600×800 до 2560×1600 пикселейОт 240х320 до 2160х3840 пикселей

В таблице выше представлены востребованные разрешения при верстке под разные типы экранов и мониторов.

Также, стоит не забывать и о смене ориентации экрана при его развороте портретного режима на ландшафтный.

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

Мобильная версия, адаптивный дизайн и отзывчивый дизайн

Существуют и разработанные дизайны под мобильные платформы. Они делятся на:

  • мобильный;
  • адаптивный;
  • отзывчивый.

Мобильная версия, адаптивный дизайн

Концепция каждого из видов дизайна строится на определённых условиях. К примеру, отзывчивый дизайн имеет в себе два основных вида для осуществления верстки:

  1. Резиновый.
  2. Фиксированный.

При этом, данные виды входят в адаптивный дизайн.

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

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

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

Как сделать сайт адаптивным

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

Реализовать это можно только при наличии определенного уровня знаний CSS/HTML, или через уже готовые сервисы, позволяющие сделать большинство операций по адаптации меню сайта и его содержимого в автоматическом режиме, к примеру, Web Builder.

Можно также попытаться найти уже готовые шаблоны и просто перенести всё содержимое в них.

Последний наиболее затратный способ — это обратиться к разработчику Web-дизайнов или фрилансеру.

Работаем с HTML и CSS

Каскадные таблицы стилей или CSS позволяют формально описывать внешний вид и дизайн объекта или сайта. Для этого необходимо заполнять определённые команды в связке с кодами HTML.

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

  • max-width, используемый в CSS, позволяет изменять размеры загружаемых изображений;
  • раздел <head> используется для добавления адаптивных шрифтов и библиотек;
  • шапки страниц <header> применяются для размещения элементов в виде логотипов и другой графической информации;
  • <article id=»post-1″ class=»post»> — блоки с кратким содержанием статей, позволяющие их сворачивать для экономии места при просмотре сайта с мобильной платформы;
  • боковые колонки <aside> содержат разделы меню и навигацию.

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

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

На Web Builder

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

Главная особенность такого онлайн конструктора — полностью визуальное проектирование.

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

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

Как из не адаптивного шаблона сделать адаптивный

В первую очередь, при редактировании шаблона необходимо установить мета-тег <meta name=»viewport» content=»width=device-width, initial-scale=1″>.  Его основная задача заключается в определении размера экрана, с которого будет просматриваться сайт. Далее, устанавливается «резиновая» ширина блоков в процентах.

Для этого используется правило @media, которое прописывается в css-файле.

По такому же принципу редактируются и остальные элементы, которые должны будут либо расширяться, либо сужаться.

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

WordPress сайт с адаптивным дизайном

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

Это позволяет увеличить аудиторию посетителей.

При помощи следующих плагинов можно быстро провести настройку дизайна под разные типы разрешений:

  1. Jetpack.
  2. WPTouch Mobile Plugin.
  3. WordPress Mobile Pack.
  4. Lightbox
  5. Responsible.
  6. Hammy.
  7. Responsive Widgets.

Кроме этого, в открытых интернет-источниках представлено более миллиона вариантов различных типов шаблонов, готовых к применению.

Бесплатные шаблоны с адаптивным дизайном

Бесплатные шаблоны

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

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

В дополнение пользователи получат стилизованные иконки и другие модули с плагинами, позволяющими развивать ресурс в сети эффективнее.

Популярные русские темы

В WordPress есть стандартные бесплатные темы, которые пользуются большим спросом и одобрением. Однако их не так много.

Чаще всего по поисковым запросам можно найти следующие популярные темы:

  1. AccessPress Store.
  2. Illustrious.
  3. One Press.
  4. Veggie Lite.
  5. Olevia.

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

Важность адаптивного сайта

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

С каждым годом всё больше интернет-трафика приходится именно на смартфоны и планшеты.

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

Наличие адаптивного дизайна даёт возможность не разрабатывать дублированный сайт на другом домене именно для мобильной платформы.

Удобства пользователя

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

Большой процент людей использует мобильные платформы для удобства.

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

Изменение позиций в Яндексе

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

Чем больше будет пользователей просматривать на телефонах и планшетах информацию, тем выше в рейтинге поисковых запросов Яндекса этот ресурс будет. А это в свою очередь несёт и коммерческую пользу.

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

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

3 способа быстро адаптировать сайт под мобильные устройства telegram channel

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

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

Оно мне надо?

Ответ на этот вопрос можно найти, проверив, как ваш сайт отображается в следующих сервисах тестирования Google:

Если вы видите подобное сообщение — статья для вас:

Проверка удобства сайта для пользователя в PageSpeed

 

Адаптивный дизайн

В каких случаях подойдет? Если у вас сайт-визитка, информационный сайт, блог, одностраничник, интернет-магазин (с простой структурой, дизайном и/или небольшим ассортиментом), сайт услуг или форум.

Как реализовать?

Можно смело брать один из CSS-фреймворков (bootstrap, responsivegridsystem, Sceleton и пр.) и адаптировать существующий дизайн. Либо используйте CSS3 Media Queries.

Например, если использовать фреймворк bootstrap, то вам понадобится, вкратце:

  1. прописать view-port;
  2. подключить файлы фреймворка;
  3. добавить в разметку классы сетки bootstrap.

Или же в таблице стилей выделить через медиа-запросы (CSS3 Media Queries) несколько разрешений и задать оптимальные размеры элементов страницы, например:

@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;} }
@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;} }
@media screen and (max-width: 992px) { div. contentblock {width: 970px;} }

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

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

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

Что мы получим?

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

И рассмотрим пример. Меню для устройств с экраном более 768px выглядит так:

Проверка удобства сайта для пользователя в PageSpeed

А для экранов менее 768px выглядит так (в свернутом виде):

Проверка удобства сайта для пользователя в PageSpeedИ так, при клике на иконку в правом углу (в развернутом виде):

Проверка удобства сайта для пользователя в PageSpeed

Отдельный шаблон для мобильных устройств на основном домене

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

Как реализовать?

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

Отдельно стоит упомянуть о CMS. Если ваш сайт на WordPress, то о вас уже позаботились, и можно обойтись установкой плагинов для адаптации сайтов под мобильные устройства.

Среди них: WPTouch, WordPress Mobile Pack, WP Mobile Detector и т. д. Все эти плагины имеют несколько тем оформления и дополнительные полезные фишки вроде сбора статистики по мобильным пользователям.

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

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

Минусы: не для всех CMS есть такие плагины, да и не всегда они корректно работают. Бывает, что сайт хорошо отображается на моб.устройствах, но при этом по скорости не лучше, а даже хуже, чем его полная версия. Стоит отметить, что иногда бывают баги в определении мобильного устройства, если это какой-то редкий телефон, и в этом случае на таком устройстве будет отображена полная версия сайта.

Что мы получим?

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

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

Например, вот так сайт выглядит на ПК:

Проверка удобства сайта для пользователя в PageSpeed

А вот так выглядит этот же сайт на мобильном:

Шаблон для мобильной версии сайта

Мобильная версия сайта на поддомене

В каких случаях подойдет? Для интернет-магазинов, каталогов, интернет-порталов, социальных сетей.

Как реализовать?

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

Немного подробнее о реализации: создается поддомен, на нем такой же движок, как и на основном домене, но база данных используется одна на оба сайта (чтобы в случае внесения каких-либо изменений, не пришлось их добавлять дважды). При заходе с мобильного устройства происходит перенаправление пользователя на поддомен. В качестве имени поддомена обычно используют варианты: m.sitemane.com, mobile.sitename.com, pda.sitename.com и пр.

Примечание (спасибо читателям за вопрос): Чтобы обезопасить себя от проблем с дублированием контента, ознакомьтесь с рекомендациями Google и Яндекс.

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

Мобильная версия сайта на поддомене

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

Подписаться на рассылку

Еще по теме:


Мобильная версия сайта на поддомене

Анна Себова

Web-разработчик

Пришла с небольшими знаниями в настройке, установке и принципах работы нескольких CMS. С тех пор «обросла» знаниями и опытом в разработке сайтов на следующих CMS, PHP и JS/CSS-фреймворках: WordPress, Joomla, Bitrix, MODx, Drupal, Codeigniter, Laravel, Bootstrap.

Разрабатывает, дорабатывает, перерабатывает и адаптирует сайты.

Девиз: если очень захотеть, можно в космос полететь

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Мобильная версия сайта на поддомене

HTML-адаптивный веб-дизайн


Адаптивный веб-дизайн — это создание веб-страниц, которые хорошо смотрятся на всех устройствах!

Адаптивный веб-дизайн автоматически подстраивается под различные размеры экрана и области просмотра.


Responsive Web Design

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн — это использование HTML и CSS для автоматического изменения размера, скрытия, сжатия или увеличения. веб-сайт, чтобы он выглядел хорошо на всех устройствах (настольных компьютерах, планшетах и ​​телефонах):

Попробуй сам »


Настройка области просмотра

Чтобы создать адаптивный веб-сайт, добавьте следующий <мета> Отметить все ваши веб-страницы:

Пример

Попробуй сам »

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

Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с мета-тегом области просмотра:

Без метатега области просмотра:
Responsive Web Design С метатегом viewport:
Responsive Web Design

Совет: Если вы просматриваете эту страницу на телефоне или планшете, вы можете нажать на две ссылки выше, чтобы увидеть разницу.



отзывчивых изображений

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

Использование ширины Свойство

Если свойство CSS width установлено на 100%, изображение будет отзывчивым и масштабируемым вверх и вниз:

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

Использование свойства max-width

Если для свойства max-width установлено значение 100%, изображение будет уменьшаться, если это необходимо, но никогда не будет увеличиваться до размера, превышающего его первоначальный размер:


Показать разные изображения Depend

.
6 эффективных советов о том, как сделать сайт отзывчивым

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

Это как будто машина предвосхищает то, что тебе нужно. То же самое можно сказать и о адаптивном веб-дизайне.

Адаптивный дизайн

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

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

Если вы хотите поговорить со специалистом, вы можете связаться с нами по телефону 888-601-5359.

Что такое адаптивный дизайн?

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

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

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

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

Зачем использовать адаптивный дизайн?

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

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

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

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

Кроме того, по состоянию на апрель 2015 года Google рассматривает вопрос о том, подходит ли веб-сайт для мобильных устройств, в рамках своих алгоритмов поисковой системы. Это означает, что сайты, которые реагируют, гораздо чаще получают высокий рейтинг в любом заданном поиске, чем сайты, которые этого не делают. Так что, безусловно, в ваших интересах сделать ваш сайт отзывчивым!

Как реализовать адаптивный дизайн

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

1. Принять жидкостную сетку

лет назад большинство веб-сайтов были размещены на основе измерения пикселей. Но теперь дизайнеры перешли на использование жидкой сетки.

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

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

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

2. Разрешить для сенсорных экранов

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

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

3. Решите, какие элементы включить на маленькие экраны

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

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

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

4. Подумайте об изображениях

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

5. Попробуйте заранее разработанную тему или макет

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

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

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

6. Аутсорсинг вашего проекта

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

Компания веб-дизайна, такая как WebFX, имеет опыт разработки адаптивных сайтов.Фактически, все веб-сайты, которые мы создаем, являются адаптивными прямо из коробки! Это означает, что вам никогда не придется беспокоиться о том, чтобы изменить дизайн своего сайта так, чтобы он был удобен для мобильных устройств (если только вы не хотите что-то сделать).

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

Отзывчивый дизайн имеет решающее значение для дальнего следования

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

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

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

WebFX — агентство интернет-маркетинга с полным спектром услуг, расположенное в Гаррисберге, штат Пенсильвания.Мы делаем гораздо больше, чем просто адаптивный веб-дизайн, и можем предоставить вам все, от SEO до маркетинга по электронной почте. Мы не можем ждать, чтобы услышать от вас!

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

,

Как сделать отзывчивый сайт за день

* Как создать отзывчивый путеводитель по сайту от нашего клиента *

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

Похожие темы

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

Первые шаги — контент, доменное имя и хостинг

Первое и самое важное, что вам нужно для создания полноценного веб-сайта, — это что-то сказать, что-то показать миру. Никто не будет читать «Lorem ipsum ..» до конца, даже если оно написано золотым или вспыхивает всеми цветами радуги. Но так как вы читаете это, я полагаю, у вас уже есть какая-то тема. Имея в виду возможный контент, давайте взглянем на способы показать его миру.

Далее нужно доменное имя и хостинг. Давайте посмотрим, что стоит за этими странными терминами. Домен — это имя вашего сайта. Он уникален и, как правило, должен содержать некоторую значимую информацию о вас или вашей компании. Хорошая идея — подумать о чем-нибудь милом и привлекательном. Например, если сайт будет предназначен для компании, занимающейся рубкой деревьев, возможно, хорошей идеей будет www.cutitdown.com. И, конечно, вы можете указать название своей компании, например www.mycompany.com.

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

Хостинг — это то место, где ваш новый сайт сможет «жить». Представьте, что компьютер включен и подключен к Интернету, а кто-то рядом, чтобы все работало круглосуточно. Так что в основном хостинг — это дом сайта, а домен — это адрес, по которому люди приходят на него.Эти две вещи будут стоить вам, но, к счастью, совсем немного. Регистрация домена стоит около 30 долларов в год, а хостинг — около 5 долларов в месяц. Вы получаете бонус, хотя

Где купить домен и хостинг? Какой лучший поставщик?

Лично я пользуюсь услугами местного провайдера, расположенного в городе, в котором я живу, здесь, на дне Европы, но если вы не умеете читать по-болгарски, он вам не пригодится. Поэтому после некоторого поиска в Интернете я взял iPage, чтобы рекомендовать — выглядит дружелюбно, утверждает, что он на 100% зеленый, а цена — одна из самых низких из доступных — это было не так давно, когда я начинал свой бизнес, и я помню, как каждый доллар имел значение.

http://www.ipage.com/ — Внимательно посмотрите на этот сайт — в конце этого урока вы сможете создать что-то подобное и многое другое — без шуток.

Выберите «Зарегистрироваться сейчас» — это приведет вас к странице регистрации домена. Введите свой первый выбор нужного домена. Для примера, который я намеренно набрал в существующем домене, — это имя моего сайта, чтобы провести вас по более вероятному сценарию.

Он проверяет, занято ли уже это имя, и, если да, дает вам альтернативы.Либо выберите одно, либо измените само имя, как мы говорили ранее, и снова проверьте доступность. Когда все будет готово, нажмите Продолжить.

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

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

Как создать адаптивный сайт?

Теперь настало время для важной части — создание вашего сайта. Как я и обещал вам, это не потребует большого количества технических навыков, чем вы, вероятно, уже обладаете.Для этого потребуется часть программного обеспечения, поэтому давайте сначала позаботимся об этом. Для создания вашего потрясающе красивого первого сайта мы будем использовать Mobirise Responsive Website Builder — он бесплатный, простой и создает веб-сайты, которые изначально мобильны и отзывчивы — они адаптируются к ширине пространства, в котором они должны находиться. Поэтому, если вы просматриваете сайт на планшете или мобильном телефоне, а не на ноутбуке, он автоматически изменяет размеры для лучшего внешнего вида и удобной навигации.

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

https://mobirise.com/

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

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

После загрузки пакета извлеките его в папку по вашему выбору и запустите Mobirise-installer. Процесс установки ничем не отличается от любого другого. Моя жена говорит: «Вы нажимаете Next, пока не появится сообщение Finish»;) По умолчанию никакие скрытые назойливые дополнительные установки не отмечены.

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

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

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

В верхнем правом углу окна Mobirise Responsive Builder у вас есть три маленькие горизонтальные линии — при наведении на них курсора мыши появляется левая боковая панель с функциями основного меню — вы можете добавлять, редактировать свойства и удалять либо страниц в текущем веб-сайте или целых проектах — хотя немного рано для этого.

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

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

,

Адаптивный Дизайн в CSS (thesitewizard.com)

Использование медиазапросов и видового экрана для дизайна для мобильных устройств


Кристофер Хенг, thesitewizard.com

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

Предпосылки

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

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

Отзывчивый веб-дизайн

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

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

Преодоление настроек мобильного устройства по умолчанию: Viewport

В целях этой статьи, чтобы избежать необходимости уточнять все, что я говорю, делая вещи еще более многословными, чем это необходимо, Я буду использовать следующую стенографию. Когда я говорю «настольный компьютер» или «компьютер», я имею в виду настольный компьютер или ноутбук, а не смартфон или планшет (хотя последние два на самом деле тоже компьютеры). И когда я говорю «мобильное устройство», я имею в виду мобильный телефон, планшет с небольшим экраном и тому подобное, а не ноутбук (хотя последний также является портативным).Без этого сокращения статья будет еще труднее читать, чем она уже есть, с несколькими предложения просто объяснить, что я имею в виду, когда я говорю эти термины. Я также склонен использовать «смартфон» как синоним «мобильное устройство» здесь, чтобы статья не звучала слишком однообразно.

Браузеры современных мобильных телефонов написаны с учетом того, что веб-сайты традиционно предназначены для компьютеров. мониторы. Таким образом, он адаптируется, делая вид, что у него есть экран размером с компьютер, и масштабируя все, чтобы соответствовать в этом.Например, Safari на iPhone 5 делает вид, что по умолчанию имеет ширину экрана 980 пикселей, хотя его реальный размер составляет 320 пикселей (в портретном режиме). Так что, если вы будете разрабатывать сайт с фиксированной шириной (скажем) 730 пикселей, вся его ширина вписывается в экран вашего мобильного телефона, хотя последний не такой широкий. Браузер выполняет это сокращает ваш сайт, так что все становится очень маленьким. Если пользователю нужно что-то читать, им придется увеличить соответствующие части.Вы можете увидеть этот эффект, перейдя в демонстрационная страница фиксированной ширины с вашим смартфоном. Эта конкретная страница имеет фиксированную ширину 730 пикселей и специально предназначена для того, чтобы не использование мобильного телефона.

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

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

Если вы хотите быть ориентированными на будущее, теоретически вам необходимо добавить эквивалентный код CSS в таблицу стилей.

@viewport {
ширина: ширина устройства;
увеличение: 1,0;
}

Вышеуказанный метод санкционирован в предложенных стандартах CSS (т.е. он еще не ратифицирован).Поскольку такие вещи, как ширина и способ представления веб-страницы, действительно являются правилами стиля, они по праву принадлежат таблица стилей вместо метатега в HTML. К сожалению, в то время, когда я пишу это, на самом деле нет веб-браузера реализует это из коробки. Microsoft и Google имеют экспериментальный код в своих браузерах, которые поддерживают его, но он должен быть явно включен конечным пользователем.

Если вы хотите проверить это в Internet Explorer 10, 11 и Microsoft Edge, потому что вы включили средство в ваши предпочтения, вы также должны добавить следующее.(Свойство zoom еще не было реализовано.)

@ -ms-viewport {
width: device-width;
}

Префикс «-что-то-» (например, «-мс-» для Microsoft, « -webkit- » для Google, « -moz- » для Mozilla и т. Д.) — это метод, используемый поставщиками браузеров для добавления поддержки экспериментальных объектов, которые имеют еще не был официально добавлен в стандарты. Они делают это, потому что, если они добавляют, скажем, @viewport преждевременно, с использованием метода предварительных стандартов, который все еще обсуждается и обсуждается, и окончательный стандарт в конечном итоге заканчивается различный смысл для этих свойств, тогда сайты, которые зависели от стандартного способа написания @viewport сломает.Это приводит к нечестивому беспорядку, когда поставщики браузеров должны решить, как интерпретировать правила на веб-сайте, поскольку некоторые сайты будут полагаться на стандартную семантику, а другие — на официальную. И вебмастера не будет быть в состоянии решить проблему, кодируя вещи так или иначе, так как они не могут контролировать, посетители используют браузер до стандартов или постстандартный. Поэтому решение состоит в том, чтобы предложить префиксную версию, и включить только тот, без префикса, когда стандарты установлены.

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

Ключ, который открывает адаптивный дизайн в CSS: Media Queries

Теперь, когда у нас есть браузер мобильного телефона, чтобы воздерживаться от изменения размеров вещей за нашей спиной, мы должны адаптироваться к его маленький экран вручную.Хотя это кажется шагом назад, на самом деле это позволяет нам делать вещи более подходящим способом, чем автоматическое устройство телефона: например, мы можем изменить размеры вещей, которые могут быть изменить размер (например, изображения), оставив в покое других, которые не должны быть изменены (например, слова). Чтобы освободить место для этого, мы можем отправить элементы, которые не так важны, в нижней части экрана. Например, если вы должны были прочитать любой В статье на thesitewizard.com, включая эту, на мобильном телефоне, вы обнаружите, что мое навигационное меню (то есть список кнопок), который обычно находится в левом столбце браузера настольного компьютера, расположен в нижней части страницы на смартфоне.Я подумал, что, поскольку пользователь находится на этой странице, его / ее основная цель состоит в том, чтобы прочитать статья. Поэтому я поместил статью вверху, чтобы посетители могли сразу к ней добраться.

Чтобы совершить магию, подобную этой, нам нужен способ определения размера экрана. Современные браузеры предоставляют эту возможность в форме «медиа-запроса».

Медиа-запрос в таблице стилей выглядит примерно так:

@media screen и (max-width: 320px) {
/ * CSS для экранов с разрешением 320 пикселей или меньше будет помещен в этот раздел * /
}

Любой CSS, заключенный в фигурные скобки этого теста « @media screen и (max-width: 320px) «, будет применимо только к экранам с максимальной шириной 320 пикселей.Вы, конечно, не ограничены тестированием на ширину 320 пикселей. Последний — просто фигура, которую я выбрал для этого примера. Вы можете проверить на мин ширину и Максимальная ширина любого размера. Вы можете даже проверить диапазон размеров, например, в следующем коде.

@ media screen и (min-width: 320px) и (max-width: 640px) {
/ * для экранов шириной не менее 320 пикселей, но шириной не более 640 пикселей * /
}

Правила CSS, которые не включены в раздел « @media », применяются ко всем.И код, который прилагается в определенном разделе « @media » будет использоваться только при выполнении условий запроса. Если у вас есть несколько условий, которые должны выполняться одновременно, соедините их с « и », как в приведенных примерах. Вы можете иметь несколько блоков медиазапросов, каждый из которых будет применяться только при соблюдении условий для этого блока.

/ * код, который находится здесь до первого блока @media, будет применяться к любому размеру экрана * /
#somethingorother {
ширина: 800 пикселей;
}

@media screen и (max-width: 320px) {
/ * вступает в силу для экранов, размер которых не превышает 320 пикселей * /
# что-то другое {
width: 120px;
}
}
@media screen и (min-width: 321px) и (max-width: 480px) {
/ * вступает в силу для экранов от 321 до 480 пикселей (включительно) * /
# что-то другое {ширина
: 320px;
}
}
@media screen и (min-width: 481px) {
/ * вступает в силу для экранов, больших или равных 481 пикселю * /
# что-то другое {
width: 480px;
}
}

/ * приведенный здесь код будет применяться к любому размеру экрана * /

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

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

Экран

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

Тестирование в портретном и альбомном режимах с медиазапросами

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

@ экран мультимедиа и (ориентация: портрет) {
/ * ... * /
}
@ экран мультимедиа и (ориентация: пейзаж) {
/ * ... * /
}

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

Другие полезные функции в медиа-запросах

Помимо вышесказанного, вы также можете вставить тесты для мин. Высота (т. Е. Минимальная высота), макс. Высота . (максимальная высота), ширина и высота .

Кроме того, медиазапрос можно запустить с « только », как показано в следующем фрагменте:

экран @media only и (max-width: 480px) {
/ *... * /
}

Очень старые браузеры, которые не понимают синтаксис современных медиа-запросов, будут думать, что «only» - это тип устройства (например, «screen», «print» или «speech»). И так как они думают, что правила в блоке предназначены для устройств, классифицированных как «только», они не будут следовать за ними. Современные браузеры, с другой стороны, игнорируют слово «только» (по замыслу), поэтому этот условный тест полезен, если вам нужно защититься от старых браузеров, анализирующих ваш правила только для мобильных устройств и их применение даже на настольном компьютере.

Если вы хотите использовать CSS для всех ситуаций, кроме определенных условий, вы можете использовать « не » перед вашим условием, как в следующем примере.

@media not (max-width: 639px) {
/ * Правила CSS для любого устройства, ширина которого превышает 639 пикселей * /
}

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

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

Разрешение / Ширина экрана мобильного телефона

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

  • 240 пикселей (старый портретный режим Android)
  • 320 пикселей (iPhone 3–5 и портретный режим iPhone SE)
  • 375 пикселей (iPhone 6, 6s, 7, 8 и X портрет)
  • 384 пикселей (Android Nexus Portrait)
  • 414 пикселей (iPhone 6 Plus, 6s Plus, 7 Plus и 8 Plus портрет)
  • 480 пикселей (iPhone 3 и 4 в ландшафтном режиме)
  • 568 пикселей (iPhone 5 и iPhone SE альбомная)
  • 600 пикселей (Android Nexus пейзаж, портрет Kindle)
  • 667 пикселей (iPhone 6, 7 и 8 альбомная)
  • 736 пикселей (iPhone 6 Plus, 7 Plus и 8 Plus пейзаж)
  • 768 пикселей (портрет iPad)
  • 812 пикселей (iPhone X пейзаж)
  • 1024 пикселя (iPad landscape)

На сайте мастера.com, я рассматриваю все ширины экрана выше 629 пикселей как достаточные для моего двухколоночного макета. Разрешения ниже, которые получают один столбец, при этом столбец навигации (левый столбец) перемещается вниз экрана. Вы можете увидеть эффект от моих мобильных правил CSS, даже если вы находитесь на рабочем столе: просто измените размер своего окно браузера на этой самой статье, которую вы читаете. Если вы уменьшите ширину менее 629 пикселей, вы получите единственный столбец, который видят мобильные пользователи.

Обратите внимание, что вам не нужно следовать моей системе разделения CSS на 629 пикселей.Это просто цифра, которую я использовал потому что, кажется, работает нормально для контента thesitewizard.com. На самом деле, если я правильно помню, я видел сайт, который переключился на мобильную раскладку только на 480 пикселей, в то время как другой переключился на другие раскладки в зависимости от того, Экран имел 940, 640 или 520 пикселей по горизонтальной оси. Я рекомендую вам не слепо следить за размером других сайтов условия: используйте номер, который подходит вашему контенту, протестируйте и настройте его соответствующим образом.

Совместимость с веб-браузерами

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

Что касается смартфонов, насколько я знаю, медиазапросы поддерживаются только в браузерах Android, начиная с версией 2.1 в iPhone Safari 3.2 и выше, Blackberry 7 и более поздних версиях, Opera Mobile 12 и более поздних версиях, Opera Mini 8, и Internet Explorer («IE») для мобильных устройств 10 и выше.

В браузерах настольных компьютеров и ноутбуков поддержка, по-видимому, началась с IE 9, Firefox 3.5, Safari 4 и Chrome 4. Поскольку Microsoft Edge изначально был основан на коде IE 11, он всегда имел поддержку медиа-запросов.

Учитывая вышесказанное, насколько безопасно использовать медиа-запросы на вашем сайте?

  • Многое зависит от демографии вашего сайта. Например, если на вашем сайте много Люди, использующие телефоны с IE mobile 9 и более ранними версиями, вероятно, захотят их поддержать.

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

    В качестве альтернативы вы можете использовать JavaScript для определения размера экрана и соответствующей настройки таблицы стилей. Есть даже бесплатные JavaScripts, плавающие в Интернете, которые реализуют медиа-запросы в ранних версиях IE, хотя я не пробовал ни одного из них и поэтому не могу поручиться за них.

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

Следующая глава

Следующая глава посвящена некоторым способы изменения двухколоночного макета, чтобы он был готов для мобильных устройств. Если ваш сайт является веб-сайтом в одну колонку, пожалуйста, прочитайте, как сделать одну колонку Сайт для мобильных устройств (HTML / CSS).

Copyright © 2016-2020 Кристофер Хенг. Все права защищены.
Получите больше бесплатных советов и статей, как это, по веб-дизайну, продвижению, доходам и сценариям, с https://www.thesitewizard.com/.

,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *