בניית דפים פנימיים

מבוא

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

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

חשוב להקפיד לא לשכפל את דף הבית (כי זה מעתיק את התיאור META SEO שלא מתאים לדפים הפנימיים).

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

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

עבודה על הדפים הפנימיים

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

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

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

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

הצבעים לאתר יכולים להיות הצבעים של המותג, עם שילוב של שחור (לפעמים), לבן, גרפיט (אפור כהה – #2c2c2c) ופנינה (אפור בהיר מאוד – #f5f5f5) – שמהווים צבעים ניטרליים שיכולים להשתלב בעיצוב.

סט הבסיס

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

הסט כולל:

  • 5 תמונות רקע מלא עם פייד לימין
  • 5 תמונות רקע מלא עם פייד לשמאל
  • 3 תמונות רקע מלא שקוף בהיר
  • 3 תמונות רקע מלא שקוף כהה
  • 5 תמונות רקע מלא (למעברים)

מבנים מומלצים לשימוש

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

להלן כמה מבנים נפוצים:

  • מבנה 1/2-1/2 (פיצול הרקע)
  • תמונה-טקסט, טקסט-תמונה
  • שיבוץ סרטון (ברוחב ה-GRID)
  • פס תמונות (רוחב מלא), כך 3-סט או 5-סט
  • טופס / קריאה לפעולה (CTA)
  • גלריית תמונות (רוחב מלא, או משבצות) – חשוב לפתוח גלריה לתמונות בגודל צפייה מלא (גובה של 1000 פיקסלים)
  • סט של משבצות עם גלילה למטה לאזורים בעמוד
  • סט של אייקונים (עם אופציה לגלילה למטה)
  • אייקון ולצידו טקסט (אפשר לחזור על המבנה הזה כמה פעמים)

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

שיבוץ טקסט

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

שימוש נכון בכותרות

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

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

טלפונים ואימיילים

את הטלפונים יש לפצל עם מקפים, כך 050-60-330-60 או 03-500-1020 לנוחות ההצגה, ולחבר קישור של טלפון עם tel: כדי שיהיה לחיץ לחיוג (בסלולר).

את האימיילים תמיד יש לחבר קישור עם mailto: כדי שיהיה מזוהה כאימייל לחיץ.

קישורים

קישורים לתוך האתר – תמיד ייפתחו באותו החלון. קישורים לאתרים חיצוניים – תמיד ייפתחו בחלון חדש.

שיבוץ תמונות

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

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

גודל התמונות יכול להיות רוחבי (גודל 800X600), רוחב גריד (1200X400), או לחלופין ריבועי (כך 600X600) או אפילו ארוך (כך 400X600 לדוגמא).

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

כיוונים נוספים והערות כלליות

אפשר לשלוף דברים מדף הבית עם וריאציה קטנה ולשלב בדפים הפנימיים.

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

אפשר לשבץ פרלקסים למעבר (תמונת פרלקס שמחברת בין 2 אזורים, ללא תוכן, רק מרווח Divider).

אפשר לשבץ תמונות מרחפות כאלמנט עיצובי לעמודים.

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

אתר מונגש

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

סייגי נגישות

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

רכיב נגישות

באתר זה הותקן רכיב נגישות מתקדם, מבית all internet - בניית אתרים. רכיב זה מסייע בהנגשת האתר עבור אנשים בעלי מוגבלויות.