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

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

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

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

בואו נראה דוגמא מהאתר שלי:

עמוד הבית שלי לפי דסקטופ

אתר רספונסיבי דסקטופ

עמוד הבית שלי לפי מובייל

אתר רספונסיבי מובייל

מה כדאי לדעת על אתר רספונסיבי?

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

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

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

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

תמונה נחתכת באמצע

תמונות חתוכות או באיכות גרועה

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

פרופורציות כתב בעיתיות

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

גודל כתב לא רספונסיבי
שוליים שיוצרים גלילה

אזורים ש"יוצאים מהמסך"

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

פוטר והדר לא מותאמים למובייל

הדר ופוטר בעייתים

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

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

אתר עורכי דין מותאם למובייל
אתר ספורט רספונסיבי

לפוסטים נוספים:

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

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

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

קרא עוד »
נטוורקינג

נטוורקינג

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

קרא עוד »

בנייה וקידום אתרים - למה איתי?

בנייה וקידום אתרים אורגני