Türkçe çeviri: Mobile Usability

TL;DR — Mobile usability dır whether sizin sayfa dır easy -e kullan on bir phone: text -ebilirsiniz okuyun olmadan pinching -e zoom, buttons big enough -e tap olmadan hitting yanlış bir, bençerik şu fits screen ile no sideways scrolling, ve no full-screen popups blocking bençerik. Google kullanılan -e sahip bir rapor şu flagged bunlar problems bençin siz — o retired o in December 2023 — ama things o checked hâlâ önem taşır.

ne mobile usability dır

Mobile usability dır tam olarak ne o sounds like: nasıl usable sizin sayfa dır ne zaman someone opens o on bir phone. değil nasıl fast o loads, değil whether Google indexes o — sadece whether bir gerçek kişben on bir küçük touchscreen -ebilir okuyun o, tap o, ve al nerede onlar’re going olmadan fighting layout.

vardır four things şu yap veya break o:

1. Readable text. eğer someone sahiptir -e zoom in -e okuyun sizin paragraphs, text dır de küçük.
2. Tappable buttons ve bağlantılar. Fingers değildir olarak precise olarak bir mouse. Targets şu dır tiny veya crammed together al mis-tapped.
3. bençerik şu fits screen. No horizontal scrolling — sayfa -meli fit width of phone.
4. No pop-ups blocking bençerik. bir full-screen ad veya newsletter overlay şu kapsar sayfa moment siz arrive dır bir usability sorun (ve -ebilir hurt siz in arama).

neden önemli olduğu

en çok kişiler arama on onların phones, bu nedenle bir sayfa şu’s frustrating on mobile dır frustrating bençin en çok of sizin visitors. ve Google now reads mobile sürüm of sizin sayfa -e decide nasıl siz rank (şu’s bir separate idea called mobile-ilk dizine ekleme — daha on difference in bir ikinci). bu nedenle mobile experience değildir bir side concern anymore; o’s main bir.

”Bir dakika, Mobil Kullanılabilirlik raporu nereye gitti?”

-erseniz kullanılan -e kontrol et mobile problems in Google arama Console, siz’re değil imagining things — şu rapor dır gone. Google retired arama Console Mobile Usability rapor ve onun standalone Mobile-Friendly test et araç on December 1, 2023. şu yapmaz anlamına gel mobile usability stopped mattering; Google said opposite. o sadece anlamına gelir dedicated rapor went away çünkü daha iyi araçlar (like Lighthouse, oluşturulmuş -e Chrome) yap job now. bu nedenle eğer bir tutorial söyler siz -e “open Mobile Usability rapor,” o’s out of date.

nasıl -e kontrol et o now

easiest option: open sizin sayfa in Chrome, yapğru-click → Inspect, ve çalıştır Lighthouse (veya kullan PageSpeed Insights at pagespeed.web.dev). her ikisi flag küçük fonts, cramped tap targets, ve viewport problems. -ebilirsiniz ayrıca sadece resize sizin browser veya kullan Chrome’s phone-preview mode ve bak at sayfa on bir küçük screen — bir lot of usability problems dır obvious moment siz yap.

yapmayın confuse o ile two benzer things

• Mobile-ilk dizine ekleme — şu’s hakkında hangi sürüm of sizin sayfa Google reads ( mobile bir). farklı topic.
• temel Web Vitals — şunlar measure speed ve stability. Related, ama bir separate ayarla of numbers.

iste exact thresholds (nasıl big dır “big enough” bençin bir tap target?), full retirement story, ve her way -e test et mobile usability today? Switch -e Advanced tab.

TL;DR — Mobile usability = ease of kullan on bir touch device, driven tarafından four sinyaller: legible text (Lighthouse geçer at 12px on ≥60% of text; 16px dır practical body-kopya baseline), tap targets (Lighthouse fails below 48×48 CSS px veya ne zaman ≥25% of target bençinde 48px of center overlaps bir neighbor; ~8px spacing dır bir başlangıç benşaret et — WCAG 2,2’s separate 24×24 CSS px minimum dır bir accessibility floor, değil bir Google sıralama kural), bençerik sized -e viewport (gerektirir bir proper viewport meta tag, ama tag alone yapmaz guarantee responsive layout; no horizontal scroll), ve no intrusive interstitials. Google retired arama Console Mobile Usability rapor, Mobile-Friendly test et araç, ve API on December 1, 2023 (yapğrulanmış Dec 4) — değil çünkü sinyaller stopped mattering, ama çünkü Lighthouse matured ve mobile-ilk dizine ekleme idi effectively complete. kontrol et o now ile Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s hâlâ-live test et, ve crawlers. Distinct -den mobile-ilk dizine ekleme (hangi sürüm dır dizine eklenmiş) ve temel Web Vitals (loading/interactivity/stability). o’s bir sayfa-experience sinyal, değil bir standalone heavily-weighted sıralama faktörü.

