WordPress עצות לעבודה עם רספונסיביות נכונה

[*רות]

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

 

[חגית קרמר]

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

 

[*רות]

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

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

 

[חגית קרמר]

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

 

[מספר 2]

@חגית קרמר
תודה רבה
אני גם באמצע בניית אתר עם רספונסיביות מאתגרת ומאוד עזרת לי.

 

[*רות]

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

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

 

[חגית קרמר]

7. שימושי מאוד, נמצא באלמנטור פרו: היפוך עמודות.

בלחיצה העמודות הנמצאות בתוך האיזור ישנו את הסדר שלהן מהסוף להתחלה.

8. ולמעשה, ג'ט נותנים גמישות מופלאה בסידור פרטים בתוך עמודה (נמצא בתוסף JetElements)

ובקביעת הסדר של הוידג'טים בעצמם


9. רספונסיביות נקיה ומושלמת תהיה רק ע"י ידע בהוספת עיצוב CSS לפי נקודות שבירה. ע"י שימוש ב@media

 

[*רות]

@חגית קרמר
איך אפשר ליצור איתך קשר?

 

[מספר 2]

9. רספונסיביות נקיה ומושלמת תהיה רק ע"י ידע בהוספת עיצוב CSS לפי נקודות שבירה. ע"י שימוש ב@media

צודקת!
אבל זה המון עבודה להתאים כל אלמנט עם קוד.

 

[חגית קרמר]

אבל זה המון עבודה להתאים כל אלמנט עם קוד.

קודם להתאים בכל הדרכים האחרות,
ורק מה שלא מסתדר - ע"י קוד.

בדר"כ מדובר על 15% מהרכיבים שצריכים התאמה גם על ידי קוד.

 

[חגית קרמר]

@חגית קרמר
איך אפשר ליצור איתך קשר?

שולחת לך הודעה פרטית

 

[מספר 2]

אני במקרה עובדת עכשיו על אתר שבחלק העליון של כל עמוד ישנם כ-10 אלמנטים (בכל עמוד אלמנטים שונים)
והדרך היחידה להשתלט על זה-זה עם קוד css.
לכן כתבתי שזה המון עבודה.....

 

[חגית קרמר]

אני במקרה עובדת עכשיו על אתר שבחלק העליון של כל עמוד ישנם כ-10 אלמנטים (בכל עמוד אלמנטים שונים)
והדרך היחידה להשתלט על זה-זה עם קוד css.
לכן כתבתי שזה המון עבודה.....

מעניין לראות.

 

[זווית]

2. להגדיר פונטים גלובליים לכל האתר ולסדר מראש את הרספונסיביות שם.
3. כנ"ל כפתורים - להגדיר את הכפתור העיקרי באתר ע"י התבנית הגלובלית.

גאוני!
לא שמתי לב שגם בהגדרות גלובליות יש התאמה לפי מסכים

 

[EPaP]

וואו חגית, תודה רבה רבה!!!
שומרת לי את האשכול

אפשר רק הסבר?

6. הכי חשוב! לא לשכפל רכיבים בשביל רספונסיביות! זה מכביד מאודדדד על האתר.

השכפול עצמו מכביד? או בגלל שזה עם בגדרות רספונסיביות?

9. רספונסיביות נקיה ומושלמת תהיה רק ע"י ידע בהוספת עיצוב CSS לפי נקודות שבירה. ע"י שימוש ב@media

סורי על הבורות, מה זה?

 

[אלעזר 1]

השכפול עצמו מכביד? או בגלל שזה עם בגדרות רספונסיביות?

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

לקריאה נוספת:

CSS @media Rule

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Responsive Web Design Media Queries

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[חגית קרמר]

השכפול עצמו מכביד? או בגלל שזה עם בגדרות רספונסיביות?

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

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

וצריך לעבוד חכם בדסקטופ
כדי לקבל לפטופ מושלם (כמעט בלי קוד CSS)

---
השכפול מיותר ומכביד
כי אם בדף יש 6 איזורים,
בטעינת הדף יצטרכו לעלות 18 אזורים, ולא 6.

סורי על הבורות, מה זה?

התאמה רספונסיבית על ידי קוד CSS

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

 

[ראובן ליבוביץ]

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

זה נכון בנראות דינמית של אלמנטור, אבל עם נראות דינמית של ג'ט הוא לא טוען את הווידג'טים\האזורים המוסתרים.

השכפול מיותר ומכביד
כי אם בדף יש 6 איזורים,
בטעינת הדף יצטרכו לעלות 18 אזורים, ולא 6.

כנ"ל

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

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

 

[אלעזר 1]

זה נכון בנראות דינמית של אלמנטור, אבל עם נראות דינמית של ג'ט הוא לא טוען את הווידג'טים\האזורים המוסתרים.

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

 

[אלמנטורוביץ]

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

אכן!
אבל יש שם אפשרות להתנות את הנראות לפי סוג המכשיר - מובייל או לא.
אולי זו כוונתו של @ראובן ליבוביץ ?