Оцените, пожалуйста, первую адаптивную верстку

[Sergey_K_2015]

Впервые решил попробовать свои силы в адаптивной верстке. http://fitness.aiq.ru/

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

Прошу высказать замечания как по качеству кода, так и по внешнему виду.

[VIVA]

До изменения размеров экрана
Хедер:  Логотип не ссылка.
Футер: в меню "Stay in touch" не прогружаются иконки (хотя возможно так и задумано). Если в поле ввода имейла прописан type="text", я бы заменил на type="email", чтобы система проверяла указал ли ты именно имеил, а не просто текст. Так же пол формами имени и текста очень много свободного места (около 300px) которые никак не используются.

 

После изменения размеров экрана:
Появляется скрол горизонтальной прокрутки. Все разделы section (кроме класса банер) плющит, я бы сделал их ширину на 100% и и выравнял изображение по центру. В разделе Stay in touch хотелось бы, чтобы значки перепрыгивали на новую строку попарно.

[Sergey_K_2015]

До изменения размеров экрана

Хедер:  Логотип не ссылка.

Футер: в меню "Stay in touch" не прогружаются иконки (хотя возможно так и задумано). Если в поле ввода имейла прописан type="text", я бы заменил на type="email", чтобы система проверяла указал ли ты именно имеил, а не просто текст. Так же пол формами имени и текста очень много свободного места (около 300px) которые никак не используются.

 

После изменения размеров экрана:

Появляется скрол горизонтальной прокрутки. Все разделы section (кроме класса банер) плющит, я бы сделал их ширину на 100% и и выравнял изображение по центру. В разделе Stay in touch хотелось бы, чтобы значки перепрыгивали на новую строку попарно.

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

С подгрузкой иконок какая-то заморочка. Они то грузятся, то нет. Что-то с хостингом (ну от бесплатного это не сильно удивляет). Долго разбирался, откуда появляется скрол горизонтальной прокрутки. На реальных устройствах и в инструментах разработчиков он не появлялся, а на онлайн сервисах проверки адаптивности вылазил. Заменил единицы ширины с vw на %, вроде перестал появляться.

[VIVA]

Насчет Логотипа-Ссылки, давай спросим у наших ГУРУ, т.к. я сам не продвинутый, но в вебстандартах вроде прописано, что лого - должен быть ссылкой на главную страницу, но относится ли это к лендингу, я даже не знаю.

P.S. Знающие люди, если я где ошибаюсь, пожалуйста, поправьте.

 

Edited December 21, 2015 by VIVA

[vladmih]

1. Если просто лендинг, и нет внутренних страниц, то лого можно делать и не ссылкой. Так же если это стики хеадер, часто на него вешают якорь на самый верх.
2. http://take.ms/a6p3Wне особо понятно, что это за поля. Одно дело если это именно дизайнерская задумка, а вообще напрашивается full width layout....
3. hover стремный...
4. http://take.ms/wnsAGотступы у блоков не равномерные. Тексты скрываются обрезая строки вдоль. http://take.ms/Ms32A прилипли иконочки

А иконок нет, скорее всего что или самого шрифта нет авесомовского, или линки к нему неправильные в font-face

А так для первого адаптива гуд.

[Sergey_K_2015]

1. Если просто лендинг, и нет внутренних страниц, то лого можно делать и не ссылкой. Так же если это стики хеадер, часто на него вешают якорь на самый верх.

2. http://take.ms/a6p3Wне особо понятно, что это за поля. Одно дело если это именно дизайнерская задумка, а вообще напрашивается full width layout....

3. hover стремный...

4. http://take.ms/wnsAGотступы у блоков не равномерные. Тексты скрываются обрезая строки вдоль. http://take.ms/Ms32A прилипли иконочки

А иконок нет, скорее всего что или самого шрифта нет авесомовского, или линки к нему неправильные в font-face

А так для первого адаптива гуд.

по п.2: ширина макета была 1600px, поэтому я эту величину и поставил как максимальную ширину. Если честно, то мысль об адаптивности макета у меня сработала только в сторону уменьшения размеров экрана. Сейчас ограничение максимальной ширины убрал, не знаю, насколько это будет хорошо смотреться на ширине свыше 2500 px.

п.3. с hover даже не знаю, как лучше сделать, может подскажите? Мне нигде не попадались рекомендации по этому поводу, но мне кажется, что нужно применять те цвета, которыми пользуемся на странице.

п.4. поправил, действительно коряво с отступами было.

[VIVA]

не знаю, насколько это будет хорошо смотреться на ширине свыше 2500 px.

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

Лично я бы оставил max-width на определенном (максимальном разрешении из популярных) и подкорректировал бы масштаб и отступы подогнаные под выбранный размер. Edited December 21, 2015 by VIVA

[Q4Dizzy]

Адаптивность  обычно под низкими разрешениями настраивается... обычно от 960 +-

 

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

Edited December 21, 2015 by Q4Dizzy

[vladmih]

 

1. Если просто лендинг, и нет внутренних страниц, то лого можно делать и не ссылкой. Так же если это стики хеадер, часто на него вешают якорь на самый верх.

2. http://take.ms/a6p3Wне особо понятно, что это за поля. Одно дело если это именно дизайнерская задумка, а вообще напрашивается full width layout....

3. hover стремный...

4. http://take.ms/wnsAGотступы у блоков не равномерные. Тексты скрываются обрезая строки вдоль. http://take.ms/Ms32A прилипли иконочки

А иконок нет, скорее всего что или самого шрифта нет авесомовского, или линки к нему неправильные в font-face

А так для первого адаптива гуд.

по п.2: ширина макета была 1600px, поэтому я эту величину и поставил как максимальную ширину. Если честно, то мысль об адаптивности макета у меня сработала только в сторону уменьшения размеров экрана. Сейчас ограничение максимальной ширины убрал, не знаю, насколько это будет хорошо смотреться на ширине свыше 2500 px.

п.3. с hover даже не знаю, как лучше сделать, может подскажите? Мне нигде не попадались рекомендации по этому поводу, но мне кажется, что нужно применять те цвета, которыми пользуемся на странице.

п.4. поправил, действительно коряво с отступами было.

 

Вот щас гуд, я подразумеваю, что макет изначально был отрисован в 1600 точек, основной контейнер был или 960 или 1200, ну по основам гридов в нынешнее время. Это по моему пониманию дизайнера и есть на всю ширину. Если каких-то входящих от него не было.

А ховер, он и в африке ховер, можно и прозрачность менять, это не вопрос, просто видимо 0.5 для ховера это много, она прям очень прозрачной становится.

А вариантов много на хверы, бэкграунд менять в rgba, если хочется прозрачности, менять насыщенность цвета, градиент какой-то. Это уже от фантазии дизайнера или тебя самого...

И добавляй на действия transition, там где есть ховеры, хокусы ибо приятно видеть плавность...