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

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

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

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

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

טכניקה 1: עומסים מיידיים עם מסכי שלד

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

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

ההזדמנות בדרך זו טמונה!

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

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

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

מה קורה? האם זה אפילו טוען? האם הקלתי עליו נכון?

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

צילום מסך של flipkart.com שהושק ממסך הבית במצב עצמאי באנדרואיד

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

app.jalantikus.com משתמש בתבנית מסכי השלד ועושה שימוש חוזר בכותרות ותמונות ממוזערות על פני מעברים

אתרי בדיקה עם מסכי שלד

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

המהירות האיטית ביותר הנתמכת בחיקוי רשת Chrome

טכניקה 2: "עומסים יציבים" בגדלים מוגדרים מראש באלמנטים

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

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

עומסים לא יציבים מקשים על אתרים לקיים אינטראקציה, וגורמים להם להרגיש ... טוב ... לא יציבים!

גלישה באתר לא יציב תמיד מזכירה לי איך אני מדמיינת שזה ירגיש להסתובב בזמן רעידת אדמה

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

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

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


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

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

מחבר את הכל

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

טעינת מאמר קונבנציונאלי

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

טוען מאמר בעיצוב אתרים תגובתי

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

מסיימים

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

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

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

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

אם יש לך מחשבות על זה, אנא ציוץ לי @owencm, ואם נהנית מזה אנא תן לזה ♥!

P.S. הקפד לבדוק את אתר ההדגמה reactive.surge.sh במכשיר נייד, למלוא תפארתו!