תגובות

מדריך: איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries

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

1
2
3
4
5
6
7
8
9
<body>
    // HTML5 Markup
    <div id="wrapper">
        <header>This is my header</header>
        <section>Main Content area</section>
        <aside>Sidebar</aside>
        <footer>Footer Area</footer>
    </div>
</body>

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

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

1
<link href="style.css" rel="stylesheet" />

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

1
<link href="responsive.css" rel="stylesheet" />

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

1
2
3
4
5
@media screen and (max-width: 960px) { ... }

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
@media screen and (max-width: 960px){
    #wrapper {
        width: 758px;
        overflow: hidden;
    }
    section {
        width: 420px;
    }
    aside {
        width: 230px;
    }
}

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

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

1
2
3
4
5
6
7
8
9
@media screen and (max-width: 758px){
    #wrapper {
        width: 480px;
    }
    section, aside {
        float: none;
        width: 440px;
    }
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
@media screen and (max-width: 480px){
    #wrapper {
        max-width: 480px;
        width: auto;
        margin: 20px;
    }
    section, aside {
        float: none;
        width: 92%;
        padding: 4%;
    }
}

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

רק עוד דבר אחד קטן. כדי שתגיות הmedia והעיצוב יעבדו גם במובייל תצטרכו להוסיף את תגית הmeta הבאה לתגית הhead בHTML שלכם:

1
<meta name='viewport' content='width=device-width, initial-scale=1.0'>

והתוצאה הסופית:

לחצו כדי לראות


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

קצת על דניאל שטרנליכט

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

