Мобильная версия сайта — разрешение, ориентация страниц, размеры шрифтов?

Question

[KseniyaArt]

Добрый день. В первый раз делаю мобильную версию сайта, не приложение, именно мобильную версию сайта.
В связи с чем появилось несколько вопросов:
1. Какой размер взять для макета? Делать ли под iPhone свой размер макета 640*960, а под Android 720*1280 или можно взять один размер для макета 640*960?
2. Нужно ли создавать макеты всех страниц мобильной версии сайта под горизонтальную и вертикальную ориентацию экрана телефона или достаточно сделать только для вертикальной?
3. Какие размеры шрифтов можно использовать для мобильной версии сайта?

Answer 1

[xmoonlight]

Делайте "резиновую" верстку и динамический шрифт через JS.

Comments

[KseniyaArt]

Сайт уже сверстан и не резиновой версткой.

[xmoonlight]

Создавайте новый шаблон с резиновой версткой и переводите сайт на него.

[KseniyaArt]

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

[xmoonlight]

480x800 - будет оптимальным, шрифт 12px, заголовки 16px, один макет для вертикальной ориентации достаточно будет (с центрированием соотв.)

[KseniyaArt]

А очень ли это плохо, если часть макета уж сделана в разрешении 640*960? :)
Я честно говоря использовала большие шрифты 24, 28, 22 в макете :(

[xmoonlight]

устройства с 480x800 есть же все-таки еще.... не перевелись...
макет покажите как выглядит (ссылку).

[KseniyaArt]

https://www.dropbox.com/s/z5hljjnyn7fiy1m/BlogOpen...
https://www.dropbox.com/s/ph5fml0tb3rc34m/Contacts...
https://www.dropbox.com/s/o0vl6tavf3hnlj4/Main.jpg?dl=0
https://www.dropbox.com/s/a2zoi4yifx9plcf/SubMenu....

[xmoonlight]

мелковато... подсказка: старайтесь, чтобы все области UI были кратны сетке с полем в 80x80px. Это минимальное поле для удобной работы пальцами.
И шрифт вписывайте в них в зависимости от типа надписей. (текст, заголовки пункты меню и т.д.)

[KseniyaArt]

Благодарю, а я думала, что это даже крупно...пора обзавестить смартфоном вместо кнопочной нокиа :D Я делала по сетке https://dribbble.com/shots/865767-iPhone-5-Grid

[xmoonlight]

Там 64 пикселя клетка (включая поля)...
А вообще, нужно ориентироваться на отношение кол-ва пикселей к физ. размерам экрана (ширина, длина)

[KseniyaArt]

Эх, придется переделывать

Answer 2

[lukoie]

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

Comments

[KseniyaArt]

Благодарю, попробуем :)