כוננות ספיגה: כך תתאימו את האתר שלכם לשינוי בגוגל שנכנס לתוקף היום

עדכון האלגוריתם של גוגל שיכנס היום לתוקף יעניק עדיפות לאתרים שתומכים בצפייה במובייל. הנה מדריך קצר שיעזור לכם להתאים גם את האתר שלכם

shutterstock google

כפי שבטח כבר קראתם היום יחול שינוי דרמטי באלגוריתם החיפוש של גוגל שצפוי “לאיים” על אתרים רבים ולמעשה לתעדף אתרים המותאמים למובייל בצורה שעונה על הקריטריונים של גוגל.

תחום ההתאמה למובייל הוא תחום רחב, וכולל מספר לא מבוטל של גישות והשקפות עולם. כל מי שגלש לאתר פייסבוק דרך הסלולרי, ודאי שם לב שהכתובת אליה הופנה הינה m.facebook.com (עם זנב…). זהו למעשה אתר מותאם – אתר נפרד (ששואב את אותם תכנים), בעל כתובת שונה (התחילית m למעשה מפרידה בין אתר הסלולר לאתר פייסבוק הרגיל) שכולל התאמה נקודתית ונבנה מראש לסלולר.

באתרים רבים בארץ קופצת הודעה כשגולשים בסלולר שמציעה לבחור בין אפליקציה, לאתר רגיל או אתר מותאם למובילל. אתר מותאם כשמו כן הוא – אתר נפרד, שמותאם מראש לגלישה במובייל. מי שיש לו כבר אתר מותאם קיבל פטור והעדכון הקרוב לא ישפיע עליו.

גישה אחרת, והמועדפת עליי באופן אישי (ועל גוגל, אם נשפוט לפי דבריו של John Mueller, אחד ממהנדסי האלגוריתם של גוגל, שציין זאת במאמר מוסגר באחד מהכנסים המקצועיים האחרונים), היא גישת הרספונסיב, ועל כך נדבר. גישה זו בעצם אומרת שהגולש מקבל את אותו אתר בדיוק – להוציא שינויים ממשקיים נקודתיים – והאתר למעשה “מגיב” (responds) לתצורה של המשתמש.

היתרון המשמעותי כאן הוא שמדובר למעשה בהתאמה חד פעמית, סט של חוקים שמשפיע על האתר בשלמותו, וגורם לו “להתנהג נכון” עבור כל גודל מסך. הגולש מבקר את אותו אתר בדיוק, נחשף לאותם תכנים, אותו מנגנון כללי, אך הדברים “מוגשים” אליו בצורה המתאימה לפורמט בו האתר נצפה.

אז איך הופכים אתר לרספונסיבי? שמח ששאלתם.

Tools of the trade

מי שמתעתד להפוך אתר קיים (שאינו רספונסיבי) לאתר שייראה טוב על כל תצורה אפשרית, צריך לסמן וי על מספר סעיפים ותנאים מקדימים.

כלי העבודה הראשי בארגז הכלים של מפתח האתרים שמבצע התאמה כזאת הוא CSS. מדובר בשפת תכנות (וכאן הדקדקנים יחלקו עליי – כי לא מדובר בשפת תכנות לפי ההגדרה ה”מילונית”, אך אני בוחר להתייחס אליה ככזאת) המשלימה את ה-HTML ממנו בנויים כל עמודי האינטרנט. שפת ה-CSS קובעת ומגדירה איך דברים ייראו, ובמקרים מסויימים גם כיצד יתנהגו. אם נמשיל את הנושא לבניית בית, מדובר בצבע וגימור.

כמובן שנדרשת גישה מלאה לאתר – אל “מאחורי הקלעים”, כך שגישה המאפשרת לנהל תוכן אינה מספיקה. יש צורך לערוך את הקוד המהווה את הבסיס לאתר. אני אישית ממליץ גם על עורך טקסט מקצועי – ההעדפה האישית שלי הינה Notepad++, אך אנשים שונים ימצאו את הכלים המתאימים להם ביותר.

מעבר לכך – מומלץ לעבוד עם אמולטור. בכרום ניתן לגשת לכזה על ידי לחיצה על F12 במקלדת, לחיצה על Toggle device mode ולאחריו בחירת דגם וריענון המסך.

image04

image02

