כבר מההתחלה, האינטרנט תוכנן להיות בלתי תלוי בחומרה ובמערכת ההפעלה שבחרתם. כל עוד יש לכם חיבור לאינטרנט, תוכלו לגשת לרשת האינטרנט.
בימים הראשונים של האינטרנט, רוב האנשים השתמשו במחשבים שולחניים. כיום, האינטרנט זמין במחשבים נייחים, במחשבים ניידים, בטאבלטים, בטלפונים מתקפלים, במקררים ובמכוניות. אנשים מצפים בצדק שהאתרים ייראו טוב בכל מכשיר שבו הם משתמשים. עיצוב רספונסיבי מאפשר זאת.
עיצוב רספונסיבי הוא לא הגישה הראשונה לעיצוב אתרים. בשנים שלפני עיצוב רספונסיבי, מעצבים ומפתחים של אתרים ניסו הרבה שיטות שונות.
בחירות עיצוב מוקדמות
מפתחים יצרו אתרים עם רוחב קבוע או עם פריסות נוזליות.
עיצוב ברוחב קבוע
בתחילת שנות ה-90, כשהאינטרנט התחיל לצבור פופולריות, רוב המסכים היו בגודל 640 פיקסלים רוחב על 480 פיקסלים גובה. אלה היו צינורות קרן קתודית קמורים, בניגוד למסכי גביש נוזלי שטוחים שיש לנו היום.
בימים הראשונים של עיצוב האינטרנט, היה בטוח לעצב דפי אינטרנט ברוחב 640 פיקסלים. אבל בעוד שטכנולוגיות אחרות כמו טלפונים ומצלמות נעשות קטנות יותר, המסכים נהיו גדולים יותר (ולבסוף, שטוחים יותר). תוך זמן קצר, רוב המסכים היו בגודל 800 על 600 פיקסלים. העיצובים באינטרנט השתנו בהתאם. מעצבים ומפתחים התחילו להניח ש-800 פיקסלים היא הגדרת ברירת המחדל הבטוחה.
לאחר מכן המסכים גדלו שוב. 1024 על 768 הפכה לברירת המחדל. זה נראה כמו מירוץ חימוש בין מעצבים של אתרים לבין יצרני חומרה.
בין אם מדובר ב-640, 800 או 1, 024 פיקסלים, הבחירה של רוחב ספציפי אחד לעיצוב נקראת 'עיצוב ברוחב קבוע'.
אם מציינים רוחב קבוע לפריסת האתר, הפריסת נראית טובה רק באותו רוחב ספציפי. אם למבקר באתר יש מסך רחב יותר מהרוחב שבחרתם, יהיה בזבוז מקום במסך. אפשר למרכז את התוכן בדפים כדי לחלק את המרחב בצורה שווה יותר (במקום להשאיר מקום ריק בצד אחד), אבל עדיין לא תיהנו מכל המרחב הזמין.
באופן דומה, אם מבקר מגיע עם מסך צר יותר מהרוחב שבחרתם, התוכן לא יתאים לפורמט אופקי. הדפדפן יוצר סרגל סריקה – המקבילה האופקית לסרגל גלילה – והמשתמש צריך להזיז את כל הדף שמאלה וימינה כדי לראות את כל התוכן.
פריסות נוזליות
רוב המעצבים השתמשו בפריסות ברוחב קבוע, אבל חלק מהם בחרו ליצור פריסות גמישות. במקום להשתמש ברוחב קבוע לפריסות, אפשר ליצור פריסה גמישה באמצעות אחוזים לרוחב העמודות. העיצובים האלה מתאימים למצבים רבים יותר מאשר פריסה ברוחב קבוע שנראית טוב רק בגודל ספציפי אחד.
הגרסאות האלה נקראו פריסות נוזליות. עם זאת, פריסה דינמית עשויה להיראות טובה במגוון רחב של רוחבים, אבל היא נראית פחות טובה בקצוות. במסך רחב, הפריסה נראית מוארכת. במסך צר, הפריסה נראית דחוסה. שני התרחישים לא אידיאליים.
אפשר לצמצם את הבעיות האלה על ידי שימוש ב-min-width
וב-max-width
בפריסה.
אבל בכל גודל מתחת לרוחב המינימלי או מעל לרוחב המקסימלי, יהיו לכם אותן בעיות שתהיה לכם בפריסה עם רוחב קבוע.
במסך רחב, חלק מהמסך לא ישמש למטרה כלשהי.
במסך צר, המשתמש יצטרך להזיז את כל הדף שמאלה וימינה כדי לראות את כל התוכן.
המילה גמיש היא רק אחד מהמונחים שמשמשים לתיאור סוג הפריסה הזה. עיצובים כאלה נקראים גם פריסות גמישות או פריסות נוזליות. המונחים היו זורמים כמו הטכניקה.
פיתוח פתרונות לגדלים שונים של מסכים
במאה ה-21, האינטרנט המשיך לגדול ולהתרחב. כך גם צגים. אבל הגיעו מסכים חדשים שהיו קטנים יותר מכל מכשיר שולחני. עם הופעת הטלפונים הניידים עם דפדפני אינטרנט מלאים, המעצבים ניצבו בפני דילמה. איך הם יכולים להבטיח שהעיצובים שלהם ייראו טוב במחשב שולחני ובטלפון נייד? הם נזקקו לדרך לעצב את התוכן שלהם למסכים ברוחב של 240 פיקסלים לכל היותר, ורוחב של אלפי פיקסלים לכל היותר.
אתרים נפרדים
אפשרות אחת היא ליצור תת-דומיין נפרד למבקרים בנייד. אבל אז תצטרכו לנהל שני בסיסים נפרדים של קוד ועיצובים נפרדים. כדי להפנות מחדש מבקרים במכשירים ניידים, צריך לבצע ניפוי סוכן משתמש, שעלול להיות לא מהימן ולאפשר זיופים. ב-Chrome הקטין את מחרוזת סוכן המשתמש כדי למנוע יצירה של טביעת אצבע פסיבית כזו. בנוסף, אין קו ברור בין נייד ללא נייד. לאיזה אתר אתם שולחים מכשירי טאבלט?
פריסות מותאמות
במקום ליצור אתרים נפרדים בתת-דומיינים שונים, אפשר ליצור אתר אחד עם שתיים או שלוש פריסות ברוחב קבוע.
כששאילתות מדיה הגיעו אל שירות ה-CSS בפעם הראשונה, פתחנו בכך את ההזדמנות להפוך את הפריסות לגמישות יותר. עם זאת, מפתחים רבים עדיין העדיפו ליצור פריסות ברוחב קבוע. אחת השיטות כללה מעבר בין כמה פריסות ברוחב קבוע בגדלים שצוינו. יש אנשים שקוראים לזה עיצוב אדפטיבי.
עיצוב אדפטיבי אפשר למעצבים לספק פריסות שנראות טוב בכמה גדלים שונים, אבל העיצוב מעולם לא נראה טוב כשצופים בו בין הגדלים. הבעיה של שטח עודף נמשכה, אבל היא לא הייתה חמורה כמו בפריסה ברוחב קבוע.
שאילתות מדיה של CSS מאפשרות לספק לאנשים את הפריסה הקרובה ביותר לרוחב הדפדפן שלהם. עם זאת, בגלל המגוון הרחב של גדלי המכשירים, סביר להניח שהפריסה לא נראית מושלמת לרוב האנשים.
עיצוב אינטרנט מותאם
אם פריסות מותאמות הן שילוב של שאילתות מדיה ופריסות ברוחב קבוע, עיצוב אינטרנט רספונסיבי הוא שילוב של שאילתות מדיה ופריסות ניידות.
המונח הזה נטבע על ידי איתן מרקוטה במאמר ב-A List Apart בשנת 2010.
איתן הגדיר שלושה קריטריונים לעיצוב רספונסיבי:
- רשתות נוזליות
- מדיה נוזלית
- שאילתות מדיה
הפריסה והתמונות של אתר רספונסיבי ייראו טוב בכל מכשיר. אבל הייתה בעיה אחת.
רכיב meta
עבור viewport
דפדפנים בניידים נאלצו להתמודד עם אתרים שתוכננו עם פריסות ברוחב קבוע למסכים רחבים יותר. כברירת מחדל, דפדפנים לנייד הניחו שרוחב של 980 פיקסלים הוא הרחב שעבורו אנשים מתכננים (והם לא טעינו). כך, גם אם השתמשת בפריסה נוזלית, הדפדפן יחיל רוחב של 980 פיקסלים ולאחר מכן יקטין את דף האינטרנט המעובד לרוחב הממשי של המסך.
אם אתם משתמשים בעיצוב רספונסיבי, צריך להורות לדפדפן לא לבצע את ההתאמה לעומס.
אפשר לעשות זאת באמצעות רכיב meta
ב-head
של דף האינטרנט:
<meta name="viewport" content="width=device-width, initial-scale=1">
יש שני ערכים, המופרדים בפסיקים.
השורה הראשונה היא width=device-width
.
כך המערכת תורה לדפדפן להניח שהרוחב של האתר זהה לרוחב המכשיר (במקום להניח שהרוחב של האתר הוא 980 פיקסלים).
הערך השני הוא initial-scale=1
.
הפעולה הזו מציינת לדפדפן כמה קנה מידה צריך לעשות או כמה קטן הוא צריך.
באמצעות עיצוב רספונסיבי, לא תרצו שהדפדפן יבצע שינוי קנה מידה בכלל.
אחרי שמוסיפים את הרכיב meta
, דפי האינטרנט מוכנים להיות תגובה.
עיצוב רספונסיבי ומודרני
עכשיו אנחנו יכולים ליצור אתרים רספונסיביים בדרכים שחורגות בהרבה מגודלי שדה התצוגה.
התכונות של מדיה מעניקות למפתחים גישה להעדפות של המשתמשים ומאפשרות להם לספק חוויות מותאמות אישית.
שאילתות בקונטיינרים מאפשרות לרכיבים להיות הבעלים של המידע שלהם לגבי תגובה.
הרכיב picture
מאפשר למעצבים לקבל החלטות לגבי כיוון אמנותי על סמך יחסי גובה-רוחב של המסך.
בדיקת ההבנה
בוחנים את הידע שלכם על עיצוב אתרים רספונסיבי
האם בשנת 2021 כדאי לעצב דפי אינטרנט ברוחב קבוע?
בדרך כלל, פריסות נוזליות מתקשות להתאים את עצמן לאילו גדלים של מסכים?
שלושת הקריטריונים המקוריים לעיצוב רספונסיבי הם?
עיצוב רספונסיבי הוא עולם מרגש ומתרחב של אפשרויות. בשאר הקורס נסביר על הטכנולוגיות האלה ואיך משתמשים בהן כדי ליצור אתרים יפים ורספונסיביים לכולם.