עיצוב רספונסיבי – מה זה?

מבוא:

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

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

מה זה עיצוב רספונסיבי:

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

במהלך הזמן גדל שימוש במכשירים ניידים השונים איתה התפתחה גם הגישה והפכה למתודולוגיה הרבה יותר רחבה שקיבלה את השם Adaptive Web Design (AWD).

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

אתר LiquidAdapsive מגדיר 4 סוגים הנפוצים של עיצוב אתרים:

• עיצוב Static (סטטי) – אתר שבו גודל האתר קבוע ללא התייחסות ברזולוציה של דפדפן. בסיס חישוב רוחב הפריטים הוא קבוע בפיקסלים או ערכים אחרים. קביעת גודל קבוע בפיקסלים על בסיס רזולוציות נפוצות ביותר (800-1440).

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

מושגי יסוד:

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

1. רשת (Grid) – שטח עבודה בפועל, אזור שכולל בתוכו את כל האובייקטים של העיצוב.
2. מכולה (Container) – מעטפת של שורות, יכול להכיל בין שורה אחת למסר שורות.
3. שורה (Row) – שורה בודדת שבתוכה נמצאות כל העמודות (בד"כ 12 או 16).
4. עמודות (Columns) – אלמנט סופי שבתוכו נמצא תוכן האתר.
5. רווח בין העמודות (Gutters) – רווח בין שני עמודות בודדות.
6. ספריות מוכנות (Frameworks) – ספריות קוד מוכנות להטמעת עיצוב רספונסיבי (לדוגמה Bootstrap).

שיטות בעיצוב רספונסיבי:

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

• שיטת Mobile First בבסיסה עומדת חשיבה שמעצבים קודם כל מסך קטן (מסך טלפון 320 פיקסל) ומתקדמים למסכים גדולים בהדרגה. מסך קטן (320 פיקסל) מכיל כמות קטנה של אובייקטים שמופיעים בו זמנית במסך וקל יותר להוסיף אובייקטים כשר רוחב המסך מתרחב.
• שיטת Desktop First בבסיסה עומדת חשיבה שמעצבים קודם את המסך הרחב ביותר (מסך מחשב) ומתקדמים למסכים קטנים בהדרגה תוך כדי הקטנה או הסרה של האובייקטים במסך. למעשה שיטה הפוכה מMobile First וכרגע היא הכי נפוצה בקרב מעצבים.

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

הגריד הרספונסיבי – Container – Rows – Columns:

Container – תגית הרשית בהיררכיה שכוללת את התוכן בד"כ זה הוא section או div עם קלאס ששמו container. תפקידו של כל container הוא לשמש כמעטפת ראשית לאזורים באתר. יצרתי לעצמי כללים לשימוש בcontainer:

• רוחב שלcontainer תמיד 100% מהמסך.
• שימוש ב container לאזורים הראשיים כמו header, main וfooter בלבד, למעט מקרים של רקע.
• בקוד שלי container הוא התגית החידה שמקבלת רוחב 100%, לכן כשר בעיצוב נדרש להטמיע רקע לכל הרוחב מקצה לקצה אז אני משתמש בcontainer.

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

• רוחב הrow תמיד בפיקסלים ומשתנה בהתאם לדרישות העיצוביות.
• רוחב הרוב תמיד בגודל קבוע לכל מקפצה של המסך. משתדל לא להגדיר 100% רוחב (למסכים גדולים מ 1200 פקסל). המטרה של זה היא למנוע מצב שיש במסכים גדולים מדי (4-5K) תצוגה בעייתית. למעשה רוחב מקסימלי של תוכן נקבע מראש. באתרים שנדרש להם תמונות רוחביות, אני מגדיר להם container ללא row שהוא מקבל 100% רוחב.
• Row תמיד נסגר לאחר שסכום העמודות מגיע למכסה מקסימלית (בד"כ 12), למעט מקרים שבהם יש תוכן חוזר (מוצרים בחנות, תיק עבודות וכו…).
• אין מגבלה לכמות שורות בcontainer אחד.

Columns – תגיות הללו הם המבנה האחרון בשלד רספונסיבי והמורכב ביותר. מחלקים את הגריד כל פעם לשתיים (חצי חצי). הסטנדרט שהתקבע הוא 12 עמודות. אבל ניתן למצוא תשתיות עם 16 עמודות, חלק מהאתרים משמשים בשיטה של 4 עמודות (25% רוחב עמודה). בכל מקרה אני מתייחס ל 12 עמודות מסיבה מאוד פשוטה שrow מקסימלי שלי 1200 וזה מתחלק מצוין ב12.

כל שורה יכולה להכיל בתוכה מספר עמודות אבל סכום של כולם צריך להיות שווה ל 12. לדוגמה שתי עמודות ביחד נותנות לי רוחב של 200 פיקסל, 6 עמודות יחד 600 פיקסל וכך הלה. יצרתי לעצמי כללים לשימוש בcolumns:

• רווח בין העמודות gutters נקבע לפי הצורך הבא: אם אין צריך לעשות מסגרות (border) לעמודות או בין העמודות אז אפשר להשתמש בpadding פנימי וכל עמודה היא רוחב כללי חלקי 12. אם ישנו צורך לעשות מסגרת מבחוץ, הדרך הפשוטה זה div נוסף בתוך העמודה או במקום padding להשתמש בmargin (אם הגריד מאפשר את זה).
• עמודות השמישות ביותר הם 2,3,4,6,9,10 ו12 (צריך לקחת בחשבון שכל העמודות בעלות גודל קבוע במסכי ביניים, אבל במסכים הקטנים הפכים להיות 100%).
• לא להשתמש ב5 עמודות בצד אחד ו 7 בצד השני. הסיבה היא מאוד פשוטה, 7 גדול ב 2 מ 5 ונוצר עיוות ויזואלי.
• אם עמודה או עמודות אחרונות ריקות לא מוסיפים אותם, פשוט לסגור row.

דוגמאה לגריד ריספונסיבי:

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

סוגי חישובים לרוחב הגריד:

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

נקודות שבירה במסך Breakpoints:

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

הערה חשובה, לא להגזים בכמות נקודות שבירה. בד"כ 3-6 נקודות שבירה.

תכנות:

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

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

 <div class="container">
	<div class="row">
		<div class="column6"></div>
		<div class="column3"></div>
		<div class="column3"></div>
	</div>
	<div class="row">
		<div class="column8"></div>
		<div class="column4"></div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="column9"></div>
		<div class="column3"></div>
	</div>
</div> 

 .container {
	width:100%;
}
.row {
	width:1200px;
	margin:0 auto;
}
.column3, .column4, .column6, .column8 {
	float:left;
	display:inline-block;
	margin: 0 15px;
	min-height:1px;
	position:relative;
}
.column3{
	width:270px;
}
.column4{
	width:370px;
}
.column6{
	width:570px;
}
.column8{
	width:770px;
}
.column9{
	width:870px;
} 

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

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

רספונסיבי שיטת Javascript:

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

 var w = window.innerWidth; // חישוב של רוחב המסך
var rows = document.getElementsByClassName('row'); הקוד מחפש את כל התגיות עם קלאס row
if(w >= 1200){
	for(var i = 0; i < rows.length; i++) {
		rows[i].style.width = '1200px';
	}
} else if (w >= 960){
	for(var i = 0; i < rows.length; i++) {
		rows[i].style.width = '960px';
	}
} else if (w >= 768){
	for(var i = 0; i < rows.length; i++) {
		rows[i].style.width = '768px';
	}
} else{
	for(var i = 0; i < rows.length; i++) {
		rows[i].style.width = '100%';
	}
} 

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

רספונסיבי שיטת Media Query:

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

דוגמת אחוזים:

 .container {
	width:100%;
}
.row {
	width:1200px;
	margin:0 auto;
}
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
	float:left;
	display:inline-block;
	padding: 0 15px;
	min-height:1px;
	position:relative;
}
.column1{
	width:8.33%;
}
.column2{
	width:16.67%;
}
.column3{
	width:25%;
}
.column4{
	%width:33.33;
}
.column5{
	%width:41.67;
}
.column6{
	width:50%;
}
.column7{
	%width:58.33;
}
.column8{
	%width:66.67;
}
.column9{
	width:75%;
}
.column10{
	%width:83.33;
}
.column11{
	%width:91.67;
}
.column12{
	width:100%;
} 

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

תגיד @media מאפשרת התמקדות בגודל של מסך. בעזרת הגדרות min-width וmax-width הגדרתי את הטווח השפעה של הקוד.

 @media (min-width: 960px) and (max-width: 1199px) {
	.row {
		width: 960px;
	}
} 

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

 @media (min-width: 768px) and (max-width: 959px) {
	.row {
		width: 768px;
	}
} 

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

 @media (max-width: 767px) {
	.row {
		width:98%;
		margin: 1%;
	}
	.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 {
		width:100%;
	}
} 

במקרה האחרון הקביעה היא לכל המסכים הקטנים מ 768 פיקסל. בד"כ נהוג להגדיר הגדרות שונות למסכי טלפונים וטאבלטים קטנים. במקרה הזה הגדרת row 99% רוחב ו 1% מרווח מהצדדים מאפשר לתוכן לנצל 100% של המסך, כדי שזה יקרה בפועל כל הcolumns צריכים להיות שווים ולמלא את כל המסך.

כללים לכתיבת CSS:

1. התאמה מתבצעת בהתאם לרזולוציית הדפדפן ולא גודל פיקסלים של המכשיר. רזולוציה נקבעת בהתאם למושג שנקרה pixel ratio והנוסחה כזאת: רזולוציה בפועל חלקי pixel ratio תתן תוצאה של רזולוציה בפועל. רזולוציות נפוצות ניתן לראות באתר הזה.
2. רוחב הrow בנקודות שבירה שווה לרוחב מינימלי של מסך (רוחב הנקבע ב min-width של הmedia).
3. אין צורך לעשות media query לכל מסך ומסך, כדי להתייחס לטווחים סבירים. במילים אחרות לא לעשות לכל מסך Breakpoint משלו.
4. אין צורך להיצמד לגדלים אחידים של columns בכל Breakpoint. לדוגמה שכבר תיארתי עם 4 תמונות. במסך גדול עמודה4 תמונות מופיעות בשורה וכל תמונה בעלת רוחב 25%. במסך ביניים הגדרתי שתי שורות עם שתי תמונות – רוחב יהיה שווה ל50%. במסך הקטן ביותר – 4 שורות ועמודה אחת רוחב שווה ל 100%.
5. חשוב מאוד לזכור – שימוש באחוזים איננו מדויק וחסידי שיטת Pixel Perfect עשויים לקבל עיוותים קלים. הדוגמה הפשוטה היא שימוש ב6 יחידות של column2, בהגדרות CSS מוגדר רוחב של 16.67%. בחישוב מהיר 16.67*6=100.02. לבני אדם 0.02% זה לא מדד ומבחינת רובוט זה בעייתי והוא יוריד את העמודה האחרונה למעתה.

סיכום:

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

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

מקור התמונות:

1. תמונות סטטיות: FrontEnder.info מגזין מפתחי Front End ברוסית.

2. תמונות דינמיות: Front.com אופן סורס בלוג.