definition, precisely

Mobile usability dır whether bir sayfa dır easy -e kullan on bir mobile/touch device. o’s bir kullanıcı-experience concept şu lives bençinde Google’s broader sayfa experience model, ve o comes down -e four concrete sinyaller. rest of bu section dır her bir ile onun gerçek threshold ve citation — çünkü specific numbers dır tam olarak ne en çok competing articles skip.

sinyal 1: legible text

eğer kişiler sahip -e pinch-zoom -e okuyun sizin body kopya, font dır de küçük. orada dır two numbers worth tutma straight, ve conflating them dır bir yaygın mistake:

• ** denetim-geç bar dır 12px.** Lighthouse’s belge kullanır legible font sizes denetim söyler: “Aim -e sahip bir font size of at least 12 px on at least 60% of text on sizin sayfa.” şu’s threshold -e technically geç automated kontrol et.
• ** practical baseline dır ~16px.** 12px passing bir denetim yapmaz anlamına gel 12px dır comfortable -e okuyun on bir phone. 16px dır generally recommended floor bençin mobile body text, ile headings larger. yapmayın design -e denetim’s minimum.

bu nedenle: 12px/60% dır geç line; 16px dır ne yapmalısınız aslında aim bençin on body kopya.

sinyal 2: tap targets

Fingers dır blunt instruments. Lighthouse’s Tap targets değildir sized appropriately denetim fails bir target on two conditions: ne zaman ” target dır smaller -den 48 px tarafından 48 px,” and when “at least 25% target area bençinde 48 px of center of target overlaps ile başka bir target.” bir few practical notes -den aynı doc:

• Targets sized 48×48 CSS px consistently geç.
• tappable area dır ne counts, değil visual size — -ebilirsiniz koru bir küçük icon ve expand onun hit area ile padding -e ulaş 48px. (bu kills myth şu her button -meli bak 48px.)
• ~8px arasında targets dır bir reasonable başlangıç benşaret et ama “değildir her zaman enough spacing -e geç denetim especially bençin çok küçük targets.”

Older Google rehberlik framed bu olarak kabaca 7mm targets ile ~5mm spacing; at typical mobile densities şu’s broadly consistent ile 48px figure. Cite 48px/8px numbers olarak güncel; mm ones dır historical color.

orada’s bir ikinci, separate number worth knowing bu nedenle siz yapmayın conflate standards: WCAG 2,2’s Success Criterion 2.5.8 (Target Size Minimum, Level AA) sets bir 24×24 CSS px minimum (ile spacing/inline/essential exceptions) — bir accessibility-conformance kural -den W3C, değil bir Google arama sıralama threshold. o’s smaller -den Lighthouse’s 48px denetim bar çünkü two come -den farklı bodies measuring farklı things: meeting Lighthouse’s 48px figure clears WCAG’s 24px floor de, ama yapmayın cite either number olarak bir düzeltilmiş, timeless “Google requires N px” kural — Lighthouse’s dır bir Chrome tooling denetim threshold, WCAG’s dır bir accessibility conformance criterion.

sinyal 3: bençerik sized -e viewport

bençerik -meli fit width of phone — no horizontal scrolling, no sayfa rendered at desktop width ve shrunk -e unreadable. mechanism dır viewport meta tag. olmadan o (veya misconfigured), mobile browsers assume bir desktop-width canvas ve scale everything down. düzelt dır bir line in <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Google’ın rehberi: “emin olun sizin sayfa bençerik fits width of viewport, tutma in mind şu değil tümü mobile devices dır aynı width.” bu nedenle yapmayın hard-code düzeltilmiş pixel widths şu yalnızca fit bir phone.

tag dır necessary ama değil sufficient. o aligns layout viewport ile device width — o yapmaz, tarafından itself, yap düzeltilmiş-width bençerik responsive. bir sayfa -ebilir ship bir correct viewport meta tag ve hâlâ başarısız ol mobile usability eğer individual elements (bir wide table, bir unbreakable uzun string, bir düzeltilmiş-pixel container) dır hard-coded wider -den viewport. tag sets canvas; sizin CSS hâlâ sahiptir -e aslında fit o.

sinyal 4: no intrusive interstitials

bir full-screen popup şu blocks sizin bençerik moment bir ziyaretçben arrives -den arama dır her ikisi bir usability sorun ve bir arama sorun. Google: “intrusive interstitials ve dialogs dır sayfa elements şu obstruct kullanıcılar’ view of bençerik, genellikle bençin promotional purposes,” and it warns that they “yap o hard bençin Google ve diğer arama motorları -e understand sizin bençerik, hangi -ebilir lead -e poor arama performance.” The guidance is blunt — “yapmayın obscure entire sayfa ile interstitials” — ve o benşaret eder -e küçük banners taking yalnızca bir fraction of screen olarak acceptable alternative. ( full treatment of ne’s penalized vs. exempt lives in intrusive interstitials deep dive.)

ne happened -e Mobile Usability rapor?

bu nerede en çok guides — dahil bazı published in son year — dır flatly yanlış, bu nedenle o’s worth getting timeline tam olarak yapğru.

• April 2023 — announced. In * role of sayfa experience in creating yararlı bençerik*, Google said: “ayrıca başlangıç December 1, 2023, biz’ll olmak retiring arama Console’s ‘Mobile Usability’ rapor, Mobile-Friendly test et araç ve Mobile-Friendly test et API. bu yapmaz anlamına gel şu mobile usability değildir önemli bençin success ile Google arama.” Its reasoning: “in neredeyse ten years since biz initially launched bu rapor, çok söyleıda diğer robust kaynaklar bençin evaluating mobile usability sahip emerged, dahil Lighthouse -den Chrome.”
• December 1, 2023 — retired. rapor, Mobile-Friendly test et araç, ve API tümü went away. Google removed corresponding mentions -den onun arama yardım et docs aynı day. eski Mobile-Friendly test et URL (search.google.com/test/mobile-friendly) now yönlendirmeler -e Lighthouse dokümantasyon, ve trying -e open Mobile Usability rapor in arama Console yönlendirmeler -e GSC overview sayfa.
• December 4, 2023 — yapğrulanmış. Google’s arama Console account yapğrulanmış sunset publicly, thanking site owners “for working with us on this journey.”

neden now? Two forces. ilk, mobile-ilk dizine ekleme idi effectively complete — Google announced “the trek to Mobile First Indexing is now complete” on October 31, 2023 — bu nedenle bir dedicated GSC rapor split out tarafından device yapılmış daha az sense. ikinci, Lighthouse sahipti matured -e bir daha iyi, daha actionable checker -den eski standalone araç. sinyaller didn’t durdur mattering; dedicated rapor yaptı.

practical correction: durdur telling kişiler -e “kontrol et Mobile Usability rapor” or “çalıştır Mobile-Friendly test et.” her ikisi dır gone. (ben’ll olmak candid — benim kendi Ahrefs rehber, Mobile-ilk dizine ekleme Goes Mobile-yalnızca, son updated June 2024, hâlâ benşaret eder readers -e şunlar two now-defunct destinations in bir spot; şu’s tam olarak kind of stale advice bu article vardır -e düzelt, ve o’s on benim liste -e correct orada de.)

nasıl -e kontrol et mobile usability today

Since orada’s no tek dedicated rapor anymore, siz assemble o -den bir few araçlar:

• Chrome Lighthouse (DevTools → Lighthouse) — direct replacement. Runs legible-font, tap-target, ve viewport denetimler ve verir siz specific failing elements.
• PageSpeed Insights (pagespeed.web.dev) — runs Lighthouse in cloud on mobile profile; good bençin bir quick shareable URL-level kontrol et.
• Chrome DevTools device toolbar — emulate bir phone, eyeball horizontal scroll, tiny text, ve cramped controls at gerçek dimensions.
• Bing’s Mobile Friendliness test et araç — bir genuine differentiator: Bing hâlâ runs bir live mobile-friendliness test et in Bing Webmaster araçlar, hatta gerçben Google’s dır gone. Bing’s kendi pitch: “making sayfalar mobile-friendly increases kullanıcı etkileşim on mobile devices. o -ebilir ayrıca yardım et siz rank daha iyi in Bing arama sonuçlar on mobile devices.” Handy bençin bir ikinci opinion on rendering.
• üçüncü-party crawlers — Ahrefs site denetimi ve benzer -ebilir tarama ile bir mobile kullanıcı-agent ve surface mobile-specific sorunlar ölçekte (connect PageSpeed Insights API bençin mobile kontroller).
• bir gerçek device. Nothing beats opening sayfa on bir gerçek phone.

No tek araç proves end—e-end usability kendi başına — combine bir automated denetim (Lighthouse veya PageSpeed Insights), bir emulated visual kontrol et (DevTools device toolbar), ve at least bir gerçek-device geç önce calling bir sayfa düzeltilmiş.

Mobile usability vs. mobile-ilk dizine ekleme vs. temel Web Vitals

bunlar three al blurred together constantly. onlar’re related ama distinct:

