המגזיןכליםאודותקשרשירותים

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

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

שתי הערות לפני שמתחילים:

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

זהו, נתחיל:

שאל את עצמך מדוע אתה משדרג

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

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

אם אתה משדרג אתר, השתמש באלמנטים מוכרים

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

ייחד את עצמך

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

הצג מידע ברור אודותיך ואודות דרכי ההתקשרות

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

תן למבקרים סיבה לחזור

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

תן מידע בעל ערך כללי ומעשיר

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

הצע עדכונים באמצעות RSS

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

קל מאוד למצוא עזרים ללימוד מבנה ה-XML של תקן RSS 2.0. הנה אחד יעיל וברור (ועכשיו תוכלו להגיד גם שלמדתם משהו בהארוורד):
http://blogs.law.harvard.edu/tech/rss

ארגן את הקישורים הראשיים באופן יעיל

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

הצע דפים קשורים לקריאה

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

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

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

אל תסתיר קישורים

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

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

אפשר הדפסה קלה באמצעות CSS

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

פופולרית ככל שתהיה, השיטה הזאת עומדת לגווע, בדיוק כמו שדפי under construction הפכו למילה גסה (ובצדק). Cascading Style Sheets מאפשרים לנו (ולגולשים) להנות משני העולמות: גם עיצוב נפרד "ידידותי למדפסת" ללא פיתוח בצד השרת, וגם הדפסה אינטואיטיבית מתוך סרגל הכלים או התפריט של הדפדפן.

איך עושים את זה? מאוד פשוט:

1. במקום לכלול קישור לקובץ CSS אחד בלבד, כוללים שניים:
   
   
   <link href="general.css" type="text/css" rel="STYLESHEET">
   <link href="print.css" type="text/css" rel="STYLESHEET" media="print">
   שימו לב למאפיין media="print" בקישור השני.
   המשמעות היא שהחוקים בקובץ הראשון, general.css במקרה שלנו, יחולו גם על תצוגת המסך וגם על הדף המודפס, ואילו החוקים בקובץ השני, print.css, יחולו רק על הדף המודפס.
   
2. הקובץ print.css יהיה פשוט הרבה יותר מהקודם לו. החוקים שם הם רק תוספות או ביטולים של מה שנוסח כבר בחוקי הסגנון המקורי.
   
   למשל החוק:
   
   #menu { display: none; }
   יגרום לאלמנט בעל הזיהוי menu לא להופיע כלל בהדפסה. ואכן, תפריט הקישורים לא רלוונטי שם, וסתם תופס מקום על הדף, או דוחק את התוכן הצידה.
   
   החוק:
   
   #logo { background: white; border-bottom: 2px solid #000080; }
   יגרום לאלמנט ששמו logo להופיע בהדפסה ברקע לבן (ההנחה שלי כאן היא שעל המסך הלוגו הופיע על גבי רקע צבעוני), עם קו מפריד מתחתיו. כך נקבל אל הלוגו שלנו בראש הדף, בלי לבזבז צבע במדפסת, בלי לבזבז זמן הדפסה, ובעיצוב אלגנטי וקריא שמשתלב בדף כולו.
   
3. נסח חוקים כאלה עבור כל אלמנט שיש צורך לשנות את התצוגה שלו (או לבטל אותה) בגירסה המודפסת. אפשר לשנות צבעים, גדלי גופנים, מיקומים של אלמנטים, וגם להסתיר או להציג אלמנטים מסוימים בגירסת ההדפסה. בדוק כל דף שוב ושוב תוך כדי עריכת השינויים באמצעות "תצוגה מקדימה". לבסוף כדאי גם להדפיס דף מייצג כדי לוודא שאכן התוצאה יעילה ונעימה לעין.
   
4. מי שמתעקש יכול להוסיף בכל זאת קישור "הדפסה" בראש הדף, אבל מה שיסתתר מאחוריו יהיה קוד JavaScript פשוט של
   window.print(), שעושה בדיוק את מה שעושה הכפתור בסרגל הכלים.
   

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

אל תהרוג קישורים

נניח שהיה לחברה שלך רק מוצר אחד בשם bill. לא חשבת על העתיד, ואת דף המידע עליו מיקמת בכתובת mycompany.com/bill.asp. לימים החברה שלך משגשגת, ויש לך עוד מוצר - hillary. במקום ליצור עוד דף ברמה הראשית, אתה מחליט לעשות סדר ולפתוח ספריה בשם products, שם ישכנו דפי המוצרים. כלומר עכשיו הדף של bill הוא mycompany.com/products/bill.asp והדף של hillary הוא mycompany.com/products/hillary.asp.

מה הבעיה? הבעיה היא שהכתובת הקודמת של bill כבר רשומה במנועי חיפוש, ואולי אפילו שמורה אצל גולשים, או מצוטטת במאמרים ובאתרים אחרים על הרשת. מי שמגיע לכתובת הזאת יגלה שהדף אינו קיים (שגיאה 404). ירית לעצמך ברגל, והרגת את הקישור שלך.

הפתרון הוא פשוט: אחרי שינוי המבנה, החלף את הדף המקורי mycompany.com/bill.asp בדף ש"מקפיץ" אל הדף החדש (redirection). הדף הזה תמיד ישאר שם, והקישור לא ימות, למרות שהעברת את המידע למקום אחר.

אפשר לבצע redirection באחת משלוש הדרכים הבאות:

פקודה ברמת קוד השרת (Server-Side Script). למשל, בטכנולוגית PHP:

תג Meta של Html:

קוד JavaScript שיפעיל הדפדפן:

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

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

צור קיצורי דרך (כתובות קלות) לעמודים חשובים

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

הנה תרגיל להנאתכם: נסו לגלוש לכתובת של חבילת "אופיס" של מיקרוסופט בכתובת: http://www.microsoft.com/office. זה מה שהקלדתם בשורת הכתובת. אחרי שטעינת הדף הסתיימה, הסתכלו שוב על שורת הכתובת. אתר גדול מימדים כמו האתר של מיקרוסופט מחייב ארגון נכון ומפורט של ספריות וקבצים, אבל אין סיבה לוותר על קיצורי דרך אינטואיטיביים.

נסה לחשוב קדימה

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

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

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