הגודל לא קובע

לפני זמן לא רב, מת מסך ה LCD הוותיק שלי והוא בן שלוש שנים וחודש. בדיוק חודש לאחר פקיעת האחריות בת שלוש השנים הוא החזיר את פיקסליו למקום שבו נחים הפיקסלים השרופים. אלפיה שהונחה אצל הקופאית ברשת שופרסל דיל זיכתה אותי במסך Benq חדש בעל מסך רחב ואלכסון של 20". 1680 פיקסלים לרוחב, 1050 פיקסלים לגובה זו הגדרת הרזולוציה שלי וכאן בדיוק מתחילה הבעיה או הדילמה.
רוחבו של העיצוב הנוכחי שלי הוא 780 פיקסלים ורוחבה של עמודת הטקסט עצמה הוא כמעט 500 פיקסלים ובמסך ברזולוציה של 800 פיקסלים לרוחב זה יושב בול. מצד שני, הפעם האחרונה שהשתמשתי ברזולוציה של 800×600 זה היה כשניסיתי לשחזר מחשב ישן בעזרת מסך 14 אינט'ש ישן שמצאתי במחסן. עם זאת, הגוגל אנליטיקס מתעקש (עד כמה שניתן להאמין לו) שלכ 7% מהמבקרים בבלוג אכן יש רזולוצית מסך של 800X600. על להגדיל חשבתי כבר בעבר אבל כשעבדתי על 17" השתמשתי ברזולוציה של 1280X1024 שגם אם היא משמשת כ 22% ממבקרי הבלוג עדיין היא לא רזולוציה טבעית. רוב המשתמשים מעדיפים, כך נראה, רזולוציה של 1024X800 וזה רק מגדיל את הדילמה.

עיצוב בעזרת CSS מאפשר שני סוגים עיקריים של עיצוב – קבוע ויחסי. עבור כל אובייקט שמקבל גדלים כפרמטר ניתן להשתמש בשני סימונים עיקריים – px (מייצג פיקסלים) או % (אחוזים). כך למשל, אם נרצה להגדיר תיבה שהרוחב שלה הוא 20 פיקסלים נשתמש בהגדרה: width: 20px.
הרעיון מאחורי העיצוב הקבוע אומר שהמעצב מגדיר מידות אחידות עבור כל רכיב באתר וככה הוא יוצג בכל הדפדפנים (ונניח לתאימות קוד ושונות דפדפנים בצד כרגע). זה מאפשר לבעל האתר לדאוג שהאתר שלו יראה זהה הן ברזולוציות נמוכות והן ברזולוציות גבוהות. אבל, על נוחות וודאות צריך לשלם וזה קורה בעיצוב קבוע בכמה נקודות:
א. הביזבוז.
אם האתר נבנה עבור רוחב של 800 פיקסלים, הרי שברוחב של 1280 פיקסלים יש כ 480 פיקסלים "מבוזבזים" במקרה הטוב זה יציג שוליים, במקרה הרע זה ימרח את הטמפלט בצורה מזוויעה. השימוש בבר צידי ושאר ריווחים גוזרים גם הם קופון נאה מהרוחב הכללי ולבסוף נשארים כאמור עם פחות מ 500 פיקסלים עבור הכתיבה. (שזה לא חריג. נענע משתמשים ב 500 , ynet בכ 430 ו NRG בכ 450).
ב. גמישות
השימוש ב Float על מנת לייצר שני אובייקטים זה לצד זה הוא נפוץ למדי. הבעיה היא, שאובייקט Float שמוגדר בגודל קבוע לא מסוגל להצטמצם. במילים אחרות, עיצוב שהותאם ל 1024 ישבר לחלוטין ב 800, אם כי אפשר לרתום את התכונה הזו על מנת לייצר אתר שמתאים לשני הרוחבים. מי שניסה לכווץ פעם חלון בוודאי ראה כיצד האובייקטים נדחסים עד השלב שבו הם מתחילים "ליפול" מהסדר שלהם.