34 תגובות לפוסט "מדריך: איך לעצב אתר רספונסיבי בעזרת CSS3 Media Queries"

  • אחד הטוטוריאלים החזקים :) תודה דניאל!

  • אחלה הסברים ודרך לעבוד אבל למה להגביל ל-3 או 4 מצבים בלבד כאשר יש אין-ספור מצבים ולא רק בקטע של מסכים.

    • להפך – אני מעודד התייחסות לכמה שיותר מצבים, אם תשים לב כתבתי שהמינימום של המצבים אליהם נתייחס הוא 3.

      • כאשר "שואלים" למשל:
        @media screen and (max-width: 758px)
        זה אומר מסך של 758 פיקסל. מה עם מסך של 640? או 320? או 1920?
        או שאני "שאול" את הלקוח "מה הרזולוציה שלך" ומתנהג לפי התשובה או אם רוצים לעשות עיצוב מגיב אמיתי אז אין צורך בשום שאלה או הגבלה.

        • Desktop and laptop resolutions: 1920×1200 1680×1050 1600×1200 1440×900 1366×768 1280×1024 1280×800 1280×768 1152×864 1024×768 800×600

          Tablet resolutions: 800×1280 768×1024

          High-end phone resolutions: 640×960 360×640 320×480 320×396 240×320

        • לא מדויק, הכניסה לתנאי / לשאלה הזאת תהיה רלוונטי כל עוד רוחב המסך של היוזר קטן מ758 פיקסלים או לחילופין – במידה והתייחסת לרוחב קטן יותר כמו למשל 640 אז הקוורי הקודם יתבטל והדפדפן ילך לפי הקוורי החדש.

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

    • אתה צריך להתייחס לכמות הלייאוטים שאתה רוצים ליצור.

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

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

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

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

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

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

      כך שאחוזים במקרה הזה לא יעזרו.

  • ימים יגידו…

  • תודה רבה על הפוסט
    אהבתי אותו מאוד

  • בהחלט לא פשוט כל עניין ה- CSS3 הזה
    שוב נדרשים ללמוד חומר חדש נעבור על כל האתר ונלמד מחדש
    האם יש לך גם סרטוני הדרכה בוידיאו?

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

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


  • גיל אלרואי

    הי דניאל, אני מסכים איתך: עיצוב רספונסיבי עובד באופן מושלם עם מספר קטן יחסית של Media Queries – צריך רק להציץ בקוד ה-CSS של אתרים רספונסיביים שווים במיוחד וללמוד (הבוסטון גלוב, לדוגמא). החוכמה היא (וזה לא מצוי במדריך שלך – אולי בפרק הבא?) לגרום גם לתמונות ובעיקר לרקעים להיות רספונסיביים. זה קל בטירוף כשמבינים איך לעשות את זה. אחוזים משחקים תפקיד ובגדול, וגם… em – למי שכברר שכח. מה שכן, חייבים רקע במתמטיקה (צריך לדעת לבצע פעולות חילוק).

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

    אני ממליץ בחום על ספר דק ומאד אינטיליגנטי שכתב אחד מהחלוצים בתחום: http://www.abookapart.com/products/responsive-web-design


  • גיל אלרואי

    ולכל מי שמעוניין, כמה frameworks שיעזרו לכם לבנות אתר רספונסיבי במהירות וביעילות:

    http://foundation.zurb.com
    http://www.getskeleton.com
    http://www.amazium.co.uk
    http://lessframework.com

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

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

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

        • דניאל, ראשית, סופסוף מישהו שעונה, מפתח דיון, ולא מתקיף. תענוג :-)
          ולעניין:
          1א. נכון, השימוש בגלילה במובייל נפוץ, בעיקר תודות לפייסבוק. ועדיין, זה אינו עיצוב מיטבי. בוא ניקח לדוגמא אתר המציג 15 תמונות בווב (נניח, סוכנות לייצוג אמנים), בגריד של 5 לרוחב בשלוש שורות. RWD יהפוך את זה לנקניק של 15 תמונות במובייל. ברור שעדיף להשתמש במובייל בגלריית תמונות.
          1ב. הוא ניקח את אחד האתרים הנחשבים בעולם ה-RWD. הבוסטון גלוב. תפתח אותו במובייל ותגיד לי אתה, בכנות, אם ככה היית בוחר לעצב אותו למובייל. קשה להתמצא, קשה למצוא את מה שרוצים, אין סידור הגיוני.
          2. ה-CSS, אשמח ללינק לאתר בו קבצי הCSS סבירים. לא יצא לי להתקל בכזה. ראה ערך, למשל, אותו בוסטון גלוב.
          3. עכשיו בוא ניגע רגע בפרקטיקה: עברו שנתיים. עיצוב הגרידים של HTML5 יצא מהאופנה בווב. אני רוצה להחליף את המראה. זה בהכרח ישפיע על כל שאר המופעים. למה? למה זה טוב?
          או לחילופין, אני רוצה לעשות עיצוב מחדש למובייל – שוב, כי השתנו דברים. למה לעשות את הקפלינג הזה?
          4. אשמח לשמוע על יתרון של הרספונסיב (שלא קשור לדעתה של גוגל). רמז:ניהול תוכן במקום יחיד הוא יתרון שיש לו מענה.

  • פוסט מאוד ברור ונעים לקריאה ישר כח

  • שני אתרים רספונסיבים בצורה קצת שונה:

    http://the100.co.il/
    הקוביות "מסתדרות" ע"פ רוחב הדפדפן.
    שימוש ב-jquery.vgrid, עם קצת עזרה מ-easing.

    http://www.hadarimstore.co.il/
    תמונת הרקע גדלה/קטנה בהתאם לרזולוציה, בגבול רוחב מסויים התמונה מתחלפת ע"מ לחסוך זמן העלאה של תמונה גדולה מדיי ברזולוציות נמוכות ותמונה באיכות נמוכה מדיי ברזולוציות גבוהות.
    שימוש ב-supersized.


  • טכנאי מחשבים

    אחלה מאמר תודה רבה

  • הפוסט מעולה, נח וקריא!! יש פוסטים נוספים בענין? כגון שימוש בתמונות רקע וכד'…

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

  • כיצד מחליטים מה הם רזולוציות המקסימום והמינימום?

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

  • שלום רב
    ברשותי אתר גיטרות (צירפתי את הלינק)
    שנבנה לפני כ 6 שנים בצורה די פרימיטיבית
    ומכיל אוסף קבצי php ללא מערכת ניהול
    אני מסתדר איתו ומצליח להוסיף ולהוריד טקסט תמונות וסרטונים
    כיוון שיש לי קצת ידע בתכנות
    השאלה שלי
    אם להפוך את האתר הזה למותאם מובייל יהיה מסובך מבחינה תכנותית
    או יחסית קל?
    תודה רבה
    דויד

  • אחלה פוסט, מאוד שימושי ויעיל
    תודה דניאל!

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

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים