Четыре мифа о мобильном дизайне
О том, что такое адаптивный дизайн и как он работает
Миф первый. Дизайны для мобильных устройств - это новинка в мире вебдизайна.
Это не правда. Свой первый дизайн для мобильных устройств я сделала еще три года назад. Посмотреть можно в портфолио. И я не первооткрыватель, я просто наткнулясь на отличную статью на хабре о CSS3 Media Queries, которой уже 4 года исполнилось. И хабр не был первоисточником гайдов по мобильному стилю.
Так что, идея писать дизайн под мобильные устройства родилась с первыми же мобильниками, которые способны были выходить в интернет. Ничего нового в ней нет, просто сейчас пользуется бешеной популярностью в связи с развитием рынка смартфоном и планшетов. Раньше владельцы сайтов меньше внимания уделяли адаптации своих ресурсов для всех пользователей, а теперь и сами любят заглянуть на сайт с мобильника - вот и засуетились.
Миф второй. Мобильный стиль работает только на мобильном.
Это тоже заблуждение. Коды стиля реагируют на браузер и взаимодействуют с ним - именно программа, через которую вы выходите в интернет считывает CSS-код и визиализирует его.
При создании адаптивного стиля прописывается ширина окна браузера, при которой он будет работать. Естественно, если ваш экран меньше этой ширины, вы не сможете растянуть окно браузера за его пределы и сделать такой, чтоб отображался дизайн для ПК. Однако, если вы хотите посмотреть на мобильный стиль с ПК, то вы можете просто ужать окно браузера.
Повмотреть и пощупать это вживую можно на этом демо-сайте, который демонстрирует возможности Media Queries: сворачиваем браузер в оконный режим и сжимаем его, наблюдая, как меняется стиль.
Миф третий. Мобильный стиль - это тот же самый дизайн с уменьшенными картинками.
Про картинки я уже такого наслушалась, что комментировать сложно становится.
Не будет кода, который изменит графику. Графику рисует дизайнер в фотошопе, код дизайна пишет верстальщик - две разные стадии создания стиля. Не путайте их и не оснащайте CSS коды волшебными графическими свойствами.
Адаптивный дизайн, работает элементарно: мы прописываем ширину экрана (например 480px) и для нее заменяем код "большого" дизайна на мобильный и легкий стиль. При этом картинки в мобильный стиль вшиваются отдельные и специально для него рисуются.
Простой пример: есть у нас сайт с шапочкой шириной в 900 пикселей. Если экран равен или менее 900 пикселей, то мы пропишем в стиле, что шапочка заменяется на другую - маленький логотип и резиновая верстка.
Миф четвертый. Мобильный стиль - это совсем другой код и совершенно другие селекторы.
Тоже умопомрачительное предположение. Нет. Ничего в коде сайта не может поменяться, если вы заходите на него с мобильного устройства. Там все то же самое, что и на компьютере остается.
Что такое селектор и как устроена страница, вы можете почитать тут: Как работает CSS. Получив эту информацию, мы с легкостью приходим к выводу, что мобильный стиль - это дополнительный код для ТЕКУЩЕГО дизайна, а не верстка совершенно другого сайта.
Когда мы делаем адаптивный дизайн, мы просто прописываем, что если у пользователя ширина окна браузера вот такая-то, то вот эти коды нашего текущего дизайна будут иметь не такие, а вот такие свойства.
Итог. Мобильный дизайн - это реально.
Для создания нужны просто навыки и опыт.
Если у вас есть вопросы по адаптивному стилю, комментарии к вашим услугам.
А если вам нужна помощь с индивидуальным стилем под мобильные устройства, вы можете заказать его у нас на сайте.
Кстати, а какие мифы о дизайне для мобильных устройств слышали вы? ;)
| Всего комментариев: 0 | |