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

1. מכשירים, מערכות הפעלה ודפדפנים

מפתחי ווב רגילים לעבוד מול מספר דפדפנים וגרסאות: אקספלורר על שלל גרסאותיו, Firefox ו Chrome — כל דפדפן והיכולות והבאגים שלו. מבחינות רבות Mobile חוסך לנו דאגות, שהרי שתי מערכות ההפעלה המרכזיות, iOS ו Android, מציגות דפדפנים מתקדמים מבוססי Webkit. דפדפנים אלו תומכים ביכולות HTML5 ו CSS3, וגם מבחינת קוד JavaScript רב הדומה על השונה.

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

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

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

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

2. ריבוי גדלי מסך

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

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

3. איטיות רשת סלולרית

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

אמחיש באמצעות תמונה:

 

זוכרים את התוכי מהטלויזיה, זה שנכנס דרך הקיר לספר שזה לא משנה שיש לכם 100 מגה, האינטרנט איטי כי אין כבל תת-ימי? טוב אז יש לו נקודה. אם נדמיין את קו הרשת כצינור דרכו עובר המידע, נוכל לראות שיש שני גורמים שישפיעו על מהירות העברת המידע מצד אחד של הצינור לשני: רוחב הצינור הוא חשוב, שכן ככל שהצינור רחב יותר ניתן להעביר יותר מידע. פרמטר שני שמשפיע על מהירות הגלישה הוא זמן מעבר המידע מצד אחד של הצינור לצדו השני. גם אם יש לכם רק משפט להעביר או תמונה קטנה, עדיין יהיה עליה לעבור את כל הצינור.
במילים אחרות, חיבור אינטרנט של 100 מגה מאפשר העברת 100 מגה-ביט של מידע בשניה. המספר 100 מגה מדבר על רוחב הצינור. רשת סלולרית מורכבת מהרבה ממסרים לאורך הצינור, שמאטים את קצב העברת המידע מצד לצד (זה נקרא Round Trip Time). זמן העברת חבילת מידע ולו הקטנה ביותר הוא ארוך משמעותית ברשת 3G מאשר ברשת WiFi מקבילה עם אותו רוחב פס.

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

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

4. כלי הפיתוח

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

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

5. ולמרות הכל, אין ברירה אחרת

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