ישר מההתחלה, רשת האינטרנט ברחבי העולם תוכננה להיות אגנוסטית. לא משנה איזו חומרה מותקנת אצלך. לא משנה באיזו מערכת הפעלה פועלת המכשיר. כל עוד אתם יכולים להתחבר לאינטרנט, אתם יכולים להיעזר באינטרנט.
בתחילת האינטרנט, רוב האנשים השתמשו במחשבים שולחניים. בימינו אפשר להשתמש באינטרנט במחשבים שולחניים, במחשבים ניידים, בטאבלטים, בטלפונים מתקפלים, במקררים ובמכוניות. אנשים מצפים בצדק שאתרים ייראו טוב, בכל מכשיר שבו הם משתמשים. זה אפשרי על ידי עיצוב רספונסיבי.
עיצוב רספונסיבי הוא לא הגישה הראשונה לעיצוב אתרים. בשנים שלפני העיצוב הרספונסיבי, מעצבי אתרים ומפתחים ניסו הרבה שיטות שונות.
עיצוב ברוחב קבוע
בתחילת שנות ה-90, כשהאינטרנט הפך לפופולרי לראשונה, לרוב המסכים היו מידות של 640 פיקסלים ברוחב של 480 פיקסלים ובאורך של 480 פיקסלים. אלה היו צינורות קרניים קמורות, לא כמו תצוגות הגבישים השטוחות שיש לנו עכשיו.
בימים המעצבים של עיצוב האתרים המוקדם, מומלץ לעצב דפי אינטרנט ברוחב של 640 פיקסלים. אבל בעוד שטכנולוגיות אחרות, כמו טלפונים ומצלמות, הצטמצמו למזעור, המסכים גדלו (ובסופו של דבר מחמיאים). עד כה, רוב המסכים היו במידות של 800 על 600 פיקסלים. העיצובים באינטרנט השתנו בהתאם. מעצבים ומפתחים התחילו להניח ש-800 פיקסלים הוא ברירת המחדל הבטוחה.
לאחר מכן המסכים גדלו שוב. 1024 על 768 הפכה לברירת המחדל. התחושה הייתה כמו מרוץ נשק בין מעצבי אתרים ליצרני חומרה.
בין אם היא הייתה 640, 800 או 1024 פיקסלים, בחירה של רוחב ספציפי אחד לעיצוב נקרא 'עיצוב ברוחב קבוע'.
אם מציינים רוחב קבוע לפריסה, הפריסה שלך תיראה טוב רק ברוחב הספציפי הזה. אם למשתמש שמבקר באתר יש מסך רחב יותר מהרוחב שבחרתם, יישאר מקום פנוי במסך. תוכל למרכז את תוכן הדפים כדי לפזר את השטח הזה בצורה שווה יותר (במקום להשאיר שטח ריק בצד אחד), אבל עדיין לא תנצלו את מלוא הפוטנציאל של השטח הזמין.
באופן דומה, אם מבקר מגיע עם מסך צר יותר מהרוחב שבחרתם, התוכן שלך לא יתאים לרוחב. הדפדפן יוצר סרגל סריקה - המקביל האופקי המקביל לסרגל גלילה - והמשתמש צריך להזיז את כל הדף שמאלה וימינה כדי לראות את כל התוכן.
פריסות נוזליות
רוב המעצבים השתמשו בפריסות ברוחב קבוע, אבל חלקם בחרו להפוך את הפריסות שלהם לגמישות. במקום להשתמש במידות רוחב קבועות לפריסות, תוכלו ליצור פריסה גמישה באמצעות אחוזים עבור רוחב העמודות. העיצובים האלה מתאימים במצבים רבים יותר, בהשוואה לפריסה ברוחב קבוע שנראית נכון רק בגודל ספציפי.
הן נקראו 'פריסות נוזליות'. עם זאת, בעוד שפריסה נוזלית תיראה טוב על פני מגוון רחב של רוחב, היא תתחיל להחמיר בקיצוניים. במסך רחב, הפריסה נראית מתוחה. במסך צר, הפריסה נראית דחוסה. שני התרחישים לא אידיאליים.
אפשר לצמצם את הבעיות האלה על ידי שימוש ב-min-width וב-max-width בפריסה.
עם זאת, בכל גודל שנמוכה מהרוחב המינימלי או גבוה מהרוחב המקסימלי, אירעו בעיות של פריסה ברוחב קבוע.
במסך רחב יש מקום שלא נוצל ויתבזבז.
במסך צר, המשתמש יצטרך להזיז את כל הדף שמאלה וימינה כדי לראות את הכול.
המילה נוזל היא רק אחד מהמונחים שמשמשים לתיאור פריסה מהסוג הזה. סוגי העיצובים האלה נקראו גם 'פריסות גמישות' או 'פריסות גמישות'. הטרמינולוגיה הייתה גמישה כמו השיטה.
מסכים קטנים
במאה ה-21, האינטרנט המשיכה להתרחב וגדול. כך גם צגים. אבל הגיעו מסכים חדשים שהיו קטנים יותר ממחשבים אחרים. עם השקת הטלפונים הניידים עם דפדפני האינטרנט הכוללים את כל התכונות, המעצבים עמדו בפני דילמה. איך הם יכולים להבטיח שהעיצובים שלהם ייראו טוב במחשב שולחני ובטלפון נייד? הם חיפשו דרך לעצב את התוכן שלהם כך שיתאים למסכים בגודל של עד 240 פיקסלים וברוחב של אלפי פיקסלים.
הפרדת אתרים
אפשרות אחת היא ליצור תת-דומיין נפרד למבקרים בנייד. אבל אז צריך לתחזק שני בסיסי קוד ועיצובים נפרדים. כדי להפנות מבקרים מחדש ממכשירים ניידים, user-agent sniffing, שעלולים להיות לא מהימנים ולזייף אותם בקלות. מחרוזת סוכן המשתמש של 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, האם היה בטוח לעצב דפי אינטרנט ברוחב קבוע?
פריסות נוזליות בדרך כלל מנסות להתאים את גודל המסך לגדלים מסוימים?
מהם שלושת הקריטריונים המקוריים לעיצוב רספונסיבי?
עיצוב רספונסיבי הוא עולם של אפשרויות מלהיב שהולך וגדל. בחלק הנותר של הקורס הזה תלמדו על הטכנולוגיות האלה ואיך להשתמש בהן כדי ליצור אתרים רספונסיביים לכולם.