מאמר

RESPONSIVE4
יאיר גולן

|

מחשבות וכלים לאפיון רספונסיבי

גם אני מאפיין רספונסיבי

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

 

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

 

הגודל לא קובע

בתחילת דרכו של האינטרנט, אי-שם בסוף שנות התשעים,  יצרנו לנו תבנית של דף אינטרנט כדי להקל עלינו לגשת לדבר החדש הזה שנקרא אינטרנט. אז הגדרנו לנו גודל קבוע. בהתחלה זה היה 640×480, אח״כ הגדלנו ל-600×800 ואז שוב ל-1024×768.

 

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

 

אין חדש תחת השמש

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

 

YAIR-HTML

 

אז איפה טעינו?

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

 

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

 

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

 

תנו לתוכן להגדיר את הגודל

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

 

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

 

בוחרים נכון את נקודות השבירה

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

בהקשר זה עולות מספר שאלות: 

– איך נדע מהם נקודות השבירה הנכונות לאתר שלנו? 

– אם ברשותי אתר עמוס תמונות, מהו הגודל המינימלי שבו אוכל להציג תמונה בצורה יפה?

– אם אני מעצב אתר תוכן, עם המון טקסט, האם שלושה טורים זאת הבחירה האולטימטיבית?

התשובה היא… ניחשתם נכון, התוכן. ברגע שהתוכן נראה רע, זה הזמן לשבור.

 

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

 

העצמה הדרגתית (Progressive Enhancement)

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

 

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

 

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

עם התעוררות החשיבות של האפיון הרספונסיבי נולדו להם כלים שונים שהותאמו לאפיון זה. 

 

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

 

תוכלו למצוא על כך מידע כאן:
איך יוצרים אפיון רספונסיבי ב-Axure?

 

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

FROONT MACAw UXPIN 

 

 

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

responsinator  

Matt Kersley 

 

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

אולי יעניין אותך גם:

אין תגובות

הוסף תגובה