רוגוזין 4 אשדוד08-910-3080info@ocean-it.co.ilא - ה 09:00 - 18:00

עיצוב רספונסיבי ודגשים לפיתוח מובייל חלק א'

פוסט 5 מתוך 7
עיצוב ריספונסיבי

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

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

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

university_website

דיאגמת השוואה בין מידע רלוונטי לאתר מובייל לעומת אתר רגיל
נלקח מתוך http://xkcd.com/773/

 

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

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

מה זה בעצם עיצוב רספונסיבי?
עיצוב רספונסיבי הוא בעצם גישת עיצוב שהמטרה שלה היא לתת לגולש חווית גלישה אופטימלית,קריאה נוחה של טקסטים בעמוד,יכולת ניווט נגישה וברורה, וצמצום ככל האפשר פעולות כמו שינוי של גודל המסך וגלילה של העמוד.
כאשר אתר שמעוצב בעיצוב רספונסיבי יסגל לעצמו תכונות עיצוב מבוססות פרופורציה, תמונות גמישות , ושאילתות תקשורת שמתאפשרות בעזרת CSS3, שאילתת {}media@ וההרחבות שלה היא אחת הכלים המרכזיים שנשתמש בזמן כתיבת עמודים מותאמים רספונסיבית ונדבר עליה בהרחבה בחלק ב' של הפוסט הזה.

מאמר זה נכתב על ידי LuckyLuke