כיצד להרכיב נושא נייד ראשון, נושא וורדפרס מונחה ביצועים [חלק 1]

בבסיסה, הרכבת נושא וורדפרס היא משימה די פשוטה. וורדפרס מספקת סביבה ידידותית באמת ומבהירה באילו פונקציות PHP להשתמש לאיזו מטרה בדרך.


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

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

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

לחלק 2 ראו כאן: כיצד להרכיב נושא נייד הראשון, מונחי ביצוע וורדפרס [חלק 2]

1. התוכן בא במקום הראשון

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

אף על פי שמכשירים מודרניים מסוגלים להציג גרפיקה של עד 1136 × 640 פיקסלים (אייפון 5S), בל נשכח שהמסך עדיין נמצא רק ארבעה סנטימטרים. זה לא הרבה נדל”ן לעבוד איתם.

דברים שכדאי לעשות:

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

2. בצע אופטימיזציה של התמונות

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

דברים ספציפיים שתוכלו לעשות:

  • שקול לשלב פונקציונליות של עומסים עצלים. כשלעצמו הטעינה העצלה היא נהדרת (טעינת תמונות רק כאשר האורח גולל אליהם). אך הבעיה היא שמשתמשי הקצה עשויים בסופו של דבר להתקין כמה תוספי עומס עצלניים באתר הסופי עצמם. זה יכול להפריע לכל מה שכבר שילבת בנושא. אם תרצה לקחת את הסיכון, עם זאת, עדיף להפוך את הפונקציונליות לאפשרית באמצעות פיתרון כמו jQuery ו- תוסף לטעינה עצלנית. תוספי וורדפרס נוטים להשתמש גם בספריה זו, כך שאתה מצמצם את הסבירות שהדברים ישתבשו כאשר יש שני סקריפטים שונים ששניהם מנסים להשיג את אותה התוצאה. כמו כן, אפשר לבטל את העומס העצלני בהגדרות העיצוב שלך.
  • בצע אופטימיזציה של התמונות לגודל ולאיכות. תמונות בדרך כלל מהוות את רוב צריכת רוחב הפס של האתר הממוצע, כך שיוצר הנושא, עליך לוודא שהתמונות שלך מותאמות ככל האפשר. אתה יכול לעשות שני דברים כדי לגרום לזה לקרות: (1) לוודא שהתמונות אינן גדולות יותר בממוצע מכפי שהן צריכות להיות (ראו מס ‘3) – פיקסל נוסף פה ושם יכול להוסיף די די מהר, (2) לבצע אופטימיזציה כל התמונות באמצעות כלי כמו אופטימול או TinyPNG לפני ששחרר את הנושא לציבור.
  • השתמש בגופנים של אייקונים בכל הזדמנות אפשרית. בית הספר הישן הכולל אייקונים בכל עיצוב היה פשוט לבנות אותם בפוטושופ, להמיר הכל ל- PNG או GIF ולגלגל אותו. אולם בימינו זה לא הפתרונות המיטובים ביותר. עם כלים כמו גופן מדהים, אנו יכולים להעשיר את העיצובים שלנו במאות גופנים מעוצבים להפליא, ובמקביל לשמור על הביצועים הגונים מאוד.

3. הפוך את העיצוב מוכן לרשתית (מותאם למסכי DPI גבוהים)

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

ישנם שני קיצורי דרך עיקריים שתוכלו לבצע לאופטימיזציה גבוהה-DPI:

  • השתמש בגופני תמונה – שהוזכרו לעיל; גופני תמונות מתרחשים באופן אוטומטי ונראים נהדר בכל מכשיר.
  • צור גרסאות אלטרנטיביות של כל התמונות האחרות – בפעמיים מהגודל – והחלף אותן עם CSS בכל פעם שמשתמש במכשיר DPI גבוה לצפייה בתוכן. הנה מדריך כיצד תוכלו לעשות זאת.

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

שוב ביום, היית זקוק רק לתמונת PNG אחת של 16 × 16, שאותה היית ממיר ל- ICO, והיית מסודר. כרגע זה הרבה יותר מסובך. לדוגמה, מכשירי Apple החדשים ינסו לחפש סמלים גדולים יותר ואז ינסו להשתמש בהם כסימניות.

כמה מגדלי ה- favicon ש- iOS מצפה למצוא הם: 76 × 76, 120 × 120, 152 × 152. הנה רשימה מלאה באתר Apple.com.

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

4. אופטימיזציה להקשה

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

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

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

5. התייחסות לנושא אינה כל מה שחשוב

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

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map