Как нарисовать сайт для мобильных устройств?
Выскажу свои пять копеек…
Начинайте не от разрешения целевого экрана- определитесь какой примерно экран у вашей будущей аудитории (можно например считать 3.5" и выше). Дальше подберите такой размер на вашем мониторе (чтобы 1:1 соответствовало физическому экрану). Дальше рисуйте учитывая что пропорции экранов могу меняться, т.е. сразу расчитывайте какие блоки будут «тянуться» а какие нет. Размеры привязывайте к процентам а не к пикселам (половина экрана и на планшете останется половиной а вот 320 px на ретина дисплее могут стать ооочень маленькими).
в общем…
1. Делайте обычный сайт считая что монитор очень маленький
2. Не пользуйтесь пикселами (заменяя их соотношениями, процентами и т.д.)
3. Учитывайте что кликают пальцем а не мышкой (почитайте по физическую область нажатия для пальца)
4. Не используйте плавных градиентов и слишком близких цветов (градиент скорее всего «заполосит», а гамма выполненная в сине, чуть синее будет плохо читаться при разном освещении)
5. Очень хорошо продумайте навигацию (красивое меню на пол экрана вряди кого то порадует).
Все ИМХО :)
p.s. Можно посмотреть примеры дизайна на различного рода сайтах продающих шаблоны, уже везде представлены как мобильные так и обычные версии.
Посмотрите на jquerymobile.com