עיצוב רספונסיבי: הכח של media queries

עיצוב אתר רספונסיבי

המאמר תורגם ונערך על בסיס המאמר הבא: http://googlewebmastercentral.blogspot.co.il/2012/04/responsive-design-harnessing-power-of.html

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

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

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

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

הטמעה

כנקודת התחלה, יש להטמיע סימון פשוט שמאפשר זרימה של תוכן הדף במכשירים שונים. במקום להגדיר בקובץ ה-css רוחב מדוייק של Container elements (ה״קופסאות״ או ה״מיכלים״ שמגדירים את תבנית העיצוב של הדף), נעשה שימוש ב-max width (רוחב מקסימאלי שאותה ״קופסה״ יכולה לקבל).

במקום הגדרת גובה בפיקסלים, נעשה שימוש ב-min-height (גובה מינימאלי), כדי שפונטים גדולים או תכנים מרובי שורות לא יחרגו מגבולות ה״קופסאות״. וכדי למנוע הצגת תמונות ברוחב קבוע במכשירים שונים, מטמיעים את הפקודה הבאה בקובץ ה-css:

img {max-width:100%;}

עיצוב שאינו מגדיר באופן קשיח את גבולות האלמנטים שבו, או עיצוב ״נוזלי״ בשפה מקצועית (Liquid layout), מהווה נקודת התחלה טובה, אך עדיין חסרה. מזלנו הוא שאנחנו יכולים לעשות שימוש ב-media queries (או שאילתות מדיה בתרגום חופשי) הנתמכות על ידי דפדפנים מודרניים, כולל אינטרנט אקספלורר 9 ומעלה, ועל ידי רוב המכשירים הניידים. שימוש ב-media queries עושה את ההבדל בין אתר שמוצג בסלולר בצורה מגושמת ולא נוחה, לבין אתר שמנצל את הרוחב המוגבל כדי לשנות את זרימת המידע בדף. לפני שנציג את אופן השימוש ב-media queries, נראה כיצד מכשירי טלפון חכמים מציגים את עצמם לדפדפני האינטרנט.

viewports

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

בכדי לגרום לדפדפן להציג את הדף באופן קריא יותר, יש לעשות שימוש בתגית המטה viewport באופן הבא:

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

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

אחד היתרונות המעשיים בהגדרת width = device-width בתגית המטה viewport, הוא שהתגית מתעדכנת כאשר הגולש משנה את האוריינטציה (אורך – רוחב) בטלפון החכם או במחשב הלוח (Tablet). שימוש משולב בתגית המטה viewport וב-media queries מאפשר לבצע התאמה של התצוגה כאשר המשתמש מסובב את המכשיר שלו:

@media screen and (min-width:480px) and (max-width:800px) {

// הנחיות עיצוב עבור מכשירי טלפון חכמים במצב תצוגת רוחב, טאבלטים או מסכי מחשב צרים

}

@media screen and (max-width: 479px) {

// הנחיות עיצוב עבור מכשירי טלפון חכמים במצב רגיל

}

ייתכן ותדרשו לנקודות עצירה שונות, בהתאם לזרימת התוכן באתר שלכם ולנראות שלו במכשירים השונים. במקום זאת, ניתן לעשות שימוש ב-media query בשם orientation כדי להתייחס להבדלי התצוגה בהתאם למצב הצפיה במכשיר:

@media all and (orientation: landscape) {

// (הנחיות עיצוב לצפיה במצב מאונך (נוף

}

@media all and (orientation:portrait) {

// הנחיות עיצוב לצפייה במצב מאוזן

}

דוגמה ל-media query

ניקח לדוגמה את הדף הבא:

http://www.google.com/about

הוראות העיצוב של הדף מתבססות על עיצוב ״נוזלי״ של האלמנטים השונים, אך בנוסף לכך קיימות מספר media queries כדי לספק חווית גלישה משופרת בצפיה במסכים של טאבלטים ומכשירי טלפונים חכמים. במקום להגדיר רזולוציה של מכשיר ספציפי, הוכנסו מספר רב של נקודות עצירה בהגדרות הרוחב של המסך. עבור רזולוציות שגבוהות מ-1,024 פיקסלים, הוגדר העיצוב המקורי של הדף, על בסיס רשת של 12 טורים.

עבור רזולוציות של בין 801 פיקסלים ל-1,024 פיקסלים, נראית גרסה קצת יותר מכווצת של הדף, הודות להגדרות העיצוב ה״נוזלי״. רק כאשר הרזולוציה של המסך צונחת ל-800 פיקסלים, תוכן שאינו נחשב למהותי נשלח להצגה בתחתית הדף:

@media screen and (max-width: 800px) {

// הנחיות עיצוב המתייחסות לרזולוציה מקסימאלית של 800 פיקסלים

}

הגדרת ה-view port האחרונה מתייחסת למכשירי טלפון חכמים:

@media screen and (max-width: 479px) {

// הנחיות עיצוב המתייחסות לרזולוציה מקסימאלית של 479 פיקסלים

}

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