בניית אתרים במובייל

מה ההבדל בין אתר רספונסיבי לאתר מותאם לגוגל AMP

 בניית אתרים מותאמים למוביל – זמן קריאה: 5 דקות

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

בניית אתרים מותאמים למובייל

בפברואר השנה (2016) גוגל השיקה את פרוייקט הדגל החדש שלה להתאמה לסלולר – פרוייקט גוגל AMP. תגיות HTML מיוחד, ספריית JS מצומצמת וזיכרון מטמון המאפשר לשמור דפי HTML, בשיתוף הגרסה של גוגל ל CDN לאחסון קבצי תמונה ווידיאו בשרתים של גוגל ברחבי העולם, הופעים את הדפים למהירים הרבה יותר עבור משתמשים סלולריים.

אז מה בעצם ההבדל בין אתר רספונסיבי לאתר AMP?

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

איך אתרים רספונסיביים משחקים יפה עם גוגל AMP?

למרות הניסיון להגדיר סטנדרטים חדשים של קוד, ולנקות אותו מהרבה אלמנטים מיותרים, גוגל AMP עדיין לא הרגו לגמרי את הדפים הרספונסיביים, אלא רק מציעים גרסה נקייה יותר שלהם. לדומה כדי להפוך תמונה לרספונסיבית ניתן להגדיר לה אורך ורוחב, אך גם להוסיף לה תגית – "layout="responsive

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

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

מה עושים אם האתר הרספונסיבי שלי כולל אלמנטים שלא נתמכים בגוגל AMP?

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

ניתן להתרשם מחברת הבת שלנו NextSite בניית אתרים 

 

 



תגיות:


כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

צור קשר

  • התקשרו אלינו

    072-390-2343

  • כתבו לנו

    dudu@seowho.co.il

  • בואו נפגש

    שדרות נים 2 , קניון עזריאלי ראשל"צ

שיחה מהירה
שיחה מהירה
Page Reader Press Enter to Read Page Content Out Loud Press Enter to Pause or Restart Reading Page Content Out Loud Press Enter to Stop Reading Page Content Out Loud Screen Reader Support