bir site -ebilir olmak fully on mobile-ilk dizine ekleme ve hâlâ sahip terrible mobile usability (tiny text, cramped buttons), ve vice versa. mobile-ilk dizine ekleme deep dive ve temel Web Vitals material kapsa şunlar two in full — bu article dır strictly usability layer.

yapar mobile usability affect sıralamalar?

Yes, ama koru o in proportion. Mobile usability contributes -e sayfa experience, hangi Google treats olarak bir ayarla of sinyaller bençinde broader sıralama systems — değil bir tek heavily-weighted factor ile bir düzeltilmiş score. Google’ın kendi caution: site owners “should not focus on only one or two aspects of page experience,” ve “Google arama her zaman seeks -e göster en çok relevant bençerik, hatta eğer sayfa experience dır sub-par.” bu nedenle düzelt usability çünkü o yardımcı olur gerçek kullanıcılar (ve o’s yapğru thing -e yap) — değil çünkü siz expect bir magic sıralama bump. o’s bir contributor, değil bir kingmaker.

nerede bu sits in mobile-seo küme

bu bir piece of wider mobile SEO picture. Mobile-ilk dizine ekleme kapsar hangi sürüm Google reads ve bençerik-parity kural; mobile SEO checklist dır çalıştır-o-down denetim; interstitials, AMP, ve responsive-vs- dynamic-sunma topics her al onların kendi treatment. bu article deliberately stays in onun lane — usability sinyaller — bu nedenle o complements şunlar yerine repeating them.

AI özet

bir condensed take on Advanced sürüm:

• Mobile usability = ease of kullan on bir touch device. Four sinyaller: legible text, tap targets, bençerik sized -e viewport, no intrusive interstitials.
• Legible text: Lighthouse geçer at 12px on ≥60% of text, ama 16px dır practical body-kopya baseline. yapmayın design -e denetim minimum.
• Tap targets: Lighthouse fails below 48×48 CSS px veya ne zaman ≥25% of area bençinde 48px of center overlaps bir neighbor. tappable area (via padding) dır ne counts, değil visual size. ~8px spacing dır bir başlangıç benşaret et. WCAG 2,2’s Target Size Minimum (SC 2.5.8, Level AA) sets bir separate 24×24 CSS px accessibility floor — bir W3C conformance kural, değil bir Google sıralama threshold.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">; bençerik -meli fit phone width ile no horizontal scroll. tag aligns layout viewport ile device width ama yapmaz tarafından itself yap düzeltilmiş-width bençerik responsive — individual elements -ebilir hâlâ overflow.
• Intrusive interstitials: full-sayfa overlays on entry obstruct bençerik ve hurt arama performance; küçük banners dır acceptable alternative.
• ** rapor dır gone.** Google retired arama Console Mobile Usability rapor, Mobile-Friendly test et araç, ve API on Dec 1, 2023 (yapğrulanmış Dec 4) — çünkü Lighthouse matured ve mobile-ilk dizine ekleme idi effectively complete (Oct 31, 2023), değil çünkü sinyaller stopped mattering.
• kontrol et o now ile Lighthouse, PageSpeed Insights, DevTools device emulation, Bing’s hâlâ-live Mobile Friendliness test et, ve üçüncü-party crawlers.
• Distinct -den mobile-ilk dizine ekleme (hangi sürüm dır dizine eklenmiş) ve temel Web Vitals (loading/interactivity/stability).
• sıralama: bir sayfa-experience sinyal bençinde broader systems, değil bir standalone heavily-weighted factor. Google -ecek hâlâ surface en çok relevant bençerik hatta ile bir sub-par experience.

resmî dokümantasyon

birincil-kaynak dokümantasyon -den arama motorları.

Google

• role of sayfa experience in creating yararlı bençerik (Apr 2023) — announcement şu retired Mobile Usability rapor, Mobile-Friendly test et araç, ve API olarak of Dec 1, 2023, ve pointed -e Lighthouse.
• Understanding Google sayfa experience — nerede mobile usability sits olarak bir sinyal, self-assessment questions, ve “don’t over-index on one signal” caution.
• kaçın intrusive interstitials ve dialogs — interstitials definition ve küçük-banner alternative.
• Mobile-ilk dizine ekleme sahiptir landed (Oct 2023) — “trek is now complete” milestone şu yapılmış bir dedicated device-split rapor unnecessary.

Chrome / Lighthouse

• belge yapmaz kullan legible font sizes — 12px/60%-of-text denetim threshold.
• Tap targets değildir sized appropriately — 48×48 CSS px denetim ve overlap/spacing kurallar.

Bing / Microsoft

• Bing Mobile Friendliness test et araç — hâlâ live, unlike Google’s; test et herhangi bir URL bençin mobile-friendliness in Bing Webmaster araçlar.

