עיצוב אתרים רספונסיביים

אם במקרה לא שמעתם את המילה החמה ביותר בתחום עיצוב האתרים, המילה היא RESPONSIVE או בתרגום חופשי עיצוב מגיב. הכוונה היא שבעולם בו מגוון המכשירים של המשתמשים הוא כל כך גדול, יש צורך בעיצוב גמיש שיתאים את עצמו לגולש ולמכשירו. אם בעבר מעצבי האתרים התלוננו על כך שהם צריכים לבנות אתר שיתאים את עצמו לארבעה דפדפנים שונים שכל אחד יש לו את הקריזות שלו, המצב הנוכחי מפוצל הרבה יותר והיום יש אינספור טלפונים חכמים בגדלים שונים ומשונים, טאבלטים, פאבלטים (בין טלפון לטאבלט) לפטופים ומחשבים שולחניים. הרעיון של מעצב מוצר כלשהו אשר מעצב עיצוב אחד מדהים שיכול להתאים לכל המשתמשים הפך לפחות רלוונטי כיוון שמשתמש אחד יגלוש באתר במסך בגודל 19 אינץ וגולש אחר יסתכל על האתר במסך מגע בגודל 4 אינץ. חשוב להדגיש שהשימוש במסך מגע הוא לא פחות משנה את חווית המשתמש מגודל המסך והרזולוציה. אם כן הפתרון הפופולארי היום הוא עיצוב רספונסיבי שאומר שמעצב האתר יוצר לפחות 3 ורסיות לכל דף, אחד עבור מסך קטן לטלפונים ניידים, אחד לטאבלט עם מסך גדול יותר או למצב של טלפון שמוחזק בצורה רוחבית והשלישי למחשבים עם מסך יותר גדול. באמצעות פתרונות טכניים עדכניים כגון CSS3 וה-HTML5 העיצוב ישתנה בהתאם לגודל חלון הדפדפן במכשיר של המשתמש. ניתן לראות כיצד עיצוב אתר מגיב לגדלים שונים באמצעות הקטנת חלון הדפדפן וגרירת גבול החלון כך שאתם לאט לאט מקטינים את החלון, ובהתאם משתנים ומסתדרים האלמנטים בעיצוב.

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *