תוֹכֶן
- תמונות רספונסיביות
- ביצועים
- העמסה מותנית ועצלנית
- טיפוגרפיה רספונסיבית
- שאילתות מדיה ב- JavaScript
- שיפור פרוגרסיבי
- מַעֲרָך
- פריסת רשת CSS
- סוף כל סוף
עיצוב אתרים רספונסיבי נשמע פשוט להפליא. בחר ברשתות גמישות עבור הפריסה, השתמש במדיה גמישה (תמונות, וידאו, iframes), והחל שאילתות מדיה כדי לעדכן את המדידות האלה כדי לסדר בצורה הטובה ביותר תוכן בכל תצוגה. בפועל למדנו שזה לא כל כך קל. נושאים זעירים שצצים במהלך כל פרויקט גורמים לנו לגרד את הראש, ולעתים אף לגלף תעלות ציפורניים על שולחנותינו.
מאז שהתחלתי לאצור את העלון השבועי לעיצוב רספונסיבי, התמזל מזלי לדבר עם חברים רבים בקהילת האינטרנט ולשמוע את חוויותיהם. רציתי לברר בדיוק מה הקהילה באמת רוצה ללמוד, אז הפצתי סקר לקוראים. להלן התוצאות המובילות:
- תמונות רספונסיביות
- שיפור ביצועים
- טיפוגרפיה רספונסיבית
- שאילתות מדיה ב- JavaScript
- שיפור פרוגרסיבי
- מַעֲרָך
מתוך מחשבה על נושאים אלה, רצתי סדרת פודקאסטים וביקשתי ממנהיגי התעשייה שלנו למחשבותיהם. בתגובותיהם נקודה אחת הייתה פה אחד: התמקדו בהשגת היסודות לפני שתתחילו לדאוג לטכניקות מרגשות ומתקדמות. על ידי החזרת הדברים לבסיס, אנו מסוגלים לבנות ממשק חזק לכולם, ולשמור על תכונות כאשר ההקשר של המכשיר או המשתמש מאפשר זאת.
'אז ... מה עם הטכניקות המתקדמות האלה?' אני שומע אותך שואל. אני חושב שסטיבן היי סיכם זאת בצורה הטובה ביותר כשאמר: 'טכניקת ה- RWD האולטימטיבית היא להתחיל בכך שלא השתמש בשום טכניקות RWD מתקדמות. התחל עם תוכן מובנה ובנה את הדרך שלך למעלה. הוסף נקודת שבירה רק כשהעיצוב נשבר והתוכן מכתיב אותו ו ... זהו. '
במאמר זה, אתחיל ביסודות ואוסיף שכבות מורכבות ככל שהמצב מאפשר, כדי לבנות את אותן טכניקות מתקדמות. בוא נתחיל.
תמונות רספונסיביות
אמצעי תקשורת נוזלים היו חלק מרכזי ב- RWD כשהוגדר לראשונה על ידי איתן מרקוט. רוחב: 100%; , רוחב מקסימלי: 100%; עדיין עובד היום, אך נוף הדימוי הרספונסיבי הפך להיות הרבה יותר מסובך. עם הגדלת מספר גדלי המסך, צפיפות הפיקסלים והתקנים לתמיכה אנו חושקים בשליטה גדולה יותר.
שלושת החששות העיקריים הוגדרו על ידי קבוצת הקהילה Responsive Images (RICG):
- גודל הקילובייט של התמונה שאנו שולחים מעל החוט
- הגודל הפיזי של התמונה שאנו שולחים למכשירי DPI גבוהים
- חיתוך התמונה בצורה של כיוון אמנות לגודל המסוים של נמל התצוגה
יואב וייס, בעזרת Indiegogo, ביצע את רוב העבודה על הטמעת ה- Blink - מזלג ה- WebKit של גוגל, ועד שתקראו זה יישלח ל- Chrome ו- Firefox. ספארי 8 ישלח srcset, אולם תכונת הגדלים היא רק בבניינים ליליים והתמונה> עדיין לא מיושמת.
עם הגעתו של כל דבר חדש לתהליך פיתוח האינטרנט שלנו, זה יכול להיות קשה להתחיל. בואו נעבור דוגמה שלב אחר שלב.
img! - הכריז על תמונת ה- fallback עבור כל הדפדפנים התומכים בתמונות -> src = "horse-350.webp"! - הצהיר על כל גדלי התמונה ב- srcset. כלול את רוחב התמונה באמצעות מתאר w כדי ליידע את הדפדפן על רוחב כל תמונה. -> srcset = "horse-350.webp 350w, horse-500.webp 500w, horse-1024.webp 1024w, horse.webp 2000w "! - גדלים מודיעים לדפדפן על פריסת האתר שלנו. כאן אנו אומרים עבור כל נמל תצוגה בגודל 64 ש"ח וגדול יותר, השתמש בתמונה שתתפוס 70% מתצפית התצוגה -> גדלים = "(מינימום רוחב: 64 ש"ח) 70 ווג,! - אם נמל התצוגה אינו זה גדול, אז עבור כל נמל תצוגה שהוא 37.5 ש 'ומעלה, השתמש בתמונה שתופסת 95% מתצפית -> (מינימום רוחב: 37.5em) 95vw,! ואם התצוגה קטנה מזה, השתמש תמונה שתופסת 100% מתצפית -> 100 וווו "! - תמיד יש טקסט אל. -> alt =" סוס "/>
מנקודת מבט ביצועים זה לא משנה אם אתה משתמש ברוחב מינימלי או ברוחב מקסימלי במאפיין גדלים - אך סדר המקור משנה. הדפדפן ישתמש תמיד בגודל ההתאמה הראשון.
כמו כן, זכור שאנו מקודדים את תכונת הגדלים המוגדרת ישירות כנגד העיצוב שלנו. זה עלול לגרום לבעיות להתקדם. לדוגמא, אם אתה מעצב מחדש את האתר שלך, תצטרך לבחון מחדש את כל התמונות> או התמונות> ולהגדיר מחדש את הגדלים. אם אתה משתמש ב- CMS, ניתן להתגבר על זה כחלק מתהליך הבנייה שלך.
לוורדפרס כבר יש תוסף שיעזור. זה מגדיר את ה- srcset על זני תמונה סטנדרטיים של WP ומאפשר לך להכריז על גדלים במיקום מרכזי. כאשר הדף נוצר ממסד הנתונים, הוא מחליף את כל האזכורים ב- img> ומחליף אותם בסימון התמונה.
בסיסי
- חשוב האם אתה באמת צריך לכלול תמונה. האם תוכן התמונה הוא ליבה, או שהוא דקורטיבי? תמונה אחת פחות משמעה זמן טעינה מהיר יותר
- בצע אופטימיזציה לתמונות שאתה צריך לכלול באמצעות ImageOptim
- הגדר כותרות פג תוקף לתמונות שלך בשרת או בקובץ .htaccess (ראה פרטים תחת 'ביצועים')
- PictureFill מספק תמיכה במילוי מילוי לתמונות
מִתקַדֵם
- לטעון עצלן את התמונות שלך באמצעות התוסף Lazy Load של jQuery
- השתמש ב- HTMLImageElement.Sizes ו- HTMLPictureElement לצורך זיהוי תכונות.
- התוסף המתקדם של PictureFill WP, שנמצא ב- Github, יאפשר לכם להגדיר ערכי רוחב וגודל תמונה מותאמים אישית
ביצועים
כדי להשיג את הביצועים המהירים ביותר בדפים שלנו, אנו זקוקים לכל ה- HTML וה- CSS הדרושים בכדי לעבד את החלק העליון של הדף שלנו בתגובה הראשונה מהשרת. מספר הקסם הזה הוא 14 קילו-בייט ומבוסס על גודל חלון העומס המרבי בזמן הלוך-חזור הראשון (RTT).
פטריק האמן, המוביל הטכני בחזית ב"גרדיאן ", וצוותו הצליחו לפרוץ את מחסום 1000ms באמצעות שילוב של טכניקות חזית ומאחור. גישתו של הגרדיאן היא להבטיח את התוכן הנדרש - המאמר - מועבר למשתמש במהירות האפשרית ובתוך מספר הקסם של 14 קילו-בייט.
בואו נסתכל על התהליך:
- המשתמש לוחץ על קישור של גוגל לסיפור חדשות
- בקשת חסימה אחת נשלחת למסד הנתונים של המאמר. אין צורך בסיפורים או הערות קשורות
- ה- HTML נטען המכיל CSS קריטי
- בראש>
- תהליך 'חתוך את החרדל' מתבצע וכל רכיב מותנה המבוסס על תכונות המכשיר של המשתמש נטען
- כל תוכן הקשור למאמר עצמו או תומך בו (תמונות מאמרים קשורות, הערות מאמרים וכן הלאה) נטען למקומו
אופטימיזציה של נתיב העיבוד הקריטי כך פירושה שהראש> הוא 222 קווים. עם זאת, התוכן הקריטי שהמשתמש ראה לראות עדיין מגיע בעומס התשלום הראשוני של 14 קילו-בייט כאשר gzipped. זה התהליך שעוזר לשבור את מחסום ההפצה של 1000ms.
העמסה מותנית ועצלנית
טעינה מותנית משפרת את חוויית המשתמש בהתבסס על תכונת המכשיר שלהם. כלים כמו Modernizr מאפשרים לך לבדוק את התכונות הללו, אך שים לב שרק בגלל שדפדפן אומר שהוא מציע תמיכה, זה לא תמיד אומר תמיכה מלאה.
אחת הטכניקות היא לעכב את טעינת משהו עד שהמשתמש מראה כוונה להשתמש בתכונה זו. זה ייחשב מותנה. ניתן להפסיק את הטעינה בסמלים החברתיים עד שהמשתמש יעבור מעל או ייגע בסמלים, או שתמנעו מטעינה של מפת הגדרות iframe על גבי תצוגות תצוגה קטנות יותר, שם המשתמש עשוי להעדיף קישור ליישום מיפוי ייעודי. גישה נוספת היא 'לחתוך את החרדל' - ראה תיבה לעיל לפרטים על כך.
טעינה עצלה מוגדרת כמשהו שתמיד אתה מתכוון לטעון בדף - תמונות שהם חלק מהמאמר, תגובות או מאמרים קשורים אחרים - אך שלא צריך להיות שם כדי שהמשתמש יתחיל לצרוך את התוכן.
בסיסי
- אפשר זיפינג לקבצים והגדר כותרות תפוגה של כל התוכן הסטטי (netm.ag/expire-260)
- השתמש בתוסף jQuery של Lazy Load. פעולה זו טוענת תמונות כאשר מתקרבים לנמל התצוגה, או לאחר פרק זמן מסוים
מִתקַדֵם
- הגדר במהירות או CloudFlare. רשתות מסירת תוכן (CDN) מעבירות את התוכן הסטטי שלך למשתמשים מהר יותר מהשרת שלך, ויש לה כמה שכבות בחינם
- אפשר SPDY לדפדפנים המותאמים ל- http2 כדי לנצל את תכונות ה- http2 כמו בקשות http מקבילות
- ספירה חברתית מאפשרת טעינה מותנית של הסמלים החברתיים שלך
- שימוש ב- API של מפות סטטיות יאפשר לך לכבות מפות אינטראקטיביות של גוגל לתמונות. התבונן בדוגמה של בראד פרוסט באתר netm.ag/static-260
- Ajax Include Pattern יטען קטעי תוכן ממאפיין נתונים לפני, נתונים אחרי או החלפת נתונים
טיפוגרפיה רספונסיבית
טיפוגרפיה נועדה להפוך את התוכן שלך לקל לעיכול. טיפוגרפיה רספונסיבית מרחיבה זאת כדי להבטיח קריאות במגוון רחב של מכשירים ותצפיות. ג'ורדן מור מודה שהטיפוס הזה הוא דבר שהוא לא מוכן לזוז אליו. זרוק תמונה או שתיים אם אתה צריך, אך וודא שיש לך סוג נהדר.
סטיבן היי מציע להגדיר את גודל הגופן של HTML ל- 100 אחוז (קרא: פשוט השאר אותו כמו שהוא) מכיוון שכל דפדפן או יצרן מכשירים מגדיר ברירת מחדל קריאה ברזולוציה סבירה עבור רזולוציה או מכשיר מסוימים. עבור רוב הדפדפנים השולחניים זה 16 פיקסלים.
מצד שני, מור משתמש ביחידת REM ובגודל גופן HTML כדי להגדיר גודל גופן מינימלי עבור רכיבי תוכן מסוימים. לדוגמא, אם ברצונך שקו הלוואי של מאמר יהיה תמיד 14 פיקסלים, הגדר זאת כגודל הגופן הבסיסי על אלמנט ה- HTML והגדר .byline {font-size: 1rem;}. כשמגדלים את הגוף: גודל הגופן: כדי להתאים לתצוגה, לא תשפיע על סגנון ה- .by-line.
חשוב גם שאורך שורת קריאה טובה - כוון ל -45 עד 65 תווים. יש סימניה שבה אתה יכול לבדוק את התוכן שלך. אם אתה תומך במספר שפות בעיצוב שלך, אורך השורה עשוי להשתנות גם כן. מור מציע להשתמש ב: lang (de) מאמר {max-width: 30em} כדי לכסות על כל הבעיות שם.
כדי לשמור על קצב אנכי, הגדר שוליים תחתונים כנגד חסימות תוכן, ul>, ol>, blockquote>, table>, blockquote> וכן הלאה, זהה לגובה הקו שלך. אם הקצב מופרע עם הצגת תמונות, תוכל לתקן אותו על ידי הוספת Baseline.js או BaselineAlign.js.
בסיסי
- ביסס את הגופן שלך על 100 אחוז גוף
- עבודה ביחידות em יחסית
- הגדר את השוליים לגובה הקו שלך כדי לשמור על קצב אנכי בעיצוב שלך
מִתקַדֵם
- שפר את ביצועי טעינת הגופנים באמצעות Enhance.js או טעינת גופנים נדחית
- השתמש ב- Sass @ כולל לכותרות סמנטיות.
- לעתים קרובות עלינו להשתמש בסגנון h5 ביישומון סרגל צד שדורש סימון h2. השתמש במיקסינים הטיפוגרפיים של Bearded כדי לשלוט בגודל ולהישאר סמנטי עם הקוד שלהלן:
שאילתות מדיה ב- JavaScript
מאז שהצלחנו לשלוט בפריסה במגוון תצוגות תצוגה באמצעות שאילתות מדיה, חיפשנו דרך לקשור את זה גם להפעלת JavaScript שלנו. ישנן כמה דרכים להפעיל JavaScript על רוחבים מסוימים, גבהים וכיווני תצוגה מסוימים, וכמה אנשים חכמים כתבו כמה תוספי JS מקומיים קלים לשימוש כמו Enquire.js ו- Simple State Manager. אתה יכול אפילו לבנות את זה בעצמך באמצעות matchMedia. עם זאת, יש לך את הבעיה שאתה צריך לשכפל את שאילתות המדיה שלך ב- CSS וב- JavaScript שלך.
לאהרון גוסטפסון יש טריק מסודר שמשמעותו שאתה לא צריך לנהל ולהתאים את שאילתות התקשורת שלך ב- CSS שלך וב- JS שלך. הרעיון הגיע במקור מג'רמי קית 'ובדוגמה זו גוסטפסון לקח אותו ליישום מלא.
בעזרת getActiveMQ (netm.ag/media-260), הזריק את div # getActiveMQ- צופה בקצה אלמנט הגוף והסתיר אותו. ואז בתוך ערכת CSS # getActiveMQ-watcher {font-family: break-0;} לשאילתת המדיה הראשונה, font-family: break-1; לשנייה, משפחת גופנים: הפסקה 2; לשלישי וכן הלאה.
התסריט משתמש ב- watchResize () (netm.ag/resize-260) כדי לבדוק אם גודל התצוגה השתנה, ואז קורא בחזרה את משפחת הגופנים הפעילה. עכשיו אתה יכול להשתמש בזה כדי לחבר שיפורי JS כמו להוסיף ממשק לשוניות ל- dl> כאשר תצוגת התצוגה מאפשרת, לשנות את ההתנהגות של lightbox או לעדכן את הפריסה של טבלת נתונים. בדוק את getActiveMQ Codepen בכתובת netm.ag/active-260.
בסיסי
- תשכח מ- JavaScript לתצוגות תצוגה שונות. לספק למשתמשים פונקציות תוכן ואתרים באופן שיוכלו לגשת אליו בכל נמלי התצוגה. לעולם לא נצטרך JavaScript
מִתקַדֵם
- הרחב את שיטת גוסטפסון על ידי שימוש ב- Breakup כרשימה מוגדרת מראש של שאילתות מדיה ואוטומציה של יצירת רשימת משפחות הגופנים עבור צופה getActiveMQ
שיפור פרוגרסיבי
תפיסה מוטעית נפוצה לגבי שיפור פרוגרסיבי היא שאנשים חושבים, 'נו טוב אני לא יכול להשתמש בתכונה החדשה הזו', אבל באמת, זה ההפך. שיפור מתקדם פירושו שתוכל לספק תכונה אם היא נתמכת רק בדפדפן אחד או אפילו לא, ועם הזמן אנשים יקבלו חוויה טובה יותר עם הגעת גרסאות חדשות.
אם אתה מסתכל על פונקציית הליבה של אתר כלשהו, אתה יכול לספק את זה כ- HTML ולצד הצד של השרת לבצע את כל העיבודים. תשלומים, טפסים, לייקים, שיתוף, מיילים, לוחות מחוונים - כל זה יכול להיעשות. לאחר שהמשימה הבסיסית נבנית נוכל להניח את הטכנולוגיות המדהימות על גבי כך, מכיוון שיש לנו רשת ביטחון לתפוס את אלה שעוברים דרך. מרבית הגישות המתקדמות שדיברנו כאן מבוססות על שיפור פרוגרסיבי.
מַעֲרָך
פשוט לומר פריסה גמישה, אך יש לה גישות רבות ושונות. צור פריסות רשת פשוטות עם פחות סימון באמצעות: בורר nth-child ().
/ * הכריז על הרוחב הראשון של הנייד עבור הרשת * / .grid-1-4 {float: left; רוחב: 100%; } / * כאשר התצוגה היא לפחות 37.5em אז הגדר את הרשת ל- 50% לכל אלמנט * / @media (מינימום רוחב: 37.5em) {.grid-1-4 {רוחב: 50%; } / * נקה את הציפה כל אלמנט שני אחרי הראשון. זה מכוון ל -3, 5, 7, 9 ... ברשת. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (מינימום רוחב: 64em) {.grid-1-4 {רוחב: 25%; } / * הסר את הסימון הקודם * / .grid-1-4: nth מהסוג (2n + 1) {clear: none; } / * נקה את הציפה כל אלמנט 4 אחרי הראשון. זה מכוון ל -5, 9 ... ברשת. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
נופף לשלום לשימוש במיקום וצף לפריסות שלך. אמנם הם שימשו אותנו עד היום, אך השימוש בהם בפריסה היה פריצה הכרחית. כעת יש לנו שני ילדים חדשים בלוק שיעזרו לתקן את כל מצוקות הפריסה שלנו - Flexbox ו- Grids.
Flexbox מעולה למודולים בודדים, השולטים בפריסת חלקי תוכן בכל אחד מהמודולים. יש פריסות שאנו מנסים לספק שניתן להשיג בקלות רבה יותר באמצעות Flexbox, וזה נכון עוד יותר באתרים רספונסיביים. למידע נוסף על כך, עיין במדריך של CSS Tricks ל- Flexbox או ב- Flexbox Polyfill.
פריסת רשת CSS
רשת נועדה יותר לפריסת רמת המאקרו. מודול פריסת הרשת נותן לך דרך נהדרת לתאר את הפריסה שלך בתוך ה- CSS שלך. בזמן שהוא עדיין בשלב הטיוטה כרגע, אני ממליץ על מאמר זה על פריסת ה- CSS Grid מאת רייצ'ל אנדרו.
סוף כל סוף
אלה רק כמה טיפים להרחבת התרגול הרספונסיבי שלך. כשאתה ניגש לכל עבודה מגיבה חדשה, קח צעד אחורה וודא שאתה מקבל את היסודות הנכונים. התחל בתוכן שלך, ב- HTML ובחוויות משופרות של שכבות עליהם ולא תהיה שום מגבלה לאן תוכל לקחת את העיצובים שלך.
מאמר זה הופיע במקור בגיליון 260 של מגזין נטו.
