ווי צו מאַכן אַ וועבזייטל אָפּרופיק?

מיט די דעמאָקראַטיזאַטיאָן פון סמאַרטפאָנעס און טאַבלאַץ, מאכן אַ וועבזייטל אָפּרופיק איז געווארן יקערדיק. א אָפּרופיק פּלאַץ איז ביכולת צו אויטאָמאַטיש אַדאַפּט צו פאַרשידענע בראַוזינג דעוויסעס - דעסקטאַפּ, רירעוודיק, טאַבלעט - צו צושטעלן אַן אָפּטימאַל באַניצער דערפאַרונג. א אָפּרופיק וועבזייטל איז אויך גוט פֿאַר וועב רעפערענסינג.

לויט Google, מער ווי 60% פון אָנפֿרעגן זענען איצט געפירט אויס פון אַ רירעוודיק. עס איז דעריבער ימפּעראַטיוו צו אַפּטאַמייז דיין פּלאַץ פֿאַר די דעוויסעס, אַנדערש דיין פאַרקער וועט פאַלן. נאָך פילע זייטלעך זענען נאָך נישט דיזיינד אַדאַפּטיוולי.

נאָוואַדייַס, די פּלאַן פון אַזוי גערופענע "וועב זייטלעך"אָפּרופיק"(אָדער אַדאַפּטאַבאַל) איז געווארן יקערדיק. אבער וואָס פּונקט טוט דאָס מיינען? ווי אַזוי טאָן איר מאַכן אַ וועבזייטל אָפּטימיזעד פֿאַר אַלע פאַרשטעלן סיזעס?

אָפּרופיק פּלאַן באשטייט פון קריייטינג אַ פּלאַץ וואָס איז ביכולת צו אויטאָמאַטיש אַדאַפּט אין טערמינען פון אויסלייג און דימענשאַנז צו פאָרשלאָגן אַן אָפּטימאַל באַניצער דערפאַרונג אויף אַלע דעוויסעס: דעסקטאַפּס 🖥️, טאַבלאַץ 💻, סמאַרטפאָנעס 📱.

דאָ זענען די בעסטער פּראַקטיסיז צו שטעלן אין פּלאַץ צו שאַפֿן אַ בישליימעס אָפּרופיק פּלאַץ:

🚀 ניצן קאָרעוו וניץ (%, em, rem) אלא ווי בילדצעלן אין CSS

צו לאָזן פול אַדאַפּטאַבילאַטי פון עלעמענטן, עס איז רעקאַמענדיד צו נוצן קאָרעוו וניץ פון מעזשערמאַנט אַזאַ ווי %, em אָדער rem אלא ווי פאַרפעסטיקט בילדצעלן אין דיין CSS כּללים. פּערסענטידזשיז לאָזן אָטאַמאַטיק רעסיזינג באזירט אויף פאַרשטעלן גרייס.

איינער פון די בעסטער פּראַקטיסיז פֿאַר קריייטינג אַ אָפּרופיק פּלאַץ איז צו ויסמיידן צו נוצן פאַרפעסטיקט בילדצעלן אין דיין CSS כּללים. טאַקע, בילדצעלן טאָן ניט לאָזן די גרייס פון די עלעמענטן צו זיין צוגעפאסט דיפּענדינג אויף די מיטל.

עס איז רעקאַמענדיד צו טויווע אַזוי-גערופן קאָרעוו וניץ ווי פּערסענטידזשיז (%), עם אָדער רעם אין פּלאַץ. דער % אין באַזונדער וועט לאָזן אָטאַמאַטיק רעסיזינג פון באָקסעס, טעקסטן, מאַרדזשאַנז, עטק. דיפּענדינג אויף די פאַרשטעלן גרייס.

פֿאַר בייַשפּיל, אַ ברייט שטעלן צו 50% אין CSS וועט ענשור אַז דער עלעמענט וועט שטענדיק נעמען אַרויף צו 50% פון די בנימצא ברייט, צי אויף אַ פּיסי, טאַבלעט אָדער סמאַרטפאָנע פאַרשטעלן. דעם פליסיק צוגאַנג איז ידעאַל פֿאַר שאפן פלעקסאַבאַל לייאַוץ וואָס אַדאַפּט בישליימעס.

🚀 דעפינירן מעדיע פֿראגן אין די CSS סטילעשעעט

