מפגש הפסגה של מפתחי Chrome – סיכום בנושא ניידים

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

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

לאחר ניתוח ההתאמה לניידים של 1,000 האתרים המובילים, גילינו כמה אזורים בעייתיים: 53% עדיין מספקים חוויה במחשבים בלבד, ב-82% מהאתרים יש בעיות באינטראקטיביות במכשיר נייד ו-64% מהאתרים כוללים טקסט שמשתמשים יתקשו לקרוא אותו.

היטים מהירים לשיפור חוויית השימוש באינטרנט לנייד

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

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

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

נגישות במכשירים מרובים, מאת Alice Boxhall

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

Slides: נגישות במספר מכשירים

הדרכים העיקריות להבנת בעיות ולטיפול בהן

  • מוודאים שאתם נהנים מחוויית משתמש טובה כשמשתמשים במקלדת בלבד
  • מבטאים את הסמנטיקה של הממשק בעזרת בחירה נכונה של רכיבים ו-ARIA
  • השתמשו ב-ChromeVox במחשב וב-TalkBack ב-Android כדי לבדוק.
  • כדאי לנסות את התוסף ל-Chrome 'כלים למפתחי נגישות'
  • קהל מגוון יותר נכנס לאינטרנט, מה שמגביר את הצורך בהפיכת האתרים שלך לנגישים

בניית אפליקציות לנייד באמצעות Chrome WebView של מאט גואנט

כולנו יודעים את הבעיות שמפתחים נתקלו בהן במהלך הבנייה של ה-WebView: תכונות HTML5 מוגבלות, ללא כלים לניפוי באגים או כלי build. עם השקת WebView המופעל על ידי Chromium ב-Android 4.4 (KitKat), יש עכשיו מגוון עצום של כלים חדשים שעומדים לרשותם כדי לבנות אפליקציות מקוריות נהדרות באמצעות WebView.

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

Slides: בניית אפליקציות לנייד באמצעות Chrome WebView

מסקנות אפקטיביות לגבי פיתוח WebView

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

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

אם אנחנו צריכים לפתח מחשבים, מכשירים ניידים, טאבלטים, גאדג'טים לבישים ועוד, איך אפשר לשפר את תהליך העבודה כך שיהיה פחות מלחיץ? יש גישה יציבה למעבר בין מכשירים מרובים לביצוע איטרציה מהירה עם LiveReload , Graunt , Yoman ו-Mini Mobile Device Lab שהושק לאחרונה. לסיום, אם אין לכם את החומרה הפיזית שאתם רוצים לבדוק, חלק מהספקים מאפשרים אותה דרך הענן.

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

נקודות עיקריות

  • מספר המכשירים שנצטרך לדאוג להם רק ילך ויגדל
  • תהליך עבודה תקין עם Grunt ו-Yeoman
  • בדיקה פשוטה יותר בדפדפנים ובמכשירים שונים בעזרת Mini Mobile Device Lab
  • חשוב להפעיל שיקול דעת בבחירת האמולציה שלכם באמצעות אמולטור כלי הפיתוח של Chrome, אמולטורים של מניות, אמולטורים מבוססי-ענן כמו Sauselabs, Browserstack ו-appexperience אמולטור של צד שלישי Genymotion
  • בדיקה בנייד פירושה יותר מבדיקה של חיבור ה-Wi-Fi, שימוש בשרת proxy כדי לדמות מהירויות רשת איטיות יותר

קישוריות רשת: אופציונלית, על ידי ג'ייק ארצ'יבלד

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

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

Slides: קישוריות רשת: אופציונלי

רותמים את ServiceWorker

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