צד המתכנת והמעצב: איך בנינו את אתר גיקטיים החדש? [מקרה מבחן]

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

geektime

צד המתכנת

מאת דניאל מסצ’יאני, מתכנת, צוות גיקטיים.

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

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

אופטימיזציה בסיסית

כדי לייעל את זמן טעינה חקרנו בעזרת מספר כלים את התקשורת בין הדפדפן לשרת. ה-Quick-Win הראשון שביצענו היה שימוש ב-jQuery Plugin קטנטן שכל תפקידו הוא להחזיר אילו אלמנטים של ה-DOM נמצאים ב-Viewport אצל המשתמש.

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

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

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

1. תוכן של כתבה בוורדפרס כתוב כולו ב-DB כקוד HTML, הבאה של אותו תוכן והכנסתו ל-DOM בדיעבד, גרמה בהתחלה לתגיות ה-HTML להכתב כ-string, בעיה זו נפתרה על ידי השימוש בפונקציה הוורדפרסית apply_filters:

apply_filters(‘the_content’, $content);

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

2. כברירת מחדל, בוורדפרס תמונות פנימיות בכתבה מצויירות עם תגיות a href כך שלחיצה עליהן תפתח את התמונה בעמוד נפרד. במובייל, הפונקציונליות הזו מיותרת אך לא רצינו לוותר עליה באתר ה-Desktop ולכן היינו צריכים לבצע שינוי בעזרת regex:

$pattern = array();
array_push( $pattern, ‘/<a(.*?)href=”(.*?).jpg”(.*?)>(.*?)<img(.*?)>(.*?)<\/a>/’ );
array_push( $pattern, ‘/<a(.*?)href=”(.*?).jpeg”(.*?)>(.*?)<img(.*?)>(.*?)<\/a>/’ );
array_push( $pattern, ‘/<a(.*?)href=”(.*?).gif”(.*?)>(.*?)<img(.*?)>(.*?)<\/a>/’ );
array_push( $pattern, ‘/<a(.*?)href=”(.*?).png”(.*?)>(.*?)<img(.*?)>(.*?)<\/a>/’ );
array_push( $pattern, ‘/<a(.*?)href=”(.*?).bmp”(.*?)>(.*?)<img(.*?)>(.*?)<\/a>/’ );
$result = preg_replace( $pattern, ‘$4<img$5>$6’, $content );

HTML5

רצינו לתת תחושה מעט שונה באופן שבו יש מספר כתבות בעמוד, מבלי לאבד את כל היתרונות המובנים של חלוקה לדפים באינטרנט כמו שיתוף לינק לכתבה (לכל עמוד יש כתובת URL משלו אותה ניתן לשתף), פונקציונליות ה-Back הבסיסית המחזירה את המשתמש לעמוד הקודם ועם זאת רצינו כאמור את האפשרות לדפדף בין כתבות מבלי לטעון כל עמוד מחדש. פה בא לעזרתנו HTML5 History API – השתמשנו בפונקציונליות הבסיסית שלו כדי ליהנות משני העולמות.

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

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

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

Disqus – מערכת התגובות החדשה באתר

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

להגבלות הללו הם סיפקו פתרונות מעניינים:

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

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

$( “#disqus_thread” ).empty();

ואיתחול האובייקט

DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = identifier;
this.page.url = url;
}
});

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

צד המעצב

מאת דוד לוריא, מעצב.

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

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

חוכמת הנסתר

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

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

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

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

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

מהדיגיטל בחזרה לפרינט

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

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

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

מעבר למובייל

המעבר למובייל היה אתגר חדש בפני עצמו.

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

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

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

Avatar

דניאל

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

הגב

9 תגובות על "צד המתכנת והמעצב: איך בנינו את אתר גיקטיים החדש? [מקרה מבחן]"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
דניאל
Guest

כל הכבוד

שלמה שוורץ
Guest

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

Shay Yaish
Guest

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

kisin
Guest

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

קובי
Guest

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

פסיידאלי
Guest

כדאי שתבדקו את העובדות לפני הפרסום… “גילינו למשל שגוון מסויים של אפור כהה נעים יותר לקריאה מאשר פונט שחור ומצאנו את הגוון הקריא ביותר.” – אבל כרגע אתם משתמשים בפונט שחור #000

טלי
Guest

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

רותם
Guest

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

ההוא
Guest

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

wpDiscuz

תגיות לכתבה: