אתר מותאם לנייד הוא אתר שמסתדר לבד לכל גודל מסך: בטלפון הכול עובר לעמודה אחת, הטקסט קריא בלי להגדיל והכפתורים גדולים מספיק לאגודל. אצל הרבה עסקים רוב המבקרים מגיעים מהטלפון, וגוגל בודקת קודם כל את גרסת הנייד של האתר.
אותו אתר, שני מסכים. בטלפון הכול מסודר בעמודה אחת.
נגיד שיש לכם מסעדה. מישהי מחפשת איפה לאכול הערב, ונכנסת לאתר שלכם מהטלפון:
שלב 1
בדרך, בין דבר לדבר, עם מעט סבלנות. היד השנייה מחזיקה תיק או קפה, והאגודל עושה את כל העבודה.
שלב 2
האתר נראה כמו גרסת מחשב מכווצת. לפי MDN, בלי הגדרה מתאימה דפדפן בטלפון מציג את הדף ברוחב של מסך רחב ואז מקטין אותו, ולכן צריך להגדיל עם שתי אצבעות ולגרור הצידה.
שלב 3
התפריט, המספר וכפתור ההזמנה צפופים זה ליד זה. היא לוחצת על הלא נכון, מגיעה לעמוד אחר, ומתעצבנת. אחרי פעם או פעמיים כאלה היא סוגרת את האתר ומחפשת מסעדה אחרת.
שלב 4
טקסט קריא, תמונות ברוחב המסך, תפריט שנפתח בלחיצה. היא גוללת למטה, רואה את המנות והמחירים, ולא צריכה להגדיל כלום.
שלב 5
התקשרו ונווטו גדולים וברורים, בדיוק איפה שהאצבע מגיעה. לחיצה אחת, והיא כבר מדברת איתכם או בדרך אליכם.
שלב 6
לפי גוגל, היא משתמשת בגרסת הנייד של האתר כדי לאנדקס ולדרג אותו. אם בגרסת הנייד חסר תוכן או שהיא חלשה, זה מה שגוגל רואה.
בקיצור: בונים קודם לטלפון, ורק אחר כך למחשב. מסך קטן מכריח לבחור מה באמת חשוב: מה העסק עושה, איך פונים אליו ואיפה הוא נמצא. מה שעובד טוב בטלפון בדרך כלל עובד טוב גם במחשב, ולא להפך.
אלה לא מספרים לדוגמה. כל שורה כאן לקוחה מהמלצה רשמית, והמקור מקושר בטבלה:
| מה בודקים | מה צריך להיות |
|---|---|
| גודל כפתור | בערך 48 פיקסלים, כמו כרית האצבע (web.dev) |
| רווח בין כפתורים | בערך 8 פיקסלים לכל כיוון (web.dev) |
| רוחב הדף | כרוחב המסך, בלי גלילה הצידה (MDN) |
| תוכן | אותו תוכן בנייד ובמחשב (Google) |
למה 48? כי לפי web.dev שטח של 48 על 48 פיקסלים שווה בערך ל-9 מילימטרים, בערך הגודל של כרית האצבע. כפתור קטן מזה מזמין לחיצות בטעות.
ואיך בונים את זה? גוגל ממליצה על עיצוב רספונסיבי, כלומר אתר אחד שמסדר את עצמו לפי גודל המסך, כי זו הדרך הכי פשוטה לבנות ולתחזק. היא גם מבקשת שבגרסת הנייד יהיה אותו תוכן כמו במחשב, כדי ששתיהן יוכלו להופיע באותם חיפושים.
התאמה לנייד היא גם חלק מחוויית הדף שגוגל ממליצה לבדוק, יחד עם מהירות ואבטחה. על מהירות בטלפון קראו במהירות אתר בפשטות.
1
לא בתצוגה של המחשב, אלא בטלפון אמיתי, ביד אחת. מנסים למצוא את הטלפון, לשלוח הודעה ולהגיע לעמוד שירות. כל מקום שבו נתקעתם הוא מקום שבו לקוח נתקע.
2
כפתורי התקשרו, וואטסאפ ונווטו גדולים וברורים, עם רווח ביניהם. אפשר גם כפתור צף שנשאר בתחתית המסך, כדי שהפעולה תמיד תהיה קרובה לאגודל.
3
כל מה שיש בגרסת המחשב צריך להיות גם בנייד, רק מסודר אחרת. אל תסתירו טקסטים בטלפון כדי שייראה נקי, כי זה מה שגוגל קוראת. איך זה נראה באתר וורדפרס תמצאו במדריך בניית אתר בוורדפרס.
קחו את הטלפון, פתחו את האתר שלכם, ועברו על הרשימה:
המילה הפשוטה למעלה, והמונח שתשמעו מאנשי שיווק מתחתיה.
אתר שמסתדר לכל גודל מסך
אתר אחד שמסדר את עצמו מחדש לפי רוחב המסך: מחשב, טאבלט או טלפון.
גוגל בודקת קודם את הנייד
גוגל משתמשת בגרסת הנייד של האתר כדי לאנדקס ולדרג אותו.
מתכננים קודם לנייד
שיטת עבודה שבה מעצבים קודם את המסך הקטן, ורק אחר כך מרחיבים למחשב.
כפתור שנשאר בתחתית המסך
כפתור קבוע, למשל וואטסאפ, שנשאר גלוי גם כשגוללים.
גודל שנוח ללחוץ באצבע
השטח שמגיב ללחיצה. בערך 48 פיקסלים הם היעד המומלץ.
ההגדרה שאומרת לטלפון מה הרוחב
שורת קוד שאומרת לדפדפן להציג את הדף ברוחב המסך האמיתי.
מספר שמחייג בלחיצה
קישור טלפון שפותח את החייגן ישר מהאתר.
חלון שקופץ ומסתיר את הדף
חלון שנפתח מעל התוכן. בטלפון הוא מכסה כמעט את כל המסך, ולכן צריך שיהיה קל לסגור אותו.
אתר שנוח לקרוא ולהשתמש בו בטלפון, בלי להגדיל ובלי לגלול הצידה.
פותחים אותו בטלפון ובודקים: האם קוראים בלי להגדיל, אין גלילה הצידה, והכפתורים גדולים. אפשר גם להריץ אותו ב-PageSpeed Insights של גוגל, שמראה תוצאות לנייד.
כן. גוגל משתמשת בגרסת הנייד של האתר כדי לאנדקס ולדרג אותו, כך שגרסה חלשה בנייד פוגעת בכל האתר.
לא. גוגל ממליצה על עיצוב רספונסיבי: אתר אחד שמסתדר לכל מסך. זה פשוט יותר לבנות ולתחזק.
זה משתנה מעסק לעסק. בגוגל אנליטיקס אפשר לראות את החלוקה לפי סוג מכשיר, וכדאי להסתכל על המספר האמיתי שלכם.
כן. שלחו לנו את הכתובת ונעבור עליו יחד בטלפון. דוגמאות לאתרים שבנינו תמצאו בתיק העבודות.
באלי דיגיטל, בניית אתרים ושיווק דיגיטלי. שלחו לנו הודעה, ונחזור אליכם.
מה אנחנו עושים: בניית אתרים · דף נחיתה וקמפיין · מחירון