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

מה זה אומר אתר רספונסיבי

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

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

 

מה המשמעויות מבחינת SEO

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

 

מה ההשפעות על חווית המשתמש

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

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

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

 

אז איך עושים את זה בפועל

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

אחרי שבדקנו ממבט שלנו ועוד לפני ביצוע הפעולות נבדוק יותר לעומק עם כלים לבדיקת רספונסיביות כמו האתר הזה – Multi Screen Resolution Test בו תוכלו לשים קישור של האתר שלכם ולראות כיצד נראה בכל המסכים כך תדעו היכן אתם לא תומכים ואיפה ישנן בעיות התאמה שצריך לסדר.

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

מדריך זה מתייחס לאתרים מבוססי וורדפרס

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

 

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

הדרך שלנו לפתור בעיות התאמה היא עם הוספת קוד CSS לקובץ ה style.css כדי לכפות על האלמנטים להיות מותאמים איך שאנו רוצים.

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

 

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