מגוון האפשרויות של אתר רספונסיב

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

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

עיצוב עבור רזולוציות ספציפיות או אוריינטציה שונה

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

@media only screen and(max-width:480px)

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

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

img (max-width:100%; height:auto;)

באופן דומה ניתן לעצב את האתר עבור אוריינטציה שונה עבור המשתמשים שמעדיפים לגלוש כאשר המכשיר שלהם נוטה בתשעים מעלות בצורה אופקית (הצורה האנכית הרגילה היא portrait):

@media only screen and (Orientation:landscape)

שימוש ב - jQuery לסגירה ופתיחה של אלמנטים בדף וטריקים נוספים

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

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

הסתמכות על רזולוציה היא לא תמיד הפיתרון הטוב ביותר

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

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

כך זה נראה בהגדרות ה - CSS, יש לשים לב שאנחנו לא משתמשים כאן בשום Media Query מכיוון שכל הגדלים הם יחסיים :

h1 (width:70.85%; margin-left:14.575%;)

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

סיכום

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

נשמח להציע לך פתרון מותאם אישית קבל הצעת מחיר