עבודה בצורה כזו מאפשרת צפייה באתר ב”לייב” וביצוע שינויים ישירות בעורך המצוי בצד ימין של המסך, כשהתוצאות מופיעות בזמן אמת. שימו לב שצריך לרענן לאחר הכניסה למצב זה. יש לנו את כל מה שאנחנו צריכים – עכשיו נראה איך עושים זאת.

בואו נדבר באחוזים

הפתרון הראשון לסוגייה הוא קל אבל נושא מספר חסרונות עימו.

הרעיון הוא – שכל המימדים באתר יוגדרו באחוזים. אחוזים הינם פתרון קל – שכן ניתן “לכפות” על האלמנטים השונים בעמוד מימדים (בעיקר רוחב) שהם מספרים שאינם קבועים. לדוגמא: קביעת הרוחב של האלמנט body ל-100% יגרום לכך שגוף האתר תמיד ימלא את מלוא הרוחב שמוקצה לו.

מכאן ניתן להמשיך ולקבוע לחלקי העמוד השונים, כתלות באתר המטופל, כיצד יתנהגו. הכותרת, למשל, יכולה להיקבע כתיבה שרוחבה 80% מרוחב המסך, ושתהיה ממורכזת. כך, לא משנה אם הגולש מבקר באתר דרך טלוויזיה חכמה או דרך הסמארטפון הקטן בשוק, 80% יהיו לנצח ארבע חמישיות מהרוחב הכללי, יהיה מה שיהיה.

זהו בעיניי האידאל. אתר שנבנה כולו בצורה כזאת, ייראה זהה על כל פלטפורמה. אחוזים ניתן להחיל כמעט על כל אלמנט, ורוב האלמנטים בקוד יגיבו היטב להגדרות אלו.

היכן מצויה הבעיה, אם כך?

ראשית, לא כל מבנה מתאים לגישה כזאת. עיצוב מדוייק מחייב עבודה מדוייקת – כך שגדלים מדוייקים (בפיקסלים) הינם כורח המציאות. מעבר לכך, גישה זו מחייבת עקביות: עבודה באחוזים הינה מחייבת, וכתיבת קוד הכולל גם מימדים תלויי-מסך וגם מימדים קבועים לא בהכרח יעבוד בצורה המצופה. לדוגמא: קבעתי שרוחב הכותרת הראשית הינו 200 פיקסלים, כדי למנוע קפיצות שורה בכותרות ארוכות. מצד שני, אני מעוניין להקצות 30% מרוחב המסך לכותרת.

הכל טוב ויפה כל עוד אותם 30% גדולים מ-200 פיקסלים. מה נעשה עבור מכשיר שרוחבו 360 פיקסלים? 30% מתוכם הם 108 פיקסלים, לכן הגודל הקבוע של הכותרת שלי יחרוג מהשטח המוקצה.

מעבר לכך, מה נעשה עם אלמנטים גרפים? נכון, קיימות שיטות ודרכים “למתוח” תמונה (לה, כמובן, יש גודל קבוע) למימדים משתנים, אך האם באמת נוכל לשלוט באופן מוחלט בכל תרחיש שהוא?

יש חלופה, פשוטה יותר במקצת.

למרבה המזל, CSS מאפשרת פתרון יעיל למצבים אלו, לא על ידי יצירת חוקיות יחידה, אלא דווקא על ידי יצירת טווחים.

על אף ריבוי המכשירים והרזולוציות, לשם נוחות והיתכנות העבודה, הוחלט אמפירית על טווחים של רוחבי מסך אפשריים, באמצעות פקודת CSS הנקראת media query.

פקודה זו למעשה “שואלת” את הדפדפן דברים, ומכילה הוראות רלוונטיות לפי התשובה. למשל, שימוש נכון בפקודה יוכל לזהות אם עמוד האינטרנט נצפה בדפדפן רגיל או שמא מדובר במצב הדפסה, או אולי אפילו מקריא מסך (כזה שנמצא בשימוש אצל כבדי ראייה, למשל). מעבר לכך, ניתן לזהות יחס גדלים (4:3 או 16:9), עומק צבע, מימדי תצוגה, אוריינטציה (רוחבית או אורכית) ועוד. לשם הפשטות, נתמקד אך ורק בשאילתא המבררת את מימדי המסך המירביים.

נתבונן בדוגמא הבאה:

@media screen and (min-width: 992px) {…}

