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

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

1. עיצוב האתר בגודל מסך מחשב

2. עיצוב בגודל מסך טאבלט

3. עיצוב בגודל מסך טלפון

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

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

 

כפי שאפשר לראות אפשר לעשות כל שימוש בחלוקה של הגריד הזה. וכך יהיה כל (ונכון) לבניית האתר.

כלים שיעזרו לכם לבנות גריד:

http://gridpak.com/

http://www.tinyfluidgrid.com/

 

אפשר גם למצוא המון גרידי להורדה לדומגה:

https://dribbble.com/shots/1064433-Bootstrap-responsive-grid-PSD-Mobile-Tablet-Web-Free

 

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

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

נתראה בשיעור הבא, בהצלחה