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

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

בסוף הפוסט הזה אתם תהפכו למוסמכי "Responsive" מטעם הבלוג לעיצוב גרפי וטכנולוגיה (שורה שכדאי להוסיף לרזומה). בנוסף, אתם תדעו איך לבנות אתר רספונסיבי כמו בדוגמה הזאת.

מה זה עיצוב רספונסיבי (Responsive Web Design)?

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

עיצוב רספונסיבי הוא מושג שנולד בעקבות עלייתם של הסמארטפונים, הטאבלטים ולמעשה כל הטכנולוגיות ששינו את הדרך שבה אנחנו צורכים תוכן בווב. אם עד לפני כמה שנים גלישה באינטרנט נעשתה דרך מחשבי דסקטופ (נייחים) או מחשבים ניידים ברזולוציות זהות יחסית – מה שהיה מאוד נוח למפתחים ומעצבים ודרש מהם עיצוב קבוע ולא משתנה, הרי שהיום קיימים מאות מכשירים מהם ניתן לגשת לאתרי אינטרנט כמו סמארטפונים, טאבלטים, מחשבים נייחים, ניידים ואפילו טלויזיות – בהם צריך להתחשב, מכיוון שרוב הסיכויים שגישה לאתר אינטרנט שהותאם למחשב דסקטופ, לא יתאים לתצוגה במכשיר שמלכתחילה גודל המסך שלו קטן ב10" אינצ'ים לפחות… אותו כנ"ל לגבי מסכי טלויזיה או אפילו מסכי מחשב (שרק ממשיכים לגדול), אם התאמתי את האתר לרוחב מסוים – צפיה במסך רחב יותר יתן ליוזר יותר מדי שטח מת (White Space) ויפגע בחווית הגלישה שלו.

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

איך יוצרים עיצוב רספונסיבי?

יש כמה שיטות לפיתוח עיצוב אתר רספונסיבי אחת מהם היא שימוש בג'אווה סקריפט. הסקריפט שנכתוב יבדוק את הרוחב של מסך המכשיר ולפי זה יטען את קובץ הCSS הרלוונטי. השיטה הזאת נחמדה, אבל יש בה בעיתיות מסוימת – מה קורה בEvent של Window.resize? האם נצטרך להחליף בין הסטיילים השונים? האם נצטרך לטעון את כל הסטיילים מראש? זה יעיב על הביצועים של האתר. אז אולי נטען רק את הסטייל הלרוונטי? אבל אז יכול לקרות מצב שבו העמוד לא יקבל סטיילים (עד שהקובץ יסיים להטען) – גם זה פתיר, אבל אתם מבינים לאן אני חותר…

שיטה נוספת – השיטה בה אני הולך להתמקד היא שימוש CSS3 Media Queries. אחד משבעת נפלאות הCSS3.

איך משתמשים בCSS3 Media Queries?

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

• סמארטפונים: 320px.
• טאבלטים: לאורך – 768px, לרוחב – 1024px.
• דסקטופ + ניידים: 1024px ומעלה.

כך שלמעשה כשאנחנו באים לבנות את קובץ הCSS ומשתמשים בMedia Queries נצטרך להתחשב בלפחות שלושה מצבים. תזכרו את זה.

בואו נתחיל מהHTML.

[html]

// HTML5 Markup
<div id="wrapper">
<header>This is my header</header>
<section>Main Content area</section>
<aside>Sidebar</aside>
<footer>Footer Area</footer>
</div>

[/html]

השתמשתי בתגיות המארקאפ החדשות של HTML5 ויצרתי שלד לאתר מאוד בסיסי. יש לנו איזור Header, איזור תוכן ראשי שמחולק ל2 (section וaside) ואיזור Footer – כולם עטופים בDIV בשם Wrapper.

נמשיך עם טעינת 2 קבצי CSS לתגית ה"head" בHTML שלנו.
הקובץ הראשון: style.css – יכיל את כל הסטיילים הקשורים לעמוד ולא תלויים ברוחב המסך. צבעים, רקעים, מצבי Hover, ריווחים פנימיים וכו'…
בנוסף, הם גם יכילו עיצוב מבנה דיפולטיבי לשלד האתר.

[html]
<link href="style.css" rel="stylesheet" />
[/html]

קובץ הCSS השני: responsive.css – שהוא הקובץ המעניין פה, יטפל בשבילינו בכל מה שקשור למכשירים ולרחבים השונים בהם נרצה לבצע את הקוסטומיזציות שלנו.

[html]
<link href="responsive.css" rel="stylesheet" />
[/html]

בואו נעיף מבט במה שהולך שם בפנים.

[css]

@media screen and (max-width: 960px) { … }

@media screen and (max-width: 758px) { … }

@media screen and (max-width: 480px) { … }

[/css]

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

[css]@media screen and (max-width: 480px) { … }[/css]

למעשה, בשורה הקטנה הזאת נוצר הקסם. מה שקורה פה זו איזושהי הצבה של תנאי: אם סוג המדיה שאנחנו נמצאים בה היא מסוג Screen (ולא Print – מדיית הדפסה) וגם רוחב המסך בו אנחנו נמצאים מגיע למקסימום – 480 פיקסלים (שזה הרוחב של מסך המכשיר), תתייחס לכל הסטיילים שכתובים בתוך הסוגריים המסולסלות.
מה יקרה למסכים שהרוחב שלהם הוא מעבר ל480 פיקסלים? הם יקבלו את העיצוב של הMedia Querie הבא בתור (במקרה שלנו – השורה השניה שמתייחסת ל758 פיקסלים).

בואו נעבור על כל אחד מהתנאים ונראה איזה קוד מכניסים לתוכו.
במקרה והמסך הוא עד רוחב 960px:

[css]
@media screen and (max-width: 960px){
#wrapper {
width: 758px;
overflow: hidden;
}
section {
width: 420px;
}
aside {
width: 230px;
}
}
[/css]

נקטין את הרוחב של ה-DIV העוטף ל758, ונקטין בהתאם את הרוחב של איזור התוכן ואיזור הווידג'טים.

במקרה ורוחב המסך הוא עד 758px (מצב אורך של טאבלט ממוצע):

[css]
@media screen and (max-width: 758px){
#wrapper {
width: 480px;
}
section, aside {
float: none;
width: 440px;
}
}
[/css]

נקטין את הרוחב של הDIV העוטף ל480 פיקסלים ושימו לב שבמקרה כזה אני כבר מעביר את המיקום של איזור הווידג'טים אל מתחת לאיזור התוכן הראשי (הSection) – אני עושה את זה ע"י ביטול ההצפה (הFloat) של שני האלמנטים. חוץ מזה אני גם נותן להם רוחב קבוע של 440px.

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

[css]
@media screen and (max-width: 480px){
#wrapper {
max-width: 480px;
width: auto;
margin: 20px;
}
section, aside {
float: none;
width: 92%;
padding: 4%;
}
}
[/css]

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

את התוצאה הסופית תוכלו לראות כאן.

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