A
A
Alexey2017-11-06 17:59:11
iPhone
Alexey, 2017-11-06 17:59:11

What's wrong with layout for iPad iPhone?

Good day.
I ask all experts who make up for iPad, iPhone to evaluate the layout and tell me what is wrong.
Introductory - I did a test task on layout for one company.
Task
1) It is necessary to lay out the page according to the proposed layout
2) Requirements:
- display on iPad, iPhone devices from 4 to 6+
- Only HTML + CSS (no Javascript)
- As a bonus - taking into account screen resolution (2 files for each image - for retina and without)
Work results:
Sources: https://github.com/alexey-pod/awem-layout
Layouts: https://github.com/alexey-pod/awem-layout/tree/mas...
Work result: awem-layout.likeuse.ru
To support retina, I used this thing: https://github.com/alexey-pod/awem-layout/blob/mas...
Testing: Unfortunately, there are no iPad, iPhone devices - so I tested it here:
1) https:/ /www.google.by/webmasters/tools/mobile-friendly/
2) quirktools.com/screenfly
3) lab.maltewassermann.com/viewport-resizer
Response from the company:

There were two layouts in the TOR, one for the desktop, the second for mobile applications, including a view folder for the expected result.
Result:
Unfortunately, the main requirement - display on iPad, iPhone from 4 to 6+ devices was not met.
https://www.google.by/webmasters/tools/mobile-frie...
Cannot be used in production.
There is no understanding of adaptive layout for mobile devices.
There is no understanding of how the viewport works.
General impression:
On the plus side, there is an understanding of logical resolution, the use of less.
Recommendation:
Use, for example, the chromium inspect code if ff does not cope with this task.
Use web interfaces for checking, for examplehttps://www.google.by/webmasters/tools/mobile-friendly/ and many others.

Some of my thoughts:
In the templates folder, there are many layouts with different names, which have minor differences.
In particular, this is a panel with "News Support Letter" buttons.
The panel is located:
Below
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...
Top
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...
There is an option where there is no panel at all
https://github.com /alexey-pod/awem-layout/blob/mas...
https://github.com/alexey-pod/awem-layout/blob/mas...
Due to the fact that I did not understand exactly how to distinguish situations in which the panel should be at the top, be at the bottom, the panel should not be - was selected universal option panel at the top and it was laid out. Maybe that was my mistake.
I also want to draw your attention - the company did not say anything about the retina. And I do not know whether I did the "retinization" correctly or not. Maybe someone will test on a real device and throw a screen - be grateful.
Thanks in advance to anyone who can suggest my jambs.
If we worked across the table, I could ask these questions to my supervisor and redo the task as much as needed. Now - I do not have such an opportunity, so I hope for the help of the community.
06.11.17
At the suggestion of Roman, I tested the layout on the site https://www.browserstack.com/ This site allows you to test the layout on real devices in the cloud.
Here's what happened:
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
To be honest, I did not notice any jambs.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman, 2017-11-06
@arkanroman

browserstack.com - for apple test. 30 minutes are given free of charge. Advice: register for temporary emails and it will be unlimited)
regarding optimization, I checked it, it says that it is already optimized, you probably already fixed it. In general, the company can shave for anything. Perhaps there were 2 identical candidates, the second one asked for less money and they took him, not you. In general, it’s great that they wrote a detailed feedback, they usually write “you are not suitable at the moment, but if we have a vacancy, we will definitely contact you”

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question