• Адаптивный дизайн, как начать ?

    Extremum
    @Extremum
    Для начала нужно просто научиться хорошо верстать, с чистым кодом, без вставки стилей и скриптов, не забывать о семантике и т.д. Честно, не раз искал верстальщика для проектов, и очень редко кого-то достойного находил.

    Лично я изучал адаптивную верстку расковыряв bootstrap и foundation. Понемногу собираю собственные заготовки для сеток, сброса стилей и других, необходимых "по-умолчанию" сниппетов.

    Медиа запросы актуальны, использование %, em или rem (не для всех браузеров) - на вше усмотрение, при грамотном подходе можно и px использовать с медиа-запросами.

    А насчет что лучше - мобильная или адаптивный, тут вопрос требований и бюджета. Дважды мне попадался проект, в котором адаптивность не могла решить поставленных задач и призодилось делать отдельную мобильную версию. С одной стороны сложно - делаем две версии, с другой стороны легче из-за отсутствия необходимости учитывать кучу разрешений.
    Ответ написан
    2 комментария
  • Адаптивный дизайн, как начать ?

    Подходов к адаптивному интерфейсы несколько. Делать сразу мобильную версию, а потом ее "растягивать" на большой экран или наоборот - это зависит от проекта. Подумайте до разработки кто будет больше пользоваться вашим проектом: люди с мобильных устройств или с десктопов. Отсюда станет все понятно. Если примерно равные части, то проще (ИМХО) начинать с десктопа.

    Я в разработке всегда делаю адаптивный шаблон, так как тянуть две версии сайта: мобильную и полную - это сложновато. Да и к тому же когда одна версия сайта - это налагает большую ответственность на разработчика, так как приходиться заранее продумывать расположения и внешний вид всех блоков на сайте.

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

    Размер шрифта задавайте лучше в em, так, как мне кажется, его отображение на различных устройства проще предсказать. В любом случае, не сильно важно как вы его зададите, он не будет автоматически изменяться от уменьшения/увеличения ширины экрана. Это делается на JS. Где-то видел реализацию на CSS3, через calc.
    Ответ написан
    3 комментария