Адаптивный веб-дизайн: инструкция для начинающих

 

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

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

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

 

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

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

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

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

iPhone был одним из первых мобильных устройств,  имеющих  действительно хороший  веб-браузер. Многие другие создатели мобильных устройств последовали  примеру iPhone.

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

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

 

Жидкие сетки (Fluid Grids)

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

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

Чтобы рассчитать пропорции для каждого элемента страницы, необходимо разделить целевой элемент по содержанию. Лучше всего это делается, если вначале создать макет с точностью до пикселя с помощью графического редактора, типа Photoshop. С таким высокоточным макетом вы сможете измерить элемент страницы и разделить его на всю ширину страницы. Например, если ваш макет имеет типичный размер 960 пикселей в ширину, это будет ваш стандартный размер. Теперь, предположим, наш целевой элемент является произвольным значением 300 пикселей в ширину.  Если мы умножим результат на 100, мы получим процентное соотношении 31,25%,  которое можно применять к элементу. Ниже всё изображено схематично:

 

*эти измерения не являются шкалой.

 

Если ваши значения не дают точного результата, и ваше  итоговое значение получилось со множеством цифр после запятой, не округляйте значение!

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

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

 

Медиа- запросы (Media Queries)

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

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

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px

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

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

Автор статьи: NickPettit
Оригинал: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Поделитесь
в социальных сетях