בניית אתרים רספונסיביים – לא חשבתם לוותר על חוויית הגלישה בסלולרי, נכון?

מה זה אתר רספונסיבי, ואיך בכלל הגעתם למאמר הזה?

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

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

למה בכלל צריך אתר רספונסיבי?

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

רספונסיביות זו פשוט דרך מתוחכמת לומר: אל תגרום לגולשים שלך להתאמץ יותר מדי – הם פשוט יעברו הלאה.

1. כי אנשים רוצים לגלוש בסלולר, ומהר

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

2. כי גוגל ממש אובססיבי לגבי זה

אתם יודעים מה גוגל הכי אוהב? גולשים מרוצים. ומה גוגל הכי שונא? אתרים שלא מותאמים לסלולרי, כי מבחינתם, זה אומר שהם מפנים אנשים לחוויה גרועה. אז הם מענישים באכזריות אתרים שמתחזים לאתרי שנות ה-90 – אי שם בעמוד החיפוש ה-20. אם אתם רוצים לשרוד בעולם הדיגיטלי, כדאי שתתחילו להיות רציניים לגבי אתר רספונסיבי – לא בשבילכם, בשביל גוגל.

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

3. כי אתם באמת רוצים שהלקוחות יברחו?

תארו לכם לקוח שמגיע לאתר שלכם, והממשק זוועתי – התמונה לא נטענת, הכפתור מתחבא, הטקסט נמרח, והוא מרגיש כאילו חזר במנהרת הזמן לאינטרנט של שנות ה-2000. מה הוא עושה? נכון, הוא פשוט יוצא משם ולא מסתכל אחורה. אתר רספונסיבי אומר שהאתר שלכם יודע לשחק אותה בכל סיטואציה, בין אם זה במסך 5 אינץ’ או במסך של 30 אינץ’. האתר מותאם, נוח, וגורם לגולש להישאר – אולי אפילו לרכוש משהו, לא עלינו.

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

4. כי אין לכם תירוץ

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

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

5. כי אתם רוצים להיות מקצועיים, לא?

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

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

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

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

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

1. הכינו אתר רספונסיבי אחד לכולם – האופציה החסכונית

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

• איך עושים את זה? טוב, תתחילו בלקרוא כמה מדריכים ביוטיוב. תמצאו המון וידיאואים של 40 דקות שמבטיחים תוצאה מעולה "בשלושה שלבים פשוטים." האמת? לא יזיק ללמוד קצת HTML ו-CSS לפני שמתחילים לשחק עם זה.
• ומה החסרונות? אה, שמחה ששאלתם! בואו נבהיר מראש, האתר כנראה לא ייראה מדהים בכל המכשירים. אפשר שבטאבלט הוא ייראה קצת כמו ניסיון אמנותי, ובטלוויזיות החכמות? אלוהים ישמור. אבל בקטנה – לפחות ב-80% מהמקרים הוא יעבוד.

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

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

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

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

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

אז מה המסקנה?

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

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

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

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

1. פריסה ידידותית – כי לכל סמארטפון מגיעה אהבה

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

2. תמונות נראות מעולה, עד שהן שוקלות כמו 3 סרטים

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

3. פונט בגודל שמתאים לבני אדם, לא לנמלים

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

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

4. אל תשכחו את טעינת האתר – כי זמן שווה כסף (ואף אחד לא משלם לכם)

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

5. תבדקו את האתר מכל זווית אפשרית, אפילו במקרר אם צריך

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

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

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

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

7. נסו לא להגזים עם הפופ-אפים – זה לא יצליח להקסים אף אחד

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

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

שאלות תמימות עם תשובות מתחכמות כמיטב המסורת

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

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

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

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

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

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

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