מה זה עיצוב רספונסיבי?

לפני כמה ימים התחלתי לקבל כי אתר בית הספר whiz לא עומד בתקנים ש google קבעה לנגישות אתרים למכשירים ניידים.
התחלתי לקבל המון אימיילים מ google מתוך קונסול webmaster tools שהאתר שלנו לא עומד בתקנים הללו. למי שקיבל גם כן הודעות כאלה הם סוג הודעה: [WNC-451500] .
כמובן ש google לא רק שולחת הודעה אלא גם מוסיפה כי:
"מערכות Google בדקו 33 דפים מהאתר שלך ונמצא ש-100% מהם מכילים שגיאות שימושיות קריטיות עבור ניידים. השגיאות ב-33 הדפים האלה משפיעות באופן חמור על חוויית המשתמש של מי שניגש לאתר שלך דרך מכשירים ניידים. חיפוש Google לא יזהה את הדפים האלה כידידותיים לנייד, ולכן הדפים יוצגו וידורגו בהתאם עבור משתמשי סמארטפונים"
כלומר, במילים אחרות ציון האיכות של האתר למכשירים ניידים 100% דפים ירד מאד .

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

כבר מעל 3 שנים בית ספר whiz מעבירה קורסים לחברות על שיטת העיצוב הרספונסיבי כמו"כ html5 ו css3 .

מה שהיינו צריכים לעשות זה להוסיף mobile detect  כדי להבין מאיזה מכשיר ומאיזה דפדפן גולשים ניגשים לאתר, לאחר מכן להגדיר באמצעות css3 ו medis queries את העיצוב שיותאם לרוחבו של המסך.

הנה האתר שלנו בניידים

ישנם המון ספריות ו frameworks שנותנות מענה מעולה לעיצוב רספונסיבי לדוגמת bootstrap עליו אכתוב בהמשך, אבל הכי מעניין שב whiz לא השתמשנו בו. ;-)

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

אז תהנו ונשתמע.