היום, רוב האנשים נכנסים לאינטרנט באמצעות גאדג'טים ניידים - טאבלטים, טלפונים, בהקשר זה, גם אופטימיזציית אתרים מגיעה לרמה חדשה. אם נכנס משתמש ורואה שהאתר לא מותאם למכשירים ניידים: לא ניתן לראות את התמונה, הכפתורים זזו החוצה, הפונטים קטנים ולא קריאים, העיצוב מוטה - 99 מתוך 100% שהוא ייצא ולהתחיל לחפש אחר נוח יותר. ורובוט החיפוש יסמן את התיבה שהמשאב אינו רלוונטי, כלומר אינו תואם את שאילתת החיפוש. לכן יש להתאים את עיצוב העמוד למכשירים ניידים שונים. מהי גרסה סלולרית של האתר, איך מייצרים אותה ומהי הדרך הטובה ביותר ליישם אותה? קרא עוד במאמר זה.
אז יש ארבע דרכים מרכזיות להפוך את האתר שלך לידידותי לנייד.
שיטה אחת - עיצוב רספונסיבי
תבניות רספונסיביות משנות את תמונת האתר בהתאם לגודל המסך. ככלל, הם מוגדרים לתקן 1600, 1500, 1280, 1100, 1024 ו-980 פיקסלים. לצורך הטמעה, נעשה שימוש ב-CSS3 Media Queries. עיצוב האתר עצמו אינו משתנה.
היתרונות של שיטה זו כוללים:
- פיתוח נוח,מכיוון שהמבנה עצמו מתאים לפרמטרים של המסך, וכל עדכון אינו מצריך פיתוח עיצובי מאפס, מספיק להתאים את ה-CSS וה-HTML;
- כתובת אתר אחת – המשתמש לא צריך לזכור מספר שמות, אין צורך בהפניה (הפניה מכתובת אחת לאחרת), מה שעלול לסבך את עבודתו של מנהל האתר, וקל יותר לבצע חיפוש מנוע למיין ולדרג משאב עם כתובת אחת.
כמובן שלתבניות אדפטיביות יש חסרונות, שהם, אגב, יותר מיתרונות. עם זאת, מפתחים רבים דבקים בקונספט הזה, למשל, תאגיד גוגל, שגרסת האתר הסלולרית שלה היא בעלת עיצוב אדפטיבי. אז, חסרונות:
- עיצוב רספונסיבי אינו תומך באותן משימות בנייד כמו במחשב. אם זו, למשל, גרסה ניידת של אתר בנק, שבה סביר יותר שמידע על שער החליפין או הכספומטים הקרובים יהיו חשובים למשתמש, אז העיצוב הזה מספיק. אבל אם זהו משאב מובנה מורכב עם הרבה קטעים ותתי קטעים, אז המבקרים בקושי יאהבו פריסה אדפטיבית.
- טעינה איטית הופכת אתר מועדף לאתר מעורר שנאה. זה נכון במיוחד עבור משאבים שבהם אנימציות, סרטונים, חלונות קופצים ואלמנטים פעילים אחרים נמצאים בשפע. בגלל המשקל הגבוה, העמוד פשוט "יאט", המשתמש יכעס ויעזוב, ועמדות החיפוש של האתר ייפלו.
- חוסר היכולת לכבות את הגרסה הניידת הוא חיסרון משמעותי נוסף. אם אלמנט כלשהו מוסתר על ידי פריסה כזו, אתהאין שום דבר שאתה יכול לעשות כדי לפתוח אותו, בניגוד לאתרים שבהם אתה יכול לכבות אותו ולעבור לדומיין רגיל.
עם זאת, גרסה ניידת כזו של האתר במהירות, ללא כישורים ועלויות מיוחדות, מאפשרת להתאים את המשאב לכל גאדג'ט. אבל, לאור החסרונות המפורטים, הוא יתאים למשאבים קטנים ופשוטים עם מינימום מידע ומולטימדיה, ללא ניווט והנפשה מורכבים. לאתר מורכב מתאימות 2 שיטות אחרות.
שיטה שנייה - גרסה נפרדת של האתר
שיטה זו נפוצה מאוד ולרוב מצליחה להפוך את האתר לקריאה יותר במכשיר נייד. המהות שלו היא ליצור גרסה נפרדת של הדף, מצויירת עבור האפליקציה וממוקמת בכתובת URL נפרדת או תת-דומיין, למשל, m.vk.com. יחד עם זאת, הפונקציונליות העיקרית נשמרת, עיצוב האתר פשוט נראה אחרת. היתרונות של שיטה זו ברורים:
- ממשק ידידותי למשתמש;
- קל לשנות ולערוך מכיוון שהגרסה קיימת בנפרד מהמשאב הראשי;
- בשל המשקל הנמוך, גרסה נפרדת של האתר עובדת הרבה יותר מהר מאשר תבנית אדפטיבית;
- לרוב אפשר לעבור לגרסה הראשית של העמוד מהנייד.
אבל גם כאן היו כמה חסרונות:
- כתובות מרובות - גרסת שולחן העבודה והנייד של האתר. איך לגרום למשתמש לזכור שתי אפשרויות? מנהלי אתרים רושמים לרוב הפניה מחדש (הפניה מחדש) מגרסת שולחן העבודה לגרסה לנייד, אך במקביל, אם דף זה נמצא בניידהגרסה לא קיימת, המשתמש יקבל שגיאה. כאן מתעוררים קשיים עם מנועי החיפוש, שמתקשים לדרג 2 משאבים זהים, והדבר משפיע ישירות על הקידום.
- הגרסה הניידת של האתר ממחשב, אם המשתמש יבקר בה בטעות, תיראה מגוחכת, מה שעלול להשפיע גם על התנועה.
- גרסא זו היא לרוב מצומצמת מאוד, שולחנית, כך שהמשתמש יקבל פונקציונליות מוגבלת מאוד. אבל במקביל, אם משהו חסר, המבקר יכול לעבור לגרסה המלאה של הדף.
באופן כללי, אתר מובייל נפרד מצדיק את עצמו והוא הדרך הנפוצה ביותר להתאים משאב למכשירים ניידים. הוא פופולרי בקרב חנויות מקוונות גדולות כמו אמזון.
דרך שלישית - עיצוב RESS
מנוע החיפוש של Google תומך באופן פעיל בכיוון זה של עיצוב נייד. זוהי השיטה המורכבת, היקרה, אך היעילה ביותר להתאים את האתר לטלפון או טאבלט. זה נקרא RESS. זה מכוון משאב לאפליקציה לנייד שניתן להוריד עבור כל מכשיר בנפרד. עבור אנדרואיד - עם GooglePlay, ועבור Apple - עם iTunes.
אפליקציות כאלה הן מהירות, חינמיות, נוחות, בעלות יכולת להכיל סוגים שונים של מידע, בעוד שזיכרון הטלפון ותעבורת האינטרנט לא נאכלים כמו בעת ביקור באתר דרך דפדפן. קל לגשת אליהם, שכן הקישור תמיד יהיה על המסך בהישג יד, ואין צורך להזין שם מורכב בשורת הכתובת של הדפדפן.
יש, כמובן, כאן והחסרונות שלו, כגון מורכבות בפיתוח, עלות העבודה הגבוהה של מספר רב של מתכנתים, הצורך לבצע מספר אפשרויות פריסה. לפעמים המכשיר הנייד אינו מזוהה על ידי האפליקציה. יש צורך בתמיכה טכנית קבועה, תיקון ליקויים. עם זאת, אפשרות זו נחשבת לטובה מבין השלוש המוצעות בשל פעולתה היצרנית והבלתי פוסקת.
הדרך הזולה ביותר ליצור אתר לנייד
כל השיטות הנ ל כוללות, אמנם לא תמיד ארוך וקשה, אך עדיין עבודה בתשלום של מנהל אתרים. אם אינכם רואים צורך דחוף בפיתוח כזה, גרסה סלולרית פשוטה וחינמית של האתר תתאים לכם. מהי הדרך הקלה ביותר להכין אותו?
הורד תבניות מיוחדות (תוספים) לעיצוב רספונסיבי. לדוגמה, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile ואחרים. הם יעזרו להציג את האתר בצורה נכונה יותר בטלפון, תוך כדי שתקבלו כמה טיפים מה כדאי לתקן כדי להתאים טוב יותר את העמוד לגרסת המובייל.
כמובן, שיטה זו בקושי מתאימה למשאבים רציניים. במקום זאת, התכונה החינמית הזו מיועדת לאתרים קטנים ופשוטים, בלוגים, עדכוני חדשות. אל תשכח שמנוע החיפוש של גוגל, כמו גם Yandex, מציב היום דרישות רציניות לגרסאות ניידות, כך שיש סיכוי עצום להוריד את המיקומים שלך בשיטה זו.
בשיטה זו, ככל הנראה, מודעות וחלונות קופצים ינותקובאנרים, אבל העמוד ייטען במהירות וללא "פיגורים".
עקרונות ליצירת גרסאות לנייד
לא משנה אם הגרסה הניידת של האתר נוצרה בחינם או בעזרת צוות מנהלי אתרים, היא נעשתה במערכת RESS או באמצעות תבנית אדפטיבית. והכי חשוב, לצורך פעולתו היעילה, הוא נדרש להקפיד על מספר עקרונות חשובים ביותר. אז מה צריכה להיות הגרסה הניידת של האתר? איך להפוך אותו ליצרני, יעיל ופרודוקטיבי?
הסר כל מיותר
מינימליזם הוא מה שמפתח הגרסה למובייל של האתר צריך לשאוף אליו. תארו לעצמכם כמה קשה לתפוס מידע גדוש בצבעים, כפתורים, באנרים, ושאותו עליכם לגלול ללא סוף בחיפוש אחר החומר המתאים. עיצוב נייד צריך להיות פשוט ונקי. בחרו 2-3 צבעים לחלוקת החלל (לדוגמה, ממותג). עדיף אם אחד מהם לבן. חלקו את החלל של מסך קטן לאזורים מובנים וקריאים. מפתחות וירטואליים צריכים להיות גלויים כדי שהמשתמש ידע בבירור היכן ללחוץ ויראה - הנה המוצר, הנה הטופס למילוי הנתונים, הנה המידע על משלוח ותשלום.
כל האפשרויות הנוספות שיהיו שימושיות בגרסת שולחן העבודה ויקלו על המשתמש יביאו לכאן רק קשיים. השאר רק את המרכיבים החשובים ביותר. אנימציה, באנרים פרסומיים, מולטימדיה, ככל הנראה, רק יאטו את עבודת האתר או האפליקציה ויסיחו את הדעתmain.
Alignment
נושא היישור הוא לא פחות אקוטי, כי אם נעשה בצורה לא נכונה, המשתמש יקבל רק את הסיומות של מילים חשובות. יישור מיושר לשמאל ואנכי מקובל בדרך כלל. דמיינו את עצמכם גוללים בפיד החדשות בטלפון שלכם. אתה עושה את זה מלמעלה למטה, לא משמאל או ימין.
Unification
כאשר אין אפשרות לשרשרת ארוכה של מעברים, נסו לשלב מספר שלבים לאחד. לדוגמה, האתר דורש הזנת נתונים במספר שלבים - שם ולאחר מכן כתובת, כאשר בכל תא בודד יש בית נפרד, רחוב, דירה וכו'. כדי לא להכריח את המשתמש לנסות לפגוע בתאים קטנים רבים., בקשו ממנו למלא רק 2 - שם וכתובת.
וניתוק
לפעמים, להיפך, נדרש להפריד יותר מדי מידע. לדוגמה, בתפריט הנפתח יש לך רשימה של יותר מ-80 ערים שבהן מתבצעת משלוח. קבץ אותם לפי אזור כך שהמשתמש לא יצטרך לגלול ברשימה הענקית הזו. כשהוא ירחף מעל המרכז האזורי או האזור, רשימה נוספת של ערים תיפול.
Listings
אגב, לגבי הרשימות. יש שניים מהם - קבועים בסדר אלפביתי או אחר ועם החלפה. הבחירה שלהם תלויה במה שיוצג.
קבוע שימושי אם המשתמש יודע בדיוק מה הוא מחפש. לדוגמה, עיר, מספר או תאריך. האפשרות השנייה מתאימה לשמות מורכבים ארוכים או למקרים שבהם יש הרבה וריאציות של אחד ואחדאותו שם, וכל רשימה נפתחת מקרבת את המשתמש צעד אחד אל המטרה. אפשרות ההחלפה האוטומטית משמשת לעתים קרובות יותר כאשר מבקר זקוק לעזרה. לדוגמה, אתר סריגה מציע לקנות מסרגות. המשתמש מזין את שאילתת החיפוש "מחטים לסריגה ממתכת", ובהסבר הכלי הוא רואה "מחטים 5 מ"מ", "מחטים 4.5 מ"מ" וכו'.
מילוי אוטומטי
פריט זה רלוונטי במיוחד לאתרים שמוכרים משהו באינטרנט, ואתה צריך למלא טפסים סטנדרטיים לתשלום, משלוח וכו'. אם אדם מבצע רכישה מטלפון, סביר להניח שאין לו זמן כדי להגיע למחשב, מה שאומר שתהליך הרכישה צריך להתבצע כמה שיותר מהיר ונוח.
לשם כך, הטפסים עשויים להכיל נתונים שכבר מלאו, אתה יכול לפנות לתשובות הפופולריות ביותר. לדוגמה, הכנס את התאריך של היום, אמצעי תשלום במזומן, עיר אם אתה עובד באותו אזור. ניתן לשנות אותם, אבל אם תגיע למטרה, הזמן של המשתמש יישמר.
הכל נקרא, הכל נצפה
כאשר מעצבים את הגרסה הניידת של האתר, זכרו שהטלפונים של כולם שונים, וכך גם הראייה שלהם. אולי האתר שלך יוצג ממסך קטן, אז הגופנים צריכים להיות פשוטים וקראים, הכפתורים צריכים להיות גדולים מספיק כדי שניתן יהיה ללחוץ עליהם מבלי שיעברו לעמוד אחר, והתמונות צריכות להיפתח בנפרד, גדולות, במיוחד כאשר זה מגיע לאינטרנט. חנות.
כמה סטטיסטיקות
אם מדברים על התאמת האתר למכשירים ניידים, אי אפשר שלא לפנות לסטטיסטיקה כדי להבין עד כמה התהליך הזה חשוב עבורקידום מקוון.
המספרים הם כדלקמן. כיום, 87% מהאוכלוסייה משתמשים בגאדג'טים, ככל הנראה, מלבד הילדים הקטנים ביותר וכמה קשישים. כלכלנים צופים שהמסחר במובייל יגדל פי 100 במהלך 5 השנים הבאות. יחד עם זאת, רק 21% מהאתרים מותאמים לעבודה עם מכשירים ניידים. המשמעות היא שרק חלק חמישי קטן מתעבורת האינטרנט ושוק המסחר האלקטרוני תפוס.
חשבו על המספרים האלה. האם זה הגיוני להתאים את המשאב שלך? כמובן שכן. יתר על כן, בעוד שיש כל כך הרבה מקום בשוק הזה, אתה יכול לגזור בו פלח משלך.
היכן אתה צריך גרסה לנייד
השימוש בגרסה הניידת הגיוני עבור כל פלטפורמה שמטרתה לקבל דירוג גבוה. אחרי הכל, זו השפעה ישירה על המשתמש, יצירת תנאים נוחים עבורו להישאר באתר שלך.
לא יכול להתקיים בלי גרסה לנייד:
- פורטלים של חדשות, כי רובם נצפים מהטלפון בדרך לעבודה או לבית הספר;
- רשתות חברתיות - מאותה סיבה, בנוסף יש גורם תקשורת מקוון, מה שאומר שצריך ליצור צ'אט נוח ומובן בשביל זה;
- הפניה, אתרי ניווט וכו', לאן אנשים הולכים כשהם מחפשים משהו;
- חנויות מקוונות - הזדמנות למשוך לקוחות שלא מבזבזים זמן בקניות, אלא קונים הכל דרך האינטרנט הנייד.
במקום מסקנה
היום, טכנולוגיות ניידות נמצאות ב-צמיחה ופיתוח פעילים, לכן, מתוך שאיפה להובלה בשוק, כל חברה חייבת להבטיח שהמשאב האינטרנטי שלה עומד בדרישות. בשל הדרישות ההולכות וגדלות של המשתמש, יש לשדרג כל הזמן את האתרים ולהתאים אותם למכשירים שונים. ברור שאם לאדם לא נוח להיות על משאב מסוים, הוא לא יכול לקבל שם מידע על מוצר או מחיר, לבצע הזמנה, לברר לגבי משלוח, אז הוא ימצא את האתר שבו כל זה יתאפשר. לכן, על מנת לזכות בתחרות, חשוב שיהיה משאב גמיש, נוח, פונקציונלי ומעניין.
הגרסה הניידת של אתר Android או Ios תעזור לעשות זאת. לשם כך יש לבחור באחת משיטות העיצוב מחדש הנ ל - תבנית אדפטיבית, יצירת אתר חדש על תת-דומיין והפניה אליו, שימוש בתבניות חינמיות, או יצירת אפליקציה סלולרית שתקל על כניסת המשתמש ולהיות בדף.
גישה זו לא רק תעזור לשמור על נאמנות הלקוחות הקיימים, אלא גם תספק הזדמנות למשוך מבקרים חדשים.
