HTML верстка: разновидности
При подготовке дизайн-макета дизайнер должен макисмально упростить задачу верстальщику, показав на макете как будет меняться сайт при различных экранах или хотя бы сделать так, чтобы верстальщик понял, какой максимальный размер макета.
В заивимости от макета, существуют 4 основных вида версток, а это:
1. Мобильная версия
Мобильная версия или отдельная мобильная версия означает, что у сайта будет независимая от основного (десктопного) дизайна версия сайта. Актуально для больших сайтов / порталов или магазинов, где нельзя сделать все удобно для использования на мобильных устройствах. Специальный скрипт определяет, каким устройством пользуется посетитель и подгружает мобильную версию сайта. Для этой версии создается отдельный шаблон сайта (и, естественно, дизайн макеты), но администрируется эта версия не отдельно, все данные беруться из общей базы.
Если эта версия администрируется отдельно, то это значит, что разработчики зря получили деньги за работу.
2. Адаптивная верстка
Очень часто путают с Responsive. Разница заключается в том, что сайт адаптируется под определенные разрешения экрана. Для мобильных устройств эти экраны указываются при постановки задачи. Это может быть экран 320 или 375 для мобильника и 768 для планшета портретной ориентации. На всех остальных экранах для мобильных устройств сайт не проверяется и стили под экраны не прописываются. Можете возразить, что это же лучше даже Responsive. Но нет. Во-первых, не стоит делать то, что не заказывали и не заплатили за это деньги. Во-вторых, игнорирование условий задачи или неверное их понимание может говорить о профессионализме разработчика. Если он здесь сделал неправильно, то не кто не даст гарантии, что он реализовал все остальные условия задачи. Поэтому ваша задача уточнить (размеры экранов), предложить (Responsive) и выполнить задачу. При этом адаптивная верстка стоит дешевле — меньше времени уходит на прописывание стилей под необходимые экраны.
3. Responsive или «отзывчивая» верстка
Означает, что элементы страницы сайта меняют своё поведение под различные экраны. Но начальный экран это тот, что опредлен дизайном. То есть, если максимальная ширина в дизайне указана 1600, то сайт должен подстраиваться под все разрешения от 1600 и ниже.
4. Full Responsive
Означает, что элементы страниц сайта меняют своё поведение не только от макисмальных размеров, которые отражены в макете, но и выше. То есть, сайт точно также подстраиваеться под все экраны ниже 1600 и также меняет своё поведение под экраны больше, чем 1600. Как правило, это шрифты и размеры элементов, таких как кнопки или размеры текстовых полей форм, как и изображения.
Отдельно выношу устаревшие виды версток:
1. Статичная верстка
Не используется, так как большое распостранение получили мобильные устройства. Какой смысл делать сайты только под одно разрешение экрана. Под тот же десктоп. Поэтому — устарело.
2. Смешанная верстка
Тоже устаревшее. В 2005 году потихоньку переходили с табличной верстки на блочную и из-за косяков IE5-6 некоторые свойства не поддерживались верно, поэтому использовали смешанную верстку, которая заключалась в построении каркаса таблицей с распорками* наполнении ячеек блоками (div). Использовалось может год, пока не придумали хаки под IE5-6.
Теперь чего нет:
1. Резиновая верстка
Так называли сайты, которые растягиваются на 100% по ширине. Наибольшее распостранение получили в СНГ. В Европе и США преимущественно сайты были фиксированной ширины в 800 или 1024 пикселя. А почему такого вида верстки нет, это потому что в Европе и США, да и во всем остальном мире о таком не слышали и не знают до сих пор. Кроме этого, само понятие «резиновая верстка» попробуйте перевести на английский язык и чтобы вас поняли. Сама комбинация слов абсурдна, и, похоже, исключительно местное изобретение (слова). Наверное, схожее изобретение, это когда иногда называют веб-верстальщика «верстак». При этом человек не задумывается, что «верстак» это предмет.
2. PixelPerfect верстка
Не является видом верстки. Это стандарт верстки. Вся верстка дожна быть PixelPerfect и никак иначе.
Важно
Необходимо правильно называть различные виды вёрсток — от этого будет зависеть успешность реализации проекта. Нет ничего постыдного в том, чтобы уточнить касательно поведения сайта/элментов сайта под мобильные устройства. Кто что имел ввиду или подумал никого в итоге волновать не будет. Если клиент не понимает того, что он хочет — лучше уточнить, чтобы не получить потом фразу «а я думал, что вы профессионалы». С другой стороны, и разработчик должен точно понимать все отличия и сообщить об этом ответственному лицу (объяснить и научить с примерами, если необходимо).
Хорошая коммуникация внутри команды разработчиков так и с клиентом — залог успеха любого проекта.
*распорка: в верстке это однопиксельная (1х1 пиксель) прозрачная gif картинка, которую растягивали по вертикали или горизонтали, чтобы ячейки таблиц не «схлопывались» при уменьшении окна или растягивались как необходимо. К примеру, свойство height на ячейке таблицы или самой таблицы не отрабатывало, поэтому ставили в еще одну ячейку рядом рапорку шириной в 1px и необходимой высотой.
Вас также может заинтересовать