How to test and find errors in layout if I'm not a layout designer?

Question

Layout

My task is to find errors in layout. How to test the layout without knowing the code? It is clear that it is better to know the code. Studying the code is on the list of tasks, but you need to check the layout right now. I would be glad for any help, useful articles, techniques, tricks, life hacks... I'm not banned from Google, I actively use it. But I thought you never know, someone will tell you what you need to understand in the first place. Hope the community can help.

Answer 1

layout checklist
is the same, in detail
what you can do without experience:
open the assembly on a smartphone, tablet, desktop. on a real device.
a) a quick overview of the page, compliance with the layout: indents, sizes, fonts and font size, graphic format, bumps that immediately catch your eye.
b) slow review by blocks: similarity, jambs, performance, we directly run through each block from each device. (no tablet? Google's web inspector is the easiest option)
c) click, poke, zoom, scroll, scroll (change the scale of the page, do everything aggressively to quickly notice microglitches). The task is to interact with everything that is on the page. We look at what breaks, rides, creaks during our test.
d) you can immediately check the optimization of graphics: using google page speed, drive in the url, look at what it complains about, how much the graphics weigh (have they optimized it?)
e) repeat the procedure in TOP browsers: chrome, yandex, mozilla, safari, ej ( IE, if necessary), mobile browsers, let's see what's wrong and whether everything works
at least:
as a separate item ACCESSIBLE
all controls can be controlled by the keyboard, the site (ideally) fully functional when CSS and JS are turned off (there is a plugin in chrome - Web Developer, download from the store, poke, test)
we test the behavior of the blocks directly in chrome, through the inspector. (I suggest that the author find ready-made descriptions about this ... ahhh, okay, to: a review of web inspectors )
______________________________________
useful links:
Kiseleva's blog , a bunch of book reviews + useful clippings, the coolest blog
about accessibility:
https://weblind.ru/ MAIN READ
https://www.bl2.ru/programing/colourcontrastcheck.html
https://habr.com/post/347478/
https://developer.paciellogroup.com/resources/cont...
https://usabilitylab .ru/blog/dostupnost-internet-b...
https://blog.sibirix.ru/2018/05/22/almost-blind-ve...
https://www.toptal.com/designers/colorfilter
www.bbc.co.uk/guidelines/futuremedia
https://www.lightningdesignsystem.com/accessibilit...
https://geon.github.io/programming/2016/03/03/dsxyliea
https://wearecolorblind. com/
blog.gov.design /blog/2016/11/08/accessibility.html
specialbank.ru/guide
specialbank.ru/guide/index.html
PS
code validators (please correct me if not) firstly there are 2 of them and they are different, secondly, if we see an error, this does not mean that it is always an error. Because some things may not be described there

Answer 2

Alternatively, you can use a validator.

Answer 3

1. You can check the validity.
2. Open the developer tools, look at the adaptability, there is an icon with a phone and a tablet near the Elements tab. To open the developer tools, press f12 or ctrl+shift+j
3. In the same place, in the tools, you can open the Audit tab and click Run audit, then read the results.
All other quality parameters should already be understood by the code.
Perhaps, of course, someone else will advise something.