המאמר מדבר על הסטנדרטים שיש לקחת בחשבון כאשר רוצים לעצב אתר Web 2.0 ומרכז עצות שישפרו את חווית הגלישה
בעידן ה-Web 2.0 עצבו את אתרכם תוך שמירה על עקרון הפשטות, תכננו אותו כך שיהיה גמיש ונוח לשימוש בכל טווח הרזולוציות הנפוצות , רכזו את מעט המרכיבים החשובים, כך שהגולשים בכל רזולוציה יראו אותם בלי לגלועיצוב אתרים הוא אומנות מעשית. דף אינטרנט איננו פוסטר, או ציור תקרה של קתדרלה. לכל אתר יש מטרה ולכל דף בו יש תכלית. העיצוב נועד לסייע לגולשים לקלוט את המסר שבאתר.
כשמדברים על Web 2.0 מתכוונים בדרך כלל לשיתוף הגולשים בכתיבה ולהשפעה החברתית שיש לתופעה זו ואולם המונח רחב הרבה יותר ומשפיע על כל המעורבים בפיתוח האתרים, גם המעצבים.
עיצוב Web 2.0 יכול להיות מוגדר במילה אחת – פשטות. בדפי אינטרנט פשוטים, מונחית עין הגולש אל העיקר, תוך שימוש באלמנטים ויזואליים ספורים הנבחרים בקפידה. דפים אלה כוללים פחות מילים אך אומרים יותר.
הדרישה לפשטות נובעת מהסיבות הבאות:
- לאתרים יש מטרה ולכל הדפים באתר יש תכלית. תפקידו של המעצב הוא לסייע למשתמש למצוא את מה שהוא מחפש, או להבליט את המסר של האתר.
- תשומת הלב של המשתמש היא משאב מוגבל. ככל שיהיו יותר פריטים, כך תתפזר תשומת הלב, וקטן הסיכוי שהמשתמש ישים לב לדברים החשובים. אנחנו נדרשים למזער את הרעש שמסביב למסר, ולפיכך יש להעביר את המסר באמצעות מספר פריטים מצומצם ככל האפשר.
מירכוז הדפים
כיום, רוב האתרים מתמקדים במרכז חלון הדפדפן. אתרים מעטים דואגים לכך שהדפים יתאימו למסך מלא, או ייבנו בגודל קבוע, כפי שהיה נהוג עד לאחרונה. הסגנון של 2.0 הוא פשוט וישיר. אתרים היושבים בדיוק במרכז נקלטים מהר יותר. בנוסף, מכיוון שאנחנו ממילא חוסכים בפיקסלים ובתוכן, איננו 'לחוצים' לספק מידע רב ככל האפשר 'מעל הקיפול'. התוכן שלנו מרופד בשטחים לבנים ונאים, ואולם כפי שנראה בהמשך, האלמנטים החשובים חייבים להיות מעל הקיפול (הסבר על המושג בסוף המאמר).
מיעוט בטורים
גם המלצה זו נובעת מדרישת הפשטות. מכיוון שאיננו מנסים להציג כמה שיותר פריטים על המסך בזמן נתון, איננו נדרשים לטורי מידע רבים כל כך. מיעוט טורים יסייע לנו בהתאמת האתר לרזולוציות משתנות. יש למתוח את הטורים לרוחב באופן יחסי כך שהיחס ביניהם יישמר בכל רוחב מסך, החל מ-420 פיקסלים ועד 1,200 פיקסלים. שינוי זה אפשרי אם משתמשים בעיצוב באמצעות CSS.
אתרים פרופוציונאלים
התאימו את האתר לרזולוציה של 1024×768, אך בצעו עיצוב גמיש המותח את הדף בהתאם לרזולוציה שלו, החל מ-800×600 ועד 1280×1024 (ומעלה).
גודל הצגים משתנה ממשתמש למשתמש. השונות בגודלם של חלונות הדפדפנים גדולה אפילו יותר, משום שמשתמשים, במיוחד בעלי צגים גדולים, אינם ממלאים את כל המסך בחלון הדפדפן. לפיכך יש להימנע מתכנון סטטי של מסך שאינו משתנה בהתאם לרזולוצית המסך/גודל החלון. נכון לעכשיו, 60% מכל הצגים מאפשרים להציג רזולוציה מרבית של 1024×768 פיקסלים. לשם השוואה, רק 17% מהצגים הם בתצורה של 800×600, כך שפחות חשוב להתאים בדיוק לצגים הקטנים הללו.
להמלצה זו יש חריג אחד: כאשר מתכננים אתר פנימי (אינטרה-נט) לחברה שבה לכל העובדים יש צגים גדולים, מותר להתעלם מהמלצה זו ולבצע אופטימיזציה בהתאם לרוחב הצגים הנתון.
בכל מקרה יש לבצע את המבחנים הבאים:
- במהלך ביצוע האופטימיזציה יש להקטין ולהגדיל את חלון הדפדפן בטווח האמור, ולראות בכל גודל דפדפן, אם כל האלמנטים החשובים נמצאים "מעל הקיפול" (הסבר על המושג נמצא למטה).
- יש לבדוק האם ניתן לקרוא את הטקסטים בטורים השונים בהינתן רוחב מסוים.
-
יש לבחון האם הוא האתר אסתטי, כלומר האם המרכיבים השונים נמצאים בגודל המתאים ובמקום המתאים (למשל, יש להקפיד שהכיתוב יימצא בקרבת התמונות).
- כשמדברים על פרופורציונאליות יכול מאוד להיות שחווית השימושיות תשתנה (ואף תגדל) בין רזולוציות שונות מכיוון שכשהרזולוציה יותר גבוהה תהיה אפשרות להכניס יותר מידע ופריטים בדף הבית שלא יופיעו ברזולוציות נמוכות יותר.
בהזדמנות זו כדאי לחסל שני מיתוסים רווחים:
-
אין קשר בין גודל הצג לרזולוציה שבה המשתמשים רואים את התצוגה. לדוגמה, יש מחשבים ניידים שקוטר הצג שלהם הוא 15.4 אינטש, אך באחד הרזולוציה היא 1200X1920 ובאחר 900X1440.
- אין קשר בין גודלו של חלון הדפדפן לבין הרזולוציה המרבית הזמינה לצג. מחצית מגולשי האינטרנט בעולם גולשים בחלון שאינו מלא, ומגמה זו תתחזק. דפדפנים אינם יעילים מעבר לרוחב מסוים, ומשתמשים בעלי צגים רחבים יפתחו עליהם עוד חלונות ויעבדו במקביל.
מעל הקיפול
הוא מונח השאול מעולם העיתונות, והוא מציין את החשיבות למיקום מודעה (או כתבה) מעל או מתחת לקיפול הדף. בעולם האינטרנט הכוונה היא למידע שנראה בדף הראשון, בלי הצורך לגלול אותו מטה, מידע זה אינו חייב להיות טקסטואלי אלא גם יכול להיות החלק שיתן את האווירה שהאתר רוצה לשדר.
אודות המחבר
