מדריך מקיף לתיקון Responsive בעיות עיצוב ב-2023

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

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

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

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

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

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

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

1. "Mobile First" הוא מטומטם

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

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

• Desktop
• נוף נייד
• פורטרט נייד

אם אתה רוצה להיות קצת יותר יסודי, כדאי לשקול גם:

• טאבלט נוף
• טאבלט דיוקן

והרשימה המלאה, אם אתה רוצה להיות שלם לחלוטין תהיה:

• עצום Desktop
• רגיל Desktop
• טאבלט נוף גדול
• טאבלט דיוקן גדול
• טאבלט נוף קטן
• טאבלט דיוקן קטן
• נייד לנוף גדול
• נייד פורטרט גדול
• נייד לנוף קטן
• נייד דיוקן קטן
• זעיר / לביש

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

2. לאלף את הכותרת התחתונה הרחבה של העמוד

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

3. קבל כמה מוזרויות קלות במכשירים לא ברורים

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

4. ניתן להסתיר תוכן שאינו תורם למסר הליבה

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

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

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

5. אתה יכול להשתמש ברקע חלופי

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

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

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

הלקוח תמיד צודק, למעט כאשר הלקוח הוא לקוח עיצוב אתרים. לקוחות רק לעתים רחוקות יודעים מה הכי טוב עבורם, וחשוב לטעון את עצמך כמעצב אתרים שיודע לספק את התוצאה הנכונה עבור הלקוח. אַחֵרwise אתה מסתכן ביצירת אתר נוסף תוֹעֵבָה.

6. שליטה ידנית בסדר הכיווץ (או הימנע מהפניות מרחביות בתוך התוכן)

זו בעיה מורכבת. סדר הקריסה של אתר תלוי בסדר שבו ה-divs מוערמים. אתה צריך לערום את ה-divs שלך בסדר הנכון כדי שהם יקרסו בסדר הנכון.

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

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

7. ייתכן שתצטרך גדלי גופן שונים עבור פריסות שונות

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

8. עדיף להשתמש responsive תמונות

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

תמונת כותרת באדיבות ארתור מרטינובסקי