גרסה ניידת של האתר: איך לעשות? עיצוב גמיש

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

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

השיטה הראשונה - עיצוב תגובה

דפוסי מסתגלת מציעים שתשנה האתר התדמיתי, בהתאם לגודל המסך. באופן כללי, הם נקבעים על 1600, 1500, 1280, 1100, 1024 ו 980 פיקסלים הסטנדרטיים. כדי ליישם את השימוש CSS3 Media שאילתות. עיצוב האתר עצמו אינו משתנה.

יתרונותיה של שיטה זו צריכה לכלול:

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

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

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

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

הדרך השנייה - גרסה נפרדת של האתר

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

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

אבל כאן לא היה נטול חסרונות:

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

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

הדרך השלישית - עיצוב-Ress

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

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

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

הדרך הזולה ביותר לעשות אתר סלולרי

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

תבניות מותאמות אישית הורדה (plugins) עבור בעיצוב אינטראקטיבי. לדוגמה, גלאי נייד WP, וורדפרס נייד Pack, WPSmart נייד ועוד. הם יסייעו להציג את האתר בצורה נכונה בטלפון, ואתה מקבל כמה טיפים כי יש לתקן כדי להתאים טוב יותר את הגרסה הניידת של דף.

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

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

עקרונות ליצירת גרסאות ניידים

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

הסר את כל מיותר

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

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

יישור

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

איגוד

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

וניתוק

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

רשימות

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

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

השלמה אוטומטית

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

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

כל הקריאה, כל שנצפתה

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

כמה נתונים סטטיסטיים

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

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

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

איפה הצורך הוא גרסה ניידת

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

בלי הגרסה הניידת לא יכולה להתקיים:

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

במקום מסקנה

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

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

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