יסודות

בסיס איתן

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

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

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

עיצוב אינטרנט מותאם

מאז התבצע בשנת 2010 במאמר A List Apart של איתן מרקוט (Ethan Marcoe), עיצוב אתרים רספונסיביים, נבחר למעצבים ולמפתחים ליצור חוויות גמישות וליצור ממשקי משתמש שפועלים במגוון גדלים ומכשירים של מסכים.

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

עיצוב אינטרנט דינמי כולל שלושה מרכיבים טכניים:

  • רשתות נוזלים
  • מדיה גמישה
  • שאילתות מדיה

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

המיתוס על משתמשים בנייד

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

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

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

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

מיני-מצב

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

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

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

מכשירים מתקפלים והיברידיים

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

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

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

קודם הכול

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

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

לוק ורובלבסקי

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

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

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

שיפור הדרגתי

שיפור Progressive הוא דפוס שמאפשר לנו לכתוב קוד שפועל בכל מקום, החל מ-HTML רגיל, מ-CSS ו-JavaScript, ומוסיפים לו שכבות של יכולות עם חלופות מתאימות כאשר API לא זמין.

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

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

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

כדי לספק JavaScript מודרני, אפשר להשתמש בדפוס המודול/nomodule כדי לספק תכונות עמידות יותר עם מטען ייעודי (payload) קטן יותר לדפדפנים מודרניים יותר, וחוויית גיבוי לדפדפנים ישנים יותר. היתרון הזה הוא שמבטיחים שימוש בסיסי חדש בתכונות JavaScript, כמו Progress, מחלקות, פונקציות חיצים ו-const ו-let, בדפדפנים שתומכים במודולים של ES.

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

הימנעות מזיהוי מכשירים

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

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

בנוסף, דפדפנים פועלים להקפאת מחרוזות ה-User-Agent שלהם, תוך שימוש במחרוזות של סוכני משתמש לזיהוי תכונות, שצוינו במיוחד כסיבה להוצאה משימוש. כתוצאה מכך, מחרוזות ה-User-Agent שלהם לא היו אמינות בעבר לזיהוי משתמש ומכשיר.

קודם התוכן

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

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

עיצוב פנימי

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

העקרונות האלה מעניקים לנו משהו חדש: עיצוב פנימי. בהרצאה עיצוב Intrinsic Layouts, ג'ן סימונס מדברת על השימוש בכלי CSS מודרניים, כגון Grid, Flexbox, פריסת זרימה ומצבי כתיבה, כדי לעצב וליצור ממשקי משתמש. בעזרת הכלים האלה, היא אומרת:

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

ג'ן סימונס

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

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

ביצועים באינטרנט

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

ביצועי האינטרנט כוללים כמה שלבים:

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

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

Web Vitals

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

  • בטעינה
  • אינטראקטיבית
  • יציבות חזותית

קבוצת מדדים ממדדי הליבה לבדיקת חוויית המשתמש באתר, שמציגים תוצאות של ביצועי האתר.

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

קרנות PWA

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

משאבים