Jump to content
  • 0

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


li4e
 Share

Question

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

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

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

Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

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

 

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

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

Edited by li4e
Link to comment
Share on other sites

  • 0

 

 

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

 

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

  • Like 1
Link to comment
Share on other sites

  • 0

я

 

 

 

 

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

 

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

 

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

 

Сделаю div...

Edited by li4e
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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

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

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

Edited by li4e
Link to comment
Share on other sites

  • 0

 

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

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

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

 

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

Link to comment
Share on other sites

  • 0

 

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

 

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

Link to comment
Share on other sites

  • 0

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

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

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

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

  • Like 4
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy