״למה אני לא מצליח למרכז את התמונה?!״

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

הדארק אייג׳ של עיצוב האתרים – 1989

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

חלוצי החלל- תוכנת חלונות (1995)

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

JavaScript בא להציל אותנו 1995

ה-JavaScript הייתה התשובה לכל מגבלות ה-html. לדוגמא, במידה ולקוח רצה שיופיע ״פופ-אפ״ או ביקש לשנות את הסדר של אלמנט דינמי, התשובה של המתכנת הייתה- JavaScript. עם זאת, הבעיה העיקרית הייתה, ש- JavaScript נבנה בשכבות ועל הקוד להטען בנפרד מקובץ ב-html. לעתים קרובות מאוד הוא שימש כאפשרות לתיקון קל עבור מפתחים עצלנים. כיום אנו מעדיפים להימנע מ-JavaScript אם אותה התכונה יכולה להיות מקודדת באמצעות CSS. עם זאת, JavaScript עצמו נשאר חזק בחזיתיות (jQuery) מאשר בעורף (Node.js).

תור הזהב של חופש – פלאש 1996

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

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

1998- CSS

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

גרידים ומסגרות- 1997

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

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

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

העתיד ורוד-2014

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

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

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