בסיס חזק
בסיס יציב הוא הדרישה הבסיסית ליצירת אפליקציות PWA מעולות. כדי להטמיע את הבסיס הזה, צריך לתכנן ולכתוב קוד בהתאם למגבלות האינטרנט לפי כמה עקרונות:
- השתמשו בנייד כאילוץ של התמקדות. חשוב לוודא שכל תצוגה של העיצוב מתמקדת רק בתוכן ובאינטראקציות החיוניים.
- להדגיש את התוכן והפונקציונליות העיקרית בתהליך העיצוב.
- לשפר בהדרגה לפי הצורך. כדי להתחיל, כדאי ליצור את התוכן והפונקציונליות של הליבה של הרכיב באמצעות הכלים הפשוטים ביותר והזמינים ביותר. להפוך אותו לנגיש. לאחר מכן, בודקים את התכונות המתקדמות שרוצים להשתמש בהן ומשתמשים בהן כדי לשפר את הרכיב.
- מציעים חוויית משתמש מהירה וטובה שמתמקדת במדדי ביצועים באינטרנט שמתמקדים במשתמשים, מקבלים מדדים של משתמשים אמיתיים ומקדמים את הביצועים של כל המשתמשים, ללא קשר לחיבור שלהם לרשת, לסוג הקלט, למעבד (CPU) או למעבד הגרפי (GPU).
אם תפעלו לפי העקרונות האלה ותוסיפו תבניות ותכונות אינטרנט מודרניות, תוכלו ליצור חוויות מהירות ומהנות עם עיצובים אותנטיים. עיצובים שמבוססים על אילוצים במקום על פיקסלים, שמאפשרים לכל משתמש לגשת לתוכן ולפונקציונליות המרכזית שלכם באופן שמתאים בצורה הטובה ביותר להקשר הגלישה הספציפי שלו.
עיצוב אינטרנט מותאם
מאז שכתב את איתן מרקוט (Ethan Marcotte) משנת 2010, המאמר A List Apart, עיצוב אינטרנט רספונסיבי, אנחנו מעודדים מפתחים ומפתחים ליצור חוויות שמתאימות לגמישות, וכך יוצרות ממשקי משתמש שפועלים במגוון גדלים של מסכים ומכשירים.
עם זאת, בשלב מסוים החלו להשתמש בגדלים קצרים יותר: נייד, טאבלט ומחשב, ורוחבים שהושפענו מאוד מגדלי המסכים של iOS. בעזרת CSS מודרני ומיקוד מחודש בכוונה המקורית של עיצוב רספונסיבי, אנחנו יכולים להחזיר את הגמישות לאתרים גמישים.
עיצוב אינטרנט רספונסיבי כולל שלושה מרכיבים טכניים:
- רשתות נוזליות
- מדיה גמישה
- שאילתות מדיה
איתן מסכם שהדרישות הטכניות האלה לא מספיקות, ושצריך גם חשיבה שונה כדי להתקדם.
האגדה על משתמשי המובייל
בימים הראשונים של המדיניות בנושא עיצוב רספונסיבי, ההנחות האלה נועדו להקל על עיצוב אתרים. לדוגמה, חוויית משתמש קטנה הייתה מיועדת לטלפונים, והרוחב שלה היה 320 פיקסלים, חוויית משתמש בגודל בינוני הייתה מיועדת לטאבלטים, והרוחב שלה היה 1,024 פיקסלים, וכל דבר גדול יותר היה מיועד למחשבים. למסכים קטנים היו יכולות מגע, למסכים גדולים לא הייתה אפשרות במגע. משתמשי הטלפון היו ממהר ומוסחים, ולכן נזקקו לחוויה 'קלה'.
אף אחת מהאפשרויות האלה לא נכונה. הם מיתוסים לגבי מכשירים ניידים, ומבוססים על ההנחה שצורכי המשתמש שונים במהותם על סמך גודל המסך או סוג המכשיר. הטענה הזו לא עומדת במבחן הביקורת.
לדוגמה, אפליקציית PWA של רשת חברתית שאפשר להתקין כבר היום בנייד ובמחשב. במחשב, משתמשים רבים יכולים לשמור על חלון צר עם הפיד בצד אחד של המסך בזמן העבודה, ולכן לא נכון להניח שהם משתמשים במכשיר נייד בגלל הרוחב הזמין.
עולם ה-PWA, שנמצא מחוץ לכרטיסיית הדפדפן, מוסיף אתגרים חדשים לעולם עיצוב רספונסיבי, כמו המיני-מצב ועבודה עם מכשירים מתקפלים.
מיני-מצב
כשאפליקציית PWA מותקנת במחשב, החלון יכול להיות קטן מאוד – קטן יותר מחלון הדפדפן וקטן יותר מאזור התצוגה בנייד. זה משהו חדש באינטרנט: אנחנו יכולים לתמוך במיני-מצב, חלון שיכול להיות קטן עד 200x100 פיקסלים של CSS.
כיום, כשאתם יוצרים אפליקציה ל-PWA, כדאי לחשוב על מה להציע במצב מיני, בזכות עיצוב אינטרנט רספונסיבי. למשל, רק לחצני בקרה בנגן מוזיקה, מידע בלוח הבקרה או פעולות מהירות.
במחשב, אפשר לעבד אפליקציית PWA בחלון קטן יותר מהחלון הקטן ביותר שעיצבתם לדפדפן. הוא מוסיף נקודת עצירה חדשה לעיצוב האתר הרספונסיבי: מצב מיני.
מכשירים מתקפלים ומכשירים היברידיים
מכשירים מתקפלים ומכשירים היברידיים נפוצים גם הם בימינו:
- טלפונים קטנים עם צורה של צדפה.
- מכשירים מתקפלים שיכולים לשמש כטלפונים או כטאבלטים.
- מחשבים ניידים שניתן להפוך לטאבלטים.
- טאבלטים שיכולים לשמש כמחשבים ניידים עם מקלדת ומשטח מגע.
- לאחר מכן, אפשר להמיר את הטלפונים למחשבים באמצעות רכז (hub).
האתגר הזה קיים בכל אתר, אבל כשמשתמשים ב-Progressive Web App, אתם שולטים בחלון שבו מתבצעת ההתקנה ואתם אחראים עליו. לכן העיצוב צריך להגיב ולהציע את החוויה הטובה ביותר בכל הקשר.
הכל קודם
אבל איפה כדאי להתחיל? קודם צריך לנייד, קודם תוכן, ואחר כך אופליין? כשמדובר בעיצוב הגמישות של האינטרנט, מה זה? התשובה היא כן, הכול קודם. המונח נייד תחילה פורש בדרכים רבות מאז ש-Luke Wroblewski טבע אותו לראשונה בשנת 2009: החל מהדמיה של דפוסי ממשק משתמש וחוויית משתמש ספציפיים לפלטפורמה באינטרנט, דרך פיתוח אפליקציות לנייד לפני פיתוח אפליקציות לאינטרנט, ועד לשימוש בשאילתות מדיה עם רוחב מינימלי וזהו. עם זאת, הכוונה המקורית שלו היא: הנייד מאלץ אתכם להתמקד. כפי שאמר Luke:
במכשירים ניידים, צוותי פיתוח תוכנה צריכים להתמקד רק בנתונים ובפעולות החשובים ביותר באפליקציה. פשוט אין מקום במסך של 320 על 480 פיקסלים לאלמנטים מיותרים ומיותרים. צריך לתת עדיפות. לכן, כשצוות מתכנן לפי הגישה 'נייד קודם', התוצאה היא חוויה שמתמקדת במשימות העיקריות שהמשתמשים רוצים לבצע, בלי עיקולים וממשק עמוס בפרטים שמוצגים באתרים הנגישים כיום במחשב. כך אפשר לספק חוויית משתמש טובה ולשפר את העסק.
Luke Wroblewski
כדאי להתמקד בכל תצוגה של האתר רק במשימות החיוניות שהמשתמשים רוצים לבצע שם, ולא להוסיף עוד דברים לרעיון רק כי יש להם יותר שטח במסך.
העיקרון השני מופיע ברמז בעיצוב אינטרנט רספונסיבי: "הדרגתיות של חוויות שונות". המטרה שלכם לא צריכה להיות לספק חוויה זהה לכל משתמש, בלי שום שגיאה ברמת הפיקסלים. זה כמעט בלתי אפשרי.
במקום להתייחס לחוויות שלכם באינטרנט כאירוע קבוע, אפשר להתייחס אליהן כמערך של המלצות שבהן המכשיר של המשתמש ישתמש כדי ליצור את החוויה הטובה ביותר בהקשר הנוכחי. כדי לעשות זאת, צריך להשתמש בשיפור הדרגתי.
שיפור הדרגתי
שיפור הדרגתי הוא תבנית שמאפשרת לנו לכתוב קוד שפועל בכל מקום, החל מ-HTML, CSS ו-JavaScript רגילים, ולהוסיף שכבות של יכולות עליהן עם חלופות מתאימות כשממשק API לא זמין.
איך משפרים את התמונות? זיהוי תכונות הוא דפוס שבו אתם מבצעים בדיקת תמיכה ומגיבים על סמך תוצאות הבדיקה. יש כמה כלים ושיטות מובנים בפלטפורמת האינטרנט שאפשר להשתמש בהם כדי לעשות זאת.
באמצעות @supports, אפשר לבדוק אם הדפדפן תומך בתכונה של CSS ולהחיל כללים על סמך התוצאה.
האפשרות הזו רלוונטית גם לנכסי CSS וגם לערכים של CSS. אם נכס מסוים נתמך וערך אחר לא, הוא ייכשל וכך גם מאפיין שלא נתמך. קוד JavaScript יכול לגשת לזה דרך CSSSupportsRule.
רוב התכונות החדשות בפלטפורמת האינטרנט מצורפות לאובייקטים קיימים, כך ש'feature' בזיהוי סגנון האובייקט פועל היטב ב-JavaScript, וכך גם חיפושים דומים אחרים, כמו בדיקה של מאפיינים או שיטות ברכיבים.
כדי לשלוח JavaScript מודרני, אפשר להשתמש בתבנית module/nomodule כדי לספק תכונות מתקדמות יותר עם מטען ייעודי (payload) קטן יותר לדפדפנים מודרניים יותר וחוויה חלופית לדפדפנים ישנים יותר. היתרון הוא שתהיה לכם תכונה בסיסית חדשה של תכונות JavaScript, כמו הבטחות (promises), כיתות, פונקציות חץ ו-const ו-let, שזמינות בדפדפנים שתומכים ב-ES Modules.
אפשר אפילו לשלב מספר צורות של זיהוי תכונות כדי ליצור את ערך הבסיס המשופר. הצוות של BBC News טבע את המונח 'להיות הכי טובים', והוא מאפשר לכם לשלוח חוויית משתמש בסיסית לכולם ולהתחיל לשפר את החוויה רק אחרי שמגיעים לסף מסוים של זיהוי תכונות.
איך להימנע מזיהוי המכשיר
מומלץ לבדוק ישירות אם קיימת תמיכה בתכונות במקום להניח הנחות לגבי תמיכה על סמך המחרוזת של סוכן המשתמש.
מחרוזות של סוכן משתמש אף פעם לא היו אמינות באמת. כדי "לנחש נכון", הם מסתמכים על ידע כמעט מושלם בכל שילוב של דפדפן, מערכת הפעלה ומכשיר שקיימים. גם אז הם חשופים לזיוף משתמשים. לדוגמה, הפניות אוטומטיות לאתר במחשב בדפדפנים לנייד הן בדרך כלל פשוטות כמו זיוף מחרוזת של סוכן משתמש במחשב.
בנוסף, הדפדפנים פועלים להקפיא את מחרוזות ה-User-Agent. המחרוזות של סוכן המשתמש לצורך זיהוי תכונות מפורטות באופן ספציפי כסיבה להוצאה משימוש, ולכן הן עוד יותר לא אמינות בהשוואה לזיהוי של משתמש ומכשיר.
התוכן תחילה
עיקרון נוסף בעיצוב עבור האינטרנט הוא: התחילו קודם בתוכן שלכם. לדוגמה, מידע בזמן אמת על מניות עם תרשים של מחירי המניות הוא, במהותו, טבלה של מניות עם המחיר שלהן לאורך זמן מסוים, אולי עם קישור לרענון האתר.
לאחר מכן אפשר לשפר את הקוד באמצעות JavaScript ולבצע בקשות אחזור כדי לעדכן את ערכי הטבלה לפי טיימר, או לשפר אותו באמצעות שקעים כדי לספק עדכונים מבוססי-דחיפה בזמן אמת. אפשר לשפר אותה שוב כדי להציג את התוצאות בגרף, אולי באמצעות CSS, אולי באמצעות SVG ואולי באמצעות לוח הציור. אבל הליבה מתחילה בתוכן.
עיצוב מהותי
- נייד כמגבלה על מיקוד בחוויית המשתמש.
- הדגשת התוכן והפונקציונליות המרכזית בתהליך העיצוב.
- שיפור מתמיד עם פונקציונליות מתקדמת, ככל שהיא זמינה.
השילוב של העקרונות האלה יוצר משהו חדש: עיצוב מהותי. בהרצאה שלה, Designing Intrinsic Layouts, ג'ן סימונס מדברת על שימוש בכלים מודרניים של CSS, כמו Grid, Flexbox, flow layout ומצבי כתיבה, כדי לעצב ולפתח ממשקי משתמש. בעזרת הכלים האלה, היא אומרת:
אפשר ליצור פריסה שתתאים לתוכן שיש לנו ולעיצוב שאנחנו רוצים ליצור.
Jen Simmons
גרסת ה-CSS החדשה הזו מאפשרת למעצבים לקבל חזרה חלק מהשליטה על הפריסה, אבל לעשות זאת באופן שמתאים לעקרונות העיצוב העדכניים ביותר של אתרים. במקום ליצור טפסים קבועים על סמך גדלים קבועים של מסכים, אתם מגדירים כללים מבוססי-תוכן שלפיהם מתבצעת הפריסה. לשם כך, המערכת בודקת את המאפיינים המהותיים של התוכן, כמו גודל קטן או גדול, גודל הטקסט והשטח הזמין – הכול בו-זמנית. הם מאפשרים לכם להציג את העיצוב שלכם כשהוא מתקשר עם התוכן שלכם, בלי שתצטרכו לשלוט במיקום של כל פיקסל.
פריסות מובנות הן השלמה של הדיון על שליטה באינטרנט, והן מגדירות אותו. שליטה באינטרנט לא מתייחסת להכתיבת מכשירים, גדלי מסכים, צבעים, גופנים, פריסות או יכולות לכל מבקר באתר. שליטה באינטרנט היא כתיבת הכללים שבהם הדפדפן ישתמש כדי ליצור את חוויית המשתמש, וליצור אותה באופן ייחודי לכל משתמש באפליקציית האינטרנט המתקדמת (PWA).
ביצועי אתרים
הבסיס האחרון והחשוב ביותר של אפליקציית ה-PWA שלנו הוא ביצועי האתר. חוויית משתמש מעולה היא חובה, והיא תוביל להגדלת מספר ההמרות בכל דרך אפשרית.
כדי לשפר את ביצועי האתר, צריך לבצע כמה שלבים:
- להבין את המדדים העיקריים שזמינים למשתמש/ת.
- הגדרת יעדים לכל מדד.
- מדידת ה-PWA שלנו.
- כדי לשפר את המדדים שלנו, אפשר ליישם שיטות ושיטות מומלצות באופן סטטי בקוד או בשרת שלנו.
- מודדים שוב.
- משפרים את החוויה לכל משתמש בשידור חי, בהתאם להקשר של המשתמש.
מדדי הביצועים באינטרנט מודדים כיום את מהירות ההצגה של התוכן שלך במסך, אבל גם את מידת האינטראקטיביות של האתר שלך ואת האופן שבו המשתמשים תופסים את החוויה.
Core Web Vitals
בעשור האחרון, השתמשנו במדדים שונים כדי למדוד את ההצלחה של ביצועי האתר. כיום, קבוצה של מדדים מומלצים שנקראת Core Web Vitals מתמקדת בשלושה תחומים עיקריים שמשפיעים על הביצועים ועל חוויית המשתמש:
- טעינה – מיוצגת על ידי Largest Contentful Paint (LCP).
- אינטראקטיביות – מיוצגת על ידי מהירות התגובה לאינטראקציה באתר (INP).
- יציבות חזותית – מיוצגת על ידי Cumulative Layout Shift (CLS).
דוח מדדי הליבה לבדיקת חוויית המשתמש באתר מאפשר לכם לראות בקצרה מהי רמת הביצועים או הגרועה של ה-PWA לגבי הביצועים וחוויית המשתמש.
היסודות של PWA
חשוב של-PWA תהיה בסיס חזק בעיצוב רספונסיבי, בנייד והכל קודם, בעיצוב הפנימי ובביצועי האתר כבסיס לחוויה מעולה לכל המשתמשים.