בניית אתרים רספונסיביים – מה זה אומר?

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

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

אתרים שנראים טוב על כל המכשירים!

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

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

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

מרכיב אינטגראלי ומשמעותי בבנייה ועיצוב אתרים

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

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

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

איך אתר רספונסיבי עובד בפועל?

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

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

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

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

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

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

מדוע בניית אתרים רספונסיביים היא כה חשובה ומשמעותית?

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

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

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