Дизайн и верстка под мобильные

[li4e]

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

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

Заранее спасибо!

[Анна]

Классика:  Итан Маркотт(Ethan Marcotte) Отзывчивый веб-дизайн, есть на русском из серии A book apart.
Очень доходчиво объясняет, прямо на примере. Около 300 страниц читается очень быстро.
В этой же серии можно просмотреть Люк Вроблевски "Сначала мобильные".

На рутрекере посмотрите A book apart

Там же посмотрите Responsive  design есть курсы от  Tutsplus.com и Lynda.com

[iKNG]

Книг не знаю. И инструкции по созданию тоже. Но могу кое-чем помочь.

Во-первых, почитайте эту, эту и эту статью. В них сам процесс не описывается, зато есть дельные советы.

Во-вторых, посмотрите этот сайт. На нем нету информации по созданию мобильного сайта. Зато можно уменьшить его до размеров мобильника с помощью Ctrl + Колесо мышки. Он преобразуется в мобильный сайт. Изучите код мобильной версии, сделайте для себя выводы, а так же обратите внимание на сам дизайн. Это — классика мобильных сайтов. Небольшой размер логотипа, резиновая верстка, меню скрытое и отображается по нажатию примерно такого изображения, без лишнего и подвала. То же самое Вы можете увидеть в знаменитых приложениях и сайтах, походив по ним с помощью эмулятора.

[li4e]

Спасибо, буду изучать.
Кому интересно, правила.

[li4e]

Итан Маркорт "Отзывчивый веб дизайн" прочел еще на той неделе, очень классная книга, в ней нашел много ответов на интересующие меня вопросы.

Попробовал разработать дизайн и сверстать с использование медиа запросов, после того как попробовал, Я в них просто влюбился. Такая классная технология эти медиа запросы.

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

Интересует один вопрос, вот я скрыл картинки для малого разрешения (display none:), так вот, хотел бы узнать, а можно ли запретить загрузку этих  изображений браузеру, пока они не будут включены в css, при большей ширине. Т.е. чтобы не тратился трафик у юзеров просто так, когда они смотрят на ус-вах с маленьким экраном. Надеюсь понятно объяснил.

 

Да и почему валидатор ругается, говорит что тег p не может быть вложен в тег span в данном контексте?

Заранее спасибо!

Edited February 4, 2014 by li4e

[Eskard]

 

 

Да и почему валидатор ругается, говорит что тег p не может быть вложен в тег span в данном контексте?

 

Ругается потому что спан - строчный элемент, а p - блочный.. Строчный элемент не может вмещать в себя блочный.. Тебе необходимо вложить твой спан внутрь тега р.

[li4e]

я

 

 

 

 

Да и почему валидатор ругается, говорит что тег p не может быть вложен в тег span в данном контексте?

 

Ругается потому что спан - строчный элемент, а p - блочный.. Строчный элемент не может вмещать в себя блочный.. Тебе необходимо вложить твой спан внутрь тега р.

 

Ясно, благодарю, но дело в том что у меня спан это table-cell, я не знаю тогда что делать!

 

Сделаю div...

Edited February 4, 2014 by li4e

[iKNG]

Отлично сделано. Но, насколько я понял, там надо сделать именно мобильную версию, а не адаптивный дизайн. Просто надо стили из media запроса под мобильные телефоны сделать основными, а остальные стили удалить.

[li4e]

Отлично сделано. Но, насколько я понял, там надо сделать именно мобильную версию, а не адаптивный дизайн. Просто надо стили из media запроса под мобильные телефоны сделать основными, а остальные стили удалить.

На олимпиаде, да именно мобильную. Я просто сначала в вольном стиле поделал чтобы усвоить принцип, вот теперь буду практиковаться из готовых десктопных шаблонов делать мобильные.

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

Edited February 5, 2014 by li4e

[iKNG]

 

Отлично сделано. Но, насколько я понял, там надо сделать именно мобильную версию, а не адаптивный дизайн. Просто надо стили из media запроса под мобильные телефоны сделать основными, а остальные стили удалить.

На олимпиаде, да именно мобильную. Я просто сначала в вольном стиле поделал чтобы усвоить принцип, вот теперь буду практиковаться из готовых десктопных шаблонов делать мобильные.

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

 

Вы не совсем поняли. Медиа запросы тут не нужны. Компания хочет именно мобильную версию своего сайта, у которого уже есть десктопная версия. То есть нужно смотреть только в мобильную сторону.

[li4e]

 

Вы не совсем поняли. Медиа запросы тут не нужны. Компания хочет именно мобильную версию своего сайта, у которого уже есть десктопная версия. То есть нужно смотреть только в мобильную сторону.

 

Наверно вы правы!

[li4e]

В общем вернулся из Питера, занял первое место в олимпиаде, было 2 номинации: Лучший дизайн и Лучшая верстка. Я занял первое место в номинации лучшая верстка(называется немного по длиннее, но я упростил ). Задание адеватное, интересное, но сложное. 

Как все проходило: Дали готовый сайт(десктопная версия), сначала за 1.5 часа нужно было спроектировать и нарисовать дизайн мобильно версии сайта, а потом за 1.5 часа нужно было его сверстать. Нарисовал как смог и сверстал как меня на этом форуме учили, все как надо в общем и занял первое место. 

Спасибо большое этому форуму и его участникам, так как именно с него начинал свой путь в верстке. 

Питер очень понравился, вот так вот.
 

[advokatua]

самое интересно не поведал.

Какой приз? Путевка на конференцию юных натуралистов в Урюпинск или что-то задорнее? )

[li4e]

Если бы, внешний жесткий диск на терабайт и макулатуру рекламную универа при котором олимпиада была.