Что не так с вёрсткой под iPad iPhone?

Question

[Алексей]

Доброго дня
Прошу всех специалистов верстающих под 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/mas...
Результат работы: awem-layout.likeuse.ru
Для поддержки ретины использовал вот эту штуку: https://github.com/alexey-pod/awem-layout/blob/mas...
Тестирование: iPad, iPhone устройств к сожалению нет - поэтому тестировал вот здесь:
1) https://www.google.by/webmasters/tools/mobile-friendly/
2) quirktools.com/screenfly
3) lab.maltewassermann.com/viewport-resizer

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

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

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

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

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

Некоторые мои соображения:
В папке с шаблонами намешано много макетов с разными названиями, которые имеют незначительные отличия.
В частности это панель с кнопками "News Support Letter".
Панель располагается:
Внизу
https://github.com/alexey-pod/awem-layout/blob/mas...
https://github.com/alexey-pod/awem-layout/blob/mas...
https://github.com/alexey-pod/awem-layout/blob/mas...
Вверху
https://github.com/alexey-pod/awem-layout/blob/mas...
https://github.com/alexey-pod/awem-layout/blob/mas...
https://github.com/alexey-pod/awem-layout/blob/mas...
Есть вариант где нет панели вообще
https://github.com/alexey-pod/awem-layout/blob/mas...
https://github.com/alexey-pod/awem-layout/blob/mas...

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

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

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

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

06.11.17
По предложению Романа протестировал верстку на сайте https://www.browserstack.com/ Этот сайт позволяет тестировать вёрстку на реальных устройствах в облаке.
Вот что получилось:
iPhone 5-6.0 Portrait
iPhone 5-6.0 Landscape
iPad Air-8.3 Portrait
iPad Air-8.3 Landscape
iPhone 6S-9.0 Portrait
iPhone 6S-9.0 Landscape
iPhone 4s
iPhone 5s
Честно говоря каких либо косяков я не заметил.

Comments

[Алексей]

Денис Ефремов, Спасибо за замечание, что-то более предметное можете посоветовать?

[Алексей]

Денис Ефремов, Да вероятно вопрос большой и слишком подробно расписанный.
Но в итоге он сводится к простому вопросу - что не так с вёрсткой.
Думаете в итоге лучше дать ссылку на код и спросить - что не так с вёрсткой?

Answer 1

[Роман]

browserstack.com - для теста apple. Дается 30 минут бесплатно. Совет: регайся на временные имейлы и будет безлим)

по поводу оптимизации, проверил, то написано что уже оптимизирована, вы наверное исправили уже. А вообще компания побрить может за что угодно. Возможно было 2 одинаковых кандидата, второй попросил меньше денег и его взяли, а не вас. Вообще супер что написали подробный фидбек, обычно пишут "вы в данный момент не подходите, но если у нас появится вакансия мы обязательно свяжемся с вами"

Comments

[Алексей]

Огромное спасибо за сайт для тестирования. Протестировал в облаке на тех девайсах что были доступны. Косяков не заметил. Результаты тестирования вставил в конец вопроса.

по поводу оптимизации, проверил, то написано что уже оптимизирована, вы наверное исправили уже.

Никакой оптимизации не было. В каком виде сейчас вёрстка есть в таком она и была отправлена на ревью в компанию.

А вообще компания побрить может за что угодно.

Безусловно согласен.

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

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

Вообще супер что написали подробный фидбек, обычно пишут "вы в данный момент не подходите, но если у нас появится вакансия мы обязательно свяжемся с вами"

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

[Роман]

Алексей, напиши в фейсбук или телеграм, по свободе попробую разобрать твою верстку

[Роман]

Алексей, joxi.ru/E2pdNBpu9kEj02 вот я проверил на сервисе гугл который вы скинули. Или я что то не догнал/не дочитал?))

[Алексей]

Роман, Всё так как и должно быть.
Единственное - у вас выскакивает сообщение "Проблемы при загрузке"
Она может появляется из-за того что вёрстка вынужденно переехала на очень нагруженный сервер и периодически могут появляться 500 ошибки и т.д.
Я протестил только что и ошибки нет joxi.ru/4AkqKJwsMBR1wm