עיצוב אתרים מגיב וסתגל הן שיטות ליצירת אתרים ידידותיים להתקנים מרובים, הפועלים היטב במגוון גדלי מסכים. בעוד עיצוב אתרים מגיב מומלץ על ידי גוגל והוא הפופולרי יותר של שתי הגישות, הן של שיטות אלה עבור עיצוב אתרים מרובת התקנים יש את נקודות החוזק שלהם ואת החולשות שלהם.
בואו נסתכל על ההבדלים בין עיצוב אינטרנט גמיש ו הסתגלות, במיוחד התמקדות אלה תחומי מפתח:
- קלות הפיתוח
- רמת השליטה יש לך על העיצוב
- רוחב של תמיכה במכשיר / מסך
- איך העתיד ידידותי הפתרון
- מהירות הורדה כללית וביצועי אתר
הגדרות מסוימות
לפני שנכנס להשוואה שלנו של עיצוב אתרים גמיש וסתגלני, בואו נסתכל לרגע על הגדרה גבוהה של שתי הגישות.
אתרים בעלי יכולת תגובה כוללים פריסת נוזל המשתנה ומתאימה ללא קשר לגודל המסך שבו נעשה שימוש. שאילתות מדיה מאפשרות לאתרים להגיב אפילו לשנות, אם את גודל הדפדפן אם הוא גודל.
עיצוב מסתגל משתמש בגדלים קבועים המבוססים על נקודות עצירה שנקבעו מראש כדי לספק את גרסת הפריסה המתאימה ביותר עבור גודל המסך, אשר מזוהה כאשר הדף נטען לראשונה.
עם הגדרות רחבות אלה במקום, בואו נפנה לתחומי המיקוד העיקריים שלנו.
קלות הפיתוח
ההבדל המשמעותי ביותר בין עיצוב אתרים גמיש וסתגלני הוא באופן שבו פתרונות אלה מוחלים על אתר אינטרנט. בגלל עיצוב תגובה יוצר נוזל לחלוטין פריסה, היא הטובה ביותר בשימוש על פרויקטים שבהם אתה מחדש את האתר מהיסוד. ניסיון לאתר מחדש את קוד האתר הקיים כדי לקבל תגובה הוא לעתים קרובות פרשה מפרך, כי פשוט אין לך את רמת השליטה כי היה לך אם היית בפיתוח קוד זה מאפס לקחת עיצוב תגובה בחשבון בשלבים הראשונים של כי התהליך. משמעות הדבר היא שכאשר אתה retrofit אתר להיות תגובה, אתה נאלץ לעשות פשרות על מנת להישאר בתוך קוד זה קיים.
אם אתה עובד עם אתר קיים רוחב קבוע, גישה אדפטיבית אומר שאתה יכול להשאיר את הגודל כי האתר תוכנן שלם ולהוסיף על breakpoints הסתגלות נוספת לפי הצורך. במקרים מסוימים, אם תקציב הפרויקט קטן, ואם הוא יספיק רק לכמות קטנה של עבודות פיתוח, תוכל לבחור להוסיף רק נקודות עצירה אדפטטיביות חדשות עבור גדלים קטנים יותר של מסך / נייד. זה אומר שאתה תאפשר מסכים גדולים יותר עבור כל להשתמש באותו פריסה - אולי 960 גרסת הפסקת אשר היה מה האתר נועד במקור נועד.
הצד החיובי לגישה אדפטיבית הוא שאתה יכול למנף טוב יותר את קוד האתר הקיים, אבל אחד החסרונות הוא שאתה יוצר תבניות פריסה שונות עבור כל נקודת עצירה שתבחר לתמוך בה. זה ישפיע על עומס העבודה הנדרש כדי לפתח ולשמור על פתרון זה בטווח הארוך.
בקרת עיצוב
אחד היתרונות של אתרי תגובה הוא שהנזילות שלהם מאפשרת להם להתאים ולתמוך בכל גדלי המסך לעומת רק נקודות הקדם שנקבעו מראש בגישה אדפטיבית. עם זאת, המציאות היא שהאתרים היענים עשויים להיראות נהדר בגדלים מסוימים של מסך מפתח (בדרך כלל בגדלים המתאימים למכשירים פופולריים הזמינים בשוק), אך העיצוב החזותי מתפרק לעתים קרובות בין הפתרונות הפופולריים.
לדוגמה, אתר עשוי להיראות נהדר על פריסת מסך רחב של 1400 פיקסלים, בגודל המסך הממוצע של 960 פיקסלים, ואת המסך הקטן מסתכל על 480 פיקסלים, אבל מה לגבי בין המצבים של גדלים אלה? כמעצב, יש לך מעט שליטה על אלה בין הגדלים ואת המראה החזותי של הדף באותם גדלים הוא לעתים קרובות פחות אידיאלי.
עם אתר אדפטיבית, יש לך הרבה יותר עיצוב שליטה על פריסות שונות בשימוש כי הם קבועים הגדלים מבוסס על breakpoints הוקמה שלך. מצבים מביכים אלה אינם מהווים בעיה עוד משום שתכננתם בקפידה כל אחד מהם, כלומר כל תצוגה של נקודת עצירה, שיועבר למבקרים.
אטרקטיבי ככל רמה זו של בקרת העיצוב עשוי להישמע, אתה חייב להיות מודע לכך שהוא מגיע במחיר. כן, יש לך שליטה מלאה על המראה של כל breakpoint, אבל זה אומר שאתה חייב להשקיע את זמן העיצוב הנדרש כדי לעצב עבור כל אחד מאותם פריסות ייחודי. ככל breakpoints לך לבחור לעצב, יותר זמן תצטרך להוציא על תהליך זה.
רוחב התמיכה
עיצוב אתרים גמיש וסתגלני כאחד נהנה מתמיכה חזקה, במיוחד בדפדפנים מודרניים.
אתרים מסתגלים דורשים רכיבים בצד השרת או Javascript לגילוי גודל מסך. ברור, אם אתר הסתגלות דורש Javascript, פירוש הדבר שדפדפן צריך להפעיל אותו כדי שהאתר יפעל כראוי. זה לא יכול להיות דאגה גדולה לך מאז רוב האנשים יהיו Javascript בדפדפנים שלהם, אבל בכל עת האתר יש תלות קריטית על משהו, יש לציין.
אתרי אינטרנט מגיבים ושאילתות התקשורת שיפעילו אותם יעבדו היטב בכל הדפדפנים המודרניים. הבעיות היחידות שיש לך הן בגירסאות הישנות ביותר של Internet Explorer מאז גרסאות 8 ומטה אינן תומכות בשאילתות מדיה. כדי לעקוף את זה, polyfill Javascript משמש לעתים קרובות, כלומר יש תלות Javascript כאן גם, לפחות עבור אלה גירסאות מיושנות של IE.שוב, ייתכן שהדבר אינו מעסיק אותך במיוחד, במיוחד אם ניתוח האתר שלך מראה שאינך מקבל מבקרים רבים באמצעות גרסאות הדפדפן הישנות יותר.
ידידות בעתיד
אופי נוזל של אתרי אינטרנט תגובה נותן להם יתרון על פני אתרי הסתגלות כשמדובר ידידותיות לעתיד. הסיבה לכך היא כי אתרי תגובה אלה אינם בנויים כדי להתאים רק קבוצה הוקמה בעבר של נקודות עצירה. הם מסתגלים כך שיתאימו כל המסכים , כולל אלה אשר אולי לא ממש להיות בשוק היום. משמעות הדבר היא כי אתרי תגובה לא צריך להיות "קבוע" אם רזולוציית מסך חדש פתאום הופך פופולרי.
כאשר מסתכלים על מגוון מדהים של הנוף המכשיר (נכון לאוגוסט 2015, היו מעל 24,000 מכשירי אנדרואיד מובחן בשוק), שיש אתר שעושה כמיטב יכולתו כדי להכיל את מגוון רחב של מסכים הוא בעל חשיבות מכרעת עבור ידידותיות בעתיד. הסיבה לכך היא כי הנוף צפוי לקבל כל מגוון פחות בעתיד, כלומר עיצוב עבור מסכים או גדלים ספציפיים הולך להיות בלתי אפשרי, אם אנחנו לא הגענו כבר למציאות.
בצד השני של תרחיש השוואה זה, אם האתר הוא אדפטיבי והוא אינו מתאים החלטות חדשות שעשויות להיות חשובות בשוק, אז אתה עלול להיות נאלץ להוסיף את נקודת עצירה על האתרים שיצרת. זה מוסיף זמן עיצוב ופיתוח על פרויקטים זה אומר כי אתרי הסתגלות אלה יש לעקוב באופן קבוע על מנת להבטיח כי לא breakpoints חדשים הוכנסו לשוק כי יש להוסיף על האתר. שוב, עם המגוון המכשיר להיות מה זה, צורך לבדוק כל הזמן עבור גדלים חדשים אפשרי להתאים אותם עם נקודות עצירה חדשות הוא אתגר מתמשך שישפיע על העבודה עליך לתמוך באתר ואת העלות של תחזוקה זה עבור החברה או הארגון שעבורם האתר מיועד.
ביצועים
עיצוב אתרים מגיב כבר זמן רב הואשם (באופן לא הוגן במקרים רבים) של להיות פתרון גרוע מנקודת מבט מהירות / ביצועים. זה בעיקר בשל העובדה כי בימים הראשונים של גישה זו, מעצבי אתרים רבים פשוט tacked קטן שאילתות מדיה המסך על CSS הקיים של האתר. זה אילץ את התמונות והמשאבים המיועדים למסכים גדולים יותר להיות מועברים לכל המכשירים, גם אם המסכים הקטנים יותר לא השתמשו בהם בפריסות הסופיות שלהם. עיצוב תגובה יש כברת דרך ארוכה מאז אותם ימים והמציאות היא כי אתרי תגובה איכותי היום לא סובלים מבעיות ביצועים.
איטי להוריד מהירויות ו bloated אתרי אינטרנט אינה תגובה לאתר בעיה - זוהי בעיה שניתן למצוא בכל אתרי האינטרנט. תמונות שהן כבדות מדי, מזנות ממדיה חברתית, תסריטים מוגזמים ועוד ומשקלות אתר למטה, אך ניתן גם לבנות אתרי אינטרנט גמישים ואדפטיביים כאחד. כמובן , הם יכולים גם להיות בנויים בצורה שאינה הופכת את הביצועים לעדיפות, אבל זה לא תכונה של הפתרון עצמו, אלא השתקפות של הצוות שהיה מעורב בפיתוח של האתר עצמו.
מעבר לפריסה
אחד ההיבטים המשכנעים ביותר של עיצוב אינטרנט אדפטיבי הוא שאתה לא רק יש שליטה על העיצוב של האתר עבור breakpoints להגדיר, אלא גם את המשאבים המועברים עבור גירסאות אלה באתר. לדוגמה, משמעות הדבר היא שתמונות רשתית יכולות להישלח רק למכשירי רשתית, בעוד שמסכים שאינם ברשתית מקבלים תמונות מתאימות יותר בגודל קטן יותר. משאבי אתר אחרים (קובצי Javascript, סגנונות CSS וכו ') ניתנים בהעברה חכמה רק כאשר הם נחוצים וישמשו.
שימוש זה בעיצוב אינטרנט מסתגל הרבה מעבר למשוואה הפשוטה של "אם אתה משתמש מחדש באתר, הסתגלות עשויה להיות גישה קלה יותר לשימוש". כל האתרים, כולל עיצובים מוחלטים, יכולים ליהנות מגישה חכמה יותר לניסיון מותאם יותר.
תרחיש זה מציג את האופי הדק של הדיון ה"מענה מול ההסתגלות ". אמנם נכון כי גישה אדפטיבית עשוי להיות מתאים יותר מאשר להגיב על retrofits האתר, זה יכול להיות גם פתרון נהדר עבור עיצוב מחדש מלא. באופן דומה, במקרים מסוימים ניתן להוסיף גישה תגובה לבסיס הקוד הקיים של האתר, ולהעניק לאתר את כל היתרונות של גישה גמישה לחלוטין.
איזו גישה טובה יותר?
כאשר מדובר בעיצוב אינטרנט גמיש מול הסתגלות, אין "זוכה" ברור, אם כי תגובה היא בהחלט הגישה הפופולרית יותר. לאמיתו של דבר, הגישה ה"טובה "תלויה בצרכים של פרויקט מסוים. יתר על כן, זה לא צריך להיות מצב "או" או. ישנם אנשי מקצוע רבים באינטרנט אשר בניית אתרים המשלבים את הטוב ביותר של עיצוב אתרים תגובה (רוחב נוזלים, תמיכה עתידית) עם עוצמות של עיצוב אדפטיבי (שליטה בעיצוב טוב יותר, טעינה חכמה של משאבי האתר).
גישה זו מגלה כי אין באמת "גודל אחד מתאים לכל פתרון". עיצוב אתרים עם תגובה גמישה יש את החוזק שלהם ואת האתגרים שלהם, אז אתה צריך לקבוע איזה מהם יעבוד הכי טוב עבור הפרויקט הספציפי שלך, או אם פתרון היברידי עשוי למעשה להתאים לך הכי טוב.