כאן למשל, בחרנו לפנות לכל מדיה מסוג ‘מסך’ (דהיינו, כל מכשיר בעל מסך), שרוחב התצוגה המינימלי הינו 992 פיקסלים. הנקודות בין הסוגריים המסולסלים יוחלפו בהוראות וקוד CSS ממשי שמגדיר כיצד כל פריט שמעניין אותנו – יתנהג. כעת אנו יכולים להגדיר כי מסכים ביתיים רגילים (שרוחבם עולה לרוב על 992 פיקסלים) יקבלו סט אחד של הוראות, אך מכשירים בעלי רוחב מסך נמוך מכך (החל מ-992) יקבלו סט הוראות שונה. כך נוכל להגדיר, למשל, כי הכותרת תהא ברוחב קבוע ומוגדר של 700 פיקסלים, דבר המקל על עבודת העיצוב.

מנקודה זו, נמשיך לכתוב media queries לפי תרחישים נפוצים. המיפוי האמפירי של bootstrap מדבר על המדרגות הללו:

@media screen and (min-width: 992px) {…}
@media screen and (min-width: 768px) {…}
@media screen and (min-width: 480px) {…}
@media screen and (min-width: 320px) {…}

נכון – לא כל רזולוציה זוכה למענה, אך מדובר בפתרון קל יחסית ליישום (דורש מעט עבודת ניסוי וטעייה מול מצב ה-F12 שהוצג מוקדם יותר) ותואם יחסית.

הערה חשובה: סדר הביצוע ב-CSS הולך מלמעלה למטה. לכן, הדוגמא שהוצגה כאן מתייחסת להתאמת אתר קיים לגדלי מסך קטנים והולכים. במידה והאתר נבנה בגישת Mobile-first (גרסת המובייל מפותחת קודם, השאר נגזר ממנה), סדר הפריטים מתהפך ולמעשה אנחנו בונים חוקים להגדלה ולא להקטנה.

אמנם לא מדובר ברעיון מושלם, אבל עבור מרבית אתרי האינטרנט, מדובר בפתרון עלות/תועלת אידאלי, המאפשר גם שימוש בגדלים קבועים (דבר המקנה חופש עיצובי) וגם לפנות לכל רוחב מסך באשר הוא. כמובן שניתן להוסיף או לוותר על queries במידת הצורך.

ממה להתחיל?

מתכנת הניגש למלאכת ההתאמה עשוי למצוא את עצמו מתבלבל בהתחלה, רק מהיקף הקוד. כאן אמליץ ללכת בצורה היררכית, מהכללי לפרטי, בלי קשר לגישה בה בוחרים. המשמעות היא: הגדירו כלל ראשוני לתגית body, המכילה את כל תוכן האתר, וראו מה קורה. ייתכן כי דברים יסתדרו למקומותיהם גם ללא התייחסות פרטנית, ואם לא – פשוט נמשיך להיררכיה הבאה.

קוד HTML מוצג כמעט בכל debugger עם הזחה המציגה היררכיה.

image05

כאן ניתן לראות חלק מהשלד הכללי של האתר בו אתם צופים ברגע זה ממש. האלמנט הנראה ה”גבוה” ביותר הינו body. לאחר שאלמנט זה קיבל את החוקים החלים עליו, נפנה לאלמנט המוצג הבא – div בעל ה-class ששמו wrapper. בתוכו נמצא את ה-header של האתר, שכפי שניתן ללמוד בקלות משמות ה-classes, מכיל לוגו, תיבת חיפוש, תיבת התחברות והרשמה. כל פריט בקוד שאינו “מתנהג” כראוי, נמשיך ללחוץ על החצים עד שנגיע להיררכיה בה לשינויים שלנו יש השפעה נראית לעין. התוצאה הסופית, כמובן, תהיה סט של חוקים עבור אלמנטים חשובים, שתגדיר את הנראות של כל אחד מהם בתרחישי רזולוציה שונים.

עשה ואל תעשה – best practices

