בדיקת רספונסיביות ויצירת מוקאפים

הכלי החדש שלנו לבדיקת רספונסיביות ויצירת מוקאפים

...

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

בעיצוב ווב (web design) רספונסיביות (responsiveness) היא היכולת של עיצוב (דף, אתר, עיצוב וכו') להתאים את עצמו לגדלי תצוגה שונים. למשל, לתצוגת מובייל, לשם צפייה באתר מהפלאפון, או לתצוגה של מסך רחב או מסך ברזולוציה נמוכה (כמו מחשב נייד).
רספונסיביות היא מאוד חשובה בבניית אתרים בגלל 3 סיבות מרכזיות 

מה המשמעות של רספונסיביות בקידום אתרים

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

רספונסיביות וחווית משתמש (UI-UX)

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

איך רספונסיביות משפרת את היעילות בתחזוקת האתר

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

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

מה זה מוקאפ?

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

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

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