Народ, всем привет. Недавняя новость о том, что Гугл перестанет индексировать сайты без мобильной вёрстки (то есть, адаптации сайта под мобильные устройства) заставило многих пересмотреть свои старые проекты, или перекраивать свой старенький сайт. Суть в том, что в последнее время все больше в тренд входит мода на mobile-first, то есть вначале мы делаем макет (или верстаем сразу) сайт для мобильных устройств, а только потом делается его версия для десктопов.
Но если вы более-менее уже продвинутый программист и веб-разработчик, то знаете, что лучше продумать все сразу, и начать создание с шаблона под каждый тип устройства и разрешение экрана. И тут есть несколько вариантов, как вы можете подойти к созданию адаптивности своего приложения. При этом об это лучше позаботиться заранее, так как изменить потом тип вашего сайта влетит вам не только в копеечку, но и в гневный взор программиста – переделывать придется почти все. Какие-то типы адаптивности стоят дешевле, какие-то дороже, но главное понимать в чем их различия.
1. У меня все устарело
Самый простой и, наверно, неудобный вариант, это создание отдельного мобильного приложения или сайта, который вешается на субдомен. По сути, вам придется писать два сайта (хоть и схожих друг с другом). Вроде как Гугл обещал пропускать сайты, если внутри будет установлен редирект с обычного сайта на мобильную версию. Но как я уже сказал, это самый неудобный, затратный и устарелый вариант. Но, если у вас уже есть действующий сайт, только в десктопном варианте, и он вас вполне устраивает, то можно создать более упрощённые вариант для мобилок, с редиректом (при заходе с мобильного устройства на главный сайт он будет перенаправлять на мобильную версию). Так выйдет дешевле.
Но помните, что, чтобы что-то поменять на сайте, вам нужно будет менять их в двух версиях. Плюс все равно будет неудобно смотреть планшетов и более широких телефонов. Короче, такое себе.
2. Простая адаптивная верстка.
По совей сути это как три отдельных сайта (например) под каждый вариант ширины экрана. Обычно делают под десктоп, планшет и мобильники, но могут быть и варианты, вплоть до 7 штук. И когда пользователь заходит с определённого устройства, сайт понимает это, и сразу открывает «версию» для этого сайта. На самом деле это один сайт, просто при определении ширины экрана все элементы на вашем сайте встают так, как это задумал программист или дизайнер именно конкретно под эту ширину. Как ступеньками, три шага, например, от 460 до 720, от 720 до 1180 и от 1180 и выше, пикселей. Для примера.
Кстати, Вам может быть это интересно:
3. Отзывчивая вёрстка
Это более современный вариант, скажем так, простой адаптивной вёрстки. Я люблю этот вариант и сам часто пишу сайты именно по этой технологии (хотя делаю и в других вариациях). Отличие его от простой адаптивной верстки в более плавных переходах между «версиями» и расширениями. Проще говоря, при переходе с одной ширины на другую у вас не происходит скачка элементов на новые места, а все происходит более плавно. Это будет заметно при изменении ширины окна браузера или при перевороте экрана телефона с вертикального на горизонтальный.
Сразу скажу, что это вариант точно более дороже, чем простая адаптивная вёрстка, надо рисовать переходы, надо делать много шагов для отдельных элементов, но выгладит она будет богаче.
4. Блочная верстка
Это некое ответвление от адаптивной верстки и заключается она в том, что весь ваш сайт по сути поделен на определенные блоки, часто еще и заданной ширины (но не обязательно и не все), которые при изменении ширины экрана начинают выстраиваться друг за другом в сетку. Грубо говоря, у вас есть шапка сайта, во всю ширину, она обычно делается адаптивной. А весь остальной контент как карточки в блоге (того же дзэна), и при изменении ширины у вас вначале будет, скажем, 3 блока, потом 2, затем 1. Это если прям грубо говорить, но, чтобы было понятно. Конечно, на сайте будут блоки разной ширины, в одном блоке могут быть другие блоки, которые также будут выстраиваться в колонки, а ширина основного блока меняется. Но сама по себе вёрстка похожа на конструктор лего из небольших блоков заданной ширины (обычно под самый маленький мобильный экран).
5. Резиновая вёрстка
Ну и резиновая вёрстка, и из названия понятно, что все элементы на странице будут сжиматься и разжиматься как резина. Все задается в процентах, и при изменении ширины экрана (или окна браузера) все элементы будут менять свой размер. На самом деле в чистую делают редко, иначе на мобильниках читаемость или эргономичность может стать хуже (шрифт все равно тоже делают адаптивным), и зачастую резиновая вёрстка все равно идет с неким элементами простой адаптивной вёрстки. Но тут все зависит от сложности сайта, и если это простой лендинг, или страница заказа, то там можно и сделать все по классике.
