ההבדלים בין עיצוב אינטרנט מגיב ו מסתגלת

השוואת שתי גישות שונות כדי עיצוב מרובה התקנים

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

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

• קלות הפיתוח
• רמת השליטה יש לך על העיצוב
• רוחב של תמיכה במכשיר / מסך
• איך העתיד ידידותי הפתרון
• מהירות הורדה כללית וביצועי אתר

הגדרות מסוימות

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

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

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

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

קלות הפיתוח

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

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

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

בקרת עיצוב

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

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

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

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

רוחב התמיכה

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

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

אתרי אינטרנט מגיבים ושאילתות התקשורת שיפעילו אותם יעבדו היטב בכל הדפדפנים המודרניים. הבעיות היחידות שיש לך הן בגירסאות הישנות ביותר של Internet Explorer מאז גרסאות 8 ומטה אינן תומכות בשאילתות מדיה . כדי לעקוף את זה , polyfill Javascript משמש לעתים קרובות , כלומר יש תלות Javascript כאן גם, לפחות עבור אלה גירסאות מיושנות של IE. שוב, ייתכן שהדבר אינו מעסיק אותך במיוחד, במיוחד אם ניתוח האתר שלך מראה שאינך מקבל מבקרים רבים באמצעות גרסאות הדפדפן הישנות יותר.

ידידות בעתיד

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

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

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

ביצועים

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

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

מעבר לפריסה

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

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

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

איזו גישה טובה יותר?

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

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