חדש! Elementor
Experts Network — מצאו שותפים לדרך, קדמו והגדילו את העסק שלכם

הדרך הנכונה לבניית אתרים

הדס גולצאקר | מאי 2020

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

מעיין ורועי מגיעים מעולמות משלימים – ולכן הם הזוג הכי מתאים כדי לשרטט עבורנו את הדרך אל האתר המושלם.

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

כיצד מתחילים?

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

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

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

עריכת החומרים לאתר

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

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

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

מלבד זאת, שימו לב למשקל התמונה. השתדלו להימנע מלהעלות תמונות בגודל של 600-700 מגה בייט. תוכלו להקטין את משקל התמונות בעזרת כלים אונליין, כמו Tiny PNG, או כלים שאותם תוכלו להוריד למחשב האישי כמו Image Resizer.

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

וידאו וגיפים
גיפים הם קבצים ששוקלים המון. לכן רצוי לצמצם את השימוש בהם. העדיפות היא תמיד לכיוון וידאו מסוג MP4, עם גודל של 2-3 מגה לכל היותר. תוכלו לכווץ את משקל הוידאו בתוכנות אונליין כמו Handbrake או תוכנות לוקאליות אחרות.

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

תוכן

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

תמונות

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

מלבד זאת, שימו לב למשקל התמונה. השתדלו להימנע מלהעלות תמונות בגודל של 600-700 מגה בייט. תוכלו להקטין את משקל התמונות בעזרת כלים אונליין, כמו Tiny PNG, או כלים שאותם תוכלו להוריד למחשב האישי כמו Image Resizer.

אייקונים

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

וידאו וגיפים

גיפים הם קבצים ששוקלים המון. לכן רצוי לצמצם את השימוש בהם. העדיפות היא תמיד לכיוון וידאו מסוג MP4, עם גודל של 2-3 מגה לכל היותר. תוכלו לכווץ את משקל הוידאו בתוכנות אונליין כמו Handbrake או תוכנות לוקאליות אחרות.

 

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

תבניות וטמפלטים

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

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

גריד ורספונסיביות

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

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

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

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

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

ייעול תהליך הבנייה

במהלך בניית האתר, מומלץ שנחשוב על המבנה בצורה יחסית ולא באמצעות פיקסלים כמו שהיה מקובל בעבר. לדוגמה, אם יש לנו אזור שהוא ה-Hero שלנו (החלק הפותח באתר), אנחנו יכולים לחשוב על האורך והרוחב שלו (נניח 1920X1080 פיקסל). אבל הדרך הנכונה רספונסיבית היא לחשוב כמה גודל מהמסך האזור הזה תופס (נניח 50% מהמסך).

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

הרוחב האופטימלי לאתר (גריד)

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

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

אנימציות

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

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

רוצים להיות כותבים במגזין שלנו?

הדס גולצאקר

מובילת הצמיחה של אלמנטור בישראל, מעצבת, FOODIE ומעריצה של סטפן סגמייסטר

אהבתם? שתפו.
שיתוף ב facebook
שיתוף ב twitter
שיתוף ב telegram
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

2 Responses

  1. היי הדס,
    תודה על כל החומרים המעניינים שעולים פה באתר ועל הערך ה(מאוד) מוסף..

    הערה קטנה –
    בפסקה 'עריכת החומרים לאתר' הטקסט מופיע בטעות פעמיים (פעם אחת כטקסט רץ, ואחר כך שוב עם הדגשה של כותרות משנה).

    ואם כבר אנחנו פה –
    יש תכנון למבצע על האלמנטור פרו בעתיד הנראה לעין?

  2. שאלה טובה שאני לא ממש יכולה לענות עליה… אבל עוד מעט יש יום הולדת לאלמנטור (ביוני) ותמיד יש הפתעות 🙂

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

רוצים להיות כותבים במגזין שלנו?

אין שום בעיה! מלאו את הטופס פה למטה
ואנחנו נהיה איתכם בקשר ממש בקרוב!

רוצים להיות חלק מאלמנטור?

אין שום בעיה! מלאו את הטופס פה למטה
ואנחנו נהיה איתכם בקשר ממש בקרוב!

בואו לגדול במקום הנכון - בזמן הנכון