עיצוב רספונסיבי

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

אתר מיקרוסופט ישראל כדוגמה לאתר רספונסיבי

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

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

אתר רספונסיבי מתאים לכל הרזולוציות ולכן גם לכל המכשירים בשוק

שלבי בניית העיצוב הרספונסיבי

מכינים ארגז כלים

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

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

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

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

תכנון ומחקר

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

עיצוב הסקיצות

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

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

כיצד ניתן להתאים אתר למכשירים שונים עוד בשלב הסקיצה, מתוך אתר Less Framwork

יישום ובדיקות

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

טיפים נוספים

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

כתיבת תגובה

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