CSS מעדיע קוויריז זענען יקערדיק ינסטראַקשאַנז פֿאַר שאַפֿן אַ אָפּרופיק וועבזייַטל. זיי לאָזן איר צו דעפינירן ספּעציפיש CSS כּללים וואָס וועט צולייגן דיפּענדינג אויף די ברייט פון די אַרויסווייַזן פֿענצטער (וויעוופּאָרט).

איר קענען לייכט ספּעציפיצירן לייאַוץ, פאַנץ, מאַרדזשאַנז, עטק. אַנדערש דיפּענדינג אויף צי דער באַניצער איז אויף אַ דעסקטאַפּ קאָמפּיוטער, אַ טאַבלעט אָדער אַ סמאַרטפאָנע. לעמאָשל, מיר קענען דעפינירן אַז אין אונטער 768 פּקס ברייט, נאַוויגאַציע ענדערונגען צו האַמבורגער מעניו.

מעדיע קוויריז לאָזן איר צו פיינלי אַדאַפּט די רענדערינג און אָרדענונג פון עלעמענטן דיפּענדינג אויף די פאַרשטעלן גרייס. קאַמביינד מיט פלעקסאַבאַל קסס וניץ, זיי זענען יקערדיק פֿאַר שאַפֿן אַ גאנץ פּלאַץ אָפּרופיק און צושטעלן די בעסטער באַניצער דערפאַרונג.

🚀 מאַכן בילדער אָפּרופיק

די בילדער מוזן אויך זיין צוגעפאסט צו פאַרמייַדן זיי פון סטרעטשינג דיספּראַפּאָרשאַנאַטלי אויף זיכער דעוויסעס. מוז דעריבער אַפּטאַמייז דיין בילדער פֿאַר סעאָ. א פּשוט בעסטער פיר איז צו שטעלן זייער ברייט ווי אַ פּראָצענט אין HTML קאָד אָדער דורך CSS.

מיר קענען אויך נוצן די CSS פאַרמאָג "מאַקס-ברייט: 100%" אַזוי אַז די בילד אַדאַפּץ צו זיין קאַנטיינער און האַלטן די פּראַפּאָרשאַנז. עס איז אויך רעקאַמענדיד צו דעפינירן עטלעכע ווערסיעס פון די זעלבע בילד אין פאַרשידענע רעזאַלושאַנז און צו אָנווייַזן דעם בלעטערער וואָס ווערסיע צו דינען דיפּענדינג אויף די פאַרשטעלן גרייס דורך די " אַטריביוטsrcset".

אין אָפּרופיק, בילדער זאָל אויטאָמאַטיש רעסיזע אלא ווי סטרעטשינג, צו ענשור אָפּטימאַל קוואַליטעט אויף אַלע דעוויסעס.

🚀 ניצן אַ אָפּרופיק CSS פריימווערק

ניצן אַ אָפּרופיק CSS פריימווערק איז איינער פון די בעסטער פּראַקטיסיז פֿאַר מאכן אַ וועבזייטל אָפּרופיק. CSS פראַמעוואָרקס ווי Bootstrap, Foundation, Bulma און Materialize פאָרשלאָגן פּרעדעפינעד אויסלייג גרידס און אָפּרופיק קאַמפּאָונאַנץ וואָס מאַכן עס גרינג צו שאַפֿן אַ אָפּרופיק וועבזייטל.

די פראַמעוואָרקס צושטעלן גרייט-צו-נוצן CSS קלאסן וואָס לאָזן איר צו שאַפֿן לייאַוץ פלעקסאַבאַל און אָפּרופיק בלאַט. זיי נוצן טעקניקס אַזאַ ווי מעדיע קוויריז צו אויטאָמאַטיש סטרויערן די אויסלייג און סטיל באזירט אויף די פאַרשטעלן גרייס פון די מיטל געניצט צו זען דעם פּלאַץ.

דורך ניצן אַ אָפּרופיק CSS פריימווערק, איר קענען געשווינד שטעלן אַ יקערדיק סטרוקטור פֿאַר דיין וועבזייטל וואָס אַדאַפּט זיך סמודלי צו פאַרשידענע דעוויסעס און פאַרשטעלן סיזעס. איר קענען לייכט אָרגאַניזירן די יסודות פון דיין פּלאַץ מיט די גרידס צוגעשטעלט דורך די פריימווערק, וואָס אַלאַוז אַ קאָנסיסטענט אויסלייג אויף אַלע דעוויסעס.

🚀 טעסט רענדערינג אויף אַלע דעוויסעס

עס איז יקערדיק צו פּרובירן די אַרויסווייַזן פון דיין וועבזייטל אויף קאָמפּיוטערס, טאַבלאַץ און סמאַרטפאָנעס צו ענשור אַז עס אַדאַפּץ בישליימעס צו יעדער פאַרשטעלן ברייט.

רובֿ מאָדערן בראַוזערז, אַזאַ ווי Google קראָום און מאָזיללאַ פירעפאָקס, פאָרשלאָגן ינאַגרייטיד אַנטוויקלונג מכשירים. די מכשירים לאָזן איר סימולירן פאַרשידענע דעוויסעס און פאַרשטעלן סיזעס צו וויזשוואַלייז די רענדערינג פון די וועבזייטל. איר קענט אַקסעס די מכשירים דורך רעכט-קליקינג אויף די בלאַט און סעלעקטירן "דורכקוקן”Ou“דורכקוקן עלעמענט".

עס זענען פריי אָנליין באַדינונגס אַזאַ ווי בראַוזערסטאַק און קראָססבראָווסער טעסטינג וואָס לאָזן איר צו פּרובירן די רענדערינג פון אַ וועבזייטל אויף אַ ברייט פאַרשיידנקייַט פון דעוויסעס און בראַוזערז. די סערוויסעס לאָזן איר צו זען דיין וועבזייטל אויף פאַרשידענע ווירטואַל אָדער גשמיות דעוויסעס, און געבן איר אַ קלאָר געדאַנק פון ווי עס וועט קוקן אויף יעדער מיטל.

מיטל עמולאַטאָרס און סימיאַלייטערז זענען ווייכווארג וואָס רעפּלאַקייט די קעראַקטעריסטיקס און נאַטור פון פאַקטיש דעוויסעס. פֿאַר בייַשפּיל, צו פּרובירן אויף יאָס, איר קענען נוצן די Xcode עמולאַטאָר פֿאַר עפּל דעוויסעס.

פֿאַר אַנדרויד, אַנדרויד סטודיאָ עמולאַטאָר איז בנימצא. די מכשירים לאָזן איר צו פּרובירן דיין וועבזייטל אויף ווירטואַל דעוויסעס מיט פאַרשידענע פאַרשטעלן רעזאַלושאַנז.

🚀 ויסמיידן עלעמענטן פון פאַרפעסטיקט גרייס

צו מאַכן אַ וועבזייטל אָפּרופיק, עס איז יקערדיק צו ויסמיידן פאַרפעסטיקט-גרייס עלעמענטן. דאָ זענען עטלעכע עצות צו דערגרייכן דעם:

ניצן פלעקסאַבאַל וניץ פון מעזשערמאַנט: אַנשטאָט ניצן בילדצעלן (פּקס) צו דעפינירן די גרייס פון עלעמענטן, אַנשטאָט ניצן פלעקסאַבאַל וניץ פון מעזשערמאַנט אַזאַ ווי פּערסענטידזשיז (%) אָדער וויופּאָרט וניץ (וו, וו). דאָס אַלאַוז עלעמענטן צו וואָג פּראַפּאָרשאַנאַל צו די פאַרשטעלן גרייס.

ניצן פלעקסאַבאַל ראַקס: פלעקסאַבאַל גרידס, ווי די צוגעשטעלט דורך אָפּרופיק CSS פראַמעוואָרקס, לאָזן איר צו שאַפֿן אַדאַפּטיוו לייאַוץ ניצן פלעקסאַבאַל שפאלטן און ראָוז. דאָס אַלאַוז עלעמענטן צו אויטאָמאַטיש ריעריינדזש זיך באזירט אויף פאַרשטעלן גרייס, פּראַוויידינג אַ קאָנסיסטענט באַניצער דערפאַרונג אויף אַלע דעוויסעס.

ויסמיידן פאַרפעסטיקט ברייטז פֿאַר בילדער: אַנשטאָט ספּעציפיצירן אַ פאַרפעסטיקט ברייט פֿאַר בילדער, נוצן די CSS פאַרמאָג "מאַקס-ברייט: 100%;" צו לאָזן בילדער צו רעסיזע פּראַפּאָרשאַנאַל צו די גרייס פון זייער קאַנטיינער. דאָס ינשורז אַז בילדער ריכטיק אַדאַפּט צו פאַרשידענע דעוויסעס אָן אָוווערפלאָוינג אָדער דיסטאָרטינג.

ניצן די מעדיע קוויריז: מעדיע קוויריז זענען קסס כּללים וואָס לאָזן איר צו צולייגן פאַרשידענע סטיילז דיפּענדינג אויף די גרייס פון דעם עקראַן. ניצן זיי צו סטרויערן די נוסח פון עלעמענטן פֿאַר פאַרשידענע פאַרשטעלן רעזאַלושאַנז צו אַפּטאַמייז וויוינג אויף יעדער מיטל.

🚀 פאַרפּאָשעטערן רירעוודיק נאַוויגאַציע

צו פאַרפּאָשעטערן רירעוודיק נאַוויגאַציע און צושטעלן אַ בעסער באַניצער דערפאַרונג, דאָ זענען עטלעכע עצות צו נאָכפאָלגן:

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

באַגרענעצן די נומער פון נאַוויגאַציע עלעמענטן: רעדוצירן די נומער פון נאַוויגאַציע זאכן געוויזן אין די רירעוודיק מעניו. ידענטיפיצירן די מערסט וויכטיק עלעמענטן און פאָקוס אויף זיי פֿאַר גרינגער נאַוויגאַציע. איר קענען אויך גרופּע ענלעך זאכן אונטער קאַטעגאָריעס צו ויסמיידן אַ לאַנג מעניו.

ניצן איין-מדרגה נאַוויגאַציע : ויסמיידן קאָמפּלעקס קאַפּ-אַראָפּ מעניוז מיט קייפל לעוועלס פון סובמענוס אויף רירעוודיק דעוויסעס. אַנשטאָט, אַפּט פֿאַר איין-מדרגה נאַוויגאַציע, ווו יוזערז קענען נאַוויגירן גלייך צו די הויפּט סעקשאַנז פון די פּלאַץ אָן האָבן צו נאַוויגירן דורך קייפל לעוועלס.

ניצן קלאָר קאַמף קנעפּלעך: ניצן קלאָר, לייכט קליקקאַבלע קאַמף קנעפּלעך צו פירן יוזערז צו ספּעציפיש אַקשאַנז, ווי אַדינג אַ פּראָדוקט צו וואָגן אָדער פאָרלייגן אַ פאָרעם. מאַכן זיכער אַז די קנעפּלעך זענען גרויס גענוג צו צאַפּן מיט דיין פינגער.

ניצן ינטואַטיוו ייקאַנז: ניצן רעקאַגנייזאַבאַל ייקאַנז צו פאָרשטעלן אַקשאַנז אָדער קאַטעגאָריעס אין די רירעוודיק נאַוויגאַציע מעניו. געזונט-דיזיינד ייקאַנז קענען העלפֿן ניצערס געשווינד פֿאַרשטיין די טייַטש פון נאַוויגאַציע עלעמענטן אָן לייענען לאַנג לאַבעלס.

🚀 קלאָוזינג

דער פּלאַן פון אָפּרופיק זייטלעך האָבן ווערן אַ נייטיקייַט צו צושטעלן אַ קוואַליטעט באַניצער דערפאַרונג אויף אַלע דעוויסעס.

דורך נאָכפאָלגן בעסטער פּראַקטיסיז אַזאַ ווי ניצן פלעקסאַבאַל CSS וניץ, ימפּלאַמענינג מעדיע פֿראגן אָדער אָפּטימיזינג בילדער, יעדער וועבזייטל קענען זיין פּערפעקטאַד.

דאַנק צו די ביסל פּשוט כּללים, איר וועט גאַראַנטירן אָפּטימאַל ווייַז פון דיין וועבזייטל אויף דעסקטאַפּ קאָמפּיוטערס, טאַבלאַץ און סמאַרטפאָנעס. ניט מער זומינג אין און אויס פֿאַר באַקוועם נאַוויגאַציע!

צו גיין אפילו ווייַטער, איך רעקאָמענדירן ניצן די שטאַרק WP Rocket פּלוגין אויף וואָרדפּרעסס. עס וועט לאָזן איר צו אַפּטאַמייז ווי פיל ווי מעגלעך די לאָודינג גיכקייַט פון דיין פּלאַץ אָפּרופיק. א פּלאַץ וואָס איז ביידע אַדאַפּטיוו און הינטער-שנעל איז דער שליסל צו באַניצער דערפאַרונג ימפּעקקאַבלע!

FAQ

ק: וואָס איז אָפּרופיק פּלאַן?

