alex-zzx

Доброго дня
Прошу всех специалистов верстающих под iPad, iPhone оценить вёрстку и сказать что не так.

Вводная - делал тестовое задание по вёрстке для одной компании.

Задание такое:
1) Необходимо сверстать страничку по предложенному  макету
2) Требования:  
- отображение  на  устройствах iPad, iPhone  от  4 до 6+
- Только HTML + CSS ( без Javascript)
- Как бонус — учёт  разрешения экрана  (2 файла для каждого  изображения - для ретины и без)

Результаты работы:
Исходники: https://github.com/alexey-pod/awem-layout
Макеты: https://github.com/alexey-pod/awem-layout/tree/master/mockups
Результат работы: http://awem-layout.likeuse.ru/
Для поддержки ретины использовал вот эту штуку: https://github.com/alexey-pod/awem-layout/blob/master/css/retina.less
Тестирование: iPad, iPhone устройств к сожалению нет -  поэтому тестировал вот здесь:
1) https://www.google.by/webmasters/tools/mobile-friendly/
2) http://quirktools.com/screenfly/
3) http://lab.maltewassermann.com/viewport-resizer/

Ответ от компании:

Цитата

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

Результат:
К сожалению, основное требование - отображение на устройствах iPad, iPhone от 4 до 6+ не было выполнено.
https://www.google.by/webmasters/tools/mobile-friendly/?url=http://awem-layout.likeuse.ru/
Нельзя использовать в продакшн.
Нет понимания адаптивной верстки для мобильных устройств.
Нет понимания как работает viewport.

Общее впечатление:
Из плюсов, есть понимание логического разрешения, использование less.

Рекомендация:
Использовать, например, код инспектр хрома, если фф не справляется с этой задачей.
Использовать, вебинтерфейсы для проверки, например https://www.google.by/webmasters/tools/mobile-friendly/ и многие другие.

Некоторые мои соображения:
В папке с шаблонами намешано много макетов с разными названиями, которые имеют незначительные отличия.
В частности это панель с кнопками "News Support Letter".
Панель располагается:
Внизу
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%232.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPhone_v04.psd
Вверху
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Portrait.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_Album.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/Awem_More_Games_iPad_v01.psd
Есть вариант где нет панели вообще
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Portrait%231.png
https://github.com/alexey-pod/awem-layout/blob/master/mockups/!Preview/Awem_More_Games_iPhone_Album%231.png

Из-за того что я не понял как именно отличать ситуации в которых панель должна быть вверху, быть внизу, панели не должно быть - был выбран универсальный вариант панель вверху и он был свёрстан. Может быть именно в этом была моя ошибка.

Также хочу обратить внимание - компания ничего не сказала про ретину. И я не знаю правильно сделал "ретинизацию" или нет. Может кто-то протестит на реальном девайсе и кинет скрин - буде благодарен.

Заранее благодарен всем кто сможет подсказать мои косяки.

Если бы мы работали через стол то я мог бы задать эти вопросы своему руководителю и переделать задание столько - сколько потребуется. Сейчас же - я не имею такой возможности поэтому надеюсь на помощь сообщества.