@alex-zzx
разработчик

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

Доброго дня
Прошу всех специалистов верстающих под 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
Честно говоря каких либо косяков я не заметил.
  • Вопрос задан
  • 1596 просмотров
Пригласить эксперта
Ответы на вопрос 1
@arkanroman
browserstack.com - для теста apple. Дается 30 минут бесплатно. Совет: регайся на временные имейлы и будет безлим)

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы