Всем привет! Подскажите новичку.

Я хочу сделать сайт для моб устройств и не только малых дисплеев.
Для того что бы сайт не коряво отображался на всех устройствах, нужно сделать
резиновый и без флеша (и скрипты для mobile устройств использовать).

Я сейчас в фотошопе набросал 20 страниц моего сайта, а что бы отдать программисту то хочу весь мой макет в фотошопе перерисовать используя уже готовые иконки GUI интерфейс
(за основу я возьму iPhone 4 GUI – прикрепил картинку). В конечном итоге сайт будет иметь интерфейс application для iPhone.

Вот посоветуйте как мне при моей перерисовке соблюсти всё, что бы программист без проблем сделал сайт который растянется на дисплеи 640 x 960 и на 800 x 1280?

В какой формате передавать программисту? в PSD ( по слоям)

на что ещё стоит обратить внимание? как показывать сполер (динамический сдвиг части страницы)?

Спасибо за бесценные подсказки!

Linux Nix Web Development - http://linuxoids.org/ размер 500x307, 51.41 kb

Tagged with →  

16 Responses to Всем привет!

  1. Ylfer:

    Чтобы программист «без проблем сделал сайт» тебе прежде понадобится отдать макет верстальщику, он и подготовит всё в нужном виде для программиста. Заодно и позаботится об обеспечении правильного отображения на различных дисплеях.

    Для этого тебе нужно по-первых показать в эскизе, как должен выглядеть макет при упомянутых тобой 640 x 960 и 800 x 1280, а во-вторых найти того самого верстальщика. Тут недавно был пост — возможно, это поможет найти подрядчика.

  2. LaeMilk:

    Спасибо!

  3. Xuagreen:

    А самое главное — тебе надо отрисовать всё в четырёх вариантах для всех DPI 🙂 Развлекайся!

  4. LaeMilk:

    но подождите не ужели не достаточно в самом меленьком? вот например
    http://m.facebook.com/ имеет одно минимальное значение и меньше не сжимается,
    а как бы не растягивай кнопки сами тянуться…

  5. UpaFcuk:

    Для мобильных устройств модно юзать адаптивную вёрстку http://lessframework.com/

  6. Xuagreen:

    есть такая штука, DPI называется. Если ты рисуешь иконку 32х32, то на девайсе с экраном 2.4″ и разрешение 240х320 (120dpi) твоя иконка займёт пол-экрана. А на айфоне 4 размером 3.5″ и разрешением 640×960 (326dpi) в твою иконку пальцем не попадёт никто, кроме таракана. Поэтому тебе нужна графика хотя бы под три ходовых плотности экрана. У фейсбука сейчас графика под все экраны.

  7. AniEkb:

    т.е. прежде чем отдавать верстальщику интерфейс, нужно отрисовать его не в разных разрешениях, а в разных dpi? можно поподробнее, сколько вообще для мобильных устройств сейчас есть «стандартов» и т.п. в ближайшем будущем надо подготовить макет для приложения под андроид.

  8. Xuagreen:

    на разрешения насрать, ибо резина. Сейчас в смартах используется четыре уровня:

    1. ldpi (120dpi) — 75% от оригинального iPhone. Дешёвый кетай, устройств в ходу мало, на него можно забить и отдавать ему картинки от mdpi.
    2. mdpi (160dpi) — точка базового отсчёта, оригинальный iPhone, первые гуглофоны, сейчас это нынешний low-end.
    3. hdpi (240dpi) — 150% от оригинального iPhone. Самый ходовой dpi среди гуглофонов.
    4. xhdpi (320dpi) — 200% от оригинального iPhone, разрешение iPhone 4 и всех новый хай-ендов под Android.

    Теперь ты делаешь в HTML meta viewport, говоришь что сам будешь хендлить разрешения и dpi, а в CSS используешь media queries и наступает щастье.

    P.S. Планшеты обычно используют mdpi и hdpi. Большой экран можно отдельно хендлить через css media queries и, например, рисовать контент в два столбика, а не в один.

  9. Xuagreen:

    Типичный пример размеров иконок:

    1. Базовый размер 32×32 (mdpi).
    2. Для лузеров 24×24 (ldpi).
    3. Для hdpi 48×48.
    4. Для крутых чюваков — 64×64 (xhdpi).

  10. AniEkb:

    спасибо большое. а то меня пытались напрячь в векторе рисовать.

  11. Xuagreen:

    рисуй в векторе, так будет проще (: Я вообще планирую статью на эту тему написать, только я ленивый как хуй трупа.

  12. AniEkb:

    блядь, ты сначала ввёл меня в душевное равновесие, а потом вывел )
    отрисую лучше в растре, а то верстальщик или программист какую-нибудь хуйню из вектора еще сделают.

  13. Xuagreen:

    я имел в виду рисуешь в векторе, САМ скейлишь и отдаёшь верстаку битмапы. Иначе они точно хуйню наделают (:

  14. Xuagreen:

    Вот я всем на радость сделал пример того, как оно должно быть (:

  15. TefYes:

    Для начала дать верстальщику вот этот линк

    ..

  16. LaeMilk:

    Тогда следующий вопрос, кто возьмется?
    возможно у вас есть и программисты которые вас понимают, а вы их.

    готов встречаться если вы в москве.

Добавить комментарий