שיטות מומלצות לאפליקציות אינטרנט

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

  1. הפניית מכשירים ניידים לגרסה ייעודית לנייד של האתר שלך. יש כמה מודלים דרכים לעשות זאת באמצעות הפניות אוטומטיות בצד השרת. אחת מהשיטות הנפוצות היא "להניח" (sniff) ה מחרוזת סוכן המשתמש שסופקה על ידי דפדפן האינטרנט. כדי לקבוע האם להציג גרסה של האתר לנייד, לחפש את הטקסט "לנייד" בסוכן המשתמש.
  2. שימוש ב-HTML5 למכשירים ניידים. HTML5 היא שפת הסימון הנפוצה ביותר שמשמשת אתרים לנייד. התקן הזה מעודד פיתוח שמותאם לנייד, כדי להבטיח שאתרים פועלים במגוון של מכשירים. בשונה משפות אינטרנט קודמות, HTML5 הוא פשוט יותר <DOCTYPE> charset הצהרות: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. כדי לשנות את הגודל של דף האינטרנט בצורה תקינה, צריך להשתמש במטא-נתונים של אזור התצוגה. במסמך שלך <head>, יש לספק מטא-נתונים שמציינים איך רוצים שאזור התצוגה של הדפדפן יוצג לעבד את דף האינטרנט. לדוגמה, המטא-נתונים של אזור התצוגה יכולים לציין את הגובה והרוחב של אזור התצוגה של הדפדפן, קנה המידה ההתחלתי של הדפים וצפיפות מסך היעד.

    הדוגמה הבאה מראה איך להגדיר מטא-נתונים של אזור תצוגה:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

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

  4. שימוש בפריסה ליניארית אנכית. מניעת הצורך לגלול ימינה ושמאלה כשהמשתמש ניווט בדף. למשתמש קל יותר לגלול למעלה ולמטה, והוא הופך את הדף לפשוט יותר.
  5. מגדירים את הגובה והרוחב של הפריסה כ-match_parent. הגדרה של הגובה והרוחב של האובייקט WebView עד match_parent מוודא שגודל התצוגות של האפליקציה שלך מוגדר כראוי. לא מומלץ להגדיר הגובה עד wrap_content כי התוצאה היא מידה שגויה. באופן דומה, הגדרת רוחב הפריסה לwrap_content אינו נתמך וגורם לWebView צריך להשתמש במקום זאת ברוחב של ההורה. מסיבה זו, חשוב גם לוודא שלא של האובייקטים בפריסת ההורה של האובייקט WebView, הגובה והרוחב של האובייקט הזה מוגדרים wrap_content.
  6. נמנעים מבקשות מרובות של קבצים. כי בדרך כלל למכשירים ניידים יש מהירות חיבור איטי יותר מאשר במחשבים שולחניים, לכן הדף שלכם נטען מהר ככל האפשר. אחת הדרכים להאיץ את האינטראקציה היא להימנע מטעינת קבצים מיותרים כמו גיליונות סגנונות וקובצי סקריפט ב-<head>. כמו כן, ביצוע ניתוח לנייד עם PageSpeed Insights של Google כדי לקבל הצעות מפורטות לאופטימיזציה שספציפית לאפליקציה שלכם.

מקורות מידע נוספים