כבר בערך שנה שהאדיטור החדש של וויקס זמין בבטא חצי-ציבורית (המון משתמשי וויקס כבר קיבלו גישה) והגיע הזמן לפרסם את הרשמים ממנו.
קודם כל כראוי לוויקס הכניסה לאדיטור החדש היא שיא הקלילה! (מהרגע שקיבלתם גישה אליו) פשוט נכנסים לדף של יצירת אתר חדש ומיד לאחר מכן וויקס תפנה אתכם לשאילתה שמבררת באיזה אדיטור אתם רוצים להקים את האתר.
לאחר שבחרנו בeditor x המערכת תציג לנו מספר תבניות (בשלב זה אין הרבה תבניות מוכנות אבל המגוון מתרחב כל הזמן!) וכמובן את האפשרות להתחיל לבנות אתר מאפס - מדף לבן וריק.
הממשק של האדיטור החדש של וויקס נראה אלגנטי למדי, המינימליזם שולט פה והחוויה מאד קלילה וכיפית אבל אל תטעו - מדובר בכלי סופר עוצמתי ומתוחכם - היחיד מסוגו בשוק!
במהלך שנותי המקצועיות יצא לי לעבוד עם לא מעט כלים לגרפיקה ובניית אתרים ומהתבוננות מהירה על הממשק אני מקבל את הרושם שוויקס לקחו השראה מהכלי האגדי של אדובי לפרוטוטייפינג - Adobe XD.
בחלק השמאלי נמצא פאנל ההוספה שממנו ניתן לגרור אלמנטים חדשים לקנבס
בחלק השמאלי נמצא פאנל העריכה בו ניתן לשלוט על הגדרות קסטומיזצייה שונות של חלק מהאלמנטים
ובחלק האמצעי העליון נמצא הקסם שבשבילו התכנסנו: ממשק הרספונסיביות.
למעשה החסרון הבולט של וויקס אדיטור הרגיל (לצד כל היתרונות הפנומנליים ) הוא הרספונסיביות המוגבלת.
אז נכון, וויקס נתנו אפשרות לעצב את האתר למובייל בצורה שונה ומותאמת והוסיפו גם פתרון חלקי לרספונסיביות בדסקטופ בדמות הסטריפים האהובים שיודעים בידיים של מעצב מוכשר לעשות פשוט פלאים אבל עדיין. לא ניתן היה באמת לשלוט על איך האתר יראה בכל מכשיר ומכשיר.
בכלי החדש אנו מקבלים חוויה רספונסיבית מושלמת על ידי כך שאנו בעצם קובעים לאיזה צדדים כל אלמנט מקובע ובעקבות כך נגרר.
כלומר: לרוב, אנו ממקמים אלמנטים אחד בתוך השני (למשל: כפתור בתוך box שבתוך strip שבתוך דף)
כעת מה שאנחנו יכולים לעשות הוא לקבע (מלשון ׳קיבוע׳) את הכפתור לחלק השמאלי של הbox וכעת וויקס ימדוד את המרחק בין הכפתור לפאה השמאלית של הבוקס (לפי פיקסל/אחוזים) וידאג שבכל גודל מסך המרחק בינהם ישאר זהה בצורה מוחלטת (אם הגדרנו פיקסלים) או יחסית (אם הגדרנו אחוזים), את הbox ניתן לקבע לsection (הוריאציה המתקדמת לסרטיפ) באותו קונספט וכן על זו הדרך.. בנוסף ניתן לקבע אלמנט לשני פאות של האלמנט שעוטף אותו - מה שאומר שאם נמקם כפתור בתוך אלמנט צמוד לפינה שמאלית תחתונה ונקבע אותו לחלק השמאלי והתחתון— הכפתור כעת ישמור על שני ההגדרות האלה בכל גודל מסך
איך עושים את זה? בפאנל הקיסטומיזציה (הפאנל הימני) יש איזור שנקרא position ושם שולטים על הגדרות הקיבוע כמו שניתן לראות בתמונה הזו:
הגדרה נוספת לרספונסיביות היא שליטה על גודל האלמנטים בכל רוחב מסך
את ההגדרות של גודל האלמנטים נמצא גם כן בפאנל השמאלי אך הפעם תחת הקטגוריה: size
שם ניתן לקבוע את הגודל המקסימלי והמינימלי של אורך ורוחב האלמנט - ככל שהמסך רחב או צר יותר המידה של האלמנט תהיה גדולה או קטנה יותר בהתאם.
כמובן שניתן גם לבטל את השינוי בגודל על ידי מעבר ממצב fluid למצב fixed שישמור על גודל האלמנט קבוע בכל גודל מסך
--------
אחד הדברים המרתקים באדיטור X חוץ היכולת לשנות גדלים ומיקומים בצורה אוטמטית בין מסך הוא היכולת לעצב את האתר באופן יחודי לחלוטין בכל גודל מסך.
אנו מגדירים את גדלי המסך שאנו רוצים לבצע בהם התאמה מיוחדת ומגדירים בהם מחדש את מיקום האלמנטים והקיבועים הרלוונטיים עבורם
בתמונה ניתן לראות 3 גדלי מסך שמוגדרים כברירת מחדל (מחשב טאבלט ונייד) שבכל אחד מהם האתר "מתארגן" באופן שונה לחלוטין - ניתן להוסיף גדלים נוספים לפי בחירה.
מה שכן, חשוב להבין את ״עקרון החלחול״
למי שזוכר, באדיטור הוותיק (והאהוב) מומלץ קודם לסיים את העיצוב לדסקטופ ורק אחר כך להתחיל להתאים את העיצוב למובייל וזאת מכיוון שכל שינוי שנעשה במובייל אינו ישפיע על העיצוב בדסקטופ אך כל שינוי בדסקטופ עלול לשבור את העיצוב במובייל ולכן במקום לעצב כל דבר במובייל ולתקן אותו כאשר אנו נדרשים פתאום לשנות משהו בדסקטופ (או סתם רוצים להתקשקש קצת עם העיצובים) פשוט נסגרים על העיצוב בדסקטופ ורק אחרי מבצעים את ההתאמות.
באדיטור איקס הרעיון זהה רק שאין ׳אתר למחשב׳ ו׳אתר לפלאפון׳ אלא יש אתר לכל גודל מסך, נקודת השינוי בין הגדרות העיצוב של מסך בגודל מסויים להגדרות העיצוב של מסך בגודל הקטן ממנו מכונה: נקודת שבירה (breakpoint)
מה שכן, חשוב לציין כי השינויים שאנו מבצעים מחלחלים מטה.
למשל:
אם יש לנו שלושה ברייקפויינטס: מחשב, טאבלט ונייד.
השינויים בנייד: ישפיעו רק על הנייד
השינויים בטאבלט: יחלחלו ועלולים לשבור את הנייד
השינויים בדסקטופ: מחלחלים ויכולים לשבור גם את הטאבלט וגם את הנייד
ולכן כדאי לעבוד לפי סדר קודם על הגדלים המקסימליים של האתר ולאחר מכן על הגדלים הקטנים יותר.
ישנם עוד מספר שינויים באדיטור איקס ובהם העלמות האלמנט סטריפ (אבל כיוון שאנו עוד בבטא אי אפשר לקבוע בבוודאות - אם כי זה סביר מאד) לטובת section ו grids שמהווים חלופה עדכנית יותר אך משרתים את אותה מטרה, אבל לא לשם כך התכנסנו..
לסיכום:
האדיטור X מדהים, יפה, נוח וגם מהיר (גם מבחינת ממשק. עריכה הגרפי וגם מבחינת הקוד שהוא מפיק)
אבל
השימוש בו לא מתאים לכל אחד
הוא מצריך המון התעסקות בעיצוב (בערך פי 4 זמן על העיצוב - לפחות בשלב הזה שאני עוד לא מאסטר בו)
למי הוא מתאים
בשונה מהעורך הקלאסי הוא מומלץ לשימוש בידיים מקצועיות בלבד (קשה לי להאמין שאדם מהרחוב יצליח להפיק בו תוצרים סבירים) ולא לבניית כל אתר. כדאי להשתמש בו בעיקר לאתרים שלא הולכים להתבצע בהם הרבה שינויים / אתרים שהתוכן שלהם מבוסס על דיינמיק פייג׳ס (שאין התעסקות של הלקוח עם האדיטור בכלל) וכמובן' ללקוחות שיודעים לשלם בלבד - מכיוון שהבנייה מורכבת בהרבה מהרגיל ומן הסתם מתומחרת בהתאם.
אדיטור איקס למעשה נועד לסתום את הפה לכל אנשי הוורדפרס שמנפנפים ברספונסיביות שלהם שנשארה עד עכשיו כאחד היתרונות היחידים שלה על וויקס בכל הנושא של חוויית משתמש
האם וויקס עמדו במשימה?
כן ולא
מצד אחד הרספונסיביות לא פחות ממפעימה, עוצרת נשימה, עוד סופרלטיביים..
מצד שני השימוש בה הוא נחלתם של אנשי המקצוע מה שמעט מתנגש עם החזון של וויקס - לאפשר לכל אחד לעשות את זה.
יצא לכם כבר להשתמש באדיטור X? מה אתם חושבים בנושא? כתבו לי כאן בתגובות למטה!!