מסך העריכה של אלמנטור

טיפים לאלמנטוריסט המתחיל

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

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

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

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

מבנה HTML פשוט

  1. עבדו בצורה הגיונית. נסו לתכנן מראש את העמודים שלכם. נסו לנתח מראש כמה עמודות אתם צריכים בכל אזור, איזה ווידגטים ישבו בכל אזור, מה ישב במקום שלו ומה יחרוג מעט.
  2. השתמשו באפשרות מיקום – רוחב בתוך שורה כדי למקם שני ווידגטים אחד ליד השני. לפעמים זה יותר נכון מלחלק לעוד ועוד עמודות.
  3. אל תמהרו למיקום המוחלט או המקובע. הוא נועד למקרים מסויימים בלבד
  4. אל תמהרו להשתמש באזור פנימי. לרוב אין צורך לשים אזור של עמודה אחת ובתוכו אזור פנימי של 2 עמודות. לרוב עדיף היה לשים פשוט 2 עמודות באזור הראשי ללא שימוש בווידגט אזור פנימי.
  5. אל תשתמשו בעמודות ריקות עבור ריווחים. בשביל זה יש ריווחים.
  6. אל תמהרו להשתמש בערכים שליליים. מותר להשתמש בהם אבל במשורה. נתקלתי ביותר מידי מצבים שאנשים נותנים ריווחים לאלמנט אחד ואז מפצים על זה בערך שלילי לאלמנט אחר ומהר מאוד הם לא יודעים מה עשו ולמה. חזרו לטיפ מספר אחד וקראו אותו שוב…
  7. אלמנטים צפים שימו תמיד למטה. רק למען הסדר הטוב.
  8. בכל מקום שניתן השתמשו ברקע ולא בשכבת רקע. פשוט כדי שכשתרצו לשנות משהו, תדעו יותר בקלות לאיפה לגשת.

התאמות למובייל

  1. השתדלו לעבוד באחוזים ולא בפיקסלים. זה יכול לחסוך חלק מההתאמות למובייל
  2. שימו לב שלא כל מה שתשנו בנייד ישפיע רק על הנייד. ההתאמות אפשרויות עבור שדות שלידם יש את האייקון הקטן של הדסקטופ (או טאבלט או מובייל). אם תשנו את סדר העמודות במובייל או תמחקו אלמנט זה כמובן ישפיע גם על הדסקטופ.
  3. שימו לב שערך ריק בשדה כלשהו במובייל אינו באמת ריק (ובוודאי לא 0) ערך ריק הכוונה שהוא מושך את ההגדרה שלו מהדסקטופ. לפעמים כדאי לחזור לדסקטופ, לראות מה עשינו שם ולמה ואז לשוב למובייל ולדייק את המספרים לפי הנכון למובייל.
  4. הכירו את היפוך העמודות. לפעמים הוא הפתרון להתאמות למובייל.
  5. השתמשו בהסתרת אזורים ושיכפולם רק כאשר יש בכך צורך אמיתי. כשהשינויים הם בתוכן או שהם רבים כל כך עד שזה מפשט.
  6. אם אתם בוחרים להסתיר אזור במובייל, אין צורך להסתיר גם את העמודות או הווידטים שבתוכו. הם יוסתרו אוטומטית. נסו להיות עקביים ולדעת מה אתם מסתירים כדי לא להתבלבל ולהצטרך לבדוק שוב ושוב.
  7. השתמשו בחלונית הניווט ותנו שמות לאזורים שלכם. זה מקל על הניווט.

תהיו חברתיים. שתפו...

שיתוף ב facebook
שיתוף ב google
שיתוף ב twitter
שיתוף ב linkedin
שיתוף ב pinterest
שיתוף ב print
שיתוף ב email

כתיבת תגובה