בניית אתרים רספונסיביים: כך עושים את זה היום, כך עושים את זה נכון

בניית אתרים רספונסיביים

אמנם בניית אתרים רספונסיביים נראית לנו היום כמו משהו שהוא מובן מאליו, אך זה ממש לא היה תמיד כך…

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

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

מה קרה?

מוביילגדון!

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

מה השתנה? ולמה האתרים הידרדרו?

עדכון אלגוריתם חדש של גוגל.

אם לומר את האמת כבר בתחילת פברואר 2015 גוגל החלה לשלוח רמזים שעדכון אלגוריתם חדש ומשמעותי עומד לצאת. אבל רבים מבעלי האתרים לא היו ערוכים לכך ולא ידעו מה יהיה בעדכון.

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

מה עמד מאחורי דרישת גוגל לעבור לבניית אתרים רספונסיביים?

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

למה אני מתכוון?

אסביר.

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

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

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

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

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

בואו נבין לעומק מה זה בעצם בניית אתרים רספונסיביים

רספונס (Response) באנגלית משמעו=תגובה או הענות. בניית אתרים רספונסיביים פירושה –  בניית אתרים המגיבים היטב בכל המכשירים, בכל הטכנולוגיות (טכנולוגיית מגע, למשל) ובכל הרזולוציות.

איך הופכים אתרים "רגילים" לאתרים לרספונסיביים?

ראשית, חשוב לבדוק אם אתר האינטרנט שלכם כבר רספונסיבי. תוכלו לבדוק את זה בבדיקת הידידותיות שמציעה גוגל, כאן: https://search.google.com/test/mobile-friendly. פשוט הכניסו את כתובת העמוד אותו אתם רוצים לבדוק והמתינו לתוצאות הניתוח.

מומלץ לפתוח את הדוח ולראות האם צריך לשפר אלמנטים בכל עמוד.

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

טיפים שימושיים לבניית אתרים רספונסיביים

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

מתאים לי: תצוגת פורטרט ותצוגת נוף באתרים רספונסיביים

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

תנו לאצבעות ללכת במקומכם: על כפתורים וקישורים באתרים רספונסיביים

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

עניין של פריסה: מכשירים שונים דורשים פריסות שונות של תצוגת האתר

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

שובר שורות: תוכן בבניית אתרים רספונסיביים

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

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

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

Picture this: תמונות וויז'ואל באתרים רספונסיביים

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

לניווט קל ונוח באתר השתמשו ב-Heather דביק

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

Swiping & Scrolling – גלילת אתר והחלקה

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

לסיכום

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