Попытка сверстать: html5, резиновая, адаптированная

[aleks-lv]

Оцените, пожалуйста, попытку сверстать на html5 резиновую страничку, с адаптацией по контрольным точкам к разным устройствам. На малых экранах макет поддерживается по контрольных точках, при промежуточных состояниях может смещаться. На ИЕ8 внимание особо не акцентировать.

 

Хотел бы услышать:

1) Общее состояние верстки.

2) Правильность/ошибочность использования html5.

3) Правильность/ошибочность использования медиа-запросов.

4) Любые обнаруженные замечания.

5) Сколько времени в среднем занимает правильная верстка подобной странички для специалиста среднего класса?

 

Страничка: http://aleks-lv.ucoz.ua/udersoft/index.html

Макет psd: http://aleks-lv.ucoz.ua/udersoft/UnderSoft.psd

Макет jpg: http://aleks-lv.ucoz.ua/udersoft/UnderSoft.jpg

 

Благодарю!

 

[ryter]

http://i.imgur.com/xmRqLWa.png?1?1328  грустно

[aleks-lv]

http://i.imgur.com/xmRqLWa.png?1?1328 грустно

 

 

 

На малых экранах макет поддерживается по контрольных точках, при промежуточных состояниях может смещаться.

 

Укажите, пожалуйста, на каком устройстве (точек сколько?) оно будет отображаться в таком виде?

[ryter]

не важно сколько точек если делаете адаптивно то под все или вообще не делайте)) 

[aleks-lv]

Согласен, что надо делать под все устройства, и мне показалось, что я и сделал под все устройства.

Я вот как размышляю, есть стандартные разрешения для этих самых устройств, если макет ломается скажем в диапазоне 357-418px, это не является критическим, так как в этом диапазоне устройства отсутствуют (может какие экзотические разве).

Страничку просматривал на deviceponsive и Am I Responsive, ломки не было.

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

[ryter]

Согласен, что надо делать под все устройства, и мне показалось, что я и сделал под все устройства.

Я вот как размышляю, есть стандартные разрешения для этих самых устройств, если макет ломается скажем в диапазоне 357-418px, это не является критическим, так как в этом диапазоне устройства отсутствуют (может какие экзотические разве).

Страничку просматривал на deviceponsive и Am I Responsive, ломки не было.

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

идея не в том чтоб под определенные разрешения делать верстку а делать так чтоб все помещалось например сжимаем страницу блоки 100% занимаю если какой то блок не помещается делаем media и трансформируем на этой точке. с таким принципом под все разрешения будет смотреться нормально.  deviceponsive и Am I Responsive, это все по умолчанию можно сделать в хроме или в фф. А таким абстрактным инструментам я не доверяю.

[aleks-lv]

если какой то блок не помещается делаем media и трансформируем на этой точке

 

 

То есть нас интересует любая точка на которой блок не помещается? Зачем нам точка 357px?

 

 

deviceponsive и Am I Responsive, это все по умолчанию можно сделать в хроме или в фф. А таким абстрактным инструментам я не доверяю.

 

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

Подскажете, пожалуйста, как "это все по умолчанию можно сделать в фф"?

[ryter]

http://i.imgur.com/4mCrIE2.png хром

http://i.imgur.com/ltGvsTn.png  фф 

хотя зря наверно я выложил про хром в прошлый раз меня заминусовали   

Edited March 17, 2014 by ryter

[aleks-lv]

Благодарю!

Я использовал firebug и не знал об этом.

[ryter]

фаербаг уже морально устарел.  Стандартный дебагер в фф очень уж тупит. А вот хром более продвинутый инструмент. Попробуйте и вам понравится. 

[aleks-lv]

А как в хроме выудить менюшку со списком девайсов? Не могу найти.

[ilgibitym]

в меню сайта li бегает при наведении

[vera17]

А как в хроме выудить менюшку со списком девайсов? Не могу найти.

Show 'Emulation' view in console drawer.

Hit Esc or click the toolbar item.

 

Вызовите Инструменты разработчика Ctrl+Shift+I,нажмите Esc и выберите Emulation (или значок есть на панели - стрелочка, а возле неё три полоски)

Edited March 17, 2014 by vera17

[aleks-lv]

в меню сайта li бегает при наведении

Благодарю, поправил.