בעת עבודתי, התודעתי לצורות החדשות של אופן צריכת המדיה, בכל מה שקשור לעולם האינטרנט והקוד. התאמת העיצוב והתוכן לכלל (או לפחות לרוב) המכשירים הקיימים כיום בשוק, הינו, כך נראה, כבר לא צורך אלא הכרח: אם בעבר התייחסנו לרוחב יחיד (גם כאן בבלוג), הרי שהיום אנו מדברים על מגוון מכשירים בעלי רזולוצייה משתנה: מסכי HD, ומסכים של עמדות עבודה, וסתם מחשבים נייחים, לצד מסכים אחרים, קטנים יותר לא רק באינצ'ים, אלא גם במספר הפיקסלים: לפטופים, נטבוקים, טאבלטים, וסמארטפונים כמובן.
סטנדרטים של גריד אחיד ישנם בשפע, אולי הבולט שבהם הוא 960gs הוותיק , אך נראה שאבד עליו הכלח: הוא סטטי במהותו ומתייחס לרוחב יחיד. כאמור לעיל, מכיוון שהוא נולד ב"עידן הקודם", עוד לפני שהטאבלטים והסמארטפונים השתלטו על חיינו…
הצורך שלי, היה, כך כבר הבנתם, לבנות טמפלט לאתר שיידע "להגיב" לכל, או לפחות לרוב סוגי הרזולוציות המקובלות, בעמוד אחד: עמוד שמגיב לגודל מסך.
במאמר מוסגר אציין פתרון מזוית אחרת: רידיירקט לדף אחר, מתאים, בזיהוי מכשיר או דפדפן. זהו פיתרון מוגבל ולא נוח אם רוצים לדגומא לעדכן את התוכן: אנו נצטרך לעדכן פעמיים ויותר… סקריפטים לרידיירקט שכזה ניתן למצוא בקלות בגוגל, בכל השפות: asp, php. אך העדפתי כאמור לא להשתמש בו בסופו של דבר בגלל מגבלת העדכונים המסורבלת.
נחזור לעניינו: מסתבר שלא קשה למצוא כיום "גריד ריספונסיבי". אך כמו תמיד, גם אם מוצאים דג איכותי וטוב בים האינטרנט שבאמת יש בו הכל, את הדג צריך לגייר, שיידע לדבר ב-"rtl-ית", כי בעברית אנו עסקינן.
הדג שאני תפסתי בחכתי: http://www.getskeleton.com/ (הורדה בחינם, כמובן, תחת רישיון והפצה חופשיים לגמרי.) יש אמנם עוד כמה, אבל אחרי חקירה וסקירת הקוד- אני הכי התלהבתי מהנ"ל.
תהליך העבודה על מערכת הגריד, המורכבת מקבצי CSS, JavaScript, ו- HTML, הוא די פשוט. (יש גם טמפלט לוורדפרס!!, אבל זה כבר עניין לפוסט אחר…)
פיצ'רים כלליים של התבנית, בקצרה..
*3 מצבי תצוגה רוחביים משתנים. ניתן לשחק עם רוחב הדפדפן (או להטות את האייפון..) כדי לראות!
*12 רוחבי גריד
*כפתורים מעוצבים בהתאמה לנוחות מירבית למסכים רגילים + מגע
התוספות שלי:
*התאמה לעברית (RTL) בכל הדרגות + הצמדות ה-DIV לימין (float right)
*גם התמונות מגיבות לגודל תצוגה (!) היה ממש חסר במקור, קריטי בסמארטפונים!!
*צבע רקע בחירה (פוסט בפני עצמו כאן כיצד לעשות זאת)
*הצללה לכל דרגות הכותרות (H1-H6)
*רקע אפור בהיר + קצוות מעוגלים ל Div המעטפת
*הורד "רובוט הוובמסטר טול" כפי שהיה במקור (אם אתם משתמשים בכלי מנהל האתרים של גוגל, קרוב לודאי שיש לכם אתר זה כבר.. אם אתם לא משתמשים- אז בטח שאתם לא צריכים את זה..)
*כמובן שניתן לבטל ולשנות כל פרמטר ופרמטר בתוך קבצי ה- CSS, וזה גם לגמרי חוקי! ראו הערה להורדה, כאן למטה.
