איך בונים אתר - שלב אחר שלב

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

אפיון מבנה האתר

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

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

סקיצה ראשונה

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

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

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

סבב תיקונים על הסקיצה

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

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

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

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

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

עמודי תוכן עיקריים באתר + התאמה לגרסת המובייל

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

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

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

בשלב הזה חשוב להקים יסודות נכונים בהקשר של קידום אורגני בגוגל (SEO) - הנה כמה דגשים בהיבט הזה שחשוב לתת עליהם את הדעת:

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

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

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

עמודי תבנית

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

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

האדר ופוטר

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

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

עמודים נלווים: עמודי קטגוריה, עמוד חיפוש, 404 ועוד.

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

כאן יכנסו כל העמודים החשובים מאחורי הקלעים:

1. עמודי קטגוריה-למוצרים או לפוסטים.

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

3. דף תודה

4. עמוד 404- עמוד שמעדכן כי התוכן באתר שלנו לא נמצא

5. עמוד להרשמה לרשימת תפוצה- אליו נפנה כשנרצה בתוך התוכן לעודד את הגולשים להירשם לרשימת תפוצה, כמו למשל פה.

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

עמוד 404 מאוד מוצלח של פיקסר שמשקף לגולש לאן הוא הגיע ומאפשר לו לגשת לעמוד אחר בתפריט או לרשתות החברתיות שלהם

סבב תיקונים

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

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

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

כאן בונה האתר והלקוח יבחנו יחד מספר נקודות חשובות:

1. האם העיצוב הסופי תואם את רוח העסק?

2. האם התוכן משתלב טוב באופן ויזואלי ובין עמודי האתר

3. האם גרסת המובייל מהירה ואפקטיבית עבור מטרות האתר?

4. האם האייקונים והכפתורים ברורים מספיק ומניעים לפעולה?

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

עמודי חנות, מוצר, קורסים ועוד

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

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

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

2. עמוד מוצר לביצוע רכישה.

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

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

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

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

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

סבב תיקונים אחרון וסגירות אחרונות

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

1. מעבר מדוקדק על הנוסחים ותיקוני שגיאות כתיב

2. בדיקת כפתורים, לינקים בין עמודים ומבנה הקישורים שלנו

3. בדיקה סופית של גרסת המובייל

4. אינטגרציה למערכות חיצוניות - פיקסלים, גוגל אנליטיקס וכה.

5. חיבור למערכת דיוור

6. בדיקת מהירות אתר

7. הסרה של עמודי סקיצה ודפים מיותרים מהאתר.

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

שיהיה לכם בהצלחה,

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