באופן ריאלי למדי, אין שני אתרים זהים, וגם אם באתר אחד תהליך זה יקח שעה, באחר הדבר יכול לקחת ימים. ניסיתי לגבש מספר טיפים מנסיוני האישי, הרלוונטיים ספציפית להתאמה למובייל:

  • בדקו נכסים קיימים – באתרים רבים קיימת הכנה או תשתית, שאינם באים לידי ביטוי עקב שינויים כאלו ואחרים. חפשו בקבצי ה-CSS שאילתות קיימות, חפשו קריאות לקבצי bootstrap או אפילו קבצי ג’אווהסקריפט בעלי שמות שיכולים לרמז על יכולת התאמה. ייתכן כי קינפוג פשוט יכול לחסוך עבודה רבה.
  • בדקו כי דבר אינו נחסם. המנגנון של גוגל לבדיקת ידידותיות למובייל מושפע ממניעת גישה דרך robots.txt או htaccess. ודאו כי נכסי האתר זמינים לסריקה וכלי מנהלי האתרים של גוגל אינו מציג שגיאות הקשורות לכך.
  • עבדו ב-debugger, ואז העבירו את השינויים לאתר (פלטפורמות רבות מאפשרות הוספת קוד CSS לאתר), ובתום העבודה העבירו את כל התוכן לקובץ – כך שיוכל להישמר בזיכרון המטמון.
  • במידת האפשר: הטמיעו תשתית טובה יותר. bootstrap ניתנה כדוגמא מספר פעמים, מדובר בתשתית המאפשרת הרבה יותר מהתאמה למובייל, לכן ייתכן שהשקעה חד פעמית תניב פרי לאורך תקופה.
  • משתמשי כרום ואנדרואיד יכולים לבצע debugging ישירות על מכשירם, דרך הדפדפן. להסבר של גוגל.
  • חשבו על הצרכים של המשתמש הסלולרי. ייתכן כי תרצו לשקול הסתרה של תוכן כזה או אחר, במידה ואינו מציג תועלת ממשית לגולש. העמוד בו הינכם צופים כעת, במובייל, אינו יציג את הכתבות הנצפות ביותר או את לוח האירועים, והתפריט הראשי משנה את צורתו ומצטמצם משמעותית. שטח המסך המצומצם הינו סיבה נפלאה לשקול מה כדאי להציג ועל מה לוותר. סביר להניח כי הסליידר השיווקי המרהיב בראש האתר הרגיל לא מהווה את המענה הכי טוב לגולש שנמצא ברחוב.
  • היעזרו בנתוני אנליטיקס. ייתכן כי תגלו שקהל היעד שלכם מורכב ממשתמשי טאבלטים, או שרזולוציות המסך של גולשיכם שונים מאלו שהצגתי למעלה.
  • בדקו גם ב-debugger, גם במכשירים ניידים ככל שידכם משגת, וגם בכלי של גוגל. לא פעם מצאתי פערים בלתי צפויים.
  • למתקדמים: נצלו את ההזדמנות והאיצו את האתר. אם כבר מבצעים שינויים באתר, בדקו כיצד ניתן להאיצו: הפעילו gzip וקאשינג, כווצו תמונות, אחדו אלמנטים גראפיים ל-sprites, השתמשו ב-CDN, צמצמו קריאות שרת פנימיות וחיצוניות, היפטרו מקודים מיותרים, הגדירו expiry headers, בצעו minification וכל דבר אחר שיכול לעזור. התאמה למובייל אינה רק ויזואלית, אלא גם חווייתית.

Bloomua / Shutterstock.com

פשה קגן

מקדם אתרים ביום, חובב גאדג'טים וסלולרים בלילה. פשה חובב כל דבר טכנולוגי - ואם אפשר, אז שיהיה נייד ושיהיה חכם.

הגב

8 תגובות על "כוננות ספיגה: כך תתאימו את האתר שלכם לשינוי בגוגל שנכנס לתוקף היום"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
avi
Guest

בקיצור, תתחילו לעבוד על פי התקן ולא “לחפף”

Pasha Kagan
Guest

לצערנו אין תקן אחיד…

asd
Guest

במילה אחת – bootstrap.

השתמשו בזה כשאתם בונים את האתר והחיים שלהם יהיו הרבה יותר פשוטים.

Pasha Kagan
Guest

טוב, הזכרתי את המילה הזאת לא פעם.
אבל להציע להשתמש בזה מראש זאת לא בדיוק העצה המתאימה פה, זה מיועד למי שלא עשה זאת מראש.

ישראלי
Guest

כתבה מעולה! תודה רבה, נהניתי לקרוא

Pasha Kagan
Guest

תודה רבה :)

Idan Abarbanel
Guest

לא חייבים אחוזים, ניתן להשתמש באחוזי גודל מסך אבסולוטיים הנקראים viewport units ומסומנים ב-vh לגובה וב-vw לרוחב, ברוכים הבאים לעיצוב אדפטיבי.

Pasha Kagan
Guest

זה כבר למתקדמים יותר – מעריך שמי שיודע להשתמש בזה, פחות צריך את ההסבר :)

wpDiscuz

תגיות לכתבה: