Ce să faci în mod special pentru varianta de mobil a unui web site?

Mai jos, câteva lucruri pe care le poți face în mod special pentru varianta de mobil a unui site web.

1. Viteza site-ului trebuie să fie foarte bună.
E complicat să faceți site-ul în AMP, dar ar ajuta la viteză.
În orice caz, viteza trebuie să fie excelentă, inclusiv pe mobile.
Ca regulă aici, dacă bugetul permite, AMP poate fi OK, dar recomand întâi de toate ca site-ul să fie responsive, să se vadă OK pe desktop, tabletă, și diferite telefoane mobile.

Un tag important e:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Detalii:

https://www.w3schools.com/css/css_rwd_viewport.asp

De testat viteza cu:

De testat dacă site-ul se afișează OK pe mobil cu:

2. Neapărat de implementat asta (responsive images pentru mobil, prin încărcarea unor variante diferite de imagini):

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Pe mobil trebuie ca imaginile să nu fie încărcate la rezoluția maximă, ci la rezoluția specifică pentru mobil.
Asta va face site-ul să se miște mult mai rapid.

3. Pop-urile și varianta de mobil a site-ului nu se împacă bine. În principal, pentru că este greu de închis un popup pe mobil, în multe cazuri.

4. Elementele din pagină trebuie să fie cât mai mari, să se poată face click pe ele fără o precizie foarte mare.

De citit:

Optimal Size and Spacing for Mobile Buttons.

Citat:

“The size recommendation for a mobile touch target is 9mm or 34px, with minimum space between elements of 2mm or 8px. The smallest size possible for a target is 7mm or 26px and the optimal size is 48px with 8px between elements.”
UX for Mobile: The Rise of Fat-Finger Design

Alte detalii: