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



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

 

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

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

הבלטת העמודים החשובים ביותר

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

תכנון המערך של האתר בעדיפות ראשונה

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

 

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

תמונות

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

טיפול מיוחד בטפסים

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

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

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

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

פונטים

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

הסרת אלמנטים לא נחוצים

בניית אתר רספונסיבי לא חייבת להיות זהה לחלוטין לאתר הרגיל: ניתן להוריד אלמנטים מסוימים מהגרסה הרספונסיבית מתחת לרזולוציה מסוימת או להחליף אותם באלמנטים אחרים. לדוגמה –

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

כלים לבדיקת אתרים רספונסיבים

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

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


 
 
x
pikud horef
פיקוד העורף התרעה במרחב אשדוד 271, אשדוד 271, אשדוד 271
פיקוד העורף מזכיר: יש לחכות 10 דקות במרחב המוגן לפני שיוצאים החוצה