לפני שנתיים בערך פרסם Ethan Marcotte מאמר פורץ דרך בשם Responsive Web Design.
במאמר הוא הציג את הרעיון של עיצוב אתרים המתאים את עצמו לרוחב המסך שבו הם מוצגים. כמובן שהוא התכוון לעיצוב המותאם למכשירי מובייל שבהם רוחב המסך צר יותר ממסכי מחשב "רגילים".
כמו עם עם המושג Ajax בשעתו, המאמר קיבץ טכנולוגיות שכבר היו ידועות לתוך מונח אחד ונוח.
מאז, זה הוא המונח שכולם משתמשים בו.
הוא פרסם ספר (למעשה ספרון) באותו שם שבו הוא כותב בעומק על הפילוסופיה ועל הטכנולוגיה. ספר מומלץ נוסף שפורסם על ידי אותו מו"ל, ששמו לא משאיר מקום לדמיון, הוא Mobile First.
החלטתי לקפוץ למים הקרים של העולם הזה בבלוג האישי שלי.
מצאתי תבנית שהיא מותאמת למובייל וגם לעברית – Scherzo.
התקנתי אותה באתר זמני והיא לא עבדה כראוי. ניסיתי לתקן אבל נתקלתי במגבלת כישורי התכנות שלי.
היום היתה לי פגישת עבודה עם רועי דהן, תותח ה CSS מחברת CPO וביקשתי להתעלק על כישוריו. הוא הסכים בשמחה וזו התוצאה.
עדיין חסרה תמונת כותרת. אני מתכוון להשתמש בטכנולוגיה המוצגת באתר Adaptive Images. אם לא אצליח לבד, רועי ישמע ממני שוב.
אם אתם צופים באתר במחשב רגיל – נסו להקטין את רוחב חלון הדפדפן ותראו מה קורה לסרגל הצדדי. אקספלורר? בעסה לכם.
אתם מוזמנים להציץ ב CSS של הבלוג ולדווח לי על חוויית הקריאה המדהימה בעיצוב החדש או על באגים, מה שמתאים.
לקריאה נוספת והעמקה – Responsive and Mobile Now – A FEW GOOD LINKS from a day-long workshop by Luke Wroblewski
אני עובד דרך קבע עם צג גדול נפרד שמחובר למחשב הנייד. בפיירפוקס 13 סרגל הצד מופיע רק כשאני מכווץ את רוחב החלון. בכרום סרגל הצד נעלם כשאני מכווץ את הרוחב.
וואו, אני בדיוק עובד על זה בשביל אתר תוכן ענקי. אשמח להבין איפה הבעיות, אני קורא על זה בעיקר סביב ההקשר של מערכת התוכן ג'ומלה. אבל די מהר הבנתי שזה הכיוון למי שעושה פרוייקט בסדר גודל גדול
הי, תמיד נחמד לדבר.
1. הגישה הזו ובעיקר נסיון לשימוש ביותר CSS ופחות jquery נראית לי נכונה, האתר שאני עובד עליו הולך להיות מרובה רמות תוכן, מה שאולי יכביד, כשנצלול ניתן תשובה : http://bit.ly/xBdsWf
למרות שזה אתר חינוכי, ומוכוון אנשי הוראה, ננסה לכוון לie8 ומעלה.
2. הבוסטון גלוב נראה מצויין במסך קטן (אתר מגיב): http://bostonglobe.com/
מה יש בו?
1. חסרים כפתורי ניווט. הניווט בתוך הדף לא אפשרי – כולל לחזור לתחילת הדף. צריך לגלול את כולו.
זה עונה על "תוכן קודם לניווט", אבל מגביל את הדפדוף בדף.
2. אם ניכנס לתוך תת-תוכן: נאמר כתבה בתוך "עסקים", נקבל הרבה אפשרויות כבר עם ההגעה, ועם עיצוב רזה מאוד: להיכנס כמנוי רשום, לחפש תוכן, ללכת לתכנים שמורים (אם נרשמנו), לעבור בין נושאי על (ספורט, תרבות וכו') וגם, נוכל לדפדף בין תתי נושאים בתוך עסקים. האתר נטען מהר, והעיצוב נותן תחושה מאוד נוחה לקריאה.
הסבר בווידאו על המעבר לעיצוב מגיב:
http://vimeo.com/28926711
הם מתארים jquery שהם יצרו:
https://github.com/scottjehl/Respond
במסכים מגע, משיכה מהחלק העליון יכולה לאפשר תפריט: http://tinyurl.com/8xmlv79
לא עבד באנדרואיד שלי 2.3.4