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

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

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

הדרך הראשונה - עיצוב אדפטיבית

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

היתרונות של שיטה זו הם:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הדרך הזולה ביותר ליצור אתר לנייד

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

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

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

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

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

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

אנחנו מסירים את כל מיותר

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

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

יישור

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

איחוד

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

וניתוק

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

רשימות

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

תוקן הוא שימושי אםהמשתמש יודע בדיוק מה הוא מחפש. לדוגמה, עיר, מספר או תאריך. האפשרות השנייה מתאימה לשמות מורכבים ארוכים או במקרים בהם יש וריאציות רבות של אותו שם, וכל רשימה נפתחת מקרבת את המשתמש צעד אחד קדימה אל המטרה. משתנה עם החלפת אוטומטי משמש לעתים קרובות יותר כאשר המבקר זקוק לעזרה. לדוגמה, אתר סריגה מציעה לקנות מחטים סריגה. המשתמש מזין את שאילתת החיפוש "Metal Knitting Needles", וב tooltip הוא רואה "סריגה מחטים 5 מ"מ", "סריגה מחטים 4.5 מ"מ", וכו '

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

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

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

הכל נקרא, הכל נראה

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

כמה סטטיסטיקות

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

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

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

היכן הגרסה לנייד?

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

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

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

במקום לסיים

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

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

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