העיצוב היחסי הוא הרבה יותר גמיש בעבור שתי הבעיות הללו. בשיטת העיצוב הזו מגדירים את רוחב כל תיבה ביחס למאת האחוזים המרכיבים את התיבה המכילה אותה. כך למשל, אם נגדיר את רוחב התיבה הראשית של הבלוג כ 90%, הרי שברוחב מסך של 800 פיקסלים נקבל עמודה בת 720 פיקסלים ואילו ברוחב של 1280 נקבל עמודה בת 1152 פיקסלים. בשני המקרים יתקבלו שוליים מינימליים (10% מרוחב המסך במקרה הלז) ויותר אזור יהיה זמין עבור התוכן. ככל שרוחב המסך יגדל ניתן יהיה לפרוס את הבלוג בצורה נוחה יותר, מרווחת יותר ומכאן שגם קריאה יותר. גם במקרה של הקטנת חלון או שינוי רזולוציה האובייקטים תמיד יסתדרו בגודל המתאים וישארו באותה הפרופורציה כך ששינוי גודל המסך לא ישנה את הסידור של האתר אלא רק את כמות התוכן המוצגת.
אבל, כמו בשיטה הקודמת, גם כאן יש מחירים
א. תמונות
בעיצוב הנוכחי, התמונות שלי הן אובייקט Float ברוחב 200 פיקסלים עם הצמדה לצד שמאל. זה מאפשר להכניס תמונות קטנות בצד של הפוסט וזה לא רע בכלל רוב הזמן, אבל לפעמים רוצים להכניס צילום מסך של אתר כזה או אחר צריך להקטין תמונה מ 800 פיקסלים ל 200 פיקסלים – מדובר פה בכיווץ לרבע מהגודל ובתהליך הזה הרבה מאוד פרטים הולכים לאיבוד. ואז חשבתי על האפשרות של תמונה לרוחב הפוסט (רוחב מלא, של כל עמודת הטקסט) אבל לבצע דבר שכזה בעיצוב יחסי זו משימה מאוד בעייתית. אם מגדירים את רוחב התמונה כ 100% הרי שעבור מסכים רחבים במיוחד התמונה תעבור תהליך מתיחה שיפגע בה, אם משתמשים בתמונה ברוחב מקסימלי, הרי שברוחב המינימלי התמונה תידחס ושוב תאבד מאיכותה, שלא לדבר על המשקלים של תמונות גדולות. האפשרות החלופית היא להשתמש בהגדרת רוחב קבועה, אז אומנם יודעים בדיוק מה יהיה רוחב התמונה אבל מצד שני כאן אפשר לפספס בשני הכיוונים – תמונה שגולשת מהשוליים או לחילופין כזו שיושבת באמצע הפוסט עם שוליים רחבים בכל צד – תקועה שכזו. אפשר אומנם לאלתר בעזרת פרמטרים כגון max-width ו min-width שיכולים להכריח רוחב מקסימלי ומינימלי, אבל זה עדיין מכוער. יתר על כן, בלוגים שיש להם גרפיקה בהדר עלולים להסתבך עוד יותר בגלל העיוות של המתיחה או הכיווץ.

ב. חישובים
אם רוחב המסך הוא 100% והתיבה הראשית היא 98% ובתוכה יש שלוש עמודות שכל אחת ברוחב של 32% עם ריווח של 1% מכל צד של כל עמודה, מה יהיה רוחב העמודה ברוחב מסך של 1280 פיקסלים? מה יהיה הסידור האופטימלי לחמש עמודות ברוחב שווה? או לארבע עמודות כאשר האמצעית רחבה פי 2 משלושת העמודות האחרות? בקיצור, אם בעיצוב הקבוע צריך לעבוד עם סרגל, הרי שבעיצוב היחסי צריך לעבוד עם מחשבון. זה עוד יחסית פשוט כאשר מייצרים ערכת עיצוב חדשה, אבל מה עושים כאשר מנסים לתרגם ערכת עיצוב מאנגלית תוך כדי החלפת סדר העמודות? בקיצור, עיצוב יחסי הוא כאב ראש בתחום הזה שכן הוא דורש מעקב צפוף לכל אורך ה CSS. שינוי הכי קטן במרכיב אחד מבלי לטפל במרכיבים הצמודים לו יכול להרוס את כל העיצוב.

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