• Под какие разрешения рисовать адаптивный дизайн?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    При рисовании любого дизайна встает техническая задача — уместить элементы сайта в указанную ширину. Уместить в заданную ширину тяжелее, чем растянуть до заданной ширины. Растянуть легко на этапе верстки. Поэтому нужно ориентироваться на минимальную ширину в классе.

    1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

    2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

    3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

    В принципе, этого достаточно, чтобы верстальщик справился.

    Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

    В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

    Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.
    Ответ написан
    Комментировать
  • Под какие разрешения рисовать адаптивный дизайн?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Если немного подумать логически, то получится что расклад примерно такой:
    1. Мобилы. На примере Iphone 4 (другие мобилы, кроме лопатофонов имеют схожие размеры). Если держать телефон в руке вертикально, то ширина экрана 320 пикселей, если горизонтально то 480.
    2. Далее планшеты. На примере iPad (другие планшеты соответственно похожи по разрешениям). Если держишь вертикально, то 768, если горизонтально то 1024.
    3. Далее десктоп. Тут самое популярное на сегодня 1200+, рисовать варианты еще шире, обычно не имеет смысла, сайт просто центрируется на более высоких разрешениях. К тому же, большинство пользователей огромных экранов обычно не открывают браузеры на весь экран.

    В общем у вас должно получится примерно 5 разрешений в итоге (+ каждое из этих разрешений должно обладать некоторой гибкостью (+/- 30 пикселей), чтобы можно было учесть все разнообразие адройдовских экранов.
    Ответ написан
    1 комментарий
  • Под какие разрешения рисовать адаптивный дизайн?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Комментировать
  • Под какие разрешения рисовать адаптивный дизайн?

    @GILGAMESHff7
    посмотрите Foundation - адаптивный фреймворк.
    там очень четкое разделение small,medium,large,xlarge...
    Ответ написан
    Комментировать
  • Какой язык программирования подходит для заработока?

    Petroveg
    @Petroveg
    Миром правят маленькие с#@&ки
    Моя первая девушка была из моего же класса. Увы, с ней я так и не смог толком понять, что такое — быть мужчиной. Ну там на 8 марта да на ДР цветочки подарить — это понятно, но на большее фантазии так и не хватало.

    Я решил бросить её как только школу закончу, а то скучно и беспесперктивняк какой-то... Да и шашни я с ней завёл, только чтобы мужчиной стать, а с этим беда — кроме @#$лей от её бывшего (из параллельного класса) я толком никакой школы и не получил.

    Вот в институте — там другое дело, девок симпотных побольше, и ломаются меньше (мне рассказывали, точняк — верить можно, парни проверенные), но... Какого-то лешего со мной никто не хочет мутить. Я начал в стриптиз-клуб ходить, там есть одна ничего так — я на неё постоянно пялюсь. Говорят, она на меня тоже посматривала (оказалось — наврали...).

    Потом мне посоветовали один клуб — типа оттуда никто одиноким не уходил, начал там зависать:) Круто! Мне 3 раза дали. Ну точнее 2, один раз девушка отрубилась и уснула у меня дома, но я решил, что она согласна. По-любому согласна, раз приехала. А с одной из них даже наметился романчег:)

    Меня правда смущает, что друзья стали посмеиваться надо мной, когда мою подругу увидели... Посоветовали другой клуб, где девчонки круче. Но у меня нет денег на этот клуб, хотя там и правда покрасивше будут...

    Посоветуйте — есть ли какой-нибудь клуб, где девчонки как из второго, а цены как из первого? Очень нужно.
    Ответ написан
    19 комментариев
  • Напомните онлайн сервис для создания макета сайта?

    VaaL2004
    @VaaL2004 Автор вопроса
    Прошу прощения что побеспокоил, нашел сам: Mockingbird

    Ещё из подобных:
    Pencil Project
    ProtoShare
    Hot Gloo
    MockFlow
    Balsamiq Mockups
    Creately
    Ответ написан
    2 комментария
  • Какой логотип лучше?

    printf
    @printf
    Ем детей.
    Вы сделали меня плакать кровью.

    Оставьте тот, где кроме надписи ничего нет, пожалуйста, от лица всего сообщества свободного ПО, я вас умоляю.
    Ответ написан
    2 комментария