מבוא

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

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

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

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

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

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

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

​​

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

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

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

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

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

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

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

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

מסכים קטנים

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

אתרים נפרדים

אפשרות אחת היא ליצור תת-דומיין נפרד למבקרים בנייד. אבל אז צריך לשמור על שני ה-codebase והעיצובים נפרדים. כדי להפנות מבקרים לכתובת אחרת בנייד, צריך לבצע ניתוח של סוכן המשתמש, פעולה שעלולה להיות לא אמינה ולזייף אותה בקלות. מטעמי פרטיות, 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 מאפשר למעצבים לקבל החלטות לגבי הנחיות ליצירת גרפיקה על סמך יחסי המסך.

בחינת ההבנה

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

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