מאמר זה נכתב על-ידי עמית מורנו ב-23 במרץ 2017

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


לפטופ ומחברת

אפיון אתר מפורט

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

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

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

עיצוב אתר

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

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

פיתוח יעיל

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

  • יש לשים לב שכותרות מגיעות ממוספרות (h1, h2, h3, h4, h5, h6), יש לשמור שבכל עמוד תהיה תמיד כותרת h1 ראשית אחת, ויתר הכותרות תחתיה יסודרו בסדר היררכי.
  • מומלץ לבדוק את תצוגת האתר במספר רזולוציות פופולריות, לפחות על שני מסכי מחשב שונים, ועל ניידים עם מערכות הפעלה אנדרואיד ואייפון.
  • מומלץ לדאוג שבכל עמוד יהיו תגי מטא תקינים המעבירים את המידע הנכון למנועי החיפוש ולרשתות החברתיות.
  • מומלץ לדאוג לכותרת תחתונה באתר, שבה יופיעו קישורים לעמודים ראשיים באתר. לעתים מומלץ אף להעשיר ולהוסיף גם קישורים למאמרים, מוצרי, המלצות ותכנים דומים.
  • מומלץ מאוד להשתמש בתפריטי breadcrumbs, תפריט זה מופיע בד״כ מתחת לכותרות הראשיות בעמודי האתר ומציג לגולש את המיקום ההיררכי של העמוד בו הוא נמצא ביחס לעמוד הראשי. לדוגמה: ראשי > חנות > בגדי ילדים > נעליים.
  • בשונה מדפוס, באתר אינטרנט יש לא רק צד ויזואלי אלא גם צד פונקציונלי. לכן כשבונים אתר אינטרנט חשוב לזכור שסידור הרכיבים על גבי העמוד צריך להתבצע בהתאם לכיוון הקריאה של שפת האתר. אם אנחנו בונים אתר אינטרנט בעברית, אנו נמקם תמיד את הרכיבים שלנו מימין לשמאל, ואילו אם אנחנו בונים אתר באנגלית אנו נמקם את הרכיבים משמאל לימין.

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