Я хочу рассказать о том, в какой последовательности я верстаю макеты, а также, что нужно учесть перед тем, как начать верстку.
В самом начале нужно узнать у заказчика и дизайнера (по возможности) будет ли сайт фиксированной ширины или тянуться, будет ли верстка адаптивной (т.е. адаптироваться под мобильные платформы, под их разрешения экрана). Если нужна верстка под мобилки, тогда нужно узнать, есть ли макет под мобильную версию.
Если нет макета и его не собираются делать, тогда собираем сами. Чтобы понять, а как должен выглядеть сайт в мобильной версии, вы можете просто поискать те сайты, которые поддерживают мобильные устройства и понять, что именно они убрали, что добавили и т.д. Также можно посмотреть на мобильные приложения, большинство адаптивных сайтов, стараются быть похожими на мобильное приложение, т.е. оно должно быть "удобным".
Еще мы можем посмотреть на bootstrap и то как они адаптируют верстку под разные разрешения. Если вы погуглите что-то типа "bootstrap templates demo", то можно найти большое кол-во шаблонов сверстанных с bootstrap, обычно если сайт верстается с помощью bootstrap, то стараются учитывать адаптивность. Это можно использовать как референс, чтобы иметь представление о том, как должен выглядеть сайт в мобильном разрешении. На самом деле не страшно если вы херанете большую часть графики, бекграундов, анимации и огромных лого в мобильной версии. Во-первых, чтобы продумать крутой дизайн, нужен дизайнер, а во-вторых, чем больше графических элементов, тем жирнее, страшнее и тормозит. Если вы все же решили использовать графику (я имею ввиду большие картинки и огромные иконки), то проверьте размер картинок, возможно их стоит обрезать или уменьшить, может быть немного переделать.
Вот, я все узнал и собрался верстать. Я обычно начинаю с фона, основного контейнера, и шапки. Верстаю сверху вниз. Иконки и картинки нарезаю по необходимости. Все сразу стараюсь не резать, потому что бывают ситуации при которых некоторые иконки не являются векторными, поэтому мы не можем их увеличить в 2 раза. А зачем нам вообще их увеличивать в 2 раза? Потому что retina размажет стандартный размер картинки и он будет херовым. Чтобы retina display показывал красоту, ему нужно скормить картинку в 2 раза больше по размеру, чем то, что нарисовано на макете и будет в верстке. Также вы можете использовать SVG формат, а не растровый, тогда картинка по размеру будет намного меньше и вы сможете ей задать любой размер, SVG будет всегда четкой. Если в макете вы не видите векторных слоев с иконкой, спросите у дизайнера, возможно у него есть иконки в векторе.
Когда я приступил к верстке, я не думаю о JS или о том, как будет все это выглядеть в мобильной версии, я просто знаю, что мне нужно сверстать так, чтобы блоки могли ложиться друг под друга и не наслаиваться, по возможности. Когда я сверстал большую часть макета или весь, тогда уже начинаю определять при каких разрешениях экрана сайт начинает выглядеть как говно. Определяем, что где-то там в середине есть большой блок и при разрешении 900px все идет по пизде, значит мы решаем для себя что (допустим в 980px) у нас должен стоять @media screen and (max-width: 980px) {}
Можем создать 1 отдельный css для медиа кверис и назвать его, например mobile.css. Получается, что один предел при котором все рушится мы нашли, можем адаптировать все с запасом. Начинаем уменьшать отступы, уменьшать размер шрифта, возможно где-то даже картинки придется убрать. Потом уменьшаем еще, если нам удается уменьшить размер экрана без проблем еще пикселей на 200(это просто условно), то все классно, ставим еще один @media screen and (max-width: 780px) {} и в нем снова переопределяем свойства классов, чтобы все выглядело OK. Посмотрите обязательно, какие разрешения используются в bootstrap, там есть понятие о размерах для мобилок, для планшетов и т.п. А еще погуглите разрешения для верстки, какие "средние" размеры экранов существуют, чтобы иметь представление о том, на каком устройстве скорее всего просматривают ваш сайт.
Когда mobile.css становится постепенно похож на фарш и нам тяжело его поддерживать, мы можем начать выносить эти @media в отдельные css исходники для разных страниц, просто чтобы не запутаться.
Адаптивная верстка, обычно занимает у меня самое последнее что я делаю, потому что хочется сделать самые сложные вещи, а это прикрутить JS. Подмазывать верстку нужно практически постоянно, особенно если проект все время находится в разработке, обновляется и т.п. Так что на самом деле нет строгого плана по поводу того, в какой последовательности и что вам нужно делать. Думайте о сроках разработки, если вы понимаете что есть задачи, которые могут занять неизвестное кол-во времени, а сделать их нужно обязательно, то лучше разобраться с этим и понять на сколько это важные вещи и можете ли вы что-то сделать, чтобы оценить срок разработки, а возможно стоит сразу заняться этим. Короче прикиньте по срокам, успеваете ли вы сделать все это.
Еще случается, что нет просто сил сегодня делать рутину, т.е. писать кучу html и css, хочется сделать что-то посложнее, ну ок, чтобы не терять время беритесь за JS. Представим другую ситуацию, хочется сделать рутину и вообще нет сил думать, значит верстаем.
И так, что я хочу посоветовать, обязательно попробуйте верстать с bootstrap, он поможет вам разобраться с тем, как все сделать адаптивным и возможно некоторые идеи вы возьмете от него и будете использовать в верстке без bootstrap.
Старайтесь смотреть на проект с точки зрения заказчика и клиентов, не нужно упарываться ради красоты кода и респектов среди разработчиков. Если вы не успеваете сделать все, то сделайте самое основное, чтобы сайт смотрелся хорошо. Остальной функционал вы сможете потом доделать позже, иначе может получится, что у сайта есть охуительно-красивая менюшка, а остальной контент выглядит через жопу. Лучше чтобы в общем все было хорошо, а анимации на менюшке и супер-сложные интерфейсы допилите позже. Йо!
froncubator.com курсы для frontend разработчиков
https://vk.com/froncubator наша группа в vk
В самом начале нужно узнать у заказчика и дизайнера (по возможности) будет ли сайт фиксированной ширины или тянуться, будет ли верстка адаптивной (т.е. адаптироваться под мобильные платформы, под их разрешения экрана). Если нужна верстка под мобилки, тогда нужно узнать, есть ли макет под мобильную версию.
Если нет макета и его не собираются делать, тогда собираем сами. Чтобы понять, а как должен выглядеть сайт в мобильной версии, вы можете просто поискать те сайты, которые поддерживают мобильные устройства и понять, что именно они убрали, что добавили и т.д. Также можно посмотреть на мобильные приложения, большинство адаптивных сайтов, стараются быть похожими на мобильное приложение, т.е. оно должно быть "удобным".
Еще мы можем посмотреть на bootstrap и то как они адаптируют верстку под разные разрешения. Если вы погуглите что-то типа "bootstrap templates demo", то можно найти большое кол-во шаблонов сверстанных с bootstrap, обычно если сайт верстается с помощью bootstrap, то стараются учитывать адаптивность. Это можно использовать как референс, чтобы иметь представление о том, как должен выглядеть сайт в мобильном разрешении. На самом деле не страшно если вы херанете большую часть графики, бекграундов, анимации и огромных лого в мобильной версии. Во-первых, чтобы продумать крутой дизайн, нужен дизайнер, а во-вторых, чем больше графических элементов, тем жирнее, страшнее и тормозит. Если вы все же решили использовать графику (я имею ввиду большие картинки и огромные иконки), то проверьте размер картинок, возможно их стоит обрезать или уменьшить, может быть немного переделать.
Вот, я все узнал и собрался верстать. Я обычно начинаю с фона, основного контейнера, и шапки. Верстаю сверху вниз. Иконки и картинки нарезаю по необходимости. Все сразу стараюсь не резать, потому что бывают ситуации при которых некоторые иконки не являются векторными, поэтому мы не можем их увеличить в 2 раза. А зачем нам вообще их увеличивать в 2 раза? Потому что retina размажет стандартный размер картинки и он будет херовым. Чтобы retina display показывал красоту, ему нужно скормить картинку в 2 раза больше по размеру, чем то, что нарисовано на макете и будет в верстке. Также вы можете использовать SVG формат, а не растровый, тогда картинка по размеру будет намного меньше и вы сможете ей задать любой размер, SVG будет всегда четкой. Если в макете вы не видите векторных слоев с иконкой, спросите у дизайнера, возможно у него есть иконки в векторе.
Когда я приступил к верстке, я не думаю о JS или о том, как будет все это выглядеть в мобильной версии, я просто знаю, что мне нужно сверстать так, чтобы блоки могли ложиться друг под друга и не наслаиваться, по возможности. Когда я сверстал большую часть макета или весь, тогда уже начинаю определять при каких разрешениях экрана сайт начинает выглядеть как говно. Определяем, что где-то там в середине есть большой блок и при разрешении 900px все идет по пизде, значит мы решаем для себя что (допустим в 980px) у нас должен стоять @media screen and (max-width: 980px) {}
Можем создать 1 отдельный css для медиа кверис и назвать его, например mobile.css. Получается, что один предел при котором все рушится мы нашли, можем адаптировать все с запасом. Начинаем уменьшать отступы, уменьшать размер шрифта, возможно где-то даже картинки придется убрать. Потом уменьшаем еще, если нам удается уменьшить размер экрана без проблем еще пикселей на 200(это просто условно), то все классно, ставим еще один @media screen and (max-width: 780px) {} и в нем снова переопределяем свойства классов, чтобы все выглядело OK. Посмотрите обязательно, какие разрешения используются в bootstrap, там есть понятие о размерах для мобилок, для планшетов и т.п. А еще погуглите разрешения для верстки, какие "средние" размеры экранов существуют, чтобы иметь представление о том, на каком устройстве скорее всего просматривают ваш сайт.
Когда mobile.css становится постепенно похож на фарш и нам тяжело его поддерживать, мы можем начать выносить эти @media в отдельные css исходники для разных страниц, просто чтобы не запутаться.
Адаптивная верстка, обычно занимает у меня самое последнее что я делаю, потому что хочется сделать самые сложные вещи, а это прикрутить JS. Подмазывать верстку нужно практически постоянно, особенно если проект все время находится в разработке, обновляется и т.п. Так что на самом деле нет строгого плана по поводу того, в какой последовательности и что вам нужно делать. Думайте о сроках разработки, если вы понимаете что есть задачи, которые могут занять неизвестное кол-во времени, а сделать их нужно обязательно, то лучше разобраться с этим и понять на сколько это важные вещи и можете ли вы что-то сделать, чтобы оценить срок разработки, а возможно стоит сразу заняться этим. Короче прикиньте по срокам, успеваете ли вы сделать все это.
Еще случается, что нет просто сил сегодня делать рутину, т.е. писать кучу html и css, хочется сделать что-то посложнее, ну ок, чтобы не терять время беритесь за JS. Представим другую ситуацию, хочется сделать рутину и вообще нет сил думать, значит верстаем.
И так, что я хочу посоветовать, обязательно попробуйте верстать с bootstrap, он поможет вам разобраться с тем, как все сделать адаптивным и возможно некоторые идеи вы возьмете от него и будете использовать в верстке без bootstrap.
Старайтесь смотреть на проект с точки зрения заказчика и клиентов, не нужно упарываться ради красоты кода и респектов среди разработчиков. Если вы не успеваете сделать все, то сделайте самое основное, чтобы сайт смотрелся хорошо. Остальной функционал вы сможете потом доделать позже, иначе может получится, что у сайта есть охуительно-красивая менюшка, а остальной контент выглядит через жопу. Лучше чтобы в общем все было хорошо, а анимации на менюшке и супер-сложные интерфейсы допилите позже. Йо!
froncubator.com курсы для frontend разработчиков
https://vk.com/froncubator наша группа в vk
Комментариев нет:
Отправить комментарий