W3C

• Target Size (Minimum) — WCAG 2,2 Understanding SC 2.5.8 — 24×24 CSS px accessibility-conformance floor, distinct -den Lighthouse’s 48px denetim threshold.

Quotes -den kaynak

On—record statements -den Google, Chrome/Lighthouse, ve Bing. her bağlantı dır bir deep bağlantı şu jumps -e quoted passage nerede kaynak sayfa supports o.

Google — retiring rapor ve araçlar (Apr 2023 announcement)

• “Also starting December 1, 2023, we’ll be retiring Search Console’s ‘Mobile Usability’ report, the Mobile-Friendly Test tool and Mobile-Friendly Test API. This doesn’t mean that mobile usability isn’t important for success with Google Search.” — Google arama Central Blog. okuyun post
• “In the nearly ten years since we initially launched this report, many other robust resources for evaluating mobile usability have emerged, including Lighthouse from Chrome.” okuyun post

Google — sayfa experience framing

• “Google Search always seeks to show the most relevant content, even if the page experience is sub-par.” — Google arama Central docs. Jump -e quote

Google — müdahaleci ara sayfalar

• “Intrusive interstitials and dialogs are page elements that obstruct users’ view of the content, usually for promotional purposes.” — Google arama Central docs. Jump -e quote

Google — mobile-ilk dizine ekleme complete (context)

• “We’re delighted to announce that the trek to Mobile First Indexing is now complete.” (Türkçe gloss: Mobil Öncelikli Dizine Ekleme yolculuğunun artık tamamlandığını duyurmaktan mutluluk duyuyoruz.) — Google arama Central Blog, Oct 31, 2023. Jump -e quote

Chrome / Lighthouse — thresholds

• “Aim to have a font size of at least 12 px on at least 60% of the text on your page.” — Chrome bençin Developers / Lighthouse docs. Jump -e quote
• Tap targets başarısız ol ne zaman “48 px by 48 px” değildir met, ve ne zaman target areas overlap bençinde 48px of center. Jump -e quote

Bing — hâlâ-live araç

• “Making pages mobile-friendly increases user engagement on mobile devices. It can also help you rank better in Bing search results on mobile devices.” — Bing Webmaster araçlar, Mobile Friendliness test et. Open araç

rapor’s gone — nasıl yap ben kontrol et mobile usability now?

eski “just open the Mobile Usability report” yanıt no longer çalışır. hangi güncel araç siz ulaş bençin depends on ne siz’re trying -e yap. Click aracılığıyla o.

Mobil kullanılabilirlik kontrol listesi

bir geç genelinde four sinyaller, çalıştır karşı mobile rendering of sayfa (DevTools device mode veya bir gerçek phone):

• Body text dır legible olmadan zooming — ~16px baseline; at minimum geçer Lighthouse’s 12px-on-≥60%-of-text denetim.
• Tap targets dır 48×48 CSS px (veya bir smaller icon ile padding expanding tappable area -e 48px).
• Tap targets değildir crowded — adjacent targets yapmayın overlap bençinde 48px of center; ~8px+ spacing, daha bençin çok küçük ones.
• Viewport meta tag present — <meta name="viewport" content="width=device-width, initial-scale=1">.
• No horizontal scrolling — bençerik fits viewport width; no düzeltilmiş-pixel elements wider -den screen.
• No intrusive interstitial on entry -den arama — full-sayfa overlays dır out; küçük banners ve legally required gates dır fine.
• CSS/JS değil blocked in robots.txt — Googlebot gerektirir them -e render mobile sayfa ve judge usability.
• Audited ile Lighthouse / PageSpeed Insights — değil retired Mobile-Friendly test et veya GSC Mobile Usability rapor.
• Spot-checked on bir gerçek device — bazı sorunlar yalnızca göster up on gerçek hardware.

mental models

1. Four sinyaller, bir soru. Legible text, tap targets, viewport fit, no intrusive interstitials. her mobile usability sorun dır bir of şunlar four — diagnose tarafından asking hangi bir dır failing önce siz touch anything.

2. denetim bar değildir goal. Lighthouse geçer text at 12px ve tap targets at tam olarak 48px. şunlar dır floors, değil targets. Aim bençin 16px body kopya ve comfortably-spaced controls — passing denetim ve olma pleasant -e kullan değildir aynı thing.

3. Tappable area, değil visual size. bir küçük icon -ebilir geç tap-target denetim eğer padding expands onun hit area -e 48px. Design hit area, değil sadece pixels -ebilirsiniz see.

4. three “not the same as.”

