עיצוב הבלוג – ניצול טוב יותר של שטח המסך

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

מהתבוננות בקובץ הCSS קל היה לראות שהסיבה לכך היא שהמעצב קבע שהרוחב של כל התוכן (טקסט וסרגל הניווט) יהיה זהה בדיוק לרוחב התמונה, 730 פיקסל. אני מניח שהרעיון מאחורי זה היה שהבלוג יראה טוב בעיקר לאנשים שעובדים עם מסכים ברזולוציות נמוכות של 800×600 ואנשים עם מסכים יותר טובים, או ראיה טובה יותר, כבר יסתדרו עם זה.

לכאורה בשביל "לשחרר" את הטקסט כל מה שצריך לעשות הוא למחוק את הגבלת הרוחב ולקבוע רוחב יחסי לרוחב החלון, או את גודל השוליים הימניים והשמאליים. למעשה זה יצר לי שתי בעיות חדשות:
  • התמונה תופסת פחות מקום מהטקסט ויוצרת מאין חוסר איזון ויזואלי שמאוד מפריע לאנשים שתצוגה גרועה מפריעה להם. הפתרון הפשוט לזה היה להורות לדפדפן לשכפל את התמונה כל פעם שהיה יותר מקום פנוי מאשר דרוש להצגת התמונה. זה יצר בעיה אחרת מאחר והתמונה לא עוצבה לשימוש כזה צד ימין ושמאל שלה שונים מאוד בבהירות שלהם ולכן נוצר תפר מעט מכוער במקום שבו שתי תמונות מתחברות.
  • קווי התיחום של האזורים השונים המשיכו להופיע במקום הקודם בלי שום התחשבות שכעת האזור של הטקסט יותר גדול, והקטע הזה שיגע אותי במשך מספר שעות. אומנם אני לא מעצב אתרים מדופלם אבל חשבתי שיש לי מספיק ידע, ובעזרת שימוש בDOM Inspector שמצורף לסוסון הים בשביל לעשות שינויים קטנים כאלו. בסופו של דבר (אחרי שהחלטתי ששרלוק הולמס צודק ואחרי שמנפים את כל התאוריות שהופרכו , מה שנישאר, עד כמה שאינו סביר, הוא האמת) ירדה עלי ההשראה לראות מה נמצא בקבצי התמונות, ואכן מיד ראיתי שמעבר לאפקט המידרוג (gradient) גם התיחומים מופיעים בתמונות. מפה זה כבר לקח לא יותר מ5 דקות בעזרת הpaint להגיע לתצואה הנוכחית.

כרגע הציון שאני מעניק לתבנית הבסיסית שבה השתמשתי (red train) הוא 9+ על יופי אבל רק -7 על על קלות שינוי.

2 תגובות “עיצוב הבלוג – ניצול טוב יותר של שטח המסך”

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

    בסופו של דבר פשוט מתחתי את התמונה עם paint.

כתיבת תגובה

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