במאמר זה ננסה להגדיר את עקרונות המפתח כשאנו באים לתכנן ולפתח אתר ריספונסיבי. אין זה משנה אם אתם רוצים להעביר אתר קיים עם תכנון קיים אותו אתם רוצים להסב או שאתם רוצים לבנות אתר מאפס.
תיכנון ריספונסיבי אינו רק מובייל
אם נהיה הוגנים, הסיבה לשימוש בתיכנון ריספונסיבי יש לה קשר רב עם מכסירים ניידים. אבל תיכנון רוספונסיבי אינו רק דן בניידות (או במכשירים ניידים). תיכנון ריספונסיבי מטפל בהצגה של אותם תכנים בכל אמצעי. אסטרטיגת הצגת התכנים שלכם לא צריכה להתייחס כיצד מישהוא צופה באתר שלכם. תכנון ריספונסיבי דן בחווית המשתמש הטובה ביותר ללא תלות במכשיר בו המבקר שלכם משתמש.
צריך גם ליזכור שתכנון ריספונסיבי אינו יצירת גירסה חדשה של האתר שלכם במכשירים שונים. עם השינויים הגדולים בנוף המכשירים הניידים זה היה הופך למשהוא שהוא בילתי ניתן להשגה.
תיכנון מגיב (ריספונסיב) לעומת תיכנון מסתגל
יתכן ושמעתם את המושג תיכנון מסתגל בעבר והוא נמצא בשימוש לסרוגין עם תיכנון מגיב. אולם הם אינם אותו דבר. תיכנון מסתגל הוא העיקרון שבו ההגדרות שלכם מפורקות לחקלים בחתך של המכשירים הספציפיים בהם יוצג האתר שלכם על ידי שימוש בשאילתות מדיה ב-CSS. לדוגמא, בהתמקדות במוצרי Apple, אתם יכולים להתמקד ברזולצית המסך של Imacת iPad או מכשיר iPhone כאשר תצרו את התיכנון שלכם.
היה בפעולה זאת היגיון כאשר כמות המכשירים ואפשרויות הרזולוציה היו מועטות. כעת יש לנו טאבלטים במגוון רחב של גדלים ומכשירי טלפון חכמים במיגוון רחב של גדלי מסך. יש לנו גם מחשבים ניידים קטנים ומחשבים עם מסכים גדולים. יש כל כך הרבה סוגים של גדלי מסך כך שזה הופך את המשימה של תיכנון מותאם לכל אחת מאפשרויות אלו מסובך מאד. זה המקום שתיכנון ריספונסיבי נכנס למשחק.
עקרונות המפתח בתיכנון אתר ריספונסיבי
עכשיו שאנחנו יודעים מה עיצוב ריספונסיהבי הוא לא, בואו נעבור על כמה מהעקרונות המרכזיים של התכנון הריספונסיבי. ההבדל העיקרי שמפריד בין עיצוב רינספונסיבי מגישות תכנון אחרות הוא ההתמקדות בעיצוב אתר האינטרנט שלכם סביב נקודות מעבר בעיצוב ולא מנסה לכוון חמיגוון רחב של מכשירים. לדוגמא, האתר שלך עשוי להיראות נהדר על האייפד במצב אופקי (landscape) אבל העיצוב נראה מוזר במצב אנכי (portrait). בעיצוב ריספונסיבי, במקום לשנות את העיצוב של המסך הדיוקן (אנכי) הקטן על האייפד אנו עשויים לגלות כי העיצוב מתחיל להיראות רע על דפדפן ב-900px הרחב כך שנבצע שינוי העיצוב בשלב זה. אם אתם בונים אתר ריספונסיבי אתם צרכים לדבוק בעקרונות אלו:
- בנוי על רשת זורמת (fluid grid) - אתר כזה יהיה מבוסס על אחוזים במקום מידות (פיקסלים).
- גדלי תמונות & וידאו מותאמים לרזולוציה של המסך שבהם הם ניצפים.
- הגדרת שאילתות מדיה ונקודות "שבירה" ב-CSS משמשות כדי לשנות את הפריסה בנקודות עצירה שונות בעיצוב.
- הסרת תוכן שאינו חיוני - במסכים קטנים תוכן שאינו חינוי יוסתר בכדי להקטין את העומס על המסך ולשפר את חוויית המשתמש . היזהרו כאשר מחליטים מה להסיר מיכוון שתוכן הליבה עדיין צריך להיות נגיש גם על גבי מסכים קטנים.
- ניווט מגיב - אמנם לא כל אתר אינטרנט מחייב שימוש בטכניקות ניווט התואמות מסכים קטנים, אלה בעלי שימוש נרחב בתפריטים ירוויח ומשימוש בטכניקות שונות המיועדות לרזולוציות מסך קטנות יותר.
אלה הם רק הנקודות המרכזיות המרכיבות את אתרי האינטרנט הריספונסיביים. אני מקווה שהם ייתנו לכם הבנה טובה יותר של מה שנדרש כדי ליצור פריסה ריספונסיבית של האתר שלכם.