טיפים להתאמת תכנים באתר החדש - 2017

הקדמה

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

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

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

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

מה חדש?

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

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

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

גוגל אנליטיקס - נוספה אפשרות להטמעת קוד Google Analitics המאפשר לנתח התנהגות גולשים באתר

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

לוח בקרה חדש - ממשק הניהול הוסב אף הוא לממשק מודרני וידידותי יותר.

מה בהמשך?

הדומיין של האתר - כרגע הדומיין של האתר יפנה מבקרים לאתר הישן. זאת כדי לאפשר לכם שהות לבדוק את האתר בפלטפורמה החדשה ולבצע התאמות נדרשות בתוכן. כאשר תרגישו מוכנים לכך, תוכלו לבקש להפנות את הדומיין באופן קבוע לאתר החדש (סמסו ל 050-8715129 או כתבו ל hebpsy.marketing@gmail.com )

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

פורומים - אם יש לכם פורום באתר, תגלו שהוא לא הוסב. הסבת מערכת הפורומים ב'פסיכולוגיה עברית' מתוכננת לשלב מאוחר יותר השנה.

הנחיות להכנסת תכנים

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

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

סרגל הכלים

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

נדגיש בהמשך מספר כלים חשובים שמומלץ להשתמש בהם

הצגת בלוקים

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

מסך עריכה ללא 'הצגת בלוקים':

מסך עריכה כאשר מצב 'הצגת בלוקים' פעיל:

תגיות סמנטיות

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

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

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

תגיות סמנטיות נפוצות הן תגיות לסימון:

1. כותרות וכותרות משנה היררכיות - כותרת, כותרת 2, כותרת 3... (H1, H2, H3,H4...)
2. פסקאות (P) - זו ברירת המחדל
3. בלוק ציטוט - כדי ליצור במסמך בלוק ציטוט, סמנו את הטקסט ולחצו בסרגל הכלים על כפתור 'בלוק ציטוט'
4. רשימה ממוספרת ורשימת תבליטים - השתמשו בכלים המובנים בסרגל הכלים ליצירת רשימות ממוספרות או רשימות תבליטים (ולא במספור על ידי הקלדה ידנית או סימון כוכביות בתחילת כל שורה)

הדבקת טקסט (הדבק כטקסט פשוט)

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

הסרת עיצוב

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

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

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

רוחב באחוזים

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

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

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

כמובן שניתן להגדיר את הרוחב כ 50% או 30% לפי הצורך.

המנעו מטבלאות

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

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

תמונות

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

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

קישורים

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

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

מיותר לציין שהצגת קישור ככתובת (למשל: http://www.nagish.org.il/?page_id=169 ) היא לא נגישה.

התאמת תכנים מהאתר הישן

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

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

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

ניסוי וטעיה

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

1. היכנסו ללוח הבקרה של האתר 
2. היכנסו דרך התפריט בלוח הבקרה למסך הדפים
3. העבירו את כל הדפים למצב 'מוסתר'

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

גיבוי

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

1. היכנסו לעריכת הדף
2. העתיקו את כל תוכנו
3. צרו דף חדש לגיבוי (תוכלו לתת לו כותרת 'גיבוי'), הדביקו בו את התוכן שהועתק ושמרו

רק אז גשו לעריכה והתאמת הדף המשובש

עריכה והתאמת דף קיים

עבור כל דף (או מאמר) שדורש התאמה היכנסו למסך העריכה שלו.

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

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

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

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

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

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

עוד שיפורים והתאמות

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

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

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

התאמת מאמרים

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

קריאה נוספת

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

נציבות שוויון זכויות לאנשים עם מוגבלות - הנגשת אתרי אינטרנט

אתר נגיש – תבונה עסקית ומחויבות חברתית

דרישות מינימום להבטחת נגישות