מה השתנה בתחום בניית האתרים?
בתור בונה אתרים ותיק, שחי את התחום כבר מעל 15 שנים, ראיתי עשרות טרנדים עיצוביים ותכנותיים אשר הציפו את המשק. בשנת 2025, חוקי המשחק קצת משתנים ונכנסים אלמנטים חדשים אשר יקבעו אם האתר שלכם חדשני או סתם אתר מיושן.
מתוך היותי מתכנת(PHP) וגם מעצב (Photoshop) אני נדהם לגלות את הטעויות שעושים בעלי אתרים שבוחרים לעבוד עם טכנולוגיות בניית אתרים ישנות על פני טכנולוגיות חדשות ולעיתים אף במחיר של פגיעה במיתוג של העסק שלהם.
קחו את הדוגמא הקלאסית של שתילת מצגת תמונות. בשנת 2021 אין מקום למצגת תמונות מתחלפת בFADE – פשוט אין מקום לזה באתרי אינטרנט חדשניים. את המצגות הללו החליפו קרוסלות אנימציות מתקדמות או כפי שנפרט בהמשך הכתבה, רקע וידאו, רקע פרלקס ומגוון אלמנטים חדשניים.
אז חדל הקדמות מיותרות, כעת נצלול ישר לתוכן המרכזי, האלמנטים שישמו אותכם על המפה של בניית האתרים:
פרלקס
רקע פרלקס נמצא איתנו כבר שנים ומשמש כרקע לאזורי תוכן באתרים. הייחודיות של רקע הפרלקס נובעת מכך שהוא מייצג מין "חלונית" לתמונה יותר גדולה שרצה ברקע.
רקע הפרלקס מהווה אנימציה בעת גלילה של העמוד ובכך בכך פעם חושף חלק אחר מהתמונה תוך כדי שהגולש מתקדם למעלה או למטה בעמוד. ניתן להחשיב אלמנט זה כחדשני וניצנים ראשונים שלנו החלו עוד בשנת 2019 כאשר האתרים הרספונסיבים החדשים התחלו להשתלט על האינטרנט.
על מנת קצת לרדת לרזולוציה הטכנית, ניתן להגדיר רקע פרלקס באמצעות שפת עיצוב הדפדפן CSS עם תמונת רקע הגדולה לפחות פי 3 מהחלונית בה מוצג רקע הפרלקס.
דוגמא לרקע פרלקס ניתן למצוא בעמוד האודות שלנו בתחתית העמוד
רקע וידאו
מגמה חדשה אליה אנו ערים בשנים האחרונות היא "רקע וידאו". רקע הוידאו מתנוסס בדרך כלל במקום המצגת המסורתית המופיעה בעמוד הבית של האתר ויכול לשמש למגוון נושאים; החל מפרזנטציה של העסק, צילומיMOCKUP של מוצרים או הדמיות תלת מימד. כאשר מדובר ברקע וידאו האפשרויות הן אינסופיות.
לדוגמא: נניח שאתה בית מלון בוטיק שמעוניין להציג את המלון שלו באמצעות וידאו. רקע הוידאו באתר שלך יוצג בעמוד הבית ויכלול צילומי אוויר מסביב למלון המראים את המבנה כמו כן יכלול צילומים של החדרים בזוויות מחמיאות וצילומי רקע של המתקנים במלון – החל מבריכת השחייה לאולם הקולנוע, הכל יילקח בחשבון בסרטון התדמית על מנת להציג לגולש את החוויה המלאה מבית המלון שלך.
כאשר בונים אתר יש לקחת מספר דגשים בעת הטמעת רקע וידאו. מכיוון שמדובר בקובץ MP4 ולעיתים פורמט WEBM המשקל של הקובץ קובע את זמן הטעינה המלאה של הסרטון.
מה הכוונה? אם הסרטון ישקול 1MB ייקח לו להיטען במלואו זמן מהירות ההורדה של הגולש כפול 1MB. לכן רבים בעלי האתרים שקובעים רקע וידאו קצר שרץ במעין לולאה "לופ" של 15-30 שניות עם עריכה נכונה של תצוגה של כל האלמנטים בסרטון.
דוגמא לרקע וידאו ניתן למצוא בעמוד הבית שלנו
אייקון ווטסאפ
אייקון ווסטאפ הפך בשנת 2021 מטרנד – למוצר צריכה בסיסי בעבור כל אתר אינטרנט. עם כניסתה של אפליקציית WhatsAPP Business כולם עפים על הבאז ודורשים דרך לתקשר עם הלקוחות שלהם באמצעות ווטסאפ – עם לינק ישיר מאתר האינטרנט.
את לינק הווטסאפ ניתן להגדיר באמצעות שורת קוד ובדרך כלל יתלווה אליו אייקון מעוצב אשר עוקב אחרי הגלילה במסך ומופיע בצדדו השמאלי או הימני של האתר. כלי הווטסאפ מאפשר לגולש להיכנס לאפליקציה באמצעות לחיצה ישירה על הכפתור ולקבל נגישות מהירה למחלקת שיווק הלקוחות של בעל האתר.
דוגמא לאייקון ווטסאפ ניתן למצוא באתר הלקוח שלנו סקרלט-שנקר
אנימציות CSS/GIF
חלק נוסף וחדש לשנות ה2020 הוא אנימציות CSS המהוות תחליף לתוכנת האנימציה הוויתיקה אך הידועה לשמצה "flash”. מאז המצאת HTML5/CSS3 נוצרו אינספור תחליפים לאנימציות ברשת אשר מהוות גם תצורה מושלמת לכל סוגי המכשירים וגם אינן דורשות תמיכה של פלאגין חיצוני (לדוגמא פלאש) על מנת להציג אותן.
אנימציות ה CSS מוטמעות גם במצגות וגם באלמנטים בדרך ובכך יוצרות הנפשה של העמוד בצורה דינמית על פי גודל המסך של הגולש או הרזולוציה בה הוא נמצא.
ניתן לראות כי בעלי אתרים רבים משתמשים ב-2 סוגי אנימציות:
- אנימציות GIF – פורמט גיף היינו תמונה המשמשת בדרך כלל להנפשה של אלמנט בדף כמו צילום מסך(כמו שעשינו במדריך זה בפסקאות הקודמות) או להנפשה של אלמנטים קלי משקל שלא יכבידו על זמן הורדת התמונה על ידי הגולש.
- אנימציות CSS – אנימציות אשר מתבצעות במספר סוגים של אלמנטים, החל ממעבר עכבר על האלמנט ושינוי צבעים, לשינוי רקעים שונים בצורה אוטומטית. אנימציות ה CSS השתלטו על כל תחום בניית האתרים והחליפו לחלוטין את נגן הFLASH המסורתי.
דוגמא לאנימציות שונות ניתן למצוא באתר Whoopix.
לסיכום, הצגנו עבורכם ארבעה אלמנטים חדשניים שלוקחים תפקיד מרכזי בתחום בניית האתרים בשנת 2025. קחו בחשבון, בפעם הבאה שאתם בונים אתר, בקשו מבונה האתרים שלכם להשתמש באלמנטים הבאים על מנת לקבל אתר כשר למהדרין, חדשני ואיכותי במיוחד.
ועד אז, בהצלחה לכולם.
