Сегодня почти любой заказчик желает иметь мобильную версию своего сайта. Конечно, это оправданно: необходим дизайн как для iPhone, так и iPad — они должны подходить абсолютно под все размеры экранов. В веб-дизайне и разработке мы быстро разбираемся и делаем свою работу, мы справляемся со всеми экранами и разрешениями. Для большинства вебсайтов создание отдельных версий для обновленных разрешений будет невозможно сделать либо, по крайней мере, не практично. Можем ли мы терять клиентов, для которых у нас не имеется верстки? Либо можно что-либо предпринять?
Адаптивная верстка является таким подходом, который предполагает изменения дизайна в зависимости, как от поведения пользователя, так и размера экрана, а также платформы, и конечно ориентации девайса. Если говорить по-другому, то страница автоматически должна подстраиваться под необходимое разрешение, менять размеры картинок и так далее. Это позволяет устранять необходимость в разработке дизайна для новых устройств, которые появляются в продаже.
Как регулировать экранное разрешение
Возможно, поделить устройства на разнообразные категории и заниматься версткой отдельно для каждой из них, однако это займет очень много часов, и никто не знает, какие стандарты появятся через несколько лет? По статистике, которая основалась на большом количестве проданных устройствах, у нас имеется целый спектр самых разных устройств: В случае если разрешение получится очень мелким, то можно увидеть, что четкость изображения упала, однако это нужно для того, чтобы осталась сохранность пропорций названия. И потому изображение поделено на две части: это иллюстрация, которая используется фоновым рисунком, и логотип, который пропорционально меняет свои размеры.
Изображения с гибкими свойствами
Одной из самых основных проблем, которой необходимо решение при работе с дизайном адаптации, является работа с изображениями. Есть множество способов менять размер картинок, и многие из них создаются очень легко.
Отзывчивые картинки
Представленная нами техника изменяет размеры картинок согласно пропорциям, а также сжимает разрешение изображений на небольших экранах, чтобы на большом экране оно не занимало много пространства.
Фича для iPhone
Есть одна интересная вещь, касающаяся iPhone и iPod. Дизайн, созданный для больших экранов, просто сожмется для маленького браузера, без необходимости добавления скролла или дополнительной мобильной верстки.
Настраиваемая структура макета страницы
Для чрезвычайных изменений размеров мы можем захотеть изменить расположение элементов в целом через отдельный файл со стилями или, что более эффективно, через CSS-медиазапрос.
