עיצוב אתר אדפטיבי הוא מערכת נוחה להצגת אותו אתר בסוגים שונים של מכשירים באינטרנט. במילים פשוטות, זוהי היכולת לצפות בדף אינטרנט אחד במחשב נייד, סמארטפון וגאדג'טים אחרים.
היענות לאינטרנט הפכה להכרח מאז שאנשים קיבלו גאדג'טים התומכים באינטרנט בפורמטים שונים. חברות, חנויות מקוונות, ואפילו סתם אתרים אינפורמטיביים שואפות לרצות את הקהל שלהן, תוך התאמה אליו בכל דרך אפשרית. עיצוב רספונסיבי פותר את בעיית הנוחות, לכן זהו פריט עבודה הכרחי.
מאפיינים של עיצוב אינטרנט רספונסיבי
נוחות העיצוב מאופיינת במספר קריטריונים עיקריים.
- גודל. עיצוב אתר רספונסיבי צריך להיות בעל הבדלים קלים בעת הצגת הדף במכשירים שונים, כך שגדלים של תמונות, טקסט ושאר אלמנטים שנצפו צריכים להתאים לגדלים של המכשירים עצמם. לשם כך, מפתחי אתרים מתאימים את העיצוב כך שיהיו לו גרסאות תצוגה מרובות.
- עיבוד תוכן. חומר שממלא את האתר (תמונות, סרטוניםורכיבי מולטימדיה אחרים) חייבים גם הם להתאים לרזולוציות המסך הנדרשות מבלי לאבד את איכות התצוגה.
- גמישות עיצובית. שילוב בפיתוח אלמנטים המאפשרים לך להתאים במהירות את עיצוב האתר בעת שינוי דף האינטרנט בו אתה צופה. לדוגמה, המשתמש גולל את העמוד למעלה ולמטה, מנווט בין חלקים שונים, או משנה את מיקום המסך מאנכי לאופקי ולהיפך.
- פשט פריטים לפי מכשיר לשיפור השימושיות.
- הסתר בלוקים לא חשובים במסכים קטנים יותר.
Basics
בניית אתרים בהחלט קשורה לשפות תכנות, כי פשוט אי אפשר בלעדיהם. באמצעות HTML ו-CSS, הדפדפן מזהה את ההרכב והסדר של אובייקטים (טקסטים, איורים, סרטונים) - כך נוצר האתר.
CSS אחראית על צבע, סגנונות, גדלים, גופנים, יישורים, ריפוד, רכיבי רקע, טפסים וכו'. HTML אחראי על התוכן והמבנה הכוללים של האתר. לפיכך, משאב אינטרנט נבנה במצטבר של שתי שיטות התיאור החשובות ביותר.
CSS, לעומת זאת, הוא כלי עיצוב הכרחי. בעל קבוצה גדולה של תכונות עדיפות על HTML:
- מספק עקביות עיצובית על פני מספר דפים, מראה אתר ושולט בהצגת מסמכי HTML.
- נותן לך הזדמנות לעשות עיצוב ותוכן בו-זמנית.
- מחיל סגנונות מרובים והיכולתצפייה במכשירים שונים.
- מקבל החלטות עיצוב מורכבות.
- מאפיין במהירות גבוהה.
כדי לפתח אתר, אתה צריך לדעת כמה מושגים בסיסיים.
בורר CSS מסומן בשם של סגנון המגדיר מאפיינים ואפשרויות עיצוב. זה אומר לדפדפן על איזה רכיב ספציפי חלים המאפיינים.
נכס הוא יחידה מבנית. הוא מגדיר פרמטרים חיצוניים (גודל, מיקום, צבע, צורה וכו') ומתבטא בקוד ספציפי.
יש קבוצה של מאפייני CSS מוגדרים המתארים אובייקט בודד במראה ובמיקום.
ביחד, הרכיבים האלה יוצרים את הסכימה הבאה:
Selector { property1: value; נכס2; ערך }.
גדלים ורזולוציות של פריסה
פיתוח העיצוב מתחיל בהכנת הפריסה בפוטושופ או בתוכנות גרפיות אחרות. מטעמי נוחות, סימנים מיוחדים של הרשת המודולרית מוכנסים לתוך הבד, נצפים שקעים מיוחדים. לפיכך, מעצב האינטרנט מראה למעצב הפריסה את העקרונות של מבנה האתר העתידי והסידור הנכון של רכיבי האינטרנט.
רזולוציות וגדלים של עיצוב אתרים רספונסיביים עבור סוגי המכשירים העיקריים:
- העיצוב הזה תואם את העיקרון של תחילת עבודה עם הרשאה ניידת. הפריסה לסמארטפון נוצרת בגודל של 460 × 960 פיקסלים.
- גודל פריסת הטאבלט הוא 768 × 1024.
- גודל המחברת הוא 1280 × 802.
- גודל PC הוא 1600 × 992.
בגרסה הניידת של האתרצריך להיות מפושט ככל האפשר, תוך שמירה על כל הפונקציות העיקריות. אם מתכוננת הפריסה לחנות מקוונת, עם כל הפשטות בשימוש, היא צריכה להיות בעלת תיאור ראשי, קטלוג מוצרים, אפשרות הזמנה, עגלת קניות וכו' - כל האלמנטים הדרושים לתפקוד מלא, כמו בצפייה בפורמט מלא במחשב. הנוחות של גרסת הסלולר היא שכאן אתה יכול להימנע מדפים נוספים כדי לחסוך בזמן הטעינה.
בתוכן אדפטיבי, באמצעות קוד HTML, אתה יכול להסתיר כמה אלמנטים שאינם נחוצים באמת. כך למשל, ברזולוציה גבוהה, האתר מציג כרטיס מוצר עם תיאורו, המחיר, פרטי המשלוח שלו ויכולת הוספה ל"סל". ברזולוציה ניידת, התהליך מפושט לתמונה, מחיר וכפתור קניה.
רזולוציות בינוניות ומינימליות לעיצוב רספונסיבי צריכות לקחת בחשבון את קלות הקריאה והצפייה של המשתמש.
Layout
מטרת פריסת עיצוב אדפטיבית היא ליצור פריסה גמישה, או כפי שנהוג לומר גם: "תבנית גומי". השורה התחתונה אינה בגדלים חד ספרתיים, אלא בדחיסה פרופורציונלית של התבנית לצפייה קלה בכל המכשירים.
הוא בנוי בעיקר על CSS. במהלך הפיתוח, נקבעות נקודות בקרה של ממדי מסך. לפיכך, נקבע רוחב האובייקטים הנותרים. לשם כך, רוחב העמוד נקבע על ידי המאפיין css max-width, בהתאם לקריטריונים אלו, הגודל של אלמנטים אחרים נבחר באחוזים. לדוגמה, גודל הבלוק על הראשיהדף הוא 600 פיקסלים, והרוחב של בלוק סרגל הצד (סרגל הצד של האתר) הוא 400 פיקסלים, בהתאמה, רוחב התוכן יהיה 60%, ורוחב סרגל הצד 40%.
ישנם מספר סוגים של פריסות רספונסיביות. כל אחד מהם נבחר בנפרד, בהתאם לתכונות ולמבנה.
צפיות:
- סוג פריסה המאפשר לעטוף בלוקים כאשר רזולוציית המסך מצטמצמת. באתרים מרובי עמודות, בלוקים נוספים מועברים לתחתית המסך.
- כאשר נבנה דפוס נפרד עבור כל הרשאה. סוג זה של עיצוב תגובה לוקח יותר זמן אבל הוא הקריא ביותר.
- סוג פשוט של עיצוב שמטרתו להתאים את כל האלמנטים. זה לא גמיש.
- סוג הפאנל נוח לשימוש ביישומים ניידים, כאשר פונקציות נוספות מופיעות בעת שינוי מיקום המסך עצמו.
יצירת שכבות רספונסיביות היא רק חלק אחד מהעבודה. תמונות מסתגלות הן מקרה נפרד, שיש לו בעיות ושיטות משלו לפתרון אותן.
תמונה בודדת חייבת להיות מוצגת בבירור ברזולוציות מסך שונות. יש כאן בעיה – איך מוודאים שהתמונה תישאר תמיד זהה, ללא קשר לשינוי ברזולוציה. הזנת קוד CSS פשוט במקרה זה לא תספיק.
דוגמה: img {max-width: 250px;} - כאן יש ליישם שיטה שבה גודל המיכל המכיל את התמונה מוגבל, ולא התמונה עצמה. זה ייראה בערך כך: div img {max-width: 250px;}. שיטה זו פותרת את הבעיהפריסה של תמונות קטנות, אבל לא מתאים לאיורים גדולים.
לכן, מפתחים רבים מעדיפים להשתמש בשפות javascript המאפשרות לך להתאים כל תמונה מבלי להעמיס על השרת. Javascript מציע מספר רב של סקריפטים חלופיים.
היתרונות והחסרונות של פריסה רספונסיבית
חיובים:
- שמור את המיקום של כל האלמנטים. זה נוח כאשר המשתמש רגיל לגרסה המלאה של האתר.
- שמור דומיינים וכתובות.
- התאמה אישית מלאה לפורמטים אחרים של הרשאות.
שליליים:
- הגמישות התפקודית אבדה
- כל עומס אינפורמטיבי כרוך בהשקה ארוכה של משאב אינטרנט, מה שמאלץ משתמשים רבים לעבור לאפשרויות מהירות יותר.
יצירת אתר
מבנה האתר מחולק למספר חלקים ובלוקים. באופן מסורתי, הפריסה מורכבת מהחלק העליון של האתר (כותרת), לוגו, תפריט, בלוק תוכן והחלק האחרון של האתר (לדוגמה, מידע מפורט ליצירת קשר). בוא נראה איך ליצור עיצוב אתר רספונסיבי מתבנית פשוטה.
תגי עזר לכתיבה:
- wrapper - תג המשלב את כל רכיבי התבנית;
- header h1 - logo;
- header - כותרת לתפריט ורכיבים חשובים אחרים;
- content - block;
- colLeft - גודל תוכן;
- colRight - סרגל צד (עמודה צדדית);
- footer - החלק האחרון של האתר;
- מסך מדיה - סטיםהרזולוציה הרצויה.
בעת כתיבת אתר, אלמנטים אלה יכולים לנוע בסדר שונה, בהתאם לצורך. לדוגמה, ברזולוציות גבוהות, התפריט עשוי להיות מוצג אנכית. בגרסת המובייל ניתן לבנות את הפריסה כך שהתפריט יחליק החוצה במיקום אופקי.
- viewport - תג המאפשר לשמור את גודל הטקסט בגרסה קטנה יותר של העיצוב. הוא ממוקם בין התגים.
- max-width - כדי לייעל את האתר כדי למנוע מתיחות ברזולוציות של מעל 1000 פיקסלים.
בעת יישום הפריסה, ספריית jQuery עוזרת רבות כאשר אתה צריך לשנות את הסגנון והמבנה של הבלוקים.
מה ההבדל בין עיצוב רספונסיבי למובייל
לקבלת הבנה מלאה, שקול כמה דוגמאות להמחשה, שכן בלבול בין שני המושגים הללו אינו נדיר.
עליך להבין שהגרסה הניידת היא אנלוגי לאתר הראשי עם תת-דומיין. ההצגה החיצונית של האתר חוזרת לחלוטין על הסגנון והפונקציונליות, בעוד שהמבנה והתוכן שלו עשויים להיות שונים מהגרסה הראשית, שכן הגרסה מצומצמת למרכיבים הדרושים.
עיצוב רספונסיבי הוא אופטימלי עבור כל רזולוציות המכשיר. הוא ניתן להרחבה ומוצג בצורה נכונה ללא קשר לתנאי הצפייה.
אלו שתי מצגות שונות של האתר, שסביבן מתחוללות מחלוקות ללא לאות איזו מהן טובה יותר. יצוין כי טרם התקבלה החלטה ודאית. מישהו משבח את העיצוב הזה, מצביע על מגמת האופנה והרבה יתרונות.לגרסת המובייל יש גם כמה יתרונות שאין לעיצוב רספונסיבי. לכן, מלכתחילה, עליך להבין את הצרכים הבסיסיים.
הטבות
איך עיצוב רספונסיבי טוב יותר מנייד?
רבגוניות. בזמננו, עם צמיחה כה מטורפת של השוק, פשוט יש צורך להציג מידע בצורה אחרת, המספקת את רצונות הצרכנים. עיצוב רספונסיבי פותר את הבעיה הזו.
קידום אפקטיבי במנועי חיפוש. מה שלא ניתן לייחס ליתרונות העיקריים של מכשיר אדפטיבי. מנועי חיפוש מעדיפים לתת למשתמשים אתרים רספונסיביים.
שימושיות. עיצוב רספונסיבי מעוצב בדרך כלל בפתרונות העיצוב הטובים ביותר, המהווה מתנה נחמדה לתפיסה הוויזואלית של המשתמשים.
קלות ופשטות הן ביישום הפרויקט והן בשימוש בו.
שיעורי המרה טובים. מכיוון שעם עיצוב אדפטיבי יש יותר הזדמנויות לתצוגה, ההמרה עצמה גדלה.
כלכלה. זה יחסית זול יותר מיצירה וקידום של גרסה נפרדת לנייד.
היתרונות והחסרונות של הגרסה לנייד
יצירת עיצוב נייד רספונסיבי דורשת צדדיות ועקביות. קודם כל, מומלץ לרשום את תנאי ההתייחסות בפירוט, מה שכמובן יעזור למנוע עבודה מיותרת ולחסוך זמן, וכן לקחת בחשבון את תכונות השרת בו יתארח האתר.
יש יתרונות וחסרונות מסוימים לעיצוב רספונסיבי לנייד.
יתרונות:
- אם יש לכם אתר מוכן, אין צורך לפתח עיצוב לגרסת המובייל מאפס. ניתן לבצע רק כמה שינויים, כדי לשחרר את הפריסה הזו מפונקציונליות לא נדרשת.
- בשל כל מיני הפשטות, הגרסה לנייד נחשבת למהירה יותר בהורדה.
- המשתמש רואה את פיסת המידע החשובה ביותר בכל התוכן.
- יישום מהיר. ישנם תוספים שאיתם אתה יכול ליישם התאמה לנייד, גם אם אינך מכיר תגיות וקודים.
- בחירות של מנועי חיפוש מעדיפות גרסאות אדפטיביות כי לוקח להן פחות זמן לנתח.
חסרונות:
- לא כל הגרסאות לנייד עשויות להתאים לרזולוציות של מכשירים ניידים. האתר כמובן ייפתח, אבל רזולוציית המסך לא תמיד תואמת את הפריסה. לפעמים עיצוב סמארטפון מעוצב היטב יכול להיראות אחרת כשהוא פותח כטאבלט.
- גרסאות ניידות דורשות דומיינים נפרדים בתשלום.
- יש כמה בעיות קלות בפרסום תוכן. אם יש כמה גרסאות בבת אחת, יש להתאים את התוכן לכל הפורמטים בבת אחת. הגשת חומר חדש באתר הראשי והעתקתו לגרסת המובייל יכולה להיחשב כגניבה. כדי להימנע מבעיה זו, ייתכן שיהיה עליך להוכיח את חיבור המשאבים.
שיטות יישום
שיטות יישום עיקריות:
- לאחר יצירת העיצוב של פריסות ופריסה, הוא נטען למידות הנדרשות באמצעותאתר המפעיל והקוד הראשי. זוהי שיטה קלאסית המשמשת בעת יצירת גרסאות בינוניות וקטנות (טאבלטים, סמארטפונים וכו').
- BootStrap הוא סט פשוט וברור של כלי התאמה. מתאים ליצירת גרסאות עבור דף נחיתה ופרויקטים אחרים באינטרנט לא מאוד מורכבים. זה נותן הזדמנות טובה ליישם סגנונות רבים ושונים בפונקציות הממשק.
- Responsive Grid System היא קבוצה פופולרית של כלים מגוונים. קל ליישום ואינו דורש ידע מעמיק. כולל מגוון רחב של אינפוגרפיקות.
- GUMBY - מסגרת CSS המתהדרת בהיענות גמישה וכלי עבודה נהדרים.
- Cookies - מאפשר לך ליישם תמונות רספונסיביות. מלווה אוטומטית קבצים המבוקשים על ידי הדפדפן.
- ExpressionEngine הוא דרך נוספת ליצור תמונות רספונסיביות. קובע אם המכשיר נייד, מסוגל לשנות תמונות לרזולוציה הנדרשת.
- ProtoFluid - מספק אב טיפוס מהיר. מתאים לכל סוגי המכשירים.
