פיתוח אתר רספונסיבי – עקרונות מנחים

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

הקדמה

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

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

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

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

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

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

מחשבה, עיצוב וכוונה

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

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

MOBILE FIRST, או – קודם מובייל!

במשך שנים ארוכות, הקו שהוביל את הWORKFLOW הן של הפיתוח והן של העיצוב בתחום הWEB היה התמקדות בדסקטופ, והסתכלות על רזולוציות מכשירים אחרות (טלפונים, טאבלטים) כחשיבות משנית, אם בכלל.
בשנים האחרונות, עם העלייה המטאורית באחוזי השימוש במכשירים שאינם מחשבים לצורך גלישה באינטרנט, חלה תפנית דרסטית בעלילה – התפתחותה של מתודולגיית הMOBILE FIRST.
הקונספט מאוד פשוט – הכל בדיוק כמו קודם, רק הפוך. תחילה חושבים על הרזולוצייה הקטנה ביותר, הפלאפון החכם, ומשם מתקדמים. לקריאה מורחבת על יתרונות וחסרונות השיטה – המאמר המצויין של Code My Views.
מה שכן, שימוש במתודולגייה הזו גם בשלב העיצוב(בין אם מתבצע על ידיכם ובין אם לאו) וגם בשלב הפיתוח תוכל לקדם אתכם בצעדי ביגפוט אל עבר האתר הרספונסיבי שאתם חולמים עליו.

סדר חשיבות והתמקדות בתוכן

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

מבנה ופריסת האתר והתוכן

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

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

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

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

אז איך עושים את זה?

Meta Viewport

אחת התגיות החשובות ביותר לבסיס של בניית אתר רספונסיבי!
מהו בעצם הViewport? זהו האיזור הגלוי למשתמש באתר.
כברירת המחדל, הדפדפנים במכשירים שאינם מחשב עושים scale down ל- viewport על מנת להצליח להכניס את כל התוכן לעמוד.
זוהי ברירת מחדל ישנה, שעדיין נמצאת איתנו מהתקופה בה לא התאימו אתרים למכשירים השונים, וזה היה פתרון חלקי (וגרוע!) לבעיה.
איך אנחנו מתגברים על השטות הזו? מוסיפים את הקוד הבא לhead שלנו בכלל העמודים באתר:

מיקום אלמנטים

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

גודל אלמנטים

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

ואם כבר הזכרתי ברייקפויינטס..זה זמן מוצלח לעבור לעקרון הבא באתר רספונסיבי:

Media Queries

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

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

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

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

תמונות רספונסיביות

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

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

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

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

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

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

תמונות רקע

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

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

חיתוך נכון

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

תמונות רספונסיביות ותגית picture

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

ועכשיו לכיף האמיתי –
תגית picture – פתרון הקסם לתמונות רספונסיביות.
סתם, זה לא באמת קסם, אולי יותר בכיוון של כישוף.

תגית picture תאפשר לנו, בדומה לתגיות audio ו- video, לטעון תמונה שונה לגמרי בהתאם להגבלות מדיה שונות, שהן בעצם מדיה קוואריס!
גם אם תיצרו עשר תמונות שונות לעשר מדיה קוואריס שונות, רק התמונה המתאימה למדיה קווארי הנוכחית תיטען!
שווה, לא?

ואיך זה עובד?
– קודם כל יוצרים תגית picture, ומוסיפים בתוכה תגית source אבל כל מדיה קווארי שונים שאנחנו רוצים.
– אחר כך מוסיפים את תכונת הmedia יחד עם התנאי שאנחנו מעוניינים להכיל בו את התמונה הרלוונטית, ומוסיפים את תכונת srcset שתכיל את הכתובת לתמונה.
– לבסוף מוסיפים תגית img בתוך תגית הpicture כברירת מחדל.
מסובך? לא להלחץ, יש דוגמא שתסביר הכל:

תמונות רטינה

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

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

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

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

כמובן שיש פתרונות אחרים אלגנטיים יותר או פחות, כמו שימוש בקבצי SVG, שימוש בפונט אייקונים כמו Font Awesome במקום בתמונות, וכו'.
הזמן קצר והמלאכה מרובה ולכן על פתרונות שונים – ארחיב בהזדמנויות אחרות 🙂

טיפוגרפיה

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

אה, ו- font-size: 14px זה כבר לא תמיד לגיטימי! תנו לאנשים לקרוא בכיף, לא להתאמץ 🙂

בדיקות רבותיי, בדיקות!

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

ועכשיו, הגיע הזמן לקצת הפתעות:

כלים שיעזרו בפיתוח אתר רספונסיבי

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

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

Google Resizer – הכלי האידאלי להצגה מרובת מסכים של האתר שלכם ולבדיקת הרספונסיביות שלו, מעבר למצב הרספונסיבי בInspect Element.

ולסיכום

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

ועכשיו אני מחכה שתשפו אותי במחשבות וברעיונות בכל הנוגע לאתרים רספונסיביים. אני גם מזכיר שאם אתם רוצים את הMedia Queries שלי, אתם צריכים להראות לי את זה! 🙂

מקורות

Canva – על טרנדים בעולם העיצוב והפיתוח הרספונסיבי, וגם על אתרים טובים לדוגמאות.
DZone – מדריך כללי ופשוט להפיכת אתר לרספונסיבי.
Shay Howe – מדריך מקיף ומעולה בנושא רספונסיביות.

Summary

Article Name

פיתוח אתר רספונסיבי - עקרונות מנחים

Description

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

Author

שלומי זק

Publisher Name

MasterScripter

Publisher Logo