העיצוב האדפטיבי (עיצוב רספונסיבי)

עיצוב מסתגל

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

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

טיפים לעיצוב אדפטיבי

  1. הכינו תבנית פשוטהבפשטות אני לא מתכוון לתפל. אני מדבר על מבנה HTML של האתר שלך: ככל שהוא ברור יותר, כן ייטב. זכור כי מסך מחשב יכול להתאים לשלוש עמודות אנכיות; על מסך הנייד תתאים רק אחד. חשוב על זה ואיך תוכל למקם מחדש את האלמנטים.
  2. בטל את כל מה שלא נחוץהימנע מאפקטים של jQuery, אנימציות פלאש וכל קוד אחר שמאט את טעינת הדף שלך. ככל שיש לך פחות תוכן מסוג זה, כך נטען מהר יותר.
  3. הגדר סגנון css לכל "גודל"צרו tiny.css, small.css ו- big.css (למשל) שפועל בהתבסס על המכשיר בו הוא נצפה. לדוגמה:

    url @ import (tiny.css) (רוחב מינימלי: 300 פיקסלים);

    url @ import (small.css) (רוחב מינימלי: 600 פיקסלים);

    url @ import (big.css) (רוחב מינימלי: 900 פיקסלים);

  4. הרזולוציות הנפוצות ביותר320 פיקסלים / 480 פיקסלים / 720 פיקסלים / 768 פיקסלים / 900 פיקסלים / 1024 פיקסלים
  5. הפוך את התבנית שלך לגמישהבכל פעם שאתה יכול לעבוד עם אחוזים במקום סכומים קבועים. להלן כמה שקילות התייחסות: 200 פיקסלים = 15'38% / 300 פיקסלים = 23'07% / 800 פיקסלים = 61'5384615384%
  6. טיפוגרפיה חשוב מתמיד לפעמים מסך המכשיר שלך יכול להיות כל כך קטן שכל מה שאתה רואה זה טקסט. לכן עלינו לבחור בזהירות רבה את הגופנים הטובים ביותר באתרנו, כך שכאשר הם מצטמצמים הם לא יאבדו את הקריאות. בנוסף, עלינו לדעת לשלב גופנים ניטרליים יותר עם אחרים עם אישיות המעניקים לרשת את האופי הדרוש. לכן, הטיפ הראשון הוא שאתה מקדיש זמן לבחירת הגופנים שבהם אתה הולך להשתמש.
  7. להשתמש תמונות באיכות גבוההככל שהחלל מצטמצם, התמונות ילוו אותו. בחר את אלה שאינם מאבדים את האיכות כאשר הם מופחתים, ושעובדים זהה כאשר הם מוגדלים. תמונה באיכות נמוכה תגרום לאתר שלך להראות רע.
  8. שתמונותיך נראות תמיד מלאמנע את ניתוק התמונות שלך על ידי הוספת קוד img (רוחב: 100%;) ל- css שלך. באופן זה, אתה אומר למכשיר לחשב מחדש את הגובה שיינתן לתמונה כך שניתן יהיה לראות את רוחבו במאה אחוז.
  9. הכל נמוך אותה כתובת אתרתשכחו מתת-דומיינים כמו www.mysite.com/mobile, מכיוון שאותו קובץ index.html בתיקיית הבסיס יעבוד על כל המכשירים (אם אתם מבצעים את העיצוב ההסתגלותי כהלכה). אתה כבר יודע את היתרון: ככל שתת-דומיינים יהיו פחותים כך טעינת הדף תהיה מהירה יותר.
  10. נצלו את התומכים: היו דמיוניים זה לא לגשת לאתר ממחשב שולחני מאשר לאייפד או לטלפון נייד. עם הראשון תנווטו בצורה רגועה ורגועה. עם האחרון תעשה זאת בשעות סרק ותסגור את החלון ברגע שתשתעמם. נצל את התנאים הללו כדי לבדר את המשתמש ולגרום להם ליהנות בכמה דקות ספורות שהם הולכים להקדיש לך. אולי כשהוא יחזור הביתה הוא יחליט לבקר אותך בצורה רגועה יותר.
  11. קבל השראה בפרסומים דיגיטליים תהיתם מדוע עצה זו. קל מאוד: מגזינים דיגיטליים (טוב) יודעים לנצל את התמיכה והעיצוב שלהם אינטליגנטי מאוד. קבל השראה מהם וצור אתר שקשה לעזוב.

עוד מידע - מגזינים דיגיטליים

מקור - ספליו, 960 גר ', טור


3 תגובות, השאר את שלך

השאירו את התגובה שלכם

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

*

*

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

  1.   דידק ריוס דיג'ו

    יש דברים שאני לא מסכים כל כך.
    בנקודה 5 ... מכיוון 200px = 15,38% והבאים הבאים ... לא ניתן לבצע השוואת ייחוס זו ללא כל מדד אב, הגודל לפיקסלים אינו מדד יחסי כמו אחוזים!

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

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

    טוב לכל השאר

    1.    דידק ריוס דיג'ו

      בנקודה 5 הם מעמידים אותך בהקשר ומספרים לך על פריסה כוללת של 1300 פיקסלים עם 3 עמודות, אחת של 200, 300 ו -1000.

      אם אתה מעביר את זה לאחוזים, במקרה שלהם הם כמו שאתה אומר, 15,38% ((200 * 100) / 1300) (עשרוני למטה, מערכת בינלאומית: P)

      אבל אם אנחנו מדברים על פריסה של 500 פיקסלים ויש לנו 3 עמודות, אחת של 200, אחרת של 200 ואחת של 100 פיקסלים, האחוזים כבר לא זהים, במקרה זה 200 פיקסלים = 40% ((200 * 100) / 500)

      הם יהיו: 200 פיקסלים = 40% ו- 100 פיקסלים = 10%

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

      דרישת שלום

      1.    לואה לורו דיג'ו

        איזה כישלון, אתה צודק לחלוטין בעולם! שוב תודה ;)