א: די responsive design איז אַ וועב דיזיין צוגאַנג וואָס יימז צו מאַכן אַ וועבזייטל אַדאַפּטיוו און פאַנגקשאַנאַל אויף אַלע דעוויסעס און פאַרשטעלן סיזעס. עס אַלאַוז אינהאַלט און אויסלייג צו אויטאָמאַטיש סטרויערן צו צושטעלן אַן אָפּטימאַל באַניצער דערפאַרונג, צי אויף אַ דעסקטאַפּ, טאַבלעט אָדער סמאַרטפאָנע.

ק: פארוואס איז עס וויכטיק צו מאַכן אַ וועבזייטל אָפּרופיק?

א: מאַכן אַ וועבזייטל אָפּרופיק איז יקערדיק צו צושטעלן אַ קאָנסיסטענט, קוואַליטעט באַניצער דערפאַרונג אויף אַלע דעוויסעס. מיט די פאַרגרעסערן אין די נוצן פון רירעוודיק דעוויסעס, עס איז קריטיש צו אַדאַפּט דיין וועבזייטל צו טרעפן באַניצער עקספּעקטיישאַנז און פֿאַרבעסערן דיין זוכן מאָטאָר ראַנג.

ק: וואָס זענען די הויפּט פּרינסאַפּאַלז פון אָפּרופיק וועב אַנטוויקלונג?

א: די שליסל פּרינסאַפּאַלז פון אָפּרופיק וועב אַנטוויקלונג אַרייַננעמען ניצן פלעקסאַבאַל גרידס, ויסמיידן פאַרפעסטיקט-גרייס עלעמענטן, אַדאַפּטינג בילדער, ניצן מעדיע פֿראגן צו צולייגן פאַרשידענע סטיילז דיפּענדינג אויף די גרייס פון דעם בילד. פאַרשטעלן, און די סימפּלאַפיקיישאַן פון נאַוויגאַציע אויף רירעוודיק.

ק: וואָס איז אַ אָפּרופיק CSS פריימווערק?

א: א CSS פריימווערק אָפּרופיק איז אַ סכום פון פאַר-געמאכט CSS סטיילז און אָפּרופיק קאַמפּאָונאַנץ וואָס מאַכן עס גרינג צו שאַפֿן אַ אָפּרופיק וועבזייטל. די פראַמעוואָרקס, אַזאַ ווי Bootstrap, Foundation און Bulma, צושטעלן פלעקסאַבאַל אויסלייג גרידס, גרייט-צו-נוצן CSS קלאסן און אָפּרופיק קאַמפּאָונאַנץ צו פאַרגיכערן די אַנטוויקלונג פּראָצעס.

ק: ווי טאָן איך פּרובירן ווי אַ וועבזייטל רענדערז אויף פאַרשידענע דעוויסעס?

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

ק: וואָס זענען די בעסטער פּראַקטיסיז פֿאַר סימפּלאַפייינג רירעוודיק נאַוויגאַציע?

א: צו פאַרפּאָשעטערן רירעוודיק נאַוויגאַציע, נוצן אַ רירעוודיק נאַוויגאַציע מעניו אַזאַ ווי אַ האַמבורגער מעניו, באַגרענעצן די נומער פון נאַוויגאַציע ייטאַמז, נוצן איין-מדרגה נאַוויגאַציע, נוצן קלאָר קאַמף קנעפּלעך, אַפּטאַמייז פֿאַר גיכקייַט לאָודינג, נוצן ינטואַטיוו ייקאַנז און קעסיידער פּרובירן נאַוויגאַציע אויף פאַרשידענע מכשירים.

ק: ווי קען איך מאַכן מיין יגזיסטינג וועבזייטל אָפּרופיק?

א: צו מאַכן דיין יגזיסטינג וועבזייטל אָפּרופיק, איר קענען נוצן אַ אָפּרופיק CSS פריימווערק צו מאַכן עס גרינגער צו שטעלן אַ אַדאַפּטיוו סטרוקטור. איר וועט אויך דאַרפֿן צו מאָדיפיצירן יגזיסטינג CSS קאָד צו נוצן פלעקסאַבאַל וניץ פון מעזשערמאַנט, ויסמיידן פאַרפעסטיקט-גרייס עלעמענטן און צולייגן ספּעציפיש סטיילז צו פאַרשידענע פאַרשטעלן סיזעס ניצן מעדיע קוויריז.