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

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

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

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

1. הבנת השיפור המתמיד

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

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

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

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

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

הנה סקירה כללית של התכונות העיקריות של שיפור פרוגרסיבי, כי אתה צריך לקחת בחשבון:

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

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

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

2. קיום בגיליונות סגנונות

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

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

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

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

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

שתי המטרות העיקריות של HTML שלך הן כדלקמן:

לגמרי סמנטי ותוקף קוד
א ניסיון עקבי לכולם

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

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

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

אבל עדיין יש שאלה אחת גדולה: אם דפדפן אינו תומך ב- CSS המודרני שלי, מה עלי לעשות?

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

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

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

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

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

3. טיפול ב- JavaScript

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

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

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

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

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

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

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