• Mobile usability ≠ mobile-ilk dizine ekleme (şu’s hangi sürüm dır dizine eklenmiş).
• Mobile usability ≠ temel Web Vitals (şu’s loading/interactivity/stability).
• Mobile usability ≠ bir tek heavy sıralama faktörü (o’s bir sayfa-experience sinyal among several).

5. tooling moved — update sizin muscle memory. dedicated GSC rapor ve Mobile-Friendly test et dır gone (Dec 2023). ulaş bençin Lighthouse / PageSpeed Insights / DevTools / Bing’s test et / bir crawler instead. eğer bir süreç doc hâlâ söyler “check the Mobile Usability report,” süreç doc dır bug.

Mobil kullanılabilirlik — kısa başvuru

** four sinyaller + thresholds**

** viewport bir-liner**

<meta name="viewport" content="width=device-width, initial-scale=1">

Dates -e know

• Apr 2023 — Google announces retirement.
• Oct 31, 2023 — mobile-ilk dizine ekleme declared complete.
• Dec 1, 2023 — Mobile Usability rapor + Mobile-Friendly test et araç + API retired.
• Dec 4, 2023 — sunset yapğrulanmış publicly.

nerede eski araçlar went

• Mobile-Friendly test et URL → yönlendirmeler -e Lighthouse docs.
• GSC Mobile Usability rapor → yönlendirmeler -e GSC overview.

kontrol et o now: Lighthouse · PageSpeed Insights · DevTools device mode · Bing Mobile Friendliness test et (hâlâ live) · üçüncü-party crawler · gerçek device.

yapmayın confuse ile: mobile-ilk dizine ekleme (hangi sürüm dır dizine eklenmiş) · temel Web Vitals (LCP/INP/CLS).

SOP: denetim bir sayfa’s mobile usability (post-rapor era)

bir repeatable procedure now şu orada’s no bir-click rapor. ~10 minutes per sayfa.

1. Open sayfa in Chrome ve çalıştır Lighthouse. DevTools (⌘⌥I / Ctrl+Shift+I) → Lighthouse tab → kontrol et SEO ve Performance → Analyze sayfa load (seç Mobile device). Note herhangi bir legible font sizes veya tap targets failures — Lighthouse listeler specific elements.
2. yapğrula viewport tag. In DevTools Elements, arama <head> bençin name="viewport". o -meli okuyun width=device-width, initial-scale=1. No tag, veya bir düzeltilmiş width=980-style değer, dır düzelt.
3. Emulate bir phone ve bak. Toggle device toolbar (⌘⇧M / Ctrl+Shift+M), seç bir küçük device (e.g. iPhone SE width). Scroll full sayfa: herhangi bir horizontal scrollbar veya element bleeding off yapğru edge dır bir viewport-fit başarısızlık.
4. test et tap targets tarafından hand. In device mode, try tapping adjacent bağlantılar/buttons. -erseniz’d realistically mis-tap, onlar’re de küçük veya de close — target 48px hit areas ile ~8px+ spacing.
5. kontrol et bençin entry interstitials. Load URL fresh (incognito) olarak eğer arriving -den arama. bir full-sayfa overlay önce -ebilirsiniz okuyun bençerik dır bir sorun; küçük banners ve legal/consent gates dır fine.
6. Cross-kontrol et ile Bing’s live test et (optional ikinci opinion) at bing.com/webmaster/araçlar/mobile-friendliness, ve/veya PageSpeed Insights bençin bir shareable record.
7. Verify on bir gerçek device eğer sayfa önem taşır. Emulation dır close, değil perfect.
8. File düzeltmeler tarafından sinyal — font size, tap sizing/spacing, viewport, interstitial — bu nedenle devs al bir actionable liste, değil “make it mobile-friendly.”

Mobil kullanılabilirlik anti-pattern’leri

recurring mistakes — several of them baked -e stale advice şu’s hâlâ circulating.

• “Check the GSC Mobile Usability report.” o idi retired December 1, 2023 ve URL now yönlendirmeler -e overview sayfa. eğer bir doc veya tutorial söyler bu, o’s out of date — dahil, until o’s corrected, bir passage in benim kendi Ahrefs rehber.
• “Run Google’s Mobile-Friendly Test.” ayrıca retired Dec 1, 2023; eski URL yönlendirmeler -e Lighthouse docs. birden çok currently-live articles hâlâ describe bu araç olarak working — o değildir.
• Designing -e 12px denetim floor. Passing Lighthouse’s font-size denetim at 12px yapmaz yap text comfortable -e okuyun on bir phone. kullan ~16px bençin body kopya.
• Measuring visible icon, değil tappable area. bir 24px icon -ebilir hâlâ geç tap-target denetim eğer padding expands onun hit area -e 48px. Shrinking hit area -e match graphic dır mistake.
• Omitting veya misconfiguring viewport meta tag. No tag (veya bir düzeltilmiş-width bir) yapar mobile browsers render at desktop width ve shrink everything. o’s bir bir-line düzelt şu’s easy -e forget.
• Full-screen interstitials on entry -den arama. Newsletter/app-install/ad overlays şu block bençerik moment bir ziyaretçben arrives obstruct bençerik ve -ebilir hurt arama performance. kullan bir küçük banner instead.
• Blocking CSS/JS in robots.txt. eğer Googlebot -ebilir’t fetch assets, o -ebilir’t render mobile sayfa uygun biçimde veya judge onun usability.
• Treating mobile usability olarak bir big standalone sıralama lever. o’s bir sayfa-experience sinyal, ve Google -ecek hâlâ surface en çok relevant bençerik hatta ile bir sub-par experience. düzelt o bençin kullanıcılar, değil bençin bir imagined sıralama jump.
• Conflating o ile mobile-ilk dizine ekleme veya temel Web Vitals. farklı problems, farklı düzeltmeler, farklı araçlar. koru them separate.

Quick kontroller -ebilirsiniz çalıştır yourself

siz yapmayın ihtiyaç duy retired araçlar -e spot yaygın failures. bir few practical snippets.

kontrol et viewport meta tag -den command line

# Does the page ship a proper viewport meta tag?
curl -s https://example.com/ | grep -i 'name="viewport"'
# Expected: <meta name="viewport" content="width=device-width, initial-scale=1">
# No output = no viewport tag (a mobile-usability failure).

bul elements causing horizontal scroll (DevTools console)

Paste -e Chrome DevTools console -iken emulating bir phone — o listeler herhangi bir element wider -den viewport, usual neden ol of horizontal scrolling:

// Flag elements wider than the viewport
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
  .filter(el => el.getBoundingClientRect().right > vw + 1)
  .forEach(el => console.log(Math.round(el.getBoundingClientRect().right), el));

bul text smaller -den 16px (DevTools console)

// List text-bearing elements rendered below the 16px baseline
[...document.querySelectorAll('body *')]
  .filter(el => el.childNodes.length && [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim()))
  .map(el => ({ px: parseFloat(getComputedStyle(el).fontSize), el }))
  .filter(x => x.px < 16)
  .forEach(x => console.log(x.px + 'px', x.el));

Bookmarklet: highlight küçük tap targets

Save olarak bir bookmark, çalıştır on herhangi bir sayfa in mobile emulation — o outlines interactive elements whose rendered box dır altında 48×48 CSS px:

javascript:(()=>{document.querySelectorAll('a,button,input,select,textarea,[role=button]').forEach(el=>{const r=el.getBoundingClientRect();if(r.width<48||r.height<48){el.style.outline='2px solid red';}});})();

Remember caveat: tappable area (padding included) dır ne denetim measures — bir element flagged burada -ebilir hâlâ olmak fine eğer padding expands onun hit area -e 48px.

araçlar bençin checking mobile usability

• Chrome Lighthouse (DevTools → Lighthouse) — direct replacement bençin retired Mobile-Friendly test et. Runs legible-font, tap-target, ve viewport denetimler ve names failing elements.
• PageSpeed Insights (pagespeed.web.dev) — Lighthouse in cloud on mobile profile; shareable URL-level sonuçlar.
• Chrome DevTools device toolbar — phone emulation bençin eyeballing horizontal scroll, tiny text, ve cramped controls at gerçek dimensions.
• Bing Mobile Friendliness test et araç — hâlâ live in Bing Webmaster araçlar; bir gerçek ikinci opinion now şu Google’s dedicated araç dır gone.
• arama Console URL Inspection — see rendered mobile HTML ve screenshot Googlebot smartphone saw (yapmaz grade usability, ama confirms ne renders).
• Ahrefs site denetimi — tarama ile bir mobile kullanıcı-agent ve surface mobile-specific sorunlar genelinde her sayfa (connect PageSpeed Insights API bençin mobile kontroller).
• bir gerçek phone — ground truth emulation approximates.

Mobile sayfa görünür fine in emulation ama fails on bir phone

Symptom: Chrome’s device toolbar görünür temiz, ama kullanıcılar rapor clipped bençerik, overlapping controls, veya unusable dialogs. muhtemel neden ol: emulation yaptı değil reproduce phone’s browser chrome, safe-area insets, text scaling, veya operating-system keyboard. düzelt: reproduce task on at least bir physical iOS device ve bir physical Android device. test et orientation changes, increased text size, ve on-screen keyboard, değil sadece landing state.

sayfa scrolls sideways

Symptom: bir narrow strip of bençerik extends past yapğru edge. muhtemel neden ol: bir düzeltilmiş-width element, unbroken string, table, image, veya 100vw container dır wider -den layout viewport. düzelt: kullan DevTools -e inspect widest element, yap media responsive, izin ver uzun text -e wrap, ve prefer width: 100% bençinde padded containers. yapmayın hide evidence ile overflow-x: hidden until siz sahip düzeltilmiş kaynak.

Tap targets hâlâ başarısız ol sonra increasing icon

Symptom: Lighthouse hâlâ flags bir control sonra onun visible icon aldı larger. muhtemel neden ol: interactive box kalır küçük veya neighboring bağlantılar overlap onun usable space. düzelt: ekle padding -e clickable element itself, space adjacent targets, ve verify rendered hit box in DevTools. Enlarging yalnızca bir SVG bençinde bir tiny anchor yapmaz enlarge anchor.

Text olur unreadable sonra load

Symptom: initial HTML görünür usable, o hâlde client-side code replaces o ile tiny text veya bir desktop layout. muhtemel neden ol: responsive styles veya components load late, başarısız ol at bir breakpoint, veya differ arasında server ve client rendering. düzelt: test et rendered state ile JavaScript enabled, inspect failing breakpoint, ve koru mobile layout in initial critical CSS nerede practical.

Prove bir mobile-usability düzelt worked

test et yourself: Mobile Usability

Five quick questions on mobile usability. seç bir yanıt her biri bençin, o hâlde kontrol et.

kaynaklar worth sizin time

benim yazma

• Mobile-ilk dizine ekleme Goes Mobile-yalnızca (Ahrefs) — benim deep dive on mobile-ilk dizine ekleme ve mobile design en iyi practices. Fair warning: olarak of onun June 2024 update o hâlâ benşaret eder readers -e retired GSC Mobile Usability rapor ve Mobile-Friendly test et — stale advice bu article corrects, ve something ben plan -e düzelt orada.
• Beginner’s rehber -e teknik SEO (Ahrefs) — nerede mobile usability fits bençinde broader teknik-SEO picture.
• temel Web Vitals: ne onlar dır & nasıl -e Improve Yours (Ahrefs) — performance side of mobile experience, hangi kişiler routinely conflate ile usability.

benim speaking

• nasıl arama çalışır (SlideShare) — benim walkthrough of tarama, rendering, dizine ekleme, ve sıralama, dahil nasıl Googlebot tarar olarak bir smartphone. (Standing disclaimer: “This is my understanding of systems… not going to be 100% complete or accurate.”)

-den yaklaşık industry

• role of sayfa experience in creating yararlı bençerik (Google) — April 2023 post şu announced rapor/araç retirement ve pointed -e Lighthouse.
• Google Officially Drops Mobile Usability rapor, Mobile-Friendly test et araç ve API (arama motoru Land, Barry Schwartz) — retirement, in plain language.
• Google arama Console’s Mobile Usability rapor & Mobile-Friendly testler dır Gone (arama motoru Roundtable, Barry Schwartz) — Dec 4, 2023 sunset confirmation ve nerede eski URLs now yönlendirme.
• belge yapmaz kullan legible font sizes (Chrome / Lighthouse) — 12px/60%-of-text denetim threshold.
• Tap targets değildir sized appropriately (Chrome / Lighthouse) — 48×48 CSS px denetim ve spacing kurallar.
• kaçın intrusive interstitials ve dialogs (Google) — interstitials definition ve acceptable-banner alternative.
• Bing Mobile Friendliness test et araç (Bing Webmaster araçlar) — hâlâ live; test et herhangi bir URL bençin mobile-friendliness.

istatistikler worth alıntılanmaya değer

• Legible-font denetim geç bar: 12px on ≥60% of text — Lighthouse’s documented threshold. Note o’s bir geç floor, değil recommended ~16px body-kopya baseline. kaynak
• Tap-target denetim fails below 48×48 CSS px (ve on ≥25% overlap bençinde 48px of center) — Lighthouse. tappable area, değil visual size, dır ne’s measured. kaynak
• WCAG 2,2 Target Size Minimum (SC 2.5.8, Level AA): 24×24 CSS px — bir separate accessibility-conformance kural -den W3C, değil bir Google arama sıralama threshold; smaller -den Lighthouse’s 48px denetim bar çünkü o measures bir farklı thing. kaynak
• Retirement date: December 1, 2023 — Google retired arama Console Mobile Usability rapor, Mobile-Friendly test et araç, ve API on bu date (yapğrulanmış publicly Dec 4, 2023). kaynak
• Mobile-ilk dizine ekleme declared complete October 31, 2023 — milestone şu yapılmış bir dedicated device-split usability rapor unnecessary. kaynak

Değişiklik günlüğü