מבוא

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

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

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

בחירות עיצוב מוקדמות

מפתחים יצרו אתרים עם רוחב קבוע או עם פריסות נוזליות.

עיצוב ברוחב קבוע

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

אתר Microsoft עם שתי עמודות פשוטות של טקסט וסרגל ניווט.
אתר Microsoft בסוף שנות ה-90 של המאה ה-20 תוכנן לרוחב של 640 פיקסלים. צילום מסך מ-archive.org

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

באתר של Microsoft נעשה שימוש בעיצוב של שלוש עמודות, שמבוסס בעיקר על טקסט.
אתר Microsoft מתחילת המאה ה-20 תוכנן לרוחב של 800 פיקסלים. צילום מסך מ-archive.org

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

​​

אתר Microsoft עם עיצוב מורכב יותר שכולל תמונות וגם טקסט.
אתר Microsoft באמצע שנות ה-2000, שתוכנן לרוחב של 1,024 פיקסלים. צילום מסך מ-archive.org

בין אם מדובר ב-640, 800 או 1, 024 פיקסלים, הבחירה של רוחב ספציפי אחד לעיצוב נקראת 'עיצוב ברוחב קבוע'.

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

פריסה צרה עם הרבה שטח לבן מסביב.
אתר Yahoo!‎ מתחילת שנות ה-2000, כפי שהוא מוצג בדפדפן שרחב יותר מהעיצוב של האתר ברוחב 800 פיקסלים. צילום מסך מ-archive.org

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

אתר שנראה חתוך בצד שמאל כי הוא רחב מדי לאזור התצוגה.
אתר Yahoo!‎ מתחילת שנות ה-2000, כפי שהוא מוצג בדפדפן צר יותר מהעיצוב של האתר ברוחב 800 פיקסלים. צילום מסך מ-archive.org

פריסות נוזליות

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

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

פריסה שמכווצת בחלון צר.
פריסה דינמית של ויקיפדיה מאמצע שנות ה-2000, כפי שהיא נראית בחלון דפדפן צר. ם מסך מ-archive.org
פריסה מורחבת אופקית עם שורות ארוכות מאוד.
הפריסה הנוזלית של ויקיפדיה מאמצע המאה ה-20, כפי שהיא נצפתה בחלון דפדפן רחב. צילום מסך מ-archive.org

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

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

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

פיתוח פתרונות לגדלים שונים של מסכים

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

אתרים נפרדים

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

פריסות מותאמות

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

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

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

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

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

עיצוב אינטרנט מותאם

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

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

המונח הזה נטבע על ידי איתן מרקוטה במאמר ב-A List Apart בשנת 2010.

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

  1. רשתות נוזליות
  2. מדיה נוזלית
  3. שאילתות מדיה

הפריסה והתמונות של אתר רספונסיבי ייראו טוב בכל מכשיר. אבל הייתה בעיה אחת.

רכיב 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 כדאי לעצב דפי אינטרנט ברוחב קבוע?

false
true

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

מסכים רחבים
מסכים אנכיים
כל המסכים
מסכים ממוצעים
מסכים קצרים
מסכים צרים

שלושת הקריטריונים המקוריים לעיצוב רספונסיבי הם?

טיפוגרפיה נוזלית
רשתות נוזל
רשתות מותאמות
שאילתות מדיה
עיצוב ברוחב קבוע
מדיה נוזלית

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