HTML - המרכיב ה (לא כל כך) סודי בהצלחה

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

בניינים, HTML ומה שביניהם

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

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

קוד איכותי - מה זה אומר?

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

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

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

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

נגישות - כבר לא מילה גסה

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

אקספלורר זה לא מה שהיה פעם

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

מנועי חיפוש - אם אתה לא שם אתה לא קיים

כפי שהגדיר זאת ג'ייקוב נילסן, מנועי חיפוש משמשים כיום רבים מהגולשים כ"מנועי תשובה" (Answer Engines). התוצאות המוצגות לגולש בדף הראשון, ובעיקר בחלק העליון שלו, הן אלה שמתוכן הוא יבחר את הקישור עליו ילחץ.
מנועי החיפוש מבוססים על אלגוריתמים מסובכים ומתוחכמים, אבל הם עושים דבר פשוט. הם מנסים לחזות את מידת הרלבנטיות של אתרים ביחס למילות החיפוש שהזין הגולש. אתר הבנוי בקוד איכותי נותן למנוע החיפוש את מרב המידע אודות האתר, בצורה קלה וברורה ויגיע למיקום טוב יותר בדפי התוצאות של מנועי החיפוש (SERP - Search Engine Results Page). קוד איכותי קל יותר לפענוח עבור מנועי החיפוש, ולכן קל למנועי החיפוש להבין במה האתר עוסק ולקטלג אותו נכון יותר. בנוסף, קוד הבנוי לפי הסטנדרטים יכיל טקסט חלופי לכל אלמנט באתר. לכן יכולים מנועי החיפוש, הפועלים על סמך טקסט בלבד, לקטלג אותו בקלות מבלי לפספס מידע חשוב המוצג בפורמט לא-טקסטואלי (למשל תמונה של מוצר הדגל של החברה).

תחזוקת האתר - יותר מהר, יותר קל, יותר פשוט

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

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